/* ============================================================
   Hero animated wave layers
   3 translucent SVG wave layers inside .hero, animated via GSAP.
   Sit behind hero content (z-index: 0), above dark-green bg.
   ============================================================ */

.hero-wave-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  pointer-events: none;
  z-index: 0;
}

/* --- Layer 1 (tallest, slowest, lightest) --- */
.hero-wave-layer-1 {
  height: 120px;
  opacity: 0.55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C150,100 350,0 600,60 C850,120 1050,20 1200,60 L1200,120 L0,120Z' fill='rgba(54,122,89,0.06)'/%3E%3C/svg%3E") repeat-x bottom / 1200px 120px;
}

/* --- Layer 2 (mid height, mid speed, most opaque) --- */
.hero-wave-layer-2 {
  height: 100px;
  opacity: 0.65;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C200,90 400,10 600,50 C800,90 1000,10 1200,50 L1200,100 L0,100Z' fill='rgba(54,122,89,0.12)'/%3E%3C/svg%3E") repeat-x bottom / 1200px 100px;
}

/* --- Layer 3 (shortest, fastest, medium opacity) --- */
.hero-wave-layer-3 {
  height: 80px;
  opacity: 0.5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C100,70 300,10 500,40 C700,70 900,10 1200,40 L1200,80 L0,80Z' fill='rgba(54,122,89,0.08)'/%3E%3C/svg%3E") repeat-x bottom / 1200px 80px;
}

/* --- Responsive: reduce heights on small screens --- */
@media (max-width: 768px) {
  .hero-wave-layer-1 { height: 70px; background-size: 900px 70px; }
  .hero-wave-layer-2 { height: 55px; background-size: 900px 55px; }
  .hero-wave-layer-3 { height: 45px; background-size: 900px 45px; }
}

/* --- Reduced motion: hide animated layers entirely --- */
@media (prefers-reduced-motion: reduce) {
  .hero-wave-layer {
    display: none;
  }
}