/* ============================================
   CSS Beach Scene
   ============================================ */

@property --sunrise {
  syntax: '<number>';
  inherits: true;
  initial-value: 6;
}

@property --sunset {
  syntax: '<number>';
  inherits: true;
  initial-value: 18;
}

@property --day-length {
  syntax: '<number>';
  inherits: true;
  initial-value: 12;
}

/* ============================================
   CSS CELESTIAL POSITION CALCULATOR
   Computes sun/moon positions from --current-time
   ============================================ */

@property --current-time {
  syntax: '<number>';
  inherits: true;
  initial-value: 12;
}

@property --noon {
  syntax: '<number>';
  inherits: true;
  initial-value: 12;
}

@property --moonset {
  syntax: '<number>';
  inherits: true;
  initial-value: 5;
}

@property --mid-morning {
  syntax: '<number>';
  inherits: true;
  initial-value: 9;
}

@property --mid-afternoon {
  syntax: '<number>';
  inherits: true;
  initial-value: 15;
}

@property --hours-to-midnight {
  syntax: '<number>';
  inherits: true;
  initial-value: 6;
}

@property --day-progress {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.5;
}

@property --evening-progress {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --predawn-progress {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --sun-visible {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

@property --moon-visible {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --is-evening {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --is-predawn {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --after-sunrise {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

@property --before-sunset {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

@property --dist-from-noon {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --t-from-noon {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --sun-glitter {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.5;
}

@property --moon-glitter-evening {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

@property --moon-glitter-predawn {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.3;
}

@property --sun-refl-scale {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

@property --moon-refl-evening {
  syntax: '<number>';
  inherits: true;
  initial-value: 1.8;
}

@property --moon-refl-predawn {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.5;
}

@property --moon-top-evening {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 100%;
}

@property --moon-top-predawn {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 42%;
}

@property --moon-left-evening {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 8%;
}

@property --moon-left-predawn {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}

@property --dist-from-sunrise {
  syntax: '<number>';
  inherits: true;
  initial-value: 6;
}

@property --dist-from-sunset {
  syntax: '<number>';
  inherits: true;
  initial-value: 6;
}

@property --near-sunrise {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --near-sunset {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

/* Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================
   REGISTER CUSTOM PROPERTIES FOR ANIMATION
   Enables smooth interpolation in @keyframes
   ============================================ */

@property --sky-top {
  syntax: '<color>';
  inherits: true;
  initial-value: #87CEEB;
}

@property --sky-mid {
  syntax: '<color>';
  inherits: true;
  initial-value: #A5DDF2;
}

@property --sky-bottom {
  syntax: '<color>';
  inherits: true;
  initial-value: #E0F6FF;
}

@property --horizon-glow {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

@property --horizon-glow-opacity {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --sand {
  syntax: '<color>';
  inherits: true;
  initial-value: #E8DCC4;
}

@property --water-deep {
  syntax: '<color>';
  inherits: true;
  initial-value: #1E4D6B;
}

@property --water-light {
  syntax: '<color>';
  inherits: true;
  initial-value: #5BA3C0;
}

@property --stars-opacity {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --birds-opacity {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

@property --wave-wash-intensity {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

@property --wave-wash-shadow {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(40, 100, 130, 0);
}

@property --wave-wash-tint {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(70, 150, 190, 0);
}

@property --haze-opacity {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.8;
}

@property --glitter-x {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}

@property --glitter-intensity {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

@property --reflection-scale {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

@property --reflection-warmth {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

@property --sun-left {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}

@property --sun-top {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 100%;
}

@property --moon-left {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}

@property --moon-top {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 100%;
}

:root {
  /* ===========================================
     SOLAR/TIME BASE VARIABLES
     =========================================== */
  --sunrise: 6;
  --sunset: 18;
  --day-length: calc(var(--sunset) - var(--sunrise));
  --current-time: 12;
  --noon: calc((var(--sunrise) + var(--sunset)) / 2);
  --moonset: calc(var(--sunrise) - 1);
  --mid-morning: calc((var(--sunrise) + var(--noon)) / 2);
  --mid-afternoon: calc((var(--noon) + var(--sunset)) / 2);
  --hours-to-midnight: calc(24 - var(--sunset));

  /* ===========================================
     TIME STATE CALCULATIONS
     =========================================== */
  --is-evening: clamp(0, (var(--current-time) - var(--sunset) + 0.001) * 1000, 1);
  --is-predawn: clamp(0, (var(--moonset) - var(--current-time) + 0.001) * 1000, 1);
  --after-sunrise: clamp(0, (var(--current-time) - var(--sunrise) + 0.001) * 1000, 1);
  --before-sunset: clamp(0, (var(--sunset) - var(--current-time) + 0.001) * 1000, 1);

  --sun-visible: calc(var(--after-sunrise) * var(--before-sunset));
  --moon-visible: calc(var(--is-evening) + var(--is-predawn) * (1 - var(--is-evening)));

  --day-progress: clamp(0, (var(--current-time) - var(--sunrise)) / var(--day-length), 1);
  --evening-progress: clamp(0, (var(--current-time) - var(--sunset)) / var(--hours-to-midnight), 1);
  --predawn-progress: clamp(0, var(--current-time) / var(--moonset), 1);

  --day-ramp-up: clamp(0, (var(--current-time) - var(--sunrise) + 1) / 2, 1);
  --day-ramp-down: clamp(0, (var(--sunset) + 1 - var(--current-time)) / 2, 1);
  --daylight: calc(var(--day-ramp-up) * var(--day-ramp-down));
  --sunrise-dist: abs(var(--current-time) - var(--sunrise));
  --sunset-dist: abs(var(--current-time) - var(--sunset));
  --dawn-glow: clamp(0, 1 - var(--sunrise-dist) / 1.5, 1);
  --dusk-glow: clamp(0, 1 - var(--sunset-dist) / 1.5, 1);
  --golden-hour: max(var(--dawn-glow), var(--dusk-glow));
  --full-day: calc(var(--daylight) * (1 - var(--golden-hour)));

  /* ===========================================
     POSITION CALCULATIONS (SUN/MOON)
     =========================================== */
  --sun-top: calc(100% - sin(var(--day-progress) * pi) * 67%);
  --sun-left: calc(12% + var(--day-progress) * 76%);

  --moon-top-evening: calc(100% - sin(var(--evening-progress) * pi / 2) * 58%);
  --moon-top-predawn: calc(100% - cos(var(--predawn-progress) * pi / 2) * 58%);
  --moon-top: calc(
    var(--is-evening) * var(--moon-top-evening) +
    var(--is-predawn) * (1 - var(--is-evening)) * var(--moon-top-predawn) +
    (1 - var(--moon-visible)) * 180%
  );
  --moon-left-evening: calc(8% + var(--evening-progress) * 42%);
  --moon-left-predawn: calc(50% + var(--predawn-progress) * 42%);
  --moon-left: calc(
    var(--is-evening) * var(--moon-left-evening) +
    var(--is-predawn) * (1 - var(--is-evening)) * var(--moon-left-predawn) +
    (1 - var(--moon-visible)) * 8%
  );

  /* ===========================================
     GLITTER/REFLECTION CALCULATIONS
     =========================================== */
  --dist-from-noon: abs(var(--current-time) - var(--noon));
  --t-from-noon: clamp(0.001, var(--dist-from-noon) / (var(--noon) - var(--sunrise)), 1);

  --sun-glitter: calc(0.15 + 0.85 * sqrt(var(--t-from-noon)));
  --moon-glitter-evening: calc(1.0 - 0.7 * sqrt(var(--evening-progress)));
  --moon-glitter-predawn: calc(0.3 + 0.7 * sqrt(max(0.001, var(--predawn-progress))));
  --glitter-intensity: calc(
    var(--sun-visible) * var(--sun-glitter) +
    var(--moon-visible) * (1 - var(--sun-visible)) * (
      var(--is-evening) * var(--moon-glitter-evening) +
      var(--is-predawn) * var(--moon-glitter-predawn)
    )
  );

  --sun-refl-scale: calc(0.3 + 1.7 * sqrt(var(--t-from-noon)));
  --moon-refl-evening: calc(1.8 - 1.3 * sqrt(var(--evening-progress)));
  --moon-refl-predawn: calc(0.5 + 1.3 * sqrt(max(0.001, var(--predawn-progress))));
  --reflection-scale: calc(
    var(--sun-visible) * var(--sun-refl-scale) +
    var(--moon-visible) * (1 - var(--sun-visible)) * (
      var(--is-evening) * var(--moon-refl-evening) +
      var(--is-predawn) * var(--moon-refl-predawn)
    ) +
    (1 - var(--sun-visible)) * (1 - var(--moon-visible)) * 0.3
  );

  --dist-from-sunrise: abs(var(--current-time) - var(--sunrise));
  --dist-from-sunset: abs(var(--current-time) - var(--sunset));
  --near-sunrise: clamp(0, (1.5 - var(--dist-from-sunrise)) * 1000, 1);
  --near-sunset: clamp(0, (1.5 - var(--dist-from-sunset)) * 1000, 1);
  --reflection-warmth: calc(
    var(--near-sunrise) * sqrt(max(0.001, 1 - var(--dist-from-sunrise) / 1.5)) +
    var(--near-sunset) * (1 - var(--near-sunrise)) * sqrt(max(0.001, 1 - var(--dist-from-sunset) / 1.5))
  );

  --glitter-x: calc(
    var(--sun-visible) * var(--sun-left) +
    var(--moon-visible) * (1 - var(--sun-visible)) * var(--moon-left)
  );

  /* ===========================================
     COLOR DEFINITIONS (BASE PALETTES)
     =========================================== */
  /* Night colors */
  --sky-top-night: #0A1628;
  --sky-mid-night: #141E30;
  --sky-bottom-night: #1E2D4A;
  --sand-night: #3D3D3D;
  --water-deep-night: #0D1B2A;
  --water-light-night: #2A3F54;

  /* Golden hour colors */
  --sky-top-golden: #4A6B8A;
  --sky-mid-golden: #8090A0;
  --sky-bottom-golden: #FFB088;
  --sand-golden: #C8A888;
  --water-deep-golden: #2A5060;
  --water-light-golden: #6090A0;

  /* Midday colors */
  --sky-top-midday: #87CEEB;
  --sky-mid-midday: #B0E0F0;
  --sky-bottom-midday: #E8F8FF;
  --sand-midday: #F0E4D0;
  --water-deep-midday: #1E5080;
  --water-light-midday: #60B0D0;

  /* ===========================================
     DERIVED COLORS (color-mix results)
     =========================================== */
  --sky-top: color-mix(in oklab,
    color-mix(in oklab,
      var(--sky-top-night),
      var(--sky-top-golden) calc(var(--daylight) * 100%)
    ),
    var(--sky-top-midday) calc(var(--full-day) * 100%)
  );

  --sky-mid: color-mix(in oklab,
    color-mix(in oklab,
      var(--sky-mid-night),
      var(--sky-mid-golden) calc(var(--daylight) * 100%)
    ),
    var(--sky-mid-midday) calc(var(--full-day) * 100%)
  );

  --sky-bottom: color-mix(in oklab,
    color-mix(in oklab,
      var(--sky-bottom-night),
      var(--sky-bottom-golden) calc(var(--daylight) * 100%)
    ),
    var(--sky-bottom-midday) calc(var(--full-day) * 100%)
  );

  --sand: color-mix(in oklab,
    color-mix(in oklab,
      var(--sand-night),
      var(--sand-golden) calc(var(--daylight) * 100%)
    ),
    var(--sand-midday) calc(var(--full-day) * 100%)
  );

  --water-deep: color-mix(in oklab,
    color-mix(in oklab,
      var(--water-deep-night),
      var(--water-deep-golden) calc(var(--daylight) * 100%)
    ),
    var(--water-deep-midday) calc(var(--full-day) * 100%)
  );

  --water-light: color-mix(in oklab,
    color-mix(in oklab,
      var(--water-light-night),
      var(--water-light-golden) calc(var(--daylight) * 100%)
    ),
    var(--water-light-midday) calc(var(--full-day) * 100%)
  );

  --horizon-glow: color-mix(in oklab,
    transparent,
    color-mix(in oklab, #FF9060, #FF4422 calc(var(--dusk-glow) * 100%)) calc(var(--golden-hour) * 100%)
  );

  /* ===========================================
     OPACITY & INTENSITY VARIABLES
     =========================================== */
  --stars-opacity: clamp(0, 1 - var(--daylight) * 2, 1);
  --birds-opacity: var(--daylight);
  --horizon-glow-opacity: var(--golden-hour);
  --wave-wash-intensity: var(--daylight);
  --wave-wash-shadow: color-mix(in srgb,
    rgba(40, 100, 130, 0),
    rgba(40, 100, 130, 0.35) calc(var(--wave-wash-intensity) * 100%)
  );

  --wave-wash-tint: color-mix(in srgb,
    rgba(70, 150, 190, 0),
    rgba(50, 140, 175, 0.55) calc(var(--wave-wash-intensity) * 100%)
  );

  --haze-opacity: calc(0.2 + var(--daylight) * 0.6);

  /* ===========================================
     ANIMATION DURATIONS
     =========================================== */
  --day-cycle-duration: 48s;
  --day-cycle-delay: 0s;
  --dur-sun-pulse: 6s;
  --dur-moon-pulse: 8s;
  --dur-star-twinkle: 3s;

  --dur-bird-fly: 12s;
  --dur-wing-flap: 0.8s;

  --dur-plane-fly: 180s;
  --dur-plane-fly-2: 275s;
  --dur-plane-light: 1.2s;

  --dur-glitter: 45s;
  --dur-reflection-shimmer: 4s;
  --dur-reflection-turbulent: 3s;

  --dur-wave-far: 20s;
  --dur-wave-mid: 15s;
  --dur-wave-near: 12s;

  --dur-wave-wash-1: 14s;
  --dur-wave-wash-2: 17s;
  --dur-wave-wash-3: 19s;

  --dur-backwash-recede: 14s;
  --dur-backwash-edge: 14s;

  --dur-wet-sand: 14s;
  --dur-foam-residue: 14s;

  --dur-sky-shimmer: 30s;
  --dur-sky-drift: 50s;
}

html, body {
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  width: 100dvw;
  overflow: hidden;
  background: #000;
}

/* ============================================
   BEACH CONTAINER
   ============================================ */

.beach {
  position: fixed;
  inset: 0;
  background: var(--sky-bottom);
  isolation: isolate;
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* Water fill behind sand - ensures water color shows through sand mask gaps */
.beach::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to bottom,
    var(--water-deep) 0%,
    var(--water-light) 100%
  );
  z-index: 0;
}

/* Film grain overlay */
.beach::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.045;
  pointer-events: none;
  z-index: 100;
  mix-blend-mode: overlay;
}

/* ============================================
   SKY
   ============================================ */

.sky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  contain: layout paint style;
  background: linear-gradient(to bottom,
    var(--sky-top) 0%,
    var(--sky-mid) 50%,
    var(--sky-bottom) 100%
  );
  transform-style: preserve-3d;
}

.sky::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(255,255,255,0.15) 0%,
    rgba(255,255,255,0.08) 10%,
    rgba(255,255,255,0.03) 25%,
    transparent 40%
  );
  opacity: var(--haze-opacity, 0.8);
  pointer-events: none;
}

/* Heat distortion */
.sky::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(to top,
    rgba(255,255,255,0.08) 0%,
    rgba(255,250,240,0.05) 30%,
    transparent 100%
  );
  filter: url(#sky-atmosphere);
  animation: sky-shimmer var(--dur-sky-shimmer) ease-in-out infinite;
  pointer-events: none;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

@keyframes sky-shimmer {
  0%, 100% { opacity: 0.6; transform: scaleY(1) translateZ(0); }
  25% { opacity: 0.75; transform: scaleY(1.02) translateZ(0); }
  50% { opacity: 0.5; transform: scaleY(0.98) translateZ(0); }
  75% { opacity: 0.7; transform: scaleY(1.01) translateZ(0); }
}

.sky-atmosphere {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 30% at 20% 20%, rgba(255,240,220,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 60% 25% at 70% 35%, rgba(220,235,255,0.03) 0%, transparent 65%),
    radial-gradient(ellipse 90% 40% at 50% 70%, rgba(255,245,230,0.05) 0%, transparent 80%);
  animation: sky-drift var(--dur-sky-drift) ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

@keyframes sky-drift {
  0%, 100% {
    background-position: 0% 0%, 0% 0%, 0% 0%;
    opacity: 0.7;
  }
  33% {
    background-position: 5% 3%, -3% 2%, 2% -2%;
    opacity: 0.85;
  }
  66% {
    background-position: -3% -2%, 4% -1%, -2% 3%;
    opacity: 0.75;
  }
}

.horizon-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: radial-gradient(
    ellipse 120% 80% at 50% 100%,
    var(--horizon-glow) 0%,
    transparent 70%
  );
  opacity: var(--horizon-glow-opacity);
  pointer-events: none;
}

/* ============================================
   SUN
   ============================================ */

.sun {
  position: absolute;
  left: var(--sun-left);
  top: var(--sun-top);
  transform: translate(-50%, -50%) translateZ(0);
  will-change: transform;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FFFFFF 0%, #FFFEF8 40%, #FFF8E7 100%);
  /* Static box-shadow - no longer animated for performance */
  box-shadow:
    0 0 10px 3px rgba(255,255,255,0.95),
    0 0 25px 8px rgba(255,255,255,0.7),
    0 0 50px 15px rgba(255,250,240,0.5),
    0 0 80px 25px rgba(255,235,200,0.4),
    0 0 120px 45px rgba(255,220,180,0.25),
    0 0 200px 80px rgba(255,200,150,0.12);
  z-index: 2;
  opacity: var(--sun-visible);
  backface-visibility: hidden;
}

.sun::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%) scale(1) translateZ(0);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,250,230,0.5) 0%, rgba(255,235,200,0.3) 60%, transparent 100%);
  filter: blur(50px);
  z-index: 2;
  pointer-events: none;
  /* Animate scale/opacity instead of parent's box-shadow */
  animation: sun-glow-pulse var(--dur-sun-pulse) ease-in-out infinite;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.sun::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%) scale(1) translateZ(0);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,210,0.15) 0%, rgba(255,220,180,0.08) 60%, transparent 100%);
  filter: blur(80px);
  z-index: 2;
  pointer-events: none;
  /* Secondary glow pulse, offset timing */
  animation: sun-glow-pulse var(--dur-sun-pulse) ease-in-out infinite;
  animation-delay: calc(var(--dur-sun-pulse) * -0.25);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

@keyframes sun-glow-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1) translateZ(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.12) translateZ(0);
    opacity: 0.85;
  }
}

/* ============================================
   MOON
   ============================================ */

.moon {
  position: absolute;
  left: var(--moon-left);
  top: var(--moon-top);
  transform: translate(-50%, -50%) translateZ(0);
  will-change: transform;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #E8EEF5;
  cursor: pointer;
  /* Static box-shadow - no longer animated for performance */
  box-shadow:
    0 0 15px 5px rgba(200, 210, 230, 0.7),
    0 0 40px 15px rgba(180, 195, 220, 0.4),
    0 0 80px 30px rgba(160, 180, 210, 0.15);
  z-index: 2;
  opacity: var(--moon-visible);
  backface-visibility: hidden;
}

.moon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%) scale(1) translateZ(0);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 210, 230, 0.5) 0%, rgba(180, 195, 220, 0.2) 70%, transparent 100%);
  filter: blur(30px);
  z-index: 2;
  pointer-events: none;
  /* Animate scale/opacity instead of parent's box-shadow */
  animation: moon-glow-pulse var(--dur-moon-pulse) ease-in-out infinite;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

@keyframes moon-glow-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1) translateZ(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.15) translateZ(0);
    opacity: 0.8;
  }
}

/* ============================================
   BIRDS
   ============================================ */

.birds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--birds-opacity);
  z-index: 1;
  isolation: isolate;
  transform-style: preserve-3d;
}

.bird {
  position: absolute;
  width: 20px;
  height: 8px;
  contain: layout;
  will-change: transform;
  animation: bird-fly var(--dur-bird-fly) ease-in-out infinite;
  backface-visibility: hidden;
}

.bird::before {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  width: 10px;
  height: 5px;
  background: transparent;
  border-top: 2px solid #333;
  border-radius: 50% 50% 0 0;
  transform-origin: right center;
  animation: wing-flap-left var(--dur-wing-flap) ease-in-out infinite;
}

.bird::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 5px;
  background: transparent;
  border-top: 2px solid #333;
  border-radius: 50% 50% 0 0;
  transform-origin: left center;
  animation: wing-flap-right var(--dur-wing-flap) ease-in-out infinite;
}

/* Stagger bird animations using CSS variables */
.bird {
  animation-delay: var(--delay);
}
.bird::before, .bird::after {
  animation-delay: var(--wing-delay);
}

@keyframes bird-fly {
  0%, 100% { transform: translateY(0) translateX(0) translateZ(0); }
  12% { transform: translateY(-3px) translateX(5px) translateZ(0); }
  25% { transform: translateY(-4px) translateX(-3px) translateZ(0); }
  37% { transform: translateY(-2px) translateX(6px) translateZ(0); }
  50% { transform: translateY(0) translateX(-2px) translateZ(0); }
  62% { transform: translateY(3px) translateX(5px) translateZ(0); }
  75% { transform: translateY(4px) translateX(-4px) translateZ(0); }
  87% { transform: translateY(2px) translateX(3px) translateZ(0); }
}

@keyframes wing-flap-left {
  0%, 100% { transform: rotate(-25deg) translateZ(0); }
  50% { transform: rotate(15deg) translateZ(0); }
}

@keyframes wing-flap-right {
  0%, 100% { transform: rotate(25deg) translateZ(0); }
  50% { transform: rotate(-15deg) translateZ(0); }
}

/* ============================================
   STARS
   ============================================ */

.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--stars-opacity);
  z-index: 1;
  isolation: isolate;
  transform-style: preserve-3d;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  contain: layout size;
  will-change: transform, opacity;
  animation: star-twinkle var(--dur-star-twinkle) ease-in-out infinite;
  backface-visibility: hidden;
}

.star::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.5);
}

/* Vary star sizes */
.star:nth-child(odd) { width: 1.5px; height: 1.5px; }
.star:nth-child(3n) { width: 2.5px; height: 2.5px; }
.star:nth-child(5n) { width: 1px; height: 1px; }

/* Stagger star twinkle using index variable */
.star {
  animation-delay: calc(var(--i) * -0.1s);
}

@keyframes star-twinkle {
  0%, 100% { opacity: 0.4; transform: scale(1) translateZ(0); }
  50% { opacity: 1; transform: scale(1.2) translateZ(0); }
}

/* ============================================
   PLANE
   ============================================ */

.plane {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 20px;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: plane-fly var(--dur-plane-fly) linear infinite;
  animation-delay: 5s;
  color: rgba(30, 35, 50, 0.9);
  z-index: 3; /* In front of moon (z-index: 2) */
  backface-visibility: hidden;
}

.plane-svg {
  width: 100%;
  height: 100%;
}

/* Blinking red light */
.plane-light {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 3px;
  height: 3px;
  background: #ff2222;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255, 50, 50, 0.9);
  animation: blink-light var(--dur-plane-light) ease-in-out infinite;
}

@keyframes plane-fly {
  0%, 70% { opacity: 0; transform: translate(-60px, 16.8vh) rotate(0deg) translateZ(0); }

  71% { opacity: 1; transform: translate(-60px, 16.8vh) rotate(-2deg) translateZ(0); }
  74% { transform: translate(5vw, 15vh) rotate(-3deg) translateZ(0); }
  77% { transform: translate(15vw, 13.8vh) rotate(-2deg) translateZ(0); }
  80% { transform: translate(25vw, 14.4vh) rotate(1deg) translateZ(0); }
  83% { transform: translate(35vw, 16.2vh) rotate(3deg) translateZ(0); }
  86% { transform: translate(48vw, 18vh) rotate(2deg) translateZ(0); }
  89% { transform: translate(60vw, 16.8vh) rotate(-1deg) translateZ(0); }
  92% { transform: translate(75vw, 14.4vh) rotate(-3deg) translateZ(0); }
  95% { transform: translate(90vw, 13.2vh) rotate(-2deg) translateZ(0); }
  97% { opacity: 1; transform: translate(105vw, 13.8vh) rotate(-1deg) translateZ(0); }
  98%, 100% { opacity: 0; transform: translate(105vw, 13.8vh) rotate(0deg) translateZ(0); }
}

@keyframes blink-light {
  0%, 40%, 100% { opacity: 0.3; }
  50%, 60% { opacity: 1; }
}

/* Second plane - different timing and path */
.plane-2 {
  animation: plane-fly-2 var(--dur-plane-fly-2) linear infinite;
  animation-delay: 40s;
}

@keyframes plane-fly-2 {
  0%, 72% { opacity: 0; transform: translate(-60px, 22.8vh) rotate(0deg) translateZ(0); }

  73% { opacity: 1; transform: translate(-60px, 22.8vh) rotate(2deg) translateZ(0); }
  76% { transform: translate(8vw, 24vh) rotate(2deg) translateZ(0); }
  79% { transform: translate(18vw, 22.8vh) rotate(-1deg) translateZ(0); }
  82% { transform: translate(30vw, 20.4vh) rotate(-3deg) translateZ(0); }
  85% { transform: translate(42vw, 19.2vh) rotate(-2deg) translateZ(0); }
  88% { transform: translate(55vw, 19.8vh) rotate(1deg) translateZ(0); }
  91% { transform: translate(68vw, 21.6vh) rotate(2deg) translateZ(0); }
  94% { transform: translate(82vw, 22.8vh) rotate(1deg) translateZ(0); }
  96% { opacity: 1; transform: translate(95vw, 22.2vh) rotate(-1deg) translateZ(0); }
  97% { opacity: 1; transform: translate(105vw, 21.6vh) rotate(0deg) translateZ(0); }
  98%, 100% { opacity: 0; transform: translate(105vw, 21.6vh) rotate(0deg) translateZ(0); }
}

/* Plane visibility via parent class */
.plane { display: none; }
.beach.nighttime .plane { display: block; }

/* ============================================
   HORIZON
   ============================================ */

.horizon {
  position: absolute;
  top: 59.8%;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.2) 30%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0.2) 70%,
    transparent 100%
  );
  animation: horizon-shimmer 12s ease-in-out infinite;
  z-index: 10;
}

@keyframes horizon-shimmer {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* ============================================
   OCEAN WATER
   ============================================ */

.water {
  position: absolute;
  top: 60%;
  left: 0;
  right: 0;
  height: 26%;
  contain: layout paint;
  background: linear-gradient(to bottom,
    var(--water-deep) 0%,
    var(--water-light) 100%
  );
  z-index: 3; /* Above sun/moon (z-index: 2) so they go behind water at horizon */
  isolation: isolate;
  transform-style: preserve-3d;
}

.water::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image:
    radial-gradient(circle 2px at 10% 5%, rgba(255,235,200,0.9) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 18% 8%, rgba(255,235,200,0.85) 0%, transparent 100%),
    radial-gradient(circle 2px at 25% 3%, rgba(255,235,200,0.95) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 32% 12%, rgba(255,235,200,0.8) 0%, transparent 100%),
    radial-gradient(circle 2px at 40% 6%, rgba(255,235,200,0.9) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 48% 2%, rgba(255,235,200,1) 0%, transparent 100%),
    radial-gradient(circle 2px at 52% 9%, rgba(255,235,200,0.95) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 60% 4%, rgba(255,235,200,0.9) 0%, transparent 100%),
    radial-gradient(circle 2px at 68% 11%, rgba(255,235,200,0.85) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 75% 7%, rgba(255,235,200,0.9) 0%, transparent 100%),
    radial-gradient(circle 2px at 82% 3%, rgba(255,235,200,0.95) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 90% 10%, rgba(255,235,200,0.85) 0%, transparent 100%),
    radial-gradient(circle 1px at 15% 18%, rgba(255,235,200,0.7) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 35% 22%, rgba(255,235,200,0.65) 0%, transparent 100%),
    radial-gradient(circle 1px at 55% 20%, rgba(255,235,200,0.7) 0%, transparent 100%),
    radial-gradient(circle 1.5px at 70% 25%, rgba(255,235,200,0.6) 0%, transparent 100%),
    radial-gradient(circle 1px at 85% 19%, rgba(255,235,200,0.65) 0%, transparent 100%);
  background-size:
    120px 90px, 95px 85px, 110px 95px, 88px 80px, 105px 88px,
    75px 70px, 98px 82px, 115px 92px, 82px 78px, 100px 85px,
    90px 88px, 108px 95px, 140px 110px, 125px 105px, 135px 115px,
    145px 120px, 130px 108px;
  -webkit-mask-image: radial-gradient(ellipse 50% 120% at var(--glitter-x) 0%, black 0%, rgba(0,0,0,0.7) 25%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 75%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 120% at var(--glitter-x) 0%, black 0%, rgba(0,0,0,0.7) 25%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 75%, transparent 100%);
  filter: blur(var(--glitter-blur, 1px));
  opacity: var(--glitter-intensity);
  animation: glitter var(--dur-glitter) ease-in-out infinite;
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.water::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--glitter-x);
  transform: translateX(-50%) scaleX(var(--reflection-scale, 1));
  transform-origin: top center;
  width: 30%;
  height: 100%;
  opacity: var(--glitter-intensity);
  background:
    radial-gradient(ellipse 22px 4px at 50% 4%, rgba(255,245,220,0.85) 0%, transparent 100%),
    radial-gradient(ellipse 30px 5px at 58% 7%, rgba(255,240,210,0.75) 0%, transparent 100%),
    radial-gradient(ellipse 18px 3px at 42% 11%, rgba(255,245,220,0.7) 0%, transparent 100%),
    radial-gradient(ellipse 35px 5px at 55% 15%, rgba(255,240,210,0.78) 0%, transparent 100%),
    radial-gradient(ellipse 24px 4px at 38% 20%, rgba(255,238,205,0.65) 0%, transparent 100%),
    radial-gradient(ellipse 28px 4px at 62% 24%, rgba(255,235,200,0.68) 0%, transparent 100%),
    radial-gradient(ellipse 20px 3px at 48% 30%, rgba(255,232,195,0.62) 0%, transparent 100%),
    radial-gradient(ellipse 32px 5px at 35% 36%, rgba(255,230,190,0.55) 0%, transparent 100%),
    radial-gradient(ellipse 26px 4px at 65% 42%, rgba(255,228,185,0.5) 0%, transparent 100%),
    radial-gradient(ellipse 22px 3px at 45% 50%, rgba(255,225,180,0.42) 0%, transparent 100%),
    radial-gradient(ellipse 28px 4px at 58% 58%, rgba(255,222,175,0.35) 0%, transparent 100%),
    radial-gradient(ellipse 18px 3px at 40% 66%, rgba(255,220,172,0.25) 0%, transparent 100%),
    radial-gradient(ellipse 24px 3px at 55% 74%, rgba(255,218,170,0.18) 0%, transparent 100%),
    /* Soft underlying glow */
    radial-gradient(ellipse 60% 100% at 50% 0%,
      rgba(255,240,210,0.25) 0%,
      rgba(255,235,200,0.16) 15%,
      rgba(255,230,190,0.1) 30%,
      rgba(255,225,185,0.05) 50%,
      transparent 70%
    );
  filter:
    saturate(calc(0.8 + var(--reflection-warmth, 1) * 1.2))
    sepia(calc(var(--reflection-warmth, 1) * 0.3))
    brightness(calc(0.9 + var(--reflection-warmth, 1) * 0.2));
  animation: reflection-shimmer var(--dur-reflection-shimmer) ease-in-out infinite;
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}

.beach.playing .water::after {
  animation: reflection-turbulent var(--dur-reflection-turbulent) ease-in-out infinite;
}

@keyframes glitter {
  0%, 100% { transform: scale(1) translateZ(0); filter: blur(var(--glitter-blur, 1px)); }
  25% { transform: scale(1.02) translateZ(0); filter: blur(calc(var(--glitter-blur, 1px) * 0.8)); }
  50% { transform: scale(0.98) translateZ(0); filter: blur(calc(var(--glitter-blur, 1px) * 1.2)); }
  75% { transform: scale(1.01) translateZ(0); filter: blur(calc(var(--glitter-blur, 1px) * 0.9)); }
}

@keyframes reflection-shimmer {
  0%, 100% { transform: translateX(-50%) scaleX(calc(var(--reflection-scale, 1) * 1)) translateZ(0); }
  25% { transform: translateX(-50%) scaleX(calc(var(--reflection-scale, 1) * 1.03)) translateZ(0); }
  50% { transform: translateX(-50%) scaleX(calc(var(--reflection-scale, 1) * 1.05)) translateZ(0); }
  75% { transform: translateX(-50%) scaleX(calc(var(--reflection-scale, 1) * 0.99)) translateZ(0); }
}

@keyframes reflection-turbulent {
  0%, 100% { transform: translateX(-50%) scaleX(calc(var(--reflection-scale, 1) * 1)) translateZ(0); }
  25% { transform: translateX(-51%) scaleX(calc(var(--reflection-scale, 1) * 1.04)) translateZ(0); }
  50% { transform: translateX(-49%) scaleX(calc(var(--reflection-scale, 1) * 0.97)) translateZ(0); }
  75% { transform: translateX(-50.5%) scaleX(calc(var(--reflection-scale, 1) * 1.02)) translateZ(0); }
}

/* ============================================
   WHITECAPS
   ============================================ */

.whitecaps {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  isolation: isolate;
  transform-style: preserve-3d;
}

.whitecap {
  position: absolute;
  width: 60px;
  height: 12px;
  contain: layout size;
  will-change: transform, opacity;
  background: radial-gradient(ellipse 100% 60% at 50% 70%,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.7) 30%,
    rgba(255,255,255,0.3) 60%,
    transparent 100%
  );
  border-radius: 50% 50% 40% 40%;
  opacity: 0;
  transform-origin: center bottom;
  filter: url(#whitecap-distort);
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Whitecap animation using inline CSS variables */
.whitecap {
  animation: whitecap-break var(--dur) ease-out var(--delay) infinite;
}

@keyframes whitecap-break {
  0%, 92%, 100% {
    opacity: 0;
    transform: scale(0) translateZ(0);
  }
  94% {
    opacity: 0.95;
    transform: scale(0.5, 0.833) translateZ(0);
  }
  96% {
    opacity: 1;
    transform: scale(0.975, 0.7) translateZ(0);
  }
  98% {
    opacity: 0.6;
    transform: scale(1.375, 0.3) translateZ(0);
  }
  99% {
    opacity: 0.2;
    transform: scale(1.6, 0.083) translateZ(0);
  }
}

/* ============================================
   WAVE LINES - Three perspective layers
   ============================================ */

.water-far {
  position: absolute;
  top: 60%;
  left: 0;
  right: 0;
  height: 8%;
  z-index: 4;
  background-image:
    repeating-linear-gradient(178.5deg, transparent 0px, transparent 38px, rgba(255,255,255,0.28) 38px, rgba(255,255,255,0.22) 39px, transparent 39.5px, transparent 58px),
    repeating-linear-gradient(180.8deg, transparent 0px, transparent 52px, rgba(255,255,255,0.22) 52px, rgba(255,255,255,0.16) 53px, transparent 53.5px, transparent 75px),
    repeating-linear-gradient(179.2deg, transparent 0px, transparent 45px, rgba(255,255,255,0.25) 45px, rgba(255,255,255,0.18) 46px, transparent 46.5px, transparent 68px);
  opacity: 0.45;
  filter: url(#wave-distort);
  animation: wave-flow-far var(--dur-wave-far) ease-in-out infinite;
  will-change: background-position;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.water-mid {
  position: absolute;
  top: 68%;
  left: 0;
  right: 0;
  height: 8%;
  z-index: 4;
  background-image:
    repeating-linear-gradient(178.3deg, transparent 0px, transparent 18px, rgba(255,255,255,0.42) 18px, rgba(255,255,255,0.32) 19px, transparent 19.5px, transparent 32px),
    repeating-linear-gradient(180.6deg, transparent 0px, transparent 24px, rgba(255,255,255,0.35) 24px, rgba(255,255,255,0.25) 25px, transparent 25.5px, transparent 40px),
    repeating-linear-gradient(179.4deg, transparent 0px, transparent 22px, rgba(255,255,255,0.38) 22px, rgba(255,255,255,0.28) 23px, transparent 23.5px, transparent 36px);
  opacity: 0.55;
  filter: url(#wave-distort);
  animation: wave-flow-mid var(--dur-wave-mid) ease-in-out infinite;
  animation-delay: -4s;
  will-change: background-position;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.water-near {
  position: absolute;
  top: 76%;
  left: 0;
  right: 0;
  height: 10%;
  z-index: 4;
  background-image:
    repeating-linear-gradient(178.2deg, transparent 0px, transparent 7px, rgba(255,255,255,0.55) 7px, rgba(255,255,255,0.42) 8px, transparent 8.5px, transparent 16px),
    repeating-linear-gradient(180.5deg, transparent 0px, transparent 11px, rgba(255,255,255,0.45) 11px, rgba(255,255,255,0.32) 12px, transparent 12.5px, transparent 20px),
    repeating-linear-gradient(179.3deg, transparent 0px, transparent 9px, rgba(255,255,255,0.5) 9px, rgba(255,255,255,0.38) 10px, transparent 10.5px, transparent 14px);
  opacity: 0.65;
  filter: url(#wave-distort);
  animation: wave-flow-near var(--dur-wave-near) ease-in-out infinite;
  animation-delay: -6s;
  -webkit-mask-image: linear-gradient(to bottom, white 0%, white 35%, rgba(255,255,255,0.55) 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, white 0%, white 35%, rgba(255,255,255,0.55) 65%, transparent 100%);
  will-change: background-position;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@keyframes wave-flow-far {
  0%, 100% { background-position: 0 0, 0 0, 0 0; }
  33% { background-position: 6px 3px, -4px 2px, 3px 1px; }
  66% { background-position: -4px -2px, 5px -1px, -2px -1px; }
}

@keyframes wave-flow-mid {
  0%, 100% { background-position: 0 0, 0 0, 0 0; }
  25% { background-position: 10px 4px, -6px 3px, 4px 2px; }
  50% { background-position: -5px -2px, 8px -1px, -3px -1px; }
  75% { background-position: 6px 2px, -3px 1px, 5px 1px; }
}

@keyframes wave-flow-near {
  0%, 100% { background-position: 0 0, 0 0, 0 0; }
  20% { background-position: 12px 5px, -8px 4px, 5px 3px; }
  40% { background-position: -6px -3px, 10px -2px, -4px -2px; }
  60% { background-position: 8px 3px, -5px 2px, 6px 1px; }
  80% { background-position: -4px -1px, 6px -1px, -2px -1px; }
}

/* ============================================
   SHORE WAVES
   ============================================ */

.wave-wash {
  position: absolute;
  top: var(--wave-top);
  left: 0;
  right: 0;
  height: 25%;
  pointer-events: none;
  z-index: var(--wave-z);
  overflow: visible;
  filter: url(#shore-wave-distort);
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}

.wave-wash::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 35px;
  background: linear-gradient(180deg,
    rgba(90,160,195,0.7) 0%,
    rgba(140,200,220,0.6) 10%,
    rgba(255,255,255,0.95) 25%,
    rgba(255,255,255,0.8) 45%,
    rgba(255,255,255,0.4) 70%,
    transparent 100%
  );
  clip-path: polygon(
    0% 30%, 8% 18%, 17% 40%, 25% 20%, 33% 42%, 42% 15%,
    50% 35%, 58% 22%, 67% 45%, 75% 18%, 83% 38%, 92% 25%, 100% 32%,
    100% 100%, 0% 100%
  );
  filter: url(#foam-texture) drop-shadow(0 2px 3px var(--wave-wash-shadow));
  animation: wave-crash var(--dur-wave-wash-1) ease-in-out infinite;
  animation-delay: var(--wave-delay);
  opacity: var(--wave-opacity);
}

.wave-wash::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(180deg,
    var(--wave-wash-tint) 0%,
    rgba(70,140,175,0.5) 5%,
    rgba(120,180,210,0.35) 20%,
    rgba(200,230,245,0.25) 45%,
    rgba(255,255,255,0.12) 70%,
    transparent 100%
  );
  clip-path: polygon(
    0% 18%, 10% 24%, 20% 14%, 30% 26%, 40% 16%, 50% 22%,
    60% 15%, 70% 25%, 80% 18%, 90% 24%, 100% 16%,
    100% 100%, 0% 100%
  );
  animation: wave-crash var(--dur-wave-wash-1) ease-in-out infinite;
  animation-delay: var(--wave-delay);
}

/* Wave front edge */
.wave-wash-edge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(180deg,
    rgba(50, 130, 160, 0.6) 0%,
    rgba(70, 150, 180, 0.4) 50%,
    transparent 100%
  );
  opacity: var(--wave-wash-intensity);
  clip-path: polygon(
    0% 50%, 8% 25%, 17% 60%, 25% 30%, 33% 55%, 42% 28%,
    50% 58%, 58% 32%, 67% 62%, 75% 28%, 83% 55%, 92% 35%, 100% 45%,
    100% 100%, 0% 100%
  );
  animation: wave-crash var(--dur-wave-wash-1) ease-in-out infinite;
  animation-delay: var(--wave-delay);
  pointer-events: none;
}

@keyframes wave-crash {
  0%, 50% {
    transform: translateY(-45px) scaleX(0.96) scaleY(1) translateZ(0);
    opacity: 0;
  }
  54% {
    transform: translateY(-20px) scaleX(0.98) scaleY(0.9) translateZ(0);
    opacity: 0.75;
  }
  57% {
    transform: translateY(0px) scaleX(1) scaleY(0.7) translateZ(0);
    opacity: 0.9;
  }
  60% {
    transform: translateY(18px) scaleX(1.02) scaleY(0.5) translateZ(0);
    opacity: 1;
  }
  63% {
    transform: translateY(30px) scaleX(1.06) scaleY(0.35) translateZ(0);
    opacity: 0.9;
  }
  65% {
    transform: translateY(32px) scaleX(1.08) scaleY(0.3) translateZ(0);
    opacity: 0.75;
  }
  68% {
    transform: translateY(28px) scaleX(1.06) scaleY(0.35) translateZ(0);
    opacity: 0.5;
  }
  71% {
    transform: translateY(20px) scaleX(1.04) scaleY(0.4) translateZ(0);
    opacity: 0.25;
  }
  74% {
    transform: translateY(10px) scaleX(1.02) scaleY(0.5) translateZ(0);
    opacity: 0.1;
  }
  77%, 100% {
    transform: translateY(-45px) scaleX(0.96) scaleY(1) translateZ(0);
    opacity: 0;
  }
}

/* wave-wash-2: uses different duration, clip-path, and heights */
.wave-wash-2::before {
  animation-name: wave-crash;
  animation-duration: var(--dur-wave-wash-2);
  height: 30px;
  clip-path: polygon(
    0% 28%, 8% 42%, 17% 18%, 25% 38%, 33% 22%, 42% 45%,
    50% 20%, 58% 40%, 67% 25%, 75% 48%, 83% 22%, 92% 38%, 100% 30%,
    100% 100%, 0% 100%
  );
}

.wave-wash-2::after {
  animation-name: wave-crash;
  animation-duration: var(--dur-wave-wash-2);
  opacity: 0.4;
  height: 35px;
}

.wave-wash-2 .wave-wash-edge {
  animation-name: wave-crash;
  animation-duration: var(--dur-wave-wash-2);
  opacity: calc(var(--wave-opacity) * var(--wave-wash-intensity));
}

/* wave-wash-3: uses different duration, timing function, clip-path, heights, and has mask-image */
.wave-wash-3::before,
.wave-wash-3::after,
.wave-wash-3 .wave-wash-edge {
  animation-name: wave-crash;
  animation-duration: var(--dur-wave-wash-3);
  animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
}

.wave-wash-3::before {
  height: 25px;
  clip-path: polygon(
    0% 32%, 10% 20%, 20% 42%, 30% 22%, 40% 38%, 50% 18%,
    60% 40%, 70% 25%, 80% 42%, 90% 20%, 100% 35%,
    100% 100%, 0% 100%
  );
  -webkit-mask-image:
    radial-gradient(ellipse 22% 100% at 25% 50%, white 0%, rgba(255,255,255,0.75) 100%),
    radial-gradient(ellipse 28% 100% at 55% 50%, white 0%, rgba(255,255,255,0.8) 100%),
    radial-gradient(ellipse 20% 100% at 82% 50%, white 0%, rgba(255,255,255,0.78) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.85) 0%, white 50%, rgba(255,255,255,0.82) 100%);
  mask-image:
    radial-gradient(ellipse 22% 100% at 25% 50%, white 0%, rgba(255,255,255,0.75) 100%),
    radial-gradient(ellipse 28% 100% at 55% 50%, white 0%, rgba(255,255,255,0.8) 100%),
    radial-gradient(ellipse 20% 100% at 82% 50%, white 0%, rgba(255,255,255,0.78) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.85) 0%, white 50%, rgba(255,255,255,0.82) 100%);
}

.wave-wash-3::after {
  opacity: 0.4;
}

.wave-wash-3 .wave-wash-edge {
  opacity: calc(var(--wave-opacity) * var(--wave-wash-intensity));
}

/* ============================================
   BACKWASH
   ============================================ */

.backwash {
  position: absolute;
  top: 84%;
  left: 0;
  right: 0;
  height: 10%;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.backwash::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.4) 0%,
    rgba(255,255,255,0.25) 15%,
    rgba(255,255,255,0.12) 35%,
    rgba(255,255,255,0.05) 55%,
    transparent 80%
  );
  clip-path: polygon(
    0% 22%, 3% 35%, 7% 18%, 11% 32%, 15% 25%, 19% 40%, 23% 20%,
    27% 35%, 31% 28%, 35% 42%, 39% 22%, 43% 38%, 47% 25%,
    51% 40%, 55% 30%, 59% 45%, 63% 22%, 67% 35%, 71% 28%,
    75% 42%, 79% 25%, 83% 38%, 87% 20%, 91% 35%, 95% 28%, 100% 38%,
    100% 100%, 0% 100%
  );
  animation: backwash-recede var(--dur-backwash-recede) ease-in-out infinite;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.backwash::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15px;
  background:
    radial-gradient(ellipse 30px 8px at 5% 50%, rgba(255,255,255,0.7) 0%, transparent 60%),
    radial-gradient(ellipse 45px 10px at 18% 40%, rgba(255,255,255,0.65) 0%, transparent 55%),
    radial-gradient(ellipse 25px 7px at 32% 55%, rgba(255,255,255,0.7) 0%, transparent 60%),
    radial-gradient(ellipse 50px 11px at 48% 45%, rgba(255,255,255,0.65) 0%, transparent 55%),
    radial-gradient(ellipse 35px 9px at 65% 50%, rgba(255,255,255,0.7) 0%, transparent 60%),
    radial-gradient(ellipse 40px 10px at 82% 42%, rgba(255,255,255,0.65) 0%, transparent 55%),
    radial-gradient(ellipse 28px 7px at 95% 52%, rgba(255,255,255,0.7) 0%, transparent 60%),
    linear-gradient(to bottom, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  animation: backwash-edge var(--dur-backwash-edge) cubic-bezier(0.35, 0, 0.65, 1) infinite;
}

@keyframes backwash-recede {
  0%, 62% {
    transform: translateY(-15px) scaleY(0.5) scaleX(0.98) translateZ(0);
    opacity: 0;
  }
  65% {
    transform: translateY(8px) scaleY(0.3) scaleX(1.02) translateZ(0);
    opacity: 0.5;
  }
  68% {
    transform: translateY(18px) scaleY(0.25) scaleX(1.05) translateZ(0);
    opacity: 0.7;
  }
  72% {
    transform: translateY(15px) scaleY(0.3) scaleX(1.04) translateZ(0);
    opacity: 0.5;
  }
  76% {
    transform: translateY(10px) scaleY(0.35) scaleX(1.02) translateZ(0);
    opacity: 0.3;
  }
  80% {
    transform: translateY(5px) scaleY(0.4) scaleX(1) translateZ(0);
    opacity: 0.12;
  }
  84%, 100% {
    transform: translateY(-15px) scaleY(0.5) scaleX(0.98) translateZ(0);
    opacity: 0;
  }
}

@keyframes backwash-edge {
  0%, 62% {
    transform: translateY(-25px) translateZ(0);
    opacity: 0;
  }
  65% {
    transform: translateY(8px) translateZ(0);
    opacity: 0.5;
  }
  68% {
    transform: translateY(18px) translateZ(0);
    opacity: 0.8;
  }
  72% {
    transform: translateY(15px) translateZ(0);
    opacity: 0.6;
  }
  76% {
    transform: translateY(8px) translateZ(0);
    opacity: 0.3;
  }
  80% {
    transform: translateY(2px) translateZ(0);
    opacity: 0.1;
  }
  84%, 100% {
    transform: translateY(-25px) translateZ(0);
    opacity: 0;
  }
}

/* ============================================
   SAND
   ============================================ */

.sand {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18%;
  contain: layout paint;
  background-color: var(--sand);
  z-index: 1;
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,25 C50,20 100,35 150,28 C200,21 250,32 300,26 C350,20 400,33 450,27 C500,21 550,30 600,24 C650,18 700,32 750,25 C800,18 850,30 900,23 C950,16 980,28 1000,22 L1000,100 L0,100 Z' fill='white'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,25 C50,20 100,35 150,28 C200,21 250,32 300,26 C350,20 400,33 450,27 C500,21 550,30 600,24 C650,18 700,32 750,25 C800,18 850,30 900,23 C950,16 980,28 1000,22 L1000,100 L0,100 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-image:
    /* Large grains/pebbles (sparse accents) */
    radial-gradient(circle at 12% 34%, rgba(120,100,80,0.18) 1.3px, transparent 1.3px),
    radial-gradient(circle at 78% 67%, rgba(125,105,85,0.15) 1.1px, transparent 1.1px),
    radial-gradient(circle at 45% 89%, rgba(115,95,75,0.12) 1.4px, transparent 1.4px),
    /* Medium grains (visible individual grains) */
    radial-gradient(circle at 23% 56%, rgba(139,119,101,0.16) 0.85px, transparent 0.85px),
    radial-gradient(circle at 67% 23%, rgba(145,125,105,0.14) 0.75px, transparent 0.75px),
    radial-gradient(circle at 89% 78%, rgba(135,115,95,0.15) 0.9px, transparent 0.9px),
    radial-gradient(circle at 34% 12%, rgba(142,122,102,0.13) 0.7px, transparent 0.7px),
    radial-gradient(circle at 56% 45%, rgba(138,118,98,0.14) 0.8px, transparent 0.8px),
    radial-gradient(circle at 91% 34%, rgba(140,120,100,0.12) 0.65px, transparent 0.65px),
    /* Small grains (primary texture) */
    radial-gradient(circle at 15% 25%, rgba(139,119,101,0.15) 0.55px, transparent 0.55px),
    radial-gradient(circle at 67% 43%, rgba(143,123,103,0.11) 0.45px, transparent 0.45px),
    radial-gradient(circle at 34% 78%, rgba(137,117,97,0.13) 0.5px, transparent 0.5px),
    radial-gradient(circle at 82% 12%, rgba(141,121,101,0.1) 0.4px, transparent 0.4px),
    radial-gradient(circle at 45% 55%, rgba(139,119,99,0.14) 0.52px, transparent 0.52px),
    radial-gradient(circle at 28% 38%, rgba(144,124,104,0.12) 0.48px, transparent 0.48px),
    radial-gradient(circle at 73% 68%, rgba(136,116,96,0.13) 0.53px, transparent 0.53px),
    radial-gradient(circle at 58% 22%, rgba(140,120,100,0.11) 0.42px, transparent 0.42px),
    /* Color variation patches - warm tones */
    radial-gradient(ellipse 40% 30% at 25% 60%, rgba(160,135,100,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 35% 45% at 70% 40%, rgba(155,130,95,0.05) 0%, transparent 65%),
    /* Color variation patches - cool tones */
    radial-gradient(ellipse 30% 35% at 50% 75%, rgba(125,115,105,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 45% 25% at 85% 55%, rgba(120,110,100,0.04) 0%, transparent 55%),
    /* Shadow patches (inter-grain shadows) */
    radial-gradient(ellipse 25% 20% at 35% 45%, rgba(90,75,60,0.04) 0%, transparent 50%),
    radial-gradient(ellipse 20% 30% at 65% 70%, rgba(85,70,55,0.035) 0%, transparent 45%);
  background-size:
    /* Large grains - prime number sizes */
    307px 317px, 331px 293px, 353px 337px,
    /* Medium grains */
    151px 167px, 173px 191px, 197px 181px, 157px 199px, 211px 223px, 163px 179px,
    /* Small grains */
    127px 139px, 149px 157px, 167px 173px, 131px 149px, 179px 181px, 137px 163px, 191px 199px, 151px 167px,
    /* Color patches - larger areas */
    401px 389px, 433px 421px,
    /* Cool patches */
    379px 397px, 409px 383px,
    /* Shadow patches */
    251px 263px, 277px 241px;
  /* Sand grain filters + edge distortion for organic boundary */
  filter: url(#sand-edge-distort) url(#sand-grain) url(#sand-texture);
}

.sand::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 70px;
  background:
    /* Mottled wetness patches - darker near waterline */
    radial-gradient(ellipse 25% 60% at 8% 25%, rgba(120,105,80,0.7) 0%, transparent 70%),
    radial-gradient(ellipse 18% 45% at 22% 35%, rgba(125,110,85,0.6) 0%, transparent 65%),
    radial-gradient(ellipse 30% 55% at 38% 22%, rgba(118,103,78,0.65) 0%, transparent 68%),
    radial-gradient(ellipse 22% 50% at 55% 30%, rgba(122,107,82,0.62) 0%, transparent 66%),
    radial-gradient(ellipse 28% 58% at 72% 25%, rgba(120,105,80,0.68) 0%, transparent 70%),
    radial-gradient(ellipse 20% 48% at 88% 32%, rgba(124,109,84,0.58) 0%, transparent 64%),
    /* Mid-wet zone patches */
    radial-gradient(ellipse 35% 40% at 15% 55%, rgba(140,125,100,0.5) 0%, transparent 60%),
    radial-gradient(ellipse 28% 35% at 42% 52%, rgba(145,130,105,0.45) 0%, transparent 55%),
    radial-gradient(ellipse 32% 42% at 68% 58%, rgba(138,123,98,0.48) 0%, transparent 58%),
    radial-gradient(ellipse 26% 38% at 92% 50%, rgba(142,127,102,0.42) 0%, transparent 52%),
    /* Drying edge - lighter, more transparent */
    radial-gradient(ellipse 40% 30% at 25% 78%, rgba(160,145,120,0.3) 0%, transparent 50%),
    radial-gradient(ellipse 35% 28% at 58% 82%, rgba(158,143,118,0.28) 0%, transparent 48%),
    radial-gradient(ellipse 38% 32% at 82% 75%, rgba(162,147,122,0.32) 0%, transparent 52%),
    /* Base gradient for overall wet-to-dry transition */
    linear-gradient(180deg,
      rgba(130,115,90,0.75) 0%,
      rgba(145,130,105,0.55) 30%,
      rgba(160,145,120,0.35) 60%,
      rgba(170,155,130,0.15) 85%,
      transparent 100%
    );
  /* Smooth curved top edge for wet sand area */
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,22 C80,18 160,28 240,22 C320,16 400,26 480,20 C560,14 640,25 720,19 C800,13 880,24 960,18 L1000,20 L1000,100 L0,100 Z' fill='white'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,22 C80,18 160,28 240,22 C320,16 400,26 480,20 C560,14 640,25 720,19 C800,13 880,24 960,18 L1000,20 L1000,100 L0,100 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter: url(#sand-edge-distort);
  animation: wet-sand var(--dur-wet-sand) ease-in-out infinite;
}

@keyframes wet-sand {
  0%, 62% {
    opacity: 0;
    transform: translateY(-30px) scaleY(0.5) translateZ(0);
  }
  66% {
    opacity: 0.5;
    transform: translateY(5px) scaleY(0.85) translateZ(0);
  }
  70% {
    opacity: 1;
    transform: translateY(20px) scaleY(1) translateZ(0);
  }
  76% {
    opacity: 0.7;
    transform: translateY(15px) scaleY(0.95) translateZ(0);
  }
  82% {
    opacity: 0.3;
    transform: translateY(10px) scaleY(0.9) translateZ(0);
  }
  88%, 100% {
    opacity: 0;
    transform: translateY(-30px) scaleY(0.5) translateZ(0);
  }
}

.sand::after {
  content: '';
  position: absolute;
  top: -35px;
  left: 0;
  right: 0;
  height: 90px;
  background-image:
    radial-gradient(ellipse 8% 18% at 1% 28%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.4) 40%, transparent 70%),
    radial-gradient(ellipse 3% 10% at 6% 42%, rgba(255,255,255,0.7) 0%, transparent 65%),
    radial-gradient(ellipse 10% 22% at 14% 22%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.45) 35%, transparent 68%),
    radial-gradient(ellipse 4% 12% at 22% 38%, rgba(255,255,255,0.72) 0%, transparent 62%),
    radial-gradient(ellipse 7% 16% at 30% 30%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.38) 42%, transparent 70%),
    radial-gradient(ellipse 5% 14% at 38% 45%, rgba(255,255,255,0.75) 0%, transparent 64%),
    radial-gradient(ellipse 9% 20% at 47% 24%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.42) 38%, transparent 68%),
    radial-gradient(ellipse 3% 10% at 55% 40%, rgba(255,255,255,0.68) 0%, transparent 65%),
    radial-gradient(ellipse 8% 18% at 63% 28%, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.4) 40%, transparent 70%),
    radial-gradient(ellipse 4% 12% at 72% 42%, rgba(255,255,255,0.74) 0%, transparent 63%),
    radial-gradient(ellipse 10% 22% at 80% 26%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.44) 36%, transparent 68%),
    radial-gradient(ellipse 5% 14% at 88% 38%, rgba(255,255,255,0.78) 0%, transparent 64%),
    radial-gradient(ellipse 6% 15% at 96% 32%, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.35) 45%, transparent 72%),
    radial-gradient(ellipse 0.4% 3% at 4% 55%, rgba(255,255,255,0.6) 0%, transparent 70%),
    radial-gradient(ellipse 0.5% 4% at 18% 58%, rgba(255,255,255,0.55) 0%, transparent 72%),
    radial-gradient(ellipse 0.4% 3% at 33% 52%, rgba(255,255,255,0.58) 0%, transparent 70%),
    radial-gradient(ellipse 0.5% 4% at 50% 56%, rgba(255,255,255,0.52) 0%, transparent 72%),
    radial-gradient(ellipse 0.4% 3% at 67% 54%, rgba(255,255,255,0.56) 0%, transparent 70%),
    radial-gradient(ellipse 0.5% 4% at 82% 58%, rgba(255,255,255,0.54) 0%, transparent 72%),
    radial-gradient(ellipse 0.4% 3% at 94% 52%, rgba(255,255,255,0.58) 0%, transparent 70%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image:
    radial-gradient(ellipse 20% 100% at 12% 50%, white 0%, rgba(255,255,255,0.7) 100%),
    radial-gradient(ellipse 25% 100% at 40% 50%, white 0%, rgba(255,255,255,0.8) 100%),
    radial-gradient(ellipse 22% 100% at 68% 50%, white 0%, rgba(255,255,255,0.75) 100%),
    radial-gradient(ellipse 18% 100% at 90% 50%, white 0%, rgba(255,255,255,0.72) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.8) 0%, white 30%, rgba(255,255,255,0.9) 50%, white 70%, rgba(255,255,255,0.85) 100%);
  mask-image:
    radial-gradient(ellipse 20% 100% at 12% 50%, white 0%, rgba(255,255,255,0.7) 100%),
    radial-gradient(ellipse 25% 100% at 40% 50%, white 0%, rgba(255,255,255,0.8) 100%),
    radial-gradient(ellipse 22% 100% at 68% 50%, white 0%, rgba(255,255,255,0.75) 100%),
    radial-gradient(ellipse 18% 100% at 90% 50%, white 0%, rgba(255,255,255,0.72) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.8) 0%, white 30%, rgba(255,255,255,0.9) 50%, white 70%, rgba(255,255,255,0.85) 100%);
  animation: foam-residue var(--dur-foam-residue) cubic-bezier(0.35, 0, 0.65, 1) infinite;
  z-index: 8;
}

@keyframes foam-residue {
  0%, 62% {
    transform: translateY(-20px) translateZ(0);
    opacity: 0;
  }
  66% {
    transform: translateY(5px) translateZ(0);
    opacity: 0.5;
  }
  70% {
    transform: translateY(18px) translateZ(0);
    opacity: 0.8;
  }
  76% {
    transform: translateY(20px) translateZ(0);
    opacity: 0.6;
  }
  82% {
    transform: translateY(16px) translateZ(0);
    opacity: 0.25;
  }
  88%, 100% {
    transform: translateY(-20px) translateZ(0);
    opacity: 0;
  }
}

/* Specular highlights */
.sand-sparkle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
  background-image:
    /* Bright sparkle points */
    radial-gradient(circle at 8% 35%, rgba(255,255,255,0.9) 0.4px, transparent 0.6px),
    radial-gradient(circle at 15% 58%, rgba(255,255,255,0.85) 0.35px, transparent 0.55px),
    radial-gradient(circle at 23% 42%, rgba(255,255,255,0.95) 0.45px, transparent 0.65px),
    radial-gradient(circle at 31% 68%, rgba(255,255,255,0.8) 0.3px, transparent 0.5px),
    radial-gradient(circle at 38% 28%, rgba(255,255,255,0.88) 0.4px, transparent 0.6px),
    radial-gradient(circle at 45% 52%, rgba(255,255,255,0.92) 0.38px, transparent 0.58px),
    radial-gradient(circle at 52% 38%, rgba(255,255,255,0.87) 0.42px, transparent 0.62px),
    radial-gradient(circle at 58% 72%, rgba(255,255,255,0.82) 0.32px, transparent 0.52px),
    radial-gradient(circle at 65% 45%, rgba(255,255,255,0.9) 0.4px, transparent 0.6px),
    radial-gradient(circle at 72% 62%, rgba(255,255,255,0.86) 0.36px, transparent 0.56px),
    radial-gradient(circle at 78% 32%, rgba(255,255,255,0.94) 0.44px, transparent 0.64px),
    radial-gradient(circle at 85% 55%, rgba(255,255,255,0.83) 0.34px, transparent 0.54px),
    radial-gradient(circle at 92% 48%, rgba(255,255,255,0.88) 0.4px, transparent 0.6px),
    /* Subtle glints */
    radial-gradient(circle at 12% 75%, rgba(255,255,255,0.6) 0.25px, transparent 0.4px),
    radial-gradient(circle at 28% 82%, rgba(255,255,255,0.55) 0.22px, transparent 0.38px),
    radial-gradient(circle at 42% 78%, rgba(255,255,255,0.62) 0.28px, transparent 0.42px),
    radial-gradient(circle at 56% 85%, rgba(255,255,255,0.58) 0.24px, transparent 0.4px),
    radial-gradient(circle at 68% 80%, rgba(255,255,255,0.6) 0.26px, transparent 0.42px),
    radial-gradient(circle at 82% 76%, rgba(255,255,255,0.56) 0.23px, transparent 0.38px);
  background-size:
    89px 97px, 103px 109px, 127px 131px, 137px 149px, 151px 157px,
    163px 167px, 173px 179px, 181px 191px, 193px 197px, 199px 211px,
    223px 227px, 229px 233px, 239px 241px,
    113px 127px, 139px 151px, 167px 173px, 191px 197px, 211px 223px, 227px 239px;
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at var(--glitter-x) 30%,
    rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.15) 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 100% at var(--glitter-x) 30%,
    rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.15) 70%, transparent 100%);
  opacity: calc(var(--glitter-intensity) * 0.7);
  pointer-events: none;
  z-index: 2;
  animation: sparkle-shimmer 4s ease-in-out infinite;
}

@keyframes sparkle-shimmer {
  0%, 100% { opacity: calc(var(--glitter-intensity) * 0.6); }
  25% { opacity: calc(var(--glitter-intensity) * 0.8); }
  50% { opacity: calc(var(--glitter-intensity) * 0.55); }
  75% { opacity: calc(var(--glitter-intensity) * 0.75); }
}

/* ============================================
   BROWSER FALLBACK
   For browsers that don't support color-mix()
   ============================================ */

@supports not (color: color-mix(in oklab, red, blue)) {
  :root {
    /* Static midday colors as fallback */
    --sky-top: #87CEEB;
    --sky-mid: #A5DDF2;
    --sky-bottom: #E0F6FF;
    --sand: #E8DCC4;
    --water-deep: #1E4D6B;
    --water-light: #5BA3C0;
    --horizon-glow: transparent;
    --horizon-glow-opacity: 0;
    --stars-opacity: 0;
    --birds-opacity: 1;
    --wave-wash-intensity: 1;
    --wave-wash-shadow: rgba(40, 100, 130, 0.35);
    --wave-wash-tint: rgba(50, 140, 175, 0.55);
    --haze-opacity: 0.8;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .sun, .moon, .water, .water-far, .water-mid, .water-near, .star { animation: none; }
  .bird, .bird::before, .bird::after { animation: none; }
  .sky::after, .sky-atmosphere { animation: none; filter: none; }
  .bird::before { transform: rotate(-15deg); }
  .bird::after { transform: rotate(15deg); }
  .water-far, .water-mid, .water-near { filter: none; }

  .wave-wash,
  .wave-wash-2,
  .wave-wash-3 {
    animation: none;
  }

  .wave-wash::before,
  .wave-wash::after,
  .wave-wash-2::before,
  .wave-wash-2::after,
  .wave-wash-3::before,
  .wave-wash-3::after,
  .wave-wash-edge {
    animation: none;
    transform: translateY(20px);
    opacity: 0.7;
  }

  .backwash::before,
  .backwash::after {
    animation: none;
    transform: translateY(12px);
    opacity: 0.4;
  }

  .sand::before {
    animation: none;
    opacity: 0.5;
    transform: translateY(10px);
  }

  .sand::after {
    animation: none;
    transform: translateY(8px);
    opacity: 0.4;
  }

  .beach { transition: none; }
}

/* ============================================
   FIREFOX GPU OPTIMIZATIONS
   Firefox needs extra hints for GPU compositing
   ============================================ */

/* Add will-change: filter to elements using SVG filters */
.water-far,
.water-mid,
.water-near {
  will-change: background-position, filter;
}

.wave-wash {
  will-change: transform, opacity, filter;
}

.sand {
  will-change: filter;
  contain: strict;
}

/* Force GPU layers for pseudo-elements with filters */
.wave-wash::before,
.wave-wash::after {
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}

.sand::before,
.sand::after {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Firefox-specific: Use @supports to detect and optimize */
@supports (-moz-appearance: none) {
  /* Reduce filter complexity on sand for Firefox */
  .sand {
    filter: url(#sand-grain);
  }

  /* Simpler containment model for wave elements */
  .wave-wash,
  .wave-wash-2,
  .wave-wash-3 {
    contain: layout style;
  }

  /* Force compositor layers more aggressively */
  .water::before,
  .water::after,
  .whitecap,
  .backwash::before,
  .backwash::after {
    transform: translate3d(0, 0, 0);
  }

  /* Reduce paint area for filtered elements */
  .water-far,
  .water-mid,
  .water-near {
    contain: layout paint style;
  }
}

/* ============================================
   ANDROID / MOBILE GPU OPTIMIZATIONS
   Touch devices with weaker GPUs need lighter effects
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  /* Force GPU layers with webkit prefixes for older Android WebView */
  .sun,
  .moon,
  .bird,
  .star,
  .plane,
  .whitecap {
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
  }

  /* Reduce box-shadow layers on sun (6 -> 3) */
  .sun {
    box-shadow:
      0 0 15px 5px rgba(255,255,255,0.9),
      0 0 50px 20px rgba(255,250,240,0.5),
      0 0 120px 50px rgba(255,220,180,0.2);
  }

  /* Reduce moon glow layers */
  .moon {
    box-shadow:
      0 0 20px 8px rgba(200, 210, 230, 0.6),
      0 0 60px 25px rgba(180, 195, 220, 0.25);
  }

  /* Reduce blur on mobile for better GPU performance */
  .sun::before {
    filter: blur(30px);
  }
  .sun::after {
    filter: blur(50px);
  }
  .moon::before {
    filter: blur(20px);
  }

  /* Simplify sand filters - most expensive on mobile */
  .sand {
    filter: url(#sand-grain);
  }

  .sand::before {
    filter: none;
  }

  /* Reduce wave line layers */
  .water-far {
    background-image:
      repeating-linear-gradient(179deg, transparent 0px, transparent 45px, rgba(255,255,255,0.25) 45px, rgba(255,255,255,0.18) 46px, transparent 46.5px, transparent 65px);
  }

  .water-mid {
    background-image:
      repeating-linear-gradient(179deg, transparent 0px, transparent 22px, rgba(255,255,255,0.35) 22px, rgba(255,255,255,0.25) 23px, transparent 23.5px, transparent 38px);
  }

  .water-near {
    background-image:
      repeating-linear-gradient(179deg, transparent 0px, transparent 10px, rgba(255,255,255,0.45) 10px, rgba(255,255,255,0.32) 11px, transparent 11.5px, transparent 18px);
  }

  /* Reduce whitecap filter complexity */
  .whitecap {
    filter: none;
  }

  /* Simpler wave wash - remove drop-shadow filter */
  .wave-wash::before {
    filter: url(#foam-texture);
  }

  /* Reduce glitter sparkle points */
  .water::before {
    background-image:
      radial-gradient(circle 2px at 15% 6%, rgba(255,235,200,0.9) 0%, transparent 100%),
      radial-gradient(circle 2px at 35% 4%, rgba(255,235,200,0.85) 0%, transparent 100%),
      radial-gradient(circle 2px at 50% 8%, rgba(255,235,200,0.95) 0%, transparent 100%),
      radial-gradient(circle 2px at 65% 5%, rgba(255,235,200,0.9) 0%, transparent 100%),
      radial-gradient(circle 2px at 85% 7%, rgba(255,235,200,0.85) 0%, transparent 100%);
    background-size: 150px 100px;
  }

  /* Reduce reflection complexity */
  .water::after {
    background:
      radial-gradient(ellipse 30px 5px at 50% 8%, rgba(255,245,220,0.75) 0%, transparent 100%),
      radial-gradient(ellipse 25px 4px at 45% 20%, rgba(255,240,210,0.6) 0%, transparent 100%),
      radial-gradient(ellipse 30px 4px at 55% 35%, rgba(255,235,200,0.45) 0%, transparent 100%),
      radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255,240,210,0.2) 0%, transparent 60%);
  }

  /* Reduce sand sparkle complexity */
  .sand-sparkle {
    background-image:
      radial-gradient(circle at 15% 40%, rgba(255,255,255,0.85) 0.4px, transparent 0.6px),
      radial-gradient(circle at 35% 55%, rgba(255,255,255,0.9) 0.4px, transparent 0.6px),
      radial-gradient(circle at 55% 45%, rgba(255,255,255,0.85) 0.4px, transparent 0.6px),
      radial-gradient(circle at 75% 60%, rgba(255,255,255,0.9) 0.4px, transparent 0.6px),
      radial-gradient(circle at 90% 50%, rgba(255,255,255,0.85) 0.4px, transparent 0.6px);
    background-size: 120px 100px;
  }

  /* Use content-visibility for off-screen optimization */
  .stars,
  .birds {
    content-visibility: auto;
  }
}