/* ============================================================
   hero-scene.css — bright cel-shaded beach backdrop.

   BAND GEOMETRY (the thing that makes it read as a beach).
   All offsets measured from the top of .hero-scene:

     0        ┌──────────────────┐
              │      SKY         │  gradient + fluffy clouds
     --horizon├──────────────────┤  ← distant headlands sit here
              │      SEA         │  depth gradient: deep at the
              │                  │    horizon → pale near shore
     --shore  ├──────────────────┤  ← animated surf straddles this
              │   WET SAND       │
              │   DRY SAND       │  hourglass + puzzles sit here
     bottom   └──────────────────┘

   Content in .hero-content is tuned so the hourglass BASE lands
   on --shore. Change one, check the other.
   ============================================================ */

/* Band offsets (--scene-h, --horizon, --shore, --surf-h) are
   defined on .screen--landing in landing.css and INHERITED here,
   so the backdrop and the content stack always agree.
   Do not redeclare them in this file. */
.hero-scene {
  position: absolute;
  inset: 0;
  height: var(--scene-h);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* ---------- SKY ---------- */
.hero-scene__sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--shore);
  background: linear-gradient(180deg,
    var(--scene-sky-top) 0%,
    var(--scene-sky-mid) 55%,
    var(--scene-sky-bot) 100%);
}

/* ---------- NIGHT SKY — moon + stars, dark mode only ----------
   Built from CSS circles rather than SVG. The scene SVGs use
   preserveAspectRatio="none" to stretch across any viewport,
   which turns a <circle> into an oblong at every width but one —
   a moon has to stay round, so it lives here instead.
   The colors are `transparent` by day, so the layer cannot leak
   into the daytime sky even mid-transition. --- */
.hero-scene__night {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--horizon);
  z-index: 1;
  pointer-events: none;
}

.night-moon {
  position: absolute;
  right: 16%;
  top: 22%;
  width: 78px;
  height: 78px;          /* square + 50% radius = always round */
  border-radius: 50%;
  background: var(--scene-moon);
  box-shadow:
    0 0 0 16px var(--scene-moon-glow),
    0 0 70px 26px var(--scene-moon-glow);
}
/* Craters */
.night-moon::before,
.night-moon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--scene-moon-crater);
}
.night-moon::before { width: 16px; height: 16px; top: 22%; left: 20%; opacity: 0.55; }
.night-moon::after  { width: 10px; height: 10px; top: 55%; left: 56%; opacity: 0.45; }

.night-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--scene-star-dot);
  animation: twinkle 4s ease-in-out infinite;
}
.night-star:nth-of-type(3n)   { animation-delay: -1.3s; }
.night-star:nth-of-type(4n+1) { animation-delay: -2.6s; }

@media (max-width: 820px) {
  .night-moon { width: 54px; height: 54px; right: 12%; }
  .night-moon::before { width: 11px; height: 11px; }
  .night-moon::after  { width: 7px;  height: 7px; }
}

/* ---------- SEA — depth gradient, deep at horizon → pale at shore ---------- */
.hero-scene__sea {
  position: absolute;
  left: 0; right: 0;
  top: var(--horizon);
  height: calc(var(--shore) - var(--horizon));
  z-index: 3;
  background: linear-gradient(180deg,
    var(--scene-sea-deep)    0%,
    var(--scene-sea-mid)    26%,
    var(--scene-water-3)    52%,
    var(--scene-water-1)    78%,
    var(--scene-sea-shallow) 100%);
}
/* Thin white shimmer strokes for surface reflection */
.sea-shimmer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sea-shimmer svg { width: 100%; height: 100%; display: block; }

/* ---------- SURF — animated wave layers straddling the shore ---------- */
.hero-scene__surf {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--shore) - var(--surf-h) + 26px);
  height: var(--surf-h);
  overflow: hidden;
  z-index: 4;
  animation: oceanBreathe 5s ease-in-out infinite;
  will-change: transform;
}

/* ---------- SAND ---------- */
.hero-scene__sand {
  position: absolute;
  left: 0; right: 0;
  top: var(--shore);
  bottom: 0;
  z-index: 3;
  background: linear-gradient(180deg,
    var(--scene-sand-wet) 0%,
    var(--scene-sand-top) 22%,
    var(--scene-sand-bot) 100%);
}
/* Fine speckle texture */
.hero-scene__sand::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, var(--scene-sand-dark) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 34% 48%, var(--scene-sand-dark) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 30%, var(--scene-sand-dark) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 76% 62%, var(--scene-sand-dark) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 38%, var(--scene-sand-dark) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 20% 72%, var(--scene-sand-dark) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 45% 84%, var(--scene-sand-dark) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 65% 14%, var(--scene-sand-dark) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 88%, var(--scene-sand-dark) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 5%  56%, var(--scene-sand-dark) 50%, transparent 51%);
  background-size: 340px 220px;
  opacity: 0.30;
}

/* ---------- PALM FRONDS hanging in from the top corners ---------- */
.palm-frond {
  position: absolute;
  top: -26px;
  z-index: 6;
  width: 330px;
  max-width: none;
  transform-origin: 12% 6%;
  animation: palmSway 9s ease-in-out infinite;
  filter: drop-shadow(0 8px 14px rgba(20, 50, 20, 0.18));
}
.palm-frond--left  { left: -56px; }
.palm-frond--right { right: -56px; transform: scaleX(-1); transform-origin: 88% 6%; }
/* Second, smaller frond per corner for density */
.palm-frond--left-2 {
  left: -20px; top: -60px; width: 240px;
  transform: rotate(26deg);
  animation-duration: 11s;
  opacity: 0.95;
}
.palm-frond--right-2 {
  right: -20px; top: -60px; width: 250px;
  transform: scaleX(-1) rotate(26deg);
  transform-origin: 88% 6%;
  animation-duration: 11s;
  opacity: 0.95;
}

/* ---------- BEACH ACCENTS on the dry sand ---------- */
.hero-accents {
  position: absolute;
  left: 0; right: 0;
  top: var(--shore);
  bottom: 0;
  z-index: 5;
}
.hero-accent { position: absolute; max-width: none; }
.hero-accent--starfish { left: 6%;  top: 34%; width: 74px; transform: rotate(-16deg); }
.hero-accent--shell    { left: 88%; top: 26%; width: 62px; transform: rotate(20deg); }
.hero-accent--crab     { left: 79%; top: 60%; width: 76px; }

/* ============================================================
   Responsive — only sizes owned by this file. The band offsets
   themselves are stepped down in landing.css so the scene and
   the content stack shrink together.
   ============================================================ */
@media (max-width: 1100px) {
  .palm-frond { width: 270px; }
  .palm-frond--left-2, .palm-frond--right-2 { width: 200px; }
}
@media (max-width: 820px) {
  .palm-frond { width: 200px; top: -18px; }
  .palm-frond--left-2, .palm-frond--right-2 { display: none; }
  .hero-accent--starfish { width: 52px; }
  .hero-accent--shell    { width: 44px; }
  .hero-accent--crab     { width: 54px; }
}
@media (max-width: 480px) {
  .palm-frond { width: 150px; }
  .hero-accent--shell { display: none; }
  .hero-accent--starfish { width: 40px; top: 26%; }
  .hero-accent--crab     { width: 42px; left: 82%; }
}

@media (prefers-reduced-motion: reduce) {
  .palm-frond, .hero-scene__surf, .night-star { animation: none !important; }
}

/* ============================================================
   NIGHT BEACH adjustments.
   The palms, beach accents and puzzle pieces are fixed-palette
   SVG art, so instead of authoring night variants of each we
   dim them optically — the same trick a colorist uses when a
   scene moves to a night pass.
   ============================================================ */
:root[data-theme="dark"] .palm-frond {
  filter: brightness(0.48) saturate(0.75) drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5));
}
:root[data-theme="dark"] .hero-accent {
  filter: brightness(0.62) saturate(0.8);
}
:root[data-theme="dark"] .hero-puzzle {
  filter: brightness(0.78) saturate(0.9) drop-shadow(0 7px 9px rgba(0, 0, 0, 0.55));
}
/* The hourglass is the warmest thing on a night beach — it reads
   as a lantern standing in the sand. */
:root[data-theme="dark"] .lockup__hourglass {
  filter:
    drop-shadow(0 0 26px rgba(255, 186, 92, 0.42))
    drop-shadow(0 14px 20px rgba(0, 0, 0, 0.55));
}
:root[data-theme="dark"] .lockup__hourglass-shadow {
  background: radial-gradient(ellipse 50% 55% at 50% 50%,
    rgba(255, 186, 92, 0.22) 0%,
    rgba(0, 0, 0, 0.35) 55%,
    transparent 72%);
}
:root[data-theme="dark"] .lockup__sand-mound {
  background: radial-gradient(ellipse 50% 100% at 50% 100%,
    var(--scene-sand-top) 0%,
    var(--scene-sand-top) 58%,
    transparent 60%);
}
/* Clouds thin out and cool down at night */