/* Night sea hero scene. Pairs with sea.js. Colors are all tints of the brand tokens in home.css. */

/* Header floats over the scene (hero starts at the very top of the page) */
.top-bar { position: fixed; top: 0; left: 0; right: 0; }

/* Hero content sits above the scene and stays easy to read */
.hero__inner { gap: clamp(20px, 4vw, 56px); }
.hero__logo { width: clamp(110px, 15vw, 230px); }
.hero h1 { font-size: clamp(3.5rem, 9vw, 7rem); text-shadow: 0 2px 28px rgba(2, 7, 13, 0.55); }
.hero__tag { text-shadow: 0 1px 14px rgba(2, 7, 13, 0.7); }
.chip { background: rgba(2, 7, 13, 0.4); }

/* ---------- Scene frame ---------- */
.scene {
  --hz: 60%;   /* horizon height from the top of the hero */
  --mx: 78%;   /* moon (and its reflection) from the left */
  position: absolute;
  inset: 0;
  z-index: -2;   /* below the snow canvas (-1), above the page background */
  overflow: hidden;
  pointer-events: none;
  /* last stretch fades out so the sea melts into the page below */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 84%, transparent 100%);
}
.scene > * { position: absolute; }

/* 1. Sky + haze above the horizon */
.scene__sky {
  inset: 0;
  background:
    radial-gradient(ellipse 60% 16% at var(--mx) var(--hz), rgba(238, 246, 251, 0.12), transparent 70%),
    radial-gradient(ellipse 85% 24% at 55% var(--hz), rgba(0, 167, 245, 0.26), transparent 72%),
    linear-gradient(to bottom, var(--abyss) 0%, #051222 26%, var(--sky) 50%, #0f3352 var(--hz), var(--sea) calc(var(--hz) + 1%), var(--sea) 100%);
}

/* 2. Stars (made by JS) */
.scene__stars { left: 0; right: 0; top: 0; height: var(--hz); }
.star { position: absolute; border-radius: 50%; background: var(--ice); opacity: var(--o, 0.6); }

/* 3. Moon */
.scene__moon {
  left: var(--mx);
  top: 20%;
  width: clamp(70px, 9vw, 130px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 63% 28%, rgba(110, 140, 165, 0.42) 0, rgba(110, 140, 165, 0.2) 6%, transparent 11%),
    radial-gradient(circle at 34% 62%, rgba(110, 140, 165, 0.36) 0, rgba(110, 140, 165, 0.16) 8%, transparent 14%),
    radial-gradient(circle at 70% 70%, rgba(110, 140, 165, 0.34) 0, rgba(110, 140, 165, 0.14) 5%, transparent 9%),
    radial-gradient(circle at 27% 30%, rgba(110, 140, 165, 0.3) 0, rgba(110, 140, 165, 0.12) 4%, transparent 8%),
    radial-gradient(circle at 44% 44%, rgba(110, 140, 165, 0.18) 0, transparent 30%),
    radial-gradient(circle at 40% 36%, #fff 0, var(--ice) 52%, #bdd6e6 100%);
  box-shadow:
    0 0 18px 3px rgba(238, 246, 251, 0.5),
    0 0 60px 16px rgba(0, 167, 245, 0.3),
    0 0 150px 50px rgba(0, 167, 245, 0.14);
}
.scene__moon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 167, 245, 0.16) 0, rgba(0, 167, 245, 0.05) 40%, transparent 70%);
}

/* 4. Clouds: thin soft bands, drawn at double width so the drift loops cleanly */
.cloud { left: 0; top: var(--top); width: 100%; height: var(--h); opacity: 0.24; }
.cloud svg { display: block; width: 200%; height: 100%; }

/* 5. Ship: sits in the water layer (see index.html) between the far waves and the near island,
   so it is in front of the far island and far waves, but behind the near island and the nearest waves.
   sea.js moves it along a path toward the viewer; (0,0) of its transform is the water's top-left. */
.ship {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(56px, 7.5vw, 120px);
  transform-origin: 0 0;
  opacity: 0;
  will-change: transform, opacity;
}
.ship__rock { transform-origin: 50% 85%; }
.ship svg { display: block; width: 100%; height: auto; overflow: visible; }
.ship__wake { opacity: var(--wake, 0); }

/* 6. Islands */
.island svg { display: block; width: 100%; height: auto; overflow: visible; }
/* far island: out in the open water toward the moon, sitting just under the moon, overlapping the near edge of the glitter column.
   Glitter column = moon (78%) +/- half of its width (13vw, capped at 200px), plus a small gap. */
.island--far {
  right: calc(22% + min(1.5vw, 22px));
  width: clamp(180px, 22vw, 380px);
  bottom: calc(100% - var(--hz) - 10px);
}
/* near island: in the foreground water, left side; lives between the 3rd and 4th wave bands so the nearest waves lap over its base */
.island--near {
  position: absolute;
  left: -3vw;
  width: min(clamp(260px, 40vw, 660px), 90svh);
  bottom: 15%;   /* of the water layer; puts the sand base under the 4th wave band */
  /* extra empty room on the left and top so the mask doesn't clip the palm leaves that hang outside the drawing */
  box-sizing: content-box;
  padding: 80px 0 0 60px;
  margin-left: -60px;
  /* soft fade: the right side melts into the waves and the very bottom blends into the water (palms are on the left, untouched) */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 78%, transparent 100%), linear-gradient(to bottom, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 0%, #000 78%, transparent 100%), linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-composite: intersect;
}

/* 8. Waves: five bands, far (slow, pale) to near (fast, dark) */
.scene__water { left: 0; right: 0; top: var(--hz); bottom: 0; }
.wave { position: absolute; left: 0; right: 0; top: var(--t); bottom: -12px; }
.wave__track { display: flex; flex-direction: column; width: max(200%, 2400px); height: 100%; }
.wave svg { display: block; flex: none; width: 100%; height: var(--h); }
.wave path { fill: var(--fill); }
.wave path.crest {
  fill: none;
  stroke: rgba(190, 230, 255, calc(var(--crest) + 0.06));
  stroke-width: 1.6px;
  vector-effect: non-scaling-stroke;
}
.wave__body { flex: 1; background: var(--fill); }

/* Moonlight pooled on the water around the moon's column */
.scene__glow {
  left: var(--mx);
  top: var(--hz);
  width: clamp(260px, 50vw, 760px);
  height: 46%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 78% at 50% 0, rgba(120, 205, 250, 0.2), rgba(0, 167, 245, 0.07) 55%, transparent 80%);
}

/* 7. Moon reflection: glittering streaks that widen toward the viewer */
.scene__glitter {
  left: var(--mx);
  top: var(--hz);
  bottom: 6%;
  width: clamp(130px, 26vw, 400px);
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%);
}
.streak {
  position: absolute;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(238, 246, 251, 0.95) 28%, rgba(150, 215, 252, 0.9) 72%, transparent);
  opacity: var(--o);
}

/* 9. Gulls (made by JS) */
.scene__gulls { inset: 0; }
.gull-flock { position: absolute; left: 0; top: 0; }
.gull { position: absolute; left: 0; top: 0; }
.gull svg { display: block; width: 100%; height: auto; overflow: visible; }
.gull__w { transform-box: view-box; transform-origin: 15px 8.5px; fill: var(--ice); }
.gull__b { fill: var(--ice); }

/* ---------- Motion (everything below is skipped for reduced motion, so the scene is a still picture) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .star.is-twinkle { animation: sea-twinkle var(--d, 5s) ease-in-out var(--dl, 0s) infinite; }
  .cloud svg { animation: sea-scroll var(--dur) linear infinite var(--dir); }
  .wave { animation: sea-bob var(--bobdur) ease-in-out infinite; }
  .wave__track { animation: sea-scroll var(--dur) linear infinite var(--dir); }
  .streak { animation: sea-shimmer calc(var(--d, 3s) * 1.5) ease-in-out var(--dl, 0s) infinite; }
  .gull { animation: gull-bob var(--bd, 5s) ease-in-out var(--bl, 0s) infinite; }
  .gull__l { animation: gull-flap-l 4s ease-in-out var(--fl, 0s) infinite; }
  .gull__r { animation: gull-flap-r 4s ease-in-out var(--fl, 0s) infinite; }
}
@keyframes sea-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes sea-bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, var(--bob, 3px), 0); } }
@keyframes sea-twinkle { 0%, 100% { opacity: var(--o); } 50% { opacity: calc(var(--o) * 0.2); } }
@keyframes sea-shimmer {
  0%, 100% { opacity: calc(var(--o) * 0.35); transform: scaleX(0.7); }
  50% { opacity: calc(var(--o) * 0.9); transform: scaleX(1.08); }
}
@keyframes gull-bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(0, -9px, 0); }
  75% { transform: translate3d(0, 7px, 0); }
}
/* three quick flaps, then a glide */
@keyframes gull-flap-l {
  0%, 12.5%, 25%, 37.5% { transform: rotate(24deg); }
  6.25%, 18.75%, 31.25% { transform: rotate(-20deg); }
  50%, 88% { transform: rotate(5deg); }
  100% { transform: rotate(24deg); }
}
@keyframes gull-flap-r {
  0%, 12.5%, 25%, 37.5% { transform: rotate(-24deg); }
  6.25%, 18.75%, 31.25% { transform: rotate(20deg); }
  50%, 88% { transform: rotate(-5deg); }
  100% { transform: rotate(-24deg); }
}

/* ---------- Phones and small screens ---------- */
@media (max-width: 820px) {
  .hero__inner { gap: 14px; }
  .hero__logo { width: 84px; }
}
@media (max-width: 760px) {
  .scene { --hz: 64%; }
  .island--far { right: 38%; width: 42vw; }   /* just left of the (narrower) glitter column, nudged toward the moon */
  .island--near { left: -4vw; width: 82vw; bottom: 22%; }
  .ship { width: 56px; }
  /* fewer trees up front on phones so the hero text stays clean */
  .ni-p2 { display: none; }
  .ni-p1 { transform-origin: 112px 246px; transform: scale(0.72); }
}
@media (max-width: 480px) {
  .hero { padding-top: 104px; }
  .hero__logo { width: 60px; }
  .hero__tag { font-size: 1.15rem; margin: 10px 0 16px; }
  .btn-row { margin-top: 20px; gap: 10px; }
  .hero .pill { padding: 10px 20px; font-size: 0.95rem; }
}
/* short phones: push the horizon down so the buttons keep clear sky */
@media (max-width: 760px) and (max-height: 720px) {
  .scene { --hz: 68%; }
  .island--near { bottom: 19%; }
}
/* short laptop screens: shrink the near island so its palms stay clear of the hero text */
@media (min-width: 761px) and (max-height: 760px) {
  .island--near { width: min(40vw, 64svh); }
}