/* ============================================================================
   SCREEN: welcome — companion stylesheet to screens/welcome.js
   Direction D "Day Chart" — the first-ever-visit promise page.

   Pairs 1:1 with the markup welcome.js emits. Every selector below maps to a
   class/id that file produces; nothing here is speculative. Tokens only — the
   sanctioned chart literals (#fbf8f5 paper + rgba(22,19,18,0.045) grid) are the
   only off-token colors, per the binding contract (Design-Port-Decisions §Welcome
   + design_handoff_welcome_screen README §DIRECTION D).

   Spec chain:
   · 06_Spec/(C) Design-Port-Decisions-2026-06-12.md  — token map + honesty
   · 13_Design-Prompts/(C) Claude-Design-Handoff-2026-06-12/project/
       design_handoff_welcome_screen/README.md §DIRECTION D — verbatim geometry
   · 13_Design-Prompts/.../Welcome Screen.dc.html (D = LAST frame) — visual truth

   LAYOUT MODEL: the welcome card IS the 760px host column (.tc-main). Header +
   footer carry the 52px side padding; the chart zone runs edge-to-edge so the
   absolutely-positioned overlay px coordinates (left:470 etc.) land on the same
   bends as the 760-wide SVG. The two chart variants stack in the same zone; the
   media query swaps which one is display:flex vs display:none (the parallax in
   welcome.js skips the 0-width hidden variant via getBoundingClientRect().width).

   MOTION (both OFF under prefers-reduced-motion — ship-blocker):
   · .wlc-pulse keyframes (the orange route glint) — killed here.
   · parallax — welcome.js never attaches a listener under reduced motion; this
     file only provides the will-change hook + a settled fallback transform.
   ========================================================================== */

/* ── full-bleed chart paper: the grid runs EVERYWHERE (Chris 2026-06-12), edge
   to edge behind the whole screen; the content box is constrained on top. ──── */
.wlc-screen {
  background-color: #fbf8f5;                 /* sanctioned chart-paper literal */
  background-image:
    linear-gradient(rgba(22,19,18,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,19,18,0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  min-height: 100vh;                          /* grid fills the viewport even on short content */
}

/* ── the content box: 760px, centered on the full-bleed grid, TRANSPARENT (no
   card chrome — the grid shows through). The overlay coordinate system below
   (.wlc__promise left:470px etc.) and the 760×730 SVG viewBox are calibrated to
   exactly 760px, so the box must hold that width or the pinned text overlays
   collide with the route waypoints. (Width cap + full-bleed grid: 2026-06-12.) */
.wlc {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}
.wlc__frame { position: relative; }

/* ── header: headline only (the app bar already carries the AOA wordmark, so
   the in-card logo was redundant — removed 2026-06-12 per Chris) ──────────── */
.wlc__head {
  padding: 46px 52px 0;
  text-align: center;
}
.wlc__headline {
  font-family: var(--font-display);           /* Oswald */
  font-weight: 600;
  font-size: 40px;
  line-height: 1.08;
  color: var(--ink);
  margin: 0 auto;
  max-width: 18ch;
  text-wrap: pretty;
}

/* ── the chart zone — the positioning context for both chart variants AND the
   absolutely-placed overlays (tagline + 3 promises). Edge-to-edge, fixed 730px
   tall so the 760×730 viewBox + the px overlay coords align. ───────────────── */
.wlc__chartzone {
  position: relative;
  height: 730px;
  margin-top: 10px;
}

/* Each chart variant fills the zone; the two stacked SVG layers fill the chart.
   --wide shows ≥700px, --narrow shows ≤699px (toggled in the media query). */
.wlc__chart {
  position: absolute;
  inset: 0;
}
.wlc__chart--wide  { display: block; }
.wlc__chart--narrow { display: none; }

.wlc__shadowsvg,
.wlc__route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* The route layer is the one the parallax drifts (welcome.js writes
   translateY inline). The blurred shadow layer is pinned — never transformed —
   which is what sells the altitude. */
.wlc__route { will-change: transform; }

/* ── chart strokes ────────────────────────────────────────────────────────── */
/* base route line: ink, 2px, 0.3 — the not-yet-flown plan */
.wlc-baseline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  opacity: 0.3;
}
/* pinned blurred shadow polyline */
.wlc-shadowline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  opacity: 0.13;
}
/* the pulse overlay copy of the route — animation defined at the bottom */
.wlc-pulse {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.5;
  opacity: 0;                                 /* idles invisible until the glint */
  stroke-dasharray: 10 124;
}

/* ── fixes: orange enroute symbols over paper-knockout circles ────────────── */
.wlc-knock { fill: #fbf8f5; }                 /* knockout matches the paper */
.wlc-sym   { fill: var(--orange); }           /* triangle / star / VOR dot */
.wlc-vor   { fill: none; stroke: var(--orange); stroke-width: 2; }  /* VOR hexagon */

/* fix labels: Oswald 10px, 0.06em, ink @ 0.48 */
.wlc-lbls text {
  fill: var(--ink);
  opacity: 0.48;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* airports: compass-rose ring + 4 cardinal ticks, ink @ 0.55, paper-knockout */
.wlc-rose {
  opacity: 0.55;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.wlc-rose circle { fill: #fbf8f5; }           /* knockout under the rose */

/* airport mono labels: JetBrains Mono 9.5px, 0.1em, ink @ 0.45 */
.wlc-apt {
  fill: var(--ink);
  opacity: 0.45;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
}

/* ── overlays inside the chart zone: ramp tagline + three promises ────────── */
.wlc__tagline {
  position: absolute;
  left: 56px;
  top: 132px;
  width: 300px;
}
.wlc__tagline p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body-text);
  text-wrap: pretty;
}

.wlc__promise { position: absolute; }
.wlc__promise--1 { left: 470px; top: 255px; width: 232px; }  /* right pocket  */
.wlc__promise--2 { left: 56px;  top: 428px; width: 240px; }  /* left pocket   */
.wlc__promise--3 { left: 56px;  top: 585px; width: 240px; }  /* left pocket   */

.wlc__promise__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* the 14px chart-symbol bullet reuses the chart symbology classes; size is set
   on the inline <svg width=14> in welcome.js. Bullet fills come from .wlc-sym /
   .wlc-vor above. */
.wlc__promise__head svg { flex: none; display: block; }
.wlc__promise__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.wlc__promise p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* ── footer: the ask + the one CTA + the quiet skip ───────────────────────── */
.wlc__foot {
  padding: 8px 52px 46px;
  text-align: center;
}
.wlc__ask {
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
  color: var(--body-text);
  max-width: 46ch;
  text-wrap: pretty;
}

.wlc__cta-row { display: flex; justify-content: center; margin-top: 20px; }

/* the single orange action. Brand orange bg; white label here is intentional and
   matches the locked design spec (uppercase Oswald CTA on a saturated fill, not
   body text) — distinct from --orange-as-text-on-white. */
.wlc__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;                           /* touch target */
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);                 /* 6px */
  padding: 16px 34px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 10px 24px -10px rgba(244,115,33,0.55),
    0 2px 0 rgba(0,0,0,0.06);
  transition: background var(--glance) var(--ease-calm),
              transform var(--glance) var(--ease-calm),
              box-shadow var(--glance) var(--ease-calm);
}
.wlc__cta svg { display: block; }
.wlc__cta:hover {
  background: var(--orange-hover);            /* lighten, never darken */
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px -10px rgba(244,115,33,0.65),
    0 2px 0 rgba(0,0,0,0.06);
}
.wlc__cta:active { transform: translateY(0); }

.wlc__skip-row { display: flex; justify-content: center; margin-top: 16px; }
.wlc__skip {
  font-size: 13px;
  color: var(--guess);                        /* #8a807a */
  text-decoration: none;
  border-bottom: 1px solid #d8d2cb;
  padding-bottom: 1px;
  transition: color var(--glance) var(--ease-calm),
              border-color var(--glance) var(--ease-calm);
}
.wlc__skip:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ── the route pulse — a calm, infrequent orange glint travelling the route ──
   Verbatim from the prototype <style>: 7.5s linear infinite, 1.2s initial delay,
   dashoffset 112 → −12 across 0%→62%, opacity 0 → .5 (by 5%) → .5 (until 55%)
   → 0 (by 62%), then idle to 100%. No literal blink (photosensitivity). */
@keyframes wlc-pulse {
  0%   { stroke-dashoffset: 112; opacity: 0; }
  5%   { opacity: 0.5; }
  55%  { opacity: 0.5; }
  62%  { stroke-dashoffset: -12; opacity: 0; }
  100% { stroke-dashoffset: -12; opacity: 0; }
}
.wlc-pulse { animation: wlc-pulse 7.5s linear 1.2s infinite; }

/* ── REDUCED MOTION — ship-blocker. Both effects off, route sits settled. ────
   The pulse animation is killed and forced invisible (the route reads as the
   calm baseline only). welcome.js never attaches the scroll/resize listener
   under reduced motion, so no inline transform is ever written — but we also
   zero the route-layer transform here as a belt-and-suspenders so the route
   sits fully settled even if a stale transform survived a motion-pref flip. */
@media (prefers-reduced-motion: reduce) {
  .wlc-pulse {
    animation: none !important;
    opacity: 0 !important;
  }
  .wlc__route { transform: none !important; }
}

/* ── 360 COLLAPSE (≤699px) ────────────────────────────────────────────────── */
/* Swap to the NARROW chart (its own ~2-turn geometry, 360×500 viewBox, no fix
   labels). The chart zone reshapes to the narrow aspect; tagline + promises
   leave their absolute pockets and restack into the normal flow below the
   chart; the CTA goes full-width. Nothing disappears but the fix labels; the
   route stays one unbroken line; every target ≥44px. */
@media (max-width: 699px) {
  .wlc__chart--wide  { display: none; }
  .wlc__chart--narrow { display: block; }

  .wlc__head { padding: 32px clamp(18px, 6vw, 32px) 0; }
  .wlc__headline { font-size: clamp(26px, 8vw, 32px); }
  .wlc__logo { width: min(220px, 70%); }

  /* the narrow chart is 360×500 → height tracks the 500-tall viewBox; the zone
     no longer hosts the overlays (they restack below it via flow). */
  .wlc__chartzone {
    height: auto;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
  }
  .wlc__chart--narrow {
    position: relative;                       /* back into flow */
    inset: auto;
    width: 100%;
    /* keep the 360:500 aspect so the SVG + its absolute layers size correctly */
    aspect-ratio: 360 / 500;
    order: -1;                                /* the chart sits first */
  }

  /* overlays drop their pockets and stack in the flow, full-column width */
  .wlc__tagline,
  .wlc__promise {
    position: static;
    left: auto; top: auto;
    width: auto;
    max-width: none;
    margin: 0 clamp(18px, 6vw, 32px);
  }
  .wlc__tagline { margin-top: 18px; }
  .wlc__promise { margin-top: 18px; }
  .wlc__promise--3 { margin-bottom: 4px; }

  .wlc__foot { padding: 18px clamp(18px, 6vw, 32px) 36px; }
  .wlc__cta-row { display: block; }
  .wlc__cta {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
  }
}