/* Purser landing page. One navy ground, ivory text, and gold only where the
   app's own rule allows it: the manual's coordinates and the one primary
   action. Every section sits on a single centre line. */

:root {
  color-scheme: dark;
  --navy: #090f21;
  --panel: #0c1426;
  --line: #243056;
  --line-2: #3a4a78;
  --ivory: #f6efe3;
  --soft: #c9d1e3;
  --muted: #a9b4cb;
  --dim: #8c99b6;
  --faint: #5d6b8f;
  --gold: #dcc08c;

  --ff-display: "Cormorant Garamond", Georgia, serif;
  --ff-ui: "Atkinson Hyperlegible", system-ui, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, monospace;

  --gutter: clamp(24px, 5vw, 120px);
  --measure: 1200px;
  --gap-section: clamp(96px, 14vw, 160px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

/* Desktop: each section is one screen, and the page settles on it gently. */
@media (min-width: 761px) and (min-height: 700px) {
  html { scroll-snap-type: y proximity; }
  .hero, .section { scroll-snap-align: start; }
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--ivory);
  font-family: var(--ff-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--ivory); }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 4px; }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  padding: 10px 16px; border-radius: 8px; background: var(--ivory); color: var(--navy);
}
.skip:focus { top: 16px; }

/* ---------- nav: three equal columns, wordmark on the axis ---------- */

.nav {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center;
  padding-block: calc(env(safe-area-inset-top, 0px) + 20px) 20px;
  padding-inline: max(var(--gutter), calc((100% - var(--measure)) / 2));
  background: var(--navy);
  box-shadow: 0 1px 0 rgba(36, 48, 86, 0);
  transition: box-shadow .4s var(--ease);
}
.nav.stuck { box-shadow: 0 1px 0 var(--line); }
.wordmark {
  justify-self: center; text-decoration: none;
  font-family: var(--ff-display); font-weight: 600; font-size: 22px;
  letter-spacing: .3em; padding-left: .3em;
}
.nav-side {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--dim); text-decoration: none; font-size: 15px;
}
.nav-end { justify-self: end; }
.nav-icon { display: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: calc(100svh - 84px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px var(--gutter) 120px;
}
.hero-glow {
  position: absolute; left: 50%; top: 50%; width: min(900px, 120vw); aspect-ratio: 1;
  transform: translate(-50%, -58%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(120, 146, 205, .16), rgba(120, 146, 205, .05) 55%, transparent 72%);
}
.hero > :not(.hero-glow) { position: relative; }
.hero .tape { position: absolute; }
.hero-mark { width: clamp(120px, 14vw, 180px); height: auto; mix-blend-mode: lighten; }
.hero-title {
  margin: 44px 0 0; font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(54px, 7.8vw, 112px); line-height: 1; letter-spacing: -.01em; text-wrap: balance;
}
.hero-lede { margin: 30px 0 0; max-width: 620px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: var(--muted); text-wrap: balance; }

.btn {
  margin-top: 44px; display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 32px; border-radius: 26px;
  background: var(--gold); color: var(--navy); font-weight: 700; font-size: 16px; text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover { color: var(--navy); transform: translateY(-2px); box-shadow: 0 10px 28px -10px rgba(220, 192, 140, .55); }

/* ---------- heading tape: moves with the scroll, pointer fixed on the axis ---------- */

.tape {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  height: 56px; overflow: hidden;
  width: min(var(--measure), calc(100% - 2 * var(--gutter)));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.tape::before { content: ""; position: absolute; left: 0; right: 0; top: 40px; border-top: 1px solid var(--line); }
.tape-track { position: absolute; top: 0; left: 0; height: 56px; will-change: transform; }
.tape-track svg { display: block; }
.tape-bright { clip-path: inset(0 calc(50% - 26px)); }
.tape-pointer {
  position: absolute; left: 50%; top: 40px; width: 16px; height: 12px; transform: translateX(-50%);
  fill: none; stroke: var(--ivory); stroke-width: 1.5; stroke-linejoin: round;
}

/* ---------- sections ---------- */

.section {
  width: min(var(--measure), calc(100% - 2 * var(--gutter)));
  min-height: calc(100svh - 84px);
  margin: 0 auto; padding-block: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.section-title { margin: 0; font-family: var(--ff-display); font-weight: 400; font-size: clamp(38px, 4vw, 56px); line-height: 1.05; }
.section-lede { margin: 24px 0 0; max-width: 620px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--muted); text-wrap: balance; }
.section-lede-wide { max-width: 680px; line-height: 1.7; font-size: clamp(16px, 1.4vw, 19px); }

/* ---------- boarding pass: two equal halves, perforated down the axis ---------- */

.pass {
  position: relative; margin-top: 64px; width: min(960px, 100%);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--panel); border: 1px solid var(--line); border-radius: 22px; text-align: left;
}
.pass { overflow: hidden; }
.pass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(246, 239, 227, .07) 50%, transparent 65%);
  transform: translateX(-120%);
}
.pass-half { display: flex; flex-direction: column; gap: 18px; padding: 44px 48px; }
.pass-label { font-size: 14px; color: var(--dim); }
.pass-big { font-family: var(--ff-display); font-size: clamp(40px, 4vw, 52px); line-height: 1; }
.pass-text { font-size: 17px; line-height: 1.6; color: var(--muted); }
.pass-fields { margin: auto 0 0; padding-top: 20px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pass-fields div { display: flex; flex-direction: column; gap: 4px; }
.pass-fields dt { font-size: 13px; color: var(--dim); }
.pass-fields dd { margin: 0; font-family: var(--ff-mono); font-size: 17px; }
.pass-perf { position: absolute; left: 50%; top: 18px; bottom: 18px; border-left: 1px dashed var(--line-2); transform-origin: top; }
.pass-notch {
  position: absolute; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%;
  background: var(--navy); border: 1px solid var(--line);
}
.pass-notch-a { top: -13px; clip-path: inset(50% 0 0 0); }
.pass-notch-b { bottom: -13px; clip-path: inset(0 0 50% 0); }

/* ---------- quote ---------- */

.quote { gap: 28px; }
.cite { font-family: var(--ff-mono); font-size: 15px; color: var(--gold); letter-spacing: .04em; }
.quote-text { margin: 0; max-width: 820px; font-family: var(--ff-display); font-weight: 400; font-size: clamp(29px, 3.1vw, 44px); line-height: 1.25; }
.quote-note { margin: 8px 0 0; max-width: 560px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--dim); text-wrap: balance; }

/* ---------- architecture ---------- */

.flow { margin-top: 48px; width: 100%; display: flex; justify-content: center; }
.flow svg { width: 100%; height: auto; }
.flow .flow-wide { width: auto; max-width: 100%; height: min(732px, calc(100svh - 340px)); min-height: 560px; }
.flow-wide .node text { text-anchor: start; }
#how { padding-block: 32px; }
.flow .flow-narrow { display: none; max-width: 342px; }
.wires path { stroke: var(--line-2); stroke-width: 1.5; }
.node rect { fill: var(--panel); stroke: var(--line); stroke-width: 1; }
.node-gold rect { stroke: var(--gold); stroke-width: 1.2; }
.ico, .ico * { stroke: var(--soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.node-gold .ico, .node-gold .ico * { stroke: var(--gold); }
.node .t { font-family: var(--ff-ui); font-weight: 700; font-size: 18px; fill: var(--ivory); text-anchor: middle; }
.node .s { font-family: var(--ff-mono); font-size: 14px; fill: var(--dim); text-anchor: middle; }
.node-gold .s { fill: var(--gold); }
.pulse { fill: var(--ivory); opacity: 0; filter: drop-shadow(0 0 6px rgba(246, 239, 227, .9)); }
.flow.pulsing .pulse { opacity: 1; transition: opacity .6s var(--ease); }
.flow-narrow .node .t { font-size: 16px; }
.flow-narrow .node .s { font-size: 12px; }

/* ---------- instruments ---------- */

.gauges { margin-top: 64px; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gauge { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gauge svg { width: min(240px, 100%); height: auto; overflow: visible; }
.gauge figcaption { font-size: 16px; color: var(--muted); }
.g-track { stroke: var(--line); stroke-width: 6; stroke-linecap: round; }
.g-val { stroke: var(--ivory); stroke-width: 6; stroke-linecap: round; }
.g-ticks { stroke: var(--faint); stroke-width: 1.5; }
.g-num { font-family: var(--ff-display); font-size: 44px; fill: var(--ivory); text-anchor: middle; font-variant-numeric: lining-nums tabular-nums; }
.g-end { font-family: var(--ff-mono); font-size: 11px; fill: var(--faint); text-anchor: middle; }

/* ---------- footer ---------- */

.footer {
  width: min(var(--measure), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
  padding: 72px 0 calc(env(safe-area-inset-bottom, 0px) + 64px);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.footer img { width: 44px; height: 44px; mix-blend-mode: lighten; }
.footer a { font-size: 15px; text-underline-offset: 5px; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- phone ---------- */

@media (max-width: 760px) {
  .nav { grid-template-columns: 44px minmax(0, 1fr) 44px; padding-left: 16px; padding-right: 16px; }
  .nav-label { display: none; }
  .nav-icon { display: block; }
  .nav-side { justify-content: center; width: 44px; }
  .wordmark { font-size: 19px; }
  .hero { min-height: calc(100svh - 84px); padding-bottom: 104px; }
  .section { min-height: 0; padding-block: 88px 0; }
  .footer { margin-top: 88px; }

  .pass { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .pass-half { padding: 26px 24px; gap: 12px; }
  .pass-from { border-bottom: 1px dashed var(--line-2); }
  .pass-perf { display: none; }
  .pass-text { font-size: 15px; }
  .pass-fields dd { font-size: 14px; }
  .pass-notch { left: auto; top: auto; margin: 0; }
  .pass-notch-a { left: -13px; top: calc(50% - 12px); clip-path: inset(0 0 0 50%); }
  .pass-notch-b { right: -13px; bottom: calc(50% - 12px); clip-path: inset(0 50% 0 0); }

  .flow .flow-wide { display: none; }
  .flow .flow-narrow { display: block; }

  .gauges { gap: 6px; }
  .g-track, .g-val { stroke-width: 10; }
  .g-ticks, .g-end { display: none; }
  .g-num { font-size: 56px; }
  .gauge figcaption { font-size: 13px; line-height: 1.4; }
}

/* =========================================================================
   Motion. Only when script runs (html.js) and the reader hasn't asked for
   reduced motion. Without either, everything above renders at rest.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* hero: one load sequence */
  .js .hero > :not(.tape):not(.hero-glow) { opacity: 0; transform: translateY(18px); animation: rise .9s var(--ease) forwards; }
  .js .hero-mark { transform: scale(.94); animation: arrive 1.2s var(--ease) forwards; }
  .js .hero-title { animation-delay: .25s; }
  .js .hero-lede { animation-delay: .4s; }
  .js .hero .btn { animation-delay: .55s; }
  .js .hero-glow { opacity: 0; animation: fade 2s var(--ease) .2s forwards, breathe 9s ease-in-out 2.2s infinite; }
  @keyframes breathe { 0%, 100% { transform: translate(-50%, -58%) scale(1); } 50% { transform: translate(-50%, -58%) scale(1.08); } }
  .js .pass.in::after { animation: sheen 1.8s var(--ease) 1.2s 1 forwards; }
  @keyframes sheen { to { transform: translateX(120%); } }
  .js .tape { opacity: 0; animation: fade 1s var(--ease) .8s forwards; }
  @keyframes fade { to { opacity: 1; } }
  @keyframes rise { to { opacity: 1; transform: none; } }
  @keyframes arrive { 0% { opacity: 0; transform: scale(.94); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }

  /* generic reveal */
  .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 120ms); }
  .js [data-reveal].in { opacity: 1; transform: none; }

  /* boarding pass: the halves slide in from either side and meet on the axis */
  .js .pass { opacity: 1; transform: none; }
  .js .pass .pass-half { opacity: 0; transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
  .js .pass .pass-from { transform: translateX(-48px); }
  .js .pass .pass-to { transform: translateX(48px); }
  .js .pass .pass-perf { transform: scaleY(0); transition: transform .8s var(--ease) .55s; }
  .js .pass .pass-notch { opacity: 0; transition: opacity .5s var(--ease) .9s; }
  .js .pass.in .pass-half { opacity: 1; transform: none; }
  .js .pass.in .pass-perf { transform: scaleY(1); }
  .js .pass.in .pass-notch { opacity: 1; }
  @media (max-width: 760px) {
    .js .pass .pass-from { transform: translateY(-24px); }
    .js .pass .pass-to { transform: translateY(24px); }
  }

  /* quote: the manual's words arrive one at a time */
  .js [data-words] .w { display: inline-block; opacity: 0; transform: translateY(.35em); filter: blur(4px); transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease); transition-delay: calc(var(--w) * 45ms + 250ms); }
  .js [data-words].in .w { opacity: 1; transform: none; filter: none; }

  /* architecture: each wire draws, then the node it feeds lights up, in order */
  .js [data-flow] .wires path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s var(--ease); transition-delay: calc(var(--i) * 280ms - 180ms); }
  .js [data-flow] .node { opacity: 0; transform: translateY(10px); transform-box: fill-box; transform-origin: center; transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 280ms); }
  .js [data-flow].in .wires path { stroke-dashoffset: 0; }
  .js [data-flow].in .node { opacity: 1; transform: none; }
  .js [data-flow].in .node-gold rect { animation: glint 1.6s var(--ease) 1.6s 1; }
  @keyframes glint { 0% { filter: none; } 40% { filter: drop-shadow(0 0 12px rgba(220, 192, 140, .55)); } 100% { filter: none; } }

  /* instruments: arcs sweep to their value while the readout counts */
  .js [data-gauges] .gauge { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js [data-gauges] .gauge:nth-child(2) { transition-delay: .12s; }
  .js [data-gauges] .gauge:nth-child(3) { transition-delay: .24s; }
  .js [data-gauges] .g-val { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.3, .6, .2, 1) .3s; }
  .js [data-gauges].in .gauge { opacity: 1; transform: none; }
  .js [data-gauges].in .g-val { stroke-dashoffset: 0; }

  .js .footer { opacity: 0; transition: opacity 1s var(--ease); }
  .js .footer.in { opacity: 1; }
}