/* ===================================
   HERO ANIMATION STYLES
   ===================================
   Contains all hero background animations and effects
   Used across multiple pages for consistent visual experience
*/

.hero-bg {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f0f7ec 0%, #dceecc 100%);
  --hero-animation: heroBackgroundShift 12s ease-in-out infinite;
  --hero-counter-animation: heroBackgroundCounter 8s ease-in-out infinite
    reverse;
}

/* Mobile-first: disable animations by default */
@media screen and (max-width: 767px) {
  .hero-bg {
    --hero-animation: none;
    --hero-counter-animation: none;
  }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero-bg {
    --hero-animation: none !important;
    --hero-counter-animation: none !important;
  }

  .hero-bg::before,
  .hero-bg::after {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

.hero-bg::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(
      ellipse 80% 50% at 50% 120%,
      rgba(106, 153, 78, 0.6) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 60% 80% at 0% 50%,
      rgba(46, 83, 57, 0.45) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 60% 80% at 100% 50%,
      rgba(106, 153, 78, 0.5) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 25% 25%,
      rgba(106, 153, 78, 0.35) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 75% 75%,
      rgba(46, 83, 57, 0.3) 0%,
      transparent 35%
    ),
    radial-gradient(
      circle at 90% 10%,
      rgba(106, 153, 78, 0.28) 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(46, 83, 57, 0.25) 0%,
      transparent 25%
    ),
    radial-gradient(
      ellipse 120% 60% at 30% 80%,
      rgba(106, 153, 78, 0.4) 0%,
      transparent 45%
    ),
    radial-gradient(
      ellipse 90% 70% at 70% 20%,
      rgba(46, 83, 57, 0.32) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 60% 60%,
      rgba(106, 153, 78, 0.22) 0%,
      transparent 20%
    ),
    radial-gradient(
      circle at 40% 40%,
      rgba(46, 83, 57, 0.18) 0%,
      transparent 18%
    ),
    radial-gradient(
      ellipse 100% 80% at 80% 70%,
      rgba(106, 153, 78, 0.26) 0%,
      transparent 35%
    ),
    radial-gradient(
      ellipse 110% 90% at 20% 30%,
      rgba(46, 83, 57, 0.24) 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 85%,
      rgba(106, 153, 78, 0.2) 0%,
      transparent 22%
    ),
    radial-gradient(
      circle at 15% 15%,
      rgba(46, 83, 57, 0.16) 0%,
      transparent 15%
    ),
    radial-gradient(
      ellipse 130% 100% at 50% 50%,
      rgba(106, 153, 78, 0.14) 0%,
      transparent 50%
    );
  z-index: 0;
}

.hero-bg::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  background:
    radial-gradient(
      ellipse 70% 60% at 30% 80%,
      rgba(106, 153, 78, 0.3) 0%,
      transparent 40%
    ),
    radial-gradient(
      ellipse 80% 50% at 80% 20%,
      rgba(46, 83, 57, 0.25) 0%,
      transparent 35%
    ),
    radial-gradient(
      circle at 20% 30%,
      rgba(106, 153, 78, 0.2) 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(46, 83, 57, 0.18) 0%,
      transparent 25%
    ),
    radial-gradient(
      ellipse 90% 70% at 60% 40%,
      rgba(106, 153, 78, 0.15) 0%,
      transparent 35%
    );
  z-index: 1;
}

.hero-bg > * {
  position: relative;
  z-index: 2;
}

/* Animation only on desktop */
@media (min-width: 768px) {
  .hero-bg {
    --hero-animation: heroBackgroundShift 12s ease-in-out infinite;
    --hero-counter-animation: heroBackgroundCounter 8s ease-in-out infinite
      reverse;
  }

  .hero-bg::before {
    animation: var(--hero-animation);
  }

  .hero-bg::after {
    animation: var(--hero-counter-animation);
  }
}

@keyframes heroBackgroundShift {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    filter: blur(0px);
  }
  25% {
    transform: translate(-12%, 16%) rotate(3deg) scale(1.08);
    filter: blur(6px);
  }
  50% {
    transform: translate(16%, -12%) rotate(-2.4deg) scale(0.92);
    filter: blur(10px);
  }
  75% {
    transform: translate(-10%, -16%) rotate(3.6deg) scale(1.06);
    filter: blur(8px);
  }
}

@keyframes heroBackgroundCounter {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    filter: blur(2px);
  }
  33% {
    transform: translate(12%, -10%) rotate(-2.4deg) scale(1.06);
    filter: blur(0px);
  }
  66% {
    transform: translate(-16%, 12%) rotate(3deg) scale(0.94);
    filter: blur(12px);
  }
}

/* MOBILE OVERRIDE - Aggressive animation blocking */
@media screen and (max-width: 767px) {
  .hero-bg::before,
  .hero-bg::after {
    animation: none !important;
    animation-name: none !important;
    animation-duration: 0s !important;
    animation-iteration-count: 0 !important;
    animation-play-state: paused !important;
    transform: translate3d(0, 0, 0) !important;
    filter: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  /* Force static positioning and disable all transforms */
  .hero-bg {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  .hero-bg::before {
    animation: none !important;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg) !important;
    filter: none !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
  }

  .hero-bg::after {
    animation: none !important;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg) !important;
    filter: none !important;
    position: absolute !important;
    top: -30% !important;
    left: -30% !important;
    width: 160% !important;
    height: 160% !important;
  }
}

/* Additional mobile check for very small screens */
@media screen and (max-width: 480px) {
  .hero-bg::before,
  .hero-bg::after {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}