/* ============================================
   HERO LAKE WAVE EFFECT
   Subtle, organic background animation mimicking
   gentle wind rippling across a lake surface.
   
   Design: Peaceful, magical, nature-inspired
   Target: 60fps, GPU-accelerated
============================================ */

/* ============================================
   WAVE CONTAINER
   Positioned behind all hero content
============================================ */

.lake-wave-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  /* Behind content but above base gradient */
}

/* ============================================
   WAVE LAYERS
   3 overlapping layers with different speeds
   and directions for organic movement
============================================ */

.lake-wave-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  /* Ensure it doesn't stretch parent */
  max-width: 100vw;
  opacity: 0;
  mix-blend-mode: soft-light;
  will-change: transform, opacity;
  transform: translateZ(0);
  /* Force GPU acceleration */
}

/* Layer 1: Slowest, largest waves - primary movement */
.lake-wave-layer.layer-1 {
  background:
    radial-gradient(ellipse 80% 50% at 20% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 70%, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
  opacity: 0.04;
  animation: lakeWave1 22s ease-in-out infinite;
}

/* Layer 2: Medium speed, offset phase - adds depth */
.lake-wave-layer.layer-2 {
  background:
    radial-gradient(ellipse 70% 45% at 60% 40%, rgba(255, 255, 255, 0.07) 0%, transparent 45%),
    radial-gradient(ellipse 50% 35% at 30% 60%, rgba(255, 255, 255, 0.05) 0%, transparent 45%);
  opacity: 0.035;
  animation: lakeWave2 18s ease-in-out infinite;
  animation-delay: -4s;
  /* Offset for asymmetry */
}

/* Layer 3: Fastest, smallest amplitude - surface shimmer */
.lake-wave-layer.layer-3 {
  background:
    radial-gradient(ellipse 40% 30% at 45% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 40%),
    radial-gradient(ellipse 35% 25% at 70% 35%, rgba(255, 255, 255, 0.04) 0%, transparent 40%);
  opacity: 0.025;
  animation: lakeWave3 15s ease-in-out infinite;
  animation-delay: -8s;
  /* Different offset */
}

/* ============================================
   WAVE KEYFRAMES
   Organic, non-perfectly-looping movement
   Primarily horizontal with subtle vertical drift
============================================ */

@keyframes lakeWave1 {
  0% {
    transform: translate(0%, 0%) scale(1);
    opacity: 0.04;
  }

  25% {
    transform: translate(3%, -1%) scale(1.02);
    opacity: 0.05;
  }

  50% {
    transform: translate(5%, 1%) scale(1);
    opacity: 0.04;
  }

  75% {
    transform: translate(2%, -0.5%) scale(1.01);
    opacity: 0.045;
  }

  100% {
    transform: translate(0%, 0%) scale(1);
    opacity: 0.04;
  }
}

@keyframes lakeWave2 {
  0% {
    transform: translate(0%, 0%) scale(1) rotate(0deg);
    opacity: 0.035;
  }

  33% {
    transform: translate(-4%, 1.5%) scale(1.03) rotate(0.5deg);
    opacity: 0.04;
  }

  66% {
    transform: translate(-2%, -1%) scale(0.98) rotate(-0.3deg);
    opacity: 0.03;
  }

  100% {
    transform: translate(0%, 0%) scale(1) rotate(0deg);
    opacity: 0.035;
  }
}

@keyframes lakeWave3 {
  0% {
    transform: translate(0%, 0%);
    opacity: 0.025;
  }

  20% {
    transform: translate(2%, 1%);
    opacity: 0.03;
  }

  40% {
    transform: translate(-1%, -0.5%);
    opacity: 0.02;
  }

  60% {
    transform: translate(3%, 0.5%);
    opacity: 0.028;
  }

  80% {
    transform: translate(1%, -1%);
    opacity: 0.022;
  }

  100% {
    transform: translate(0%, 0%);
    opacity: 0.025;
  }
}

/* ============================================
   CURSOR RIPPLE EFFECT
   Follows mouse position via CSS custom properties
   Updated by JavaScript
============================================ */

.lake-cursor-ripple {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 200px at var(--lake-cursor-x, 50%) var(--lake-cursor-y, 50%),
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 30%,
    transparent 60%
  );
  opacity: 0;
  mix-blend-mode: soft-light;
  pointer-events: none;
  transition: opacity 0.4s ease-out;
  will-change: opacity;
}

/* Show ripple when cursor is active over hero */
.hero.lake-cursor-active .lake-cursor-ripple {
  opacity: 1;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
============================================ */

/* Tablet: Slightly reduced animation intensity */
@media (max-width: 1024px) {
  .lake-wave-layer.layer-1,
  .lake-wave-layer.layer-2,
  .lake-wave-layer.layer-3 {
    animation-duration: 25s;
    /* Slower = less battery drain */
  }

  .lake-cursor-ripple {
    /* Larger ripple for touch */
    background: radial-gradient(
      circle 180px at var(--lake-cursor-x, 50%) var(--lake-cursor-y, 50%),
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.04) 35%,
      transparent 55%
    );
  }
}

/* Mobile: Minimal animation, no cursor effect */
@media (max-width: 768px) {
  .lake-wave-layer.layer-2,
  .lake-wave-layer.layer-3 {
    display: none;
    /* Reduce to single layer */
  }

  .lake-wave-layer.layer-1 {
    animation-duration: 30s;
    opacity: 0.03;
  }

  .lake-cursor-ripple {
    display: none;
    /* No cursor on mobile */
  }
}

/* ============================================
   ACCESSIBILITY: REDUCED MOTION
   Respects user's motion preferences
============================================ */

@media (prefers-reduced-motion: reduce) {
  .lake-wave-layer,
  .lake-cursor-ripple {
    animation: none !important;
    transition: none !important;
    opacity: 0 !important;
  }
}

/* ============================================
   FALLBACK: No animation support
   Static subtle overlay
============================================ */

@supports not (animation: lakeWave1 1s) {
  .lake-wave-container {
    background: radial-gradient(
      ellipse 100% 80% at 50% 30%,
      rgba(255, 255, 255, 0.03) 0%,
      transparent 60%
    );
  }

  .lake-wave-layer {
    display: none;
  }
}