/* Animation styles extracted for debugging. */
.fade-in {
  opacity: 1;
  transform: none;
}

.fade-in.is-animated {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.8s ease forwards;
}

.fade-in.delay-1 {
  animation-delay: 0.15s;
}

.fade-in.delay-2 {
  animation-delay: 0.3s;
}

.fade-in.delay-3 {
  animation-delay: 0.45s;
}

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

.float-slow {
  animation: floatSlow 6s ease-in-out infinite;
}

.glow-pulse::after {
  content: "";
  position: absolute;
  inset: -35% auto auto -20%;
  width: 70%;
  height: 140%;
  background: radial-gradient(circle, var(--hero-glow), transparent 70%);
  opacity: 0.35;
  transform: scale(1);
  pointer-events: none;
  z-index: 1;
  animation: glowPulse 5.5s ease-in-out infinite;
}

.hero-water-line-a {
  animation: windRippleA 11s ease-in-out infinite;
}

.hero-water-line-b {
  animation: windRippleB 14s ease-in-out infinite;
}

.hero-water-line-c {
  animation: windRippleC 17s ease-in-out infinite;
}

.feedback-hero-wave--1 {
  animation: feedbackSwellA 8.2s ease-in-out infinite;
}

.feedback-hero-wave--2 {
  animation: feedbackSwellB 11.2s ease-in-out infinite;
}

.feedback-hero-wave--3 {
  animation: feedbackSwellC 14.8s ease-in-out infinite;
}

.feedback-hero-wave--3::before {
  animation: feedbackFoamLine 18s ease-in-out infinite;
}

.feedback-hero-wave--3::after {
  animation: feedbackFoamDrift 18s ease-in-out infinite;
}

.rain-drop {
  animation: rainFall 1.8s ease-in-out infinite;
}

.rain-drop.delay-1 {
  animation-delay: 0.2s;
}

.rain-drop.delay-2 {
  animation-delay: 0.4s;
}

.soil-wave {
  animation: soilPulse 4s ease-in-out infinite;
}

.flood-level {
  animation: floodRise 3.2s ease-in-out infinite;
  transform-origin: center bottom;
}


@keyframes rainFall {
  0% {
    transform: translateY(-12px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    transform: translateY(50px);
    opacity: 1;
  }
  100% {
    transform: translateY(60px);
    opacity: 0;
  }
}

@keyframes soilPulse {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

@keyframes floodRise {
  0%,
  100% {
    transform: scaleY(0.7);
    opacity: 0.7;
  }
  50% {
    transform: scaleY(1);
    opacity: 0.95;
  }
}

@keyframes floatSlow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.08);
  }
}

@keyframes windRippleA {
  0%,
  100% {
    transform: translate3d(-1.5%, 0, 0) scaleX(1);
  }
  50% {
    transform: translate3d(1.5%, -2px, 0) scaleX(1.015);
  }
}

@keyframes windRippleB {
  0%,
  100% {
    transform: translate3d(1.2%, 0, 0) scaleX(0.995);
  }
  50% {
    transform: translate3d(-1.2%, 1px, 0) scaleX(1.012);
  }
}

@keyframes windRippleC {
  0%,
  100% {
    transform: translate3d(-0.8%, 0, 0) scaleX(1);
  }
  50% {
    transform: translate3d(0.8%, 2px, 0) scaleX(1.008);
  }
}

@keyframes siteRefreshWaveA {
  0%,
  100% {
    transform: translate3d(-1.2%, 0, 0) scaleX(1.02);
  }
  50% {
    transform: translate3d(1.2%, -10px, 0) scaleX(1.05);
  }
}

@keyframes feedbackSwellA {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scaleX(1) rotate(-0.18deg);
  }
  24% {
    transform: translate3d(1.4%, 4px, 0) scaleX(0.996) rotate(0.08deg);
  }
  46% {
    transform: translate3d(-2.8%, -11px, 0) scaleX(1.018) rotate(-0.12deg);
  }
  72% {
    transform: translate3d(1.6%, 2px, 0) scaleX(0.994) rotate(0.14deg);
  }
  90% {
    transform: translate3d(-0.8%, 6px, 0) scaleX(1.004) rotate(0.22deg);
  }
}

@keyframes feedbackSwellB {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scaleX(1) rotate(-0.12deg);
  }
  28% {
    transform: translate3d(1.1%, 3px, 0) scaleX(0.998) rotate(0.06deg);
  }
  52% {
    transform: translate3d(-2.2%, -8px, 0) scaleX(1.014) rotate(-0.08deg);
  }
  76% {
    transform: translate3d(1.2%, 1px, 0) scaleX(0.996) rotate(0.1deg);
  }
  92% {
    transform: translate3d(-0.6%, 4px, 0) scaleX(1.002) rotate(0.16deg);
  }
}

@keyframes feedbackSwellC {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scaleX(1) rotate(-0.08deg);
    opacity: 0.36;
  }
  30% {
    transform: translate3d(0.8%, 2px, 0) scaleX(0.998) rotate(0.04deg);
    opacity: 0.39;
  }
  56% {
    transform: translate3d(-1.6%, -6px, 0) scaleX(1.012) rotate(-0.06deg);
    opacity: 0.49;
  }
  84% {
    transform: translate3d(1.1%, 2px, 0) scaleX(0.996) rotate(0.1deg);
    opacity: 0.42;
  }
}

@keyframes feedbackFoamLine {
  0%,
  100% {
    opacity: 0.5;
    transform: translate3d(0, 0, 0) scaleX(1);
  }
  50% {
    opacity: 0.56;
    transform: translate3d(0.6%, -1px, 0) scaleX(1.008);
  }
}

@keyframes feedbackFoamDrift {
  0%,
  100% {
    opacity: 0.34;
    transform: translate3d(-0.3%, 0, 0);
  }
  50% {
    opacity: 0.34;
    transform: translate3d(0.5%, -1px, 0) scaleX(1.006);
  }
}

@keyframes glassRainHeavy {
  0% {
    transform: translate3d(0, -14vh, 0) scaleY(0.68);
    opacity: 0;
  }
  12% {
    opacity: 0.6;
  }
  45% {
    transform: translate3d(6px, 26vh, 0) scaleY(0.98);
    opacity: 0.42;
  }
  75% {
    transform: translate3d(-3px, 56vh, 0) scaleY(1.28);
    opacity: 0.24;
  }
  100% {
    transform: translate3d(2px, 86vh, 0) scaleY(1.42);
    opacity: 0;
  }
}

@keyframes glassRainMedium {
  0% {
    transform: translate3d(0, -16vh, 0) scaleY(0.74);
    opacity: 0;
  }
  12% {
    opacity: 0.42;
  }
  52% {
    transform: translate3d(-4px, 30vh, 0) scaleY(0.94);
    opacity: 0.3;
  }
  82% {
    transform: translate3d(3px, 58vh, 0) scaleY(1.16);
    opacity: 0.16;
  }
  100% {
    transform: translate3d(0, 88vh, 0) scaleY(1.28);
    opacity: 0;
  }
}

@keyframes glassRainLight {
  0% {
    transform: translate3d(0, -18vh, 0) scaleY(0.78);
    opacity: 0;
  }
  14% {
    opacity: 0.28;
  }
  58% {
    transform: translate3d(4px, 28vh, 0) scaleY(0.9);
    opacity: 0.2;
  }
  86% {
    transform: translate3d(-2px, 54vh, 0) scaleY(1.04);
    opacity: 0.1;
  }
  100% {
    transform: translate3d(0, 84vh, 0) scaleY(1.14);
    opacity: 0;
  }
}

@keyframes feedbackMinimalFlow {
  to {
    stroke-dashoffset: -120;
  }
}

@keyframes feedbackRainAlert {
  0% {
    transform: translateY(-6px);
    opacity: 0;
  }
  30% {
    opacity: 0.95;
  }
  100% {
    transform: translateY(22px);
    opacity: 0;
  }
}

@keyframes feedbackWarningPulse {
  0%,
  18%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
  26%,
  48% {
    opacity: 1;
    transform: scale(1.05);
  }
  62% {
    opacity: 0;
    transform: scale(1.02);
  }
}

@keyframes feedbackTealWaterGlow {
  0%,
  100% {
    opacity: 0.9;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(1px);
  }
}

@keyframes feedbackBubbleLift {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  50% {
    transform: translateY(-10px);
    opacity: 0.9;
  }
}

@keyframes feedbackClearBubbleLift {
  0%,
  12%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }
  22%,
  46% {
    opacity: 0.95;
    transform: translateY(-10px);
  }
  58% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes feedbackClearWaterBrown {
  0%,
  18% {
    opacity: 1;
  }
  52%,
  100% {
    opacity: 0;
  }
}

@keyframes feedbackClearWaterBlue {
  0%,
  18% {
    opacity: 0;
  }
  52%,
  100% {
    opacity: 1;
  }
}

@keyframes driveStreet {
  0%,
  12% {
    transform: translate(0px, 0px);
  }
  22%,
  30% {
    transform: translate(110px, 0px);
  }
  40%,
  52% {
    transform: translate(190px, 0px);
  }
  65%,
  75% {
    transform: translate(190px, 100px);
  }
  85%,
  92% {
    transform: translate(40px, 100px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes wheelSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes wateringStops {
  0%,
  20% {
    opacity: 0;
    transform: scaleX(0.85);
  }
  24%,
  30% {
    opacity: 0.55;
    transform: scaleX(1.15);
  }
  31%,
  46% {
    opacity: 0;
    transform: scaleX(0.85);
  }
  48%,
  54% {
    opacity: 0.55;
    transform: scaleX(1.15);
  }
  55%,
  68% {
    opacity: 0;
    transform: scaleX(0.85);
  }
  70%,
  76% {
    opacity: 0.55;
    transform: scaleX(1.15);
  }
  77%,
  100% {
    opacity: 0;
    transform: scaleX(0.85);
  }
}

@keyframes driveStreetModern {
  0%,
  10% {
    transform: translate(0px, 0px);
  }
  20%,
  30% {
    transform: translate(120px, 0px);
  }
  36%,
  46% {
    transform: translate(210px, 0px);
  }
  56%,
  68% {
    transform: translate(210px, 120px);
  }
  78%,
  88% {
    transform: translate(20px, 120px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes wateringStopsModern {
  0%,
  19% {
    opacity: 0;
    transform: scaleX(0.82);
  }
  22%,
  30% {
    opacity: 0.6;
    transform: scaleX(1.12);
  }
  31%,
  43% {
    opacity: 0;
    transform: scaleX(0.82);
  }
  46%,
  54% {
    opacity: 0.6;
    transform: scaleX(1.12);
  }
  55%,
  66% {
    opacity: 0;
    transform: scaleX(0.82);
  }
  69%,
  77% {
    opacity: 0.6;
    transform: scaleX(1.12);
  }
  78%,
  100% {
    opacity: 0;
    transform: scaleX(0.82);
  }
}