:root {
  --bg: #fbfdff;
  --blue-50: #eef5fc;
  --blue-100: #dbe9f7;
  --blue-200: #c3dcf2;
  --blue-300: #a3c6e8;
  --blue-500: #6b9bcb;
  --blue-700: #3a6391;
  --ink: #1d3452;
  --gold: #d9a94f;
  --serif: "Cormorant Garamond", Georgia, serif;
  --caps: "Cinzel", "Times New Roman", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

main { position: relative; }
section { position: relative; overflow: hidden; }
.word, .names .word { display: inline-block; white-space: nowrap; }

/* ---------- Scallop shell ---------- */
.shell { display: inline-block; width: 54px; color: var(--blue-700); }
.shell svg { display: block; width: 100%; height: auto; overflow: visible; }
.shell path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.shell.draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ---------- 1. Map ---------- */
/* Tall wrapper + sticky child: the browser does the pinning, so there's no scroll-jitter */
.map-wrap { position: relative; height: calc(100vh * 13); height: calc(100svh * 13); }
.map {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  background: #0e1a28;
}
@media (max-width: 700px) { .map-wrap { height: calc(100vh * 10); height: calc(100svh * 10); } }
#flight { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0e1a28; }
.map-ui { position: absolute; inset: 0; pointer-events: none; }
/* video download progress (hides itself when ready) */
.vload { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3; transition: opacity .6s .3s; }
.vload i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; transition: transform .2s; }
.vload.done { opacity: 0; }
/* soft vignettes so the white text reads over any frame */
.map::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 26%; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(10,24,38,.5), rgba(10,24,38,0)); }
.map::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(10,24,38,.78) 0%, rgba(10,24,38,.42) 42%, rgba(10,24,38,0) 100%); }
.map-ui { z-index: 2; }

.brand {
  position: absolute; top: max(18px, env(safe-area-inset-top)); left: 18px;
  display: flex; align-items: center; gap: 10px; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.brand .shell { width: 30px; color: #fff; }
.brand span { font-family: var(--caps); font-size: .62rem; letter-spacing: .32em; text-transform: uppercase; }

.hud { position: absolute; left: 18px; top: 50%; translate: 0 -50%; height: 30svh; width: 14px; }
.hud-line { position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.hud-line i { position: absolute; left: 0; right: 0; top: 0; height: 0; background: #fff; }
.hud .pip { position: absolute; left: 1px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: rgba(255,255,255,.25); border: 2px solid rgba(255,255,255,.7); transition: background .3s, border-color .3s; }
.hud .pip.on { background: var(--gold); border-color: #fff; }
.hud .pip span { position: absolute; left: 24px; top: 50%; translate: 0 -50%; white-space: nowrap; font-family: var(--caps); font-size: .56rem; letter-spacing: .26em; text-transform: uppercase; color: #fff; opacity: .45; text-shadow: 0 1px 8px rgba(0,0,0,.5); transition: opacity .3s; }
.hud .pip.on span { opacity: .95; }
@media (max-width: 700px) { .hud .pip span { display: none; } }

.stage {
  position: absolute; left: 0; right: 0; bottom: 15svh; padding: 0 28px; text-align: center; opacity: 0;
  will-change: opacity, transform;
}
.stage h2 {
  font-weight: 400; font-style: italic; color: #fff; line-height: 1.1;
  font-size: clamp(1.9rem, min(8.6vw, 11.5svh), 5.2rem);
  text-shadow: 0 2px 28px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.35);
}
.stage.s0 { bottom: 22svh; }
.kicker {
  font-family: var(--caps); font-size: clamp(.7rem, 2.6vw, .95rem); letter-spacing: .5em; padding-left: .5em;
  text-transform: uppercase; color: #fff; margin-bottom: 14px;
  text-shadow: 0 1px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
}
.sub {
  margin-top: 18px; font-family: var(--caps); font-size: .64rem; letter-spacing: .4em; padding-left: .4em;
  text-transform: uppercase; color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
}
.stage .cross { font-size: 1.5rem; color: #fff; margin: 6px 0 4px; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.stage .date { font-weight: 400; font-size: clamp(2.4rem, min(14vw, 17svh), 7.5rem); color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.35); }
.stage.s4 { bottom: 12svh; }


/* Reduced motion / video unavailable: show the final frame as a plain hero */
.static .map-wrap { height: 100vh; height: 100svh; }
.static .map { position: relative; background: #0e1a28 url(assets/flight-end.jpg) center / cover no-repeat; }
.static #flight { display: none; }
.static .stage:not(.s4), .static .hud { display: none; }
.static .stage.s4 { opacity: 1; }

/* ---------- 2. Countdown ---------- */
.count { padding: 16vh 24px 16vh; text-align: center; background: linear-gradient(to bottom, #f6faff 0%, var(--bg) 18%); }
.c-eyebrow {
  font-family: var(--caps); font-size: clamp(.8rem, 3vw, 1.1rem); letter-spacing: .4em;
  padding-left: .4em; text-transform: uppercase; color: var(--blue-700); margin-bottom: 7vh;
}
.c-eyebrow em { font-family: var(--serif); font-size: 1.5em; letter-spacing: .05em; color: var(--ink); text-transform: none; }
.rings { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 4vw, 48px); }
.ring { position: relative; width: clamp(130px, 38vw, 200px); aspect-ratio: 1; display: grid; place-items: center; align-content: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 1.4; }
.ring .bg { stroke: var(--blue-100); }
.ring .fg { stroke: var(--blue-500); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 5px rgba(107,155,203,.55)); }
.ring b { font-weight: 500; font-size: clamp(2.2rem, 9vw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.ring small { font-family: var(--caps); font-size: .6rem; letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: var(--blue-500); margin-top: 8px; }

/* ---------- 3. Finale ---------- */
.finale {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 12vh 24px 14vh; background: linear-gradient(to bottom, var(--bg) 0%, var(--blue-50) 60%, var(--blue-100) 100%);
}
.finale > .shell { margin-bottom: 14px; }
.f-eyebrow { font-family: var(--caps); font-size: clamp(.7rem, 2.8vw, .95rem); letter-spacing: .4em; padding-left: .4em; text-transform: uppercase; color: var(--blue-700); }
.names {
  font-family: var(--caps); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.5rem, 7vw, 4.2rem); letter-spacing: .2em; padding-left: .2em;
  margin: 3vh 0; color: var(--ink);
}
.names .c { display: inline-block; }
.end-rule { display: flex; align-items: center; justify-content: center; gap: 14px; width: 180px; margin: 0 auto 6vh; color: var(--blue-500); }
.end-rule span { flex: 1; height: 1px; background: var(--blue-300); }
.end-rule i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue-500); }

.postcard {
  background: #fff; padding: 12px 12px 18px; width: min(320px, 78vw); margin-bottom: 7vh;
  box-shadow: 0 18px 40px rgba(29,52,82,.2), 0 2px 6px rgba(29,52,82,.12);
  transform: rotate(-2.2deg); will-change: transform;
}
.postcard img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 62%; }
.postcard figcaption { margin-top: 14px; font-family: var(--caps); font-size: .58rem; letter-spacing: .24em; line-height: 1.9; text-transform: uppercase; color: var(--blue-700); }

.f-note { font-style: italic; font-size: clamp(1.1rem, 4vw, 1.5rem); line-height: 1.6; color: var(--blue-700); margin-bottom: 5vh; }

.btn {
  position: relative; display: inline-block; overflow: hidden;
  font-family: var(--caps); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
  text-decoration: none; color: #fff; background: var(--blue-700);
  padding: 16px 30px; border: 1px solid var(--blue-700);
  transition: color .3s;
}
.btn span { position: relative; z-index: 1; }
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--bg);
  transform: translateY(101%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.btn:hover { color: var(--blue-700); }
.btn:hover::before { transform: none; }

.static .shell.draw path, .static .ring .fg { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .sc-next svg { animation: none; }
}

/* Short screens (landscape phones): tighter chrome */
@media (max-height: 520px) {
  .hud, .brand span { display: none; }
  .stage.s0 { bottom: 16svh; }
  .stage.s4 { bottom: 8svh; }
  .kicker { margin-bottom: 6px; }
  .sub { margin-top: 10px; }
  .stage .cross { display: none; }
}

/* ---------- Scroll controls ---------- */
.scroller {
  position: fixed; z-index: 60; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; justify-content: center; pointer-events: none;
  transition: opacity .45s, transform .45s;
}
.scroller.hide { opacity: 0; transform: translateY(16px); }
.scroller.hide button { pointer-events: none; }
.scroller button {
  pointer-events: auto; cursor: pointer; color: var(--blue-700);
  background: rgba(255,255,255,.8); border: 1px solid rgba(58,99,145,.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(29,52,82,.18);
  transition: background .25s, color .25s, transform .2s, box-shadow .25s;
}
.scroller button:hover { background: var(--blue-700); color: #fff; box-shadow: 0 8px 24px rgba(29,52,82,.28); }
.scroller button:active { transform: scale(.96); }
.scroller button:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 3px; }
.sc-next {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px 13px 24px; border-radius: 999px;
  font-family: var(--caps); font-size: .64rem; letter-spacing: .34em; text-transform: uppercase;
}
.sc-next svg { width: 15px; height: 15px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.sc-end { position: absolute; right: 14px; bottom: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.sc-end svg { width: 17px; height: 17px; }

@media (max-height: 520px) {
  .sc-next span { display: none; }
  .sc-next { position: absolute; right: 68px; bottom: 0; width: 46px; height: 46px; padding: 0; justify-content: center; }
  .scroller { justify-content: flex-end; }
}