/* ============================================================
   BEACH-BG — reusable animated beach-tide background
   ------------------------------------------------------------
   Usage:
     <div class="beach-bg" data-beach-bg>
       (structure below — or call BeachBG.attach(el))
     </div>

   Tuning — override any CSS custom property on .beach-bg or a parent:
     --tide-speed         (default 14s)  — tide in/out cycle length
     --tide-depth         (default 3.5vh) — how far the foam advances
     --wave-speed-back    (default 26s)  — furthest wave drift
     --wave-speed-mid     (default 18s)
     --wave-speed-front   (default 12s)
     --overlay-strength   (default 0.45) — 0 transparent, 1 opaque
     --overlay-color      (default 26,46,59) — navy by default (R,G,B)
     --sky-top            gradient top
     --sky-bottom         gradient bottom (horizon)
     --water-top          water near horizon
     --water-bottom       water near shore
     --sand               dry sand color
     --wet-sand           darker sand color where surf reaches
     --foam               foam line color
     --sand-height        how tall the sand band is (default 22%)
     --water-height       how tall the water band is (default 38%)

   Modifiers:
     .beach-bg--dawn      warm pink/peach palette
     .beach-bg--noon      (default) bright midday
     .beach-bg--calm      slower motion, subtle tide
     .beach-bg--lively    faster motion, deeper tide

   Accessibility:
     prefers-reduced-motion → all motion paused, still scene rendered.
   ============================================================ */

.beach-bg {
  /* palette */
  --sky-top:      #bfe3f2;
  --sky-bottom:   #f5ecd0;
  --sun:          rgba(255, 236, 180, 0.55);
  --water-top:    #5a9cb8;
  --water-bottom: #2f6c8a;
  --sand:         #ecd9ae;
  --wet-sand:     #b89864;
  --foam:         #fcfaf3;
  --overlay-color: 26, 46, 59;

  /* proportions */
  --water-height: 38%;
  --sand-height:  22%;

  /* motion */
  --tide-speed:       14s;
  --tide-depth:       3.5vh;
  --wave-speed-back:  26s;
  --wave-speed-mid:   18s;
  --wave-speed-front: 12s;

  /* overlay */
  --overlay-strength: 0.45;

  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate; /* keeps blend modes local */
}

/* --- SKY (top, behind everything) --- */
.beach-bg__sky {
  position: absolute;
  inset: 0 0 calc(var(--water-height) + var(--sand-height)) 0;
  background: linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-bottom) 100%);
  z-index: 0;
}

/* --- SUN (soft warm glow near horizon) --- */
.beach-bg__sun {
  position: absolute;
  top: 8%;
  right: 18%;
  width: 38vmin;
  height: 38vmin;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--sun) 0%, transparent 62%);
  filter: blur(8px);
  z-index: 1;
  animation: beachSunPulse 11s ease-in-out infinite;
}

/* --- HAZE (thin band at horizon) --- */
.beach-bg__haze {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--water-height) + var(--sand-height) - 2%);
  height: 6%;
  background: linear-gradient(to bottom, transparent, rgba(255, 245, 220, 0.38), transparent);
  z-index: 2;
}

/* --- WATER (mid band) --- */
.beach-bg__water {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--sand-height);
  height: var(--water-height);
  background: linear-gradient(to bottom, var(--water-top) 0%, var(--water-bottom) 100%);
  z-index: 3;
  overflow: hidden;
}
/* subtle shimmer on water */
.beach-bg__water::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 14px,
    rgba(255, 255, 255, 0.035) 14px 15px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --- WAVE LAYERS (SVG, drift horizontally) --- */
.beach-bg__wave {
  position: absolute;
  left: 0;
  width: 200%;          /* SVG contains two copies end-to-end → loops seamlessly */
  height: 100%;
  bottom: 0;
  will-change: transform;
}
.beach-bg__wave--back {
  bottom: 0;
  height: 85%;
  opacity: 0.55;
  animation: beachWaveDrift var(--wave-speed-back) linear infinite;
}
.beach-bg__wave--mid {
  bottom: 0;
  height: 60%;
  opacity: 0.7;
  animation: beachWaveDrift var(--wave-speed-mid) linear infinite;
}
.beach-bg__wave--front {
  bottom: -2%;
  height: 35%;
  opacity: 0.9;
  animation: beachWaveDrift var(--wave-speed-front) linear infinite;
}
.beach-bg__wave path { fill: currentColor; }

/* --- FOAM LINE (breathes with tide) --- */
.beach-bg__foam {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--sand-height);
  height: 18px;
  background:
    radial-gradient(ellipse at 20% 50%, var(--foam) 0%, transparent 55%),
    radial-gradient(ellipse at 55% 55%, var(--foam) 0%, transparent 50%),
    radial-gradient(ellipse at 82% 45%, var(--foam) 0%, transparent 58%),
    linear-gradient(to bottom, var(--foam) 0%, transparent 100%);
  filter: blur(1.5px);
  opacity: 0.85;
  z-index: 4;
  animation: beachTideFoam var(--tide-speed) ease-in-out infinite;
  transform-origin: bottom center;
}

/* --- WET SAND (grows/shrinks with tide) --- */
.beach-bg__wet-sand {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: var(--sand-height);
  background: linear-gradient(to bottom, var(--wet-sand) 0%, var(--sand) 60%, var(--sand) 100%);
  z-index: 5;
  animation: beachTideWetSand var(--tide-speed) ease-in-out infinite;
  transform-origin: bottom center;
}

/* --- OVERLAY (for text readability over the scene) --- */
.beach-bg__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(var(--overlay-color), calc(var(--overlay-strength) * 0.6)) 0%,
    rgba(var(--overlay-color), var(--overlay-strength)) 100%
  );
  z-index: 6;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes beachWaveDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes beachTideFoam {
  0%, 100% {
    transform: translateY(0) scaleY(1);
    opacity: 0.80;
  }
  45% {
    transform: translateY(var(--tide-depth)) scaleY(1.08);
    opacity: 0.95;
  }
  55% {
    transform: translateY(var(--tide-depth)) scaleY(1.06);
    opacity: 0.92;
  }
}

@keyframes beachTideWetSand {
  0%, 100% { transform: translateY(0) scaleY(1); }
  45%      { transform: translateY(calc(var(--tide-depth) * -0.25)) scaleY(1.06); }
  55%      { transform: translateY(calc(var(--tide-depth) * -0.25)) scaleY(1.06); }
}

@keyframes beachSunPulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* ============================================================
   MODIFIERS
   ============================================================ */
.beach-bg--dawn {
  --sky-top:      #f2cfa8;
  --sky-bottom:   #fbe1cf;
  --sun:          rgba(255, 200, 140, 0.7);
  --water-top:    #6e8fa5;
  --water-bottom: #324f6c;
}
.beach-bg--calm {
  --tide-speed:       22s;
  --tide-depth:       2vh;
  --wave-speed-back:  34s;
  --wave-speed-mid:   24s;
  --wave-speed-front: 17s;
}
.beach-bg--lively {
  --tide-speed:       10s;
  --tide-depth:       5vh;
  --wave-speed-back:  18s;
  --wave-speed-mid:   13s;
  --wave-speed-front: 9s;
}

/* ============================================================
   MOBILE — gentler motion on small screens (battery/perf)
   ============================================================ */
@media (max-width: 640px) {
  .beach-bg {
    --tide-speed:       18s;
    --tide-depth:       2.5vh;
    --wave-speed-back:  30s;
    --wave-speed-mid:   22s;
    --wave-speed-front: 15s;
    --water-height:     34%;
    --sand-height:      20%;
  }
  .beach-bg__sun { width: 44vmin; height: 44vmin; right: 10%; top: 6%; }
  .beach-bg__water::after { display: none; } /* drop shimmer layer */
}

/* ============================================================
   ACCESSIBILITY — prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .beach-bg__wave,
  .beach-bg__foam,
  .beach-bg__wet-sand,
  .beach-bg__sun,
  .house-bg {
    animation: none !important;
  }
  /* Keep a pleasant static frame — offset waves so the composition still reads */
  .beach-bg__wave--front { transform: translate3d(-18%, 0, 0); }
  .beach-bg__wave--mid   { transform: translate3d(-12%, 0, 0); }
  .beach-bg__wave--back  { transform: translate3d(-6%, 0, 0); }
  .beach-bg__foam        { transform: translateY(calc(var(--tide-depth) * 0.3)); }
}

/* ============================================================
   OPTIONAL — video variant (drop-in replacement)
   ------------------------------------------------------------
   If you later want to swap in a real beach-tide video:
     <div class="beach-bg beach-bg--video">
       <video class="beach-bg__video" autoplay muted loop playsinline>
         <source src="assets/beach-tide.mp4" type="video/mp4">
       </video>
       <div class="beach-bg__overlay"></div>
     </div>
   All tuning vars (--overlay-strength, --overlay-color) still apply.
   ============================================================ */
.beach-bg--video > :not(.beach-bg__video):not(.beach-bg__overlay) {
  display: none;
}
/* Static poster image painted on the container so there's NEVER a
   flash of empty background while the video is downloading. */
.beach-bg--video {
  background-image: url("../assets/beach-static.jpg");
  background-size: cover;
  background-position: center;
}
.beach-bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}