/* --- CUSTOM FONT LOADING --- */
@font-face {
  font-family: "Posey Regular";
  src: url("../fonts/PoseyRegular.eot");
  src: url("../fonts/PoseyRegular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/PoseyRegular.woff2") format("woff2"),
    url("../fonts/PoseyRegular.woff") format("woff"),
    url("../fonts/PoseyRegular.ttf") format("truetype"),
    url("../fonts/PoseyRegular.svg#PoseyRegular") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* --- FONTS --- */
.brand-font {
  font-family: 'Posey Regular', sans-serif;
}

.text-outline {
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

/* --- ANIMATIONS --- */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

/* --- LIQUID GRADIENT BACKGROUND --- */
@keyframes liquidMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.liquid-gradient-anim {
  background: linear-gradient(-45deg, #0f172a, #1e293b, #064e3b, #065f46);
  background-size: 400% 400%;
  animation: liquidMove 15s ease infinite;
}

/* --- CARD HOVER EFFECTS --- */
.card-transition {
  transition: all 0.3s ease-in-out;
}

.hover-pulse-purple:hover {
  box-shadow: 0 0 20px rgba(147, 51, 234, 0.5);
}

.hover-pulse-red:hover {
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.hover-pulse-blue:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

/* --- VIDEO CONTAINER --- */
.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

@media (min-aspect-ratio: 16/9) {
  .video-iframe {
    height: 56.25vw;
  }
}

@media (max-aspect-ratio: 16/9) {
  .video-iframe {
    width: 177.78vh;
  }
}

/* --- UTILITIES --- */
.hidden-section {
  display: none;
}

.snap-section {
  scroll-snap-align: start;
}

.text-shadow-md {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* --- PRODUCTS BACKGROUND --- */
#products {
  position: relative;
  overflow: hidden;
  background-color: #f2f2f2;
}

h2{
  color: black;
}
h6{
  color: black;
}