/* ==========================================================================
   components.css — SHARED, GLOBAL atoms + fixed chrome.

   These selectors appear across all three acts and are NOT scoped to one.
   This file owns:
     1) Fixed chrome (progress, act-nav) — adapts color per act.
     2) Shared typographic components (kicker, lede, prose, statement,
        big-line, section-title, scroll-cue).
     3) Placeholder slots (the obviously-fillable dashed atoms).

   Everything consumes semantic vars from tokens.css so the three movements
   stay coherent while their mood shifts. The chrome is the frame of the film:
   present, precise, and whisper-quiet. It must never upstage the words.
   ========================================================================== */


/* ==========================================================================
   1) GLOBAL CHROME (fixed)
   --------------------------------------------------------------------------
   These sit OUTSIDE the themed <section> acts, so the theme vars don't reach
   them. Instead they read the active act via html[data-act="..."] and shift
   their own color. Act one rides on warm paper (warm near-black ink); acts
   two & three ride on dark grounds (light ink). Color transitions gently as
   the reader crosses act boundaries.
   ========================================================================== */

/* The chrome's own ink color, resolved per active act. Defined on :root so
   every chrome element can simply `color: var(--chrome-ink)`. */
:root {
  --chrome-ink: #2a201a;            /* warm near-black, for Act 1 (light) */
  --chrome-ink-faint: #6d5f50;
}
html[data-act="one"] {
  --chrome-ink: #2a201a;
  --chrome-ink-faint: #6d5f50;
}
html[data-act="two"] {
  --chrome-ink: #eaf0fb;            /* light ink on night */
  --chrome-ink-faint: #97a4c2;
}
html[data-act="three"] {
  --chrome-ink: #ece6dc;            /* light ink on dusk */
  --chrome-ink-faint: #8d8578;
}

/* Quiet plumbing for the whole stage: a thin scrollbar in the chrome ink
   (55% keeps WCAG 1.4.11 non-text contrast), and overscroll containment so
   a two-finger history-swipe can never yank the presenter off the page. */
html {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--chrome-ink) 55%, transparent) transparent;
  overscroll-behavior: none;
}

/* Shared, smooth color crossfade as the act changes. The 0.6s here is a
   deliberate ambient exception to the interaction tier (--dur-0): crossing an
   act boundary is scenery changing, not a control answering a pointer. */
.chrome,
.act-nav {
  color: var(--chrome-ink);
  transition: color 0.6s var(--ease-out);
}

/* ---- Scroll progress rail ------------------------------------------------ */
/* main.js sets --progress (0..1). We read it on .progress and the bar scales
   from it, so the parent can own the variable. */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: var(--z-chrome);
  pointer-events: none;
  /* a faint track beneath the bar — barely there, just enough to read as a rail */
  background: color-mix(in srgb, var(--chrome-ink) 8%, transparent);
}
.progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  /* gradient sweep from accent → accent-2; uses the ACTIVE act's accents via
     the chrome accent vars set just below */
  background: linear-gradient(
    90deg,
    var(--chrome-accent) 0%,
    var(--chrome-accent-2) 100%
  );
  transition: transform 0.12s linear;
  will-change: transform;
}

/* The chrome accents follow the active act so the progress bar's gradient
   always belongs to the mood it's sitting over. */
:root            { --chrome-accent: #13796b; --chrome-accent-2: #b08423; }
html[data-act="one"]   { --chrome-accent: #13796b; --chrome-accent-2: #b08423; }
html[data-act="two"]   { --chrome-accent: #6ea0ff; --chrome-accent-2: #e6b53f; }
html[data-act="three"] { --chrome-accent: #43a594; --chrome-accent-2: #43a594; }

/* Registering the accents as <color> lets the progress gradient CROSSFADE
   across act boundaries instead of snapping (initial-values mirror the
   sanctioned act-one hard-codes above). Engines without @property simply
   keep the instant swap. */
@property --chrome-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #13796b;
}
@property --chrome-accent-2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #b08423;
}
html {
  transition:
    --chrome-accent 0.6s var(--ease-out),
    --chrome-accent-2 0.6s var(--ease-out);
}

/* The rail joins the opening shot late (after the headline has landed).
   boot-cover is a ONE-SHOT flag (boot script sets it; main.js removes it
   permanently on first leaving the cover), so a mid-pitch refresh away from
   the cover shows the rail instantly and cover re-visits never replay this. */
@media (prefers-reduced-motion: no-preference) {
  html.js.boot-cover .progress,
  html.js.boot-cover .partner-login {
    animation: chrome-in 0.8s var(--ease-out) 1.8s both;
  }
}
@keyframes chrome-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ---- Partner login — fixed top-right utility link ------------------------ */
/* A quiet frosted pill out to the partner portal. It reads the chrome ink so it
   adapts per act like the rest of the chrome, and warms to the active act's
   accent on hover/focus — answering on the interaction tier (--dur-0), releasing
   on the mid tier (--dur-1). It joins the opening shot late with the rail
   (boot-cover handling above), so it never pops in over the title sequence. */
.partner-login {
  position: fixed;
  top: clamp(0.85rem, 0.5rem + 1vw, 1.5rem);
  right: clamp(0.9rem, 0.4rem + 1.4vw, 2.4rem);
  z-index: var(--z-nav);
  display: inline-flex;
  align-items: center;
  padding: 0.62em 1.05em;
  border: 1px solid color-mix(in srgb, var(--chrome-ink) 26%, transparent);
  border-radius: var(--radius-pill);
  /* mostly-opaque paper plate (legible without backdrop-filter), softly frosted
     over any robot scene or canvas it crosses */
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--chrome-ink);
  transition:
    color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.partner-login:hover,
.partner-login:focus-visible {
  border-color: color-mix(in srgb, var(--chrome-accent) 65%, transparent);
  background: color-mix(in srgb, var(--chrome-accent) 12%, var(--bg));
  transform: translateY(-1px);
  transition:
    color var(--dur-0) var(--ease-out),
    border-color var(--dur-0) var(--ease-out),
    background-color var(--dur-0) var(--ease-out),
    transform var(--dur-0) var(--ease-out);
}
.partner-login:active { transform: translateY(0); }


/* ---- Act navigation (vertical dots, right rail) -------------------------- */
.act-nav {
  position: fixed;
  right: clamp(0.9rem, 0.4rem + 1.4vw, 2.4rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-nav);
}
.act-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.act-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-2xs);
  color: inherit;
  /* dim until active/hovered — present, not loud */
  opacity: 0.55;
  /* nav state changes fire on act crossings too — they ride the mid tier,
     never the --dur-0 interaction tier */
  transition: opacity var(--dur-1) var(--ease-out);
}
.act-nav__link:hover,
.act-nav__link:focus-visible,
.act-nav__link.is-active {
  opacity: 1;
}
.act-nav__link:focus-visible { outline-offset: 4px; }

.act-nav__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
  transition:
    transform var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}
.act-nav__label {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  /* hidden + nudged right until the link is active or hovered */
  opacity: 0;
  transform: translateX(-0.35rem);
  transition:
    opacity var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
/* Reveal the label only on hover/focus — NOT on the active link. The filled,
   scaled dot already signals the current act, so the rail stays whisper-quiet
   chrome instead of floating a word that competes with the headline (and that
   could overlap right-edge content on mid-width screens). */
.act-nav__link:hover .act-nav__label,
.act-nav__link:focus-visible .act-nav__label {
  opacity: 1;
  transform: translateX(0);
}

/* Active state: dot fills with the act's accent and grows a touch.
   Activation POPS with real spring mass; release stays calm expo-out. */
.act-nav__link.is-active .act-nav__dot {
  background: var(--chrome-accent);
  border-color: var(--chrome-accent);
  transform: scale(1.35);
}
@supports (transition-timing-function: linear(0, 1)) {
  .act-nav__link.is-active .act-nav__dot {
    transition:
      transform 0.6s var(--ease-spring),
      background-color var(--dur-1) var(--ease-out),
      border-color var(--dur-1) var(--ease-out);
  }
}


/* ==========================================================================
   2) SHARED TYPOGRAPHIC COMPONENTS
   --------------------------------------------------------------------------
   These live inside themed acts, so they read the act's own theme vars.
   ========================================================================== */

/* ---- Kicker — the film-chapter label ------------------------------------- */
.kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.2;
  text-wrap: balance;
}
/* short cinematic rule that precedes the label */
.kicker::before {
  content: "";
  flex: none;
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.9;
}

/* ---- Lede — large intro paragraph ---------------------------------------- */
.lede {
  font-family: var(--font-sans);
  font-size: var(--step-1);
  line-height: 1.5;
  font-weight: 400;
  color: var(--muted);
  max-width: var(--measure-wide);
  text-wrap: pretty;
}

/* ---- Prose — body copy --------------------------------------------------- */
.prose {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.62;
  color: color-mix(in srgb, var(--fg) 86%, transparent);
  max-width: var(--measure);
  text-wrap: pretty;
}
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transition: text-decoration-color var(--dur-0) var(--ease-out);
}
.prose a:hover {
  text-decoration-color: currentColor;
}
.prose strong {
  font-weight: 600;
  color: var(--fg);
}

/* ---- Statement — editorial display statement ----------------------------- */
.statement {
  font-family: var(--font-display);
  font-size: clamp(var(--step-2), 1.4rem + 1.4vw, var(--step-3));
  font-weight: 380;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: pretty;
  /* roomy enough for prose-length statements, still a tight editorial measure */
  max-width: min(34ch, 100%);
}
.statement--accent {
  color: var(--accent);
}
/* inline highlight inside a statement */
.statement .hl,
.hl {
  color: var(--accent);
  font-style: italic;
}

/* ---- Big line — the huge moment lines ------------------------------------ */
.big-line {
  font-family: var(--font-display);
  font-size: clamp(var(--step-5), 2rem + 4.2vw, var(--step-6));
  font-weight: 360;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--fg);
  max-width: 18ch;
}
.big-line em {
  font-style: italic;
  color: var(--accent);
}

/* ---- Section title + head ------------------------------------------------ */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  max-width: 30ch;
  margin-bottom: var(--space-xl);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--step-4), 1.7rem + 3vw, var(--step-5));
  font-weight: 380;
  line-height: 1.06;
  letter-spacing: -0.018em;
  text-wrap: balance;
  color: var(--fg);
}
.section-title em {
  font-style: italic;
  color: var(--accent);
}
.section-head__note {
  /* a muted prose note under the title */
  color: var(--muted);
  max-width: var(--measure);
}

/* ---- Scroll cue — the small "Begin" affordance --------------------------- */
.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--muted);
  width: max-content;
  transition: color var(--dur-0) var(--ease-out);
}
.scroll-cue:hover,
.scroll-cue:focus-visible {
  color: var(--fg);
}
.scroll-cue__text {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.scroll-cue__line {
  position: relative;
  width: 1px;
  height: 2.6rem;
  overflow: hidden;
  background: color-mix(in srgb, currentColor 24%, transparent);
}
/* a short bright segment that drifts downward, hinting "scroll" */
.scroll-cue__line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--accent)
  );
  animation: scroll-cue-drift 2s var(--ease-breathe) infinite;
}
@keyframes scroll-cue-drift {
  0%   { transform: translateY(-100%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(220%); opacity: 0; }
}


/* ==========================================================================
   3) PLACEHOLDER SLOTS — the obviously-fillable atoms.
   --------------------------------------------------------------------------
   They must read as "put your real thing here" on BOTH light and dark grounds.
   We lean on the act theme vars (accent / line-strong / muted / surface) so
   each slot is legible wherever it lands.
   ========================================================================== */
.slot {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-xs) var(--space-m);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--muted);
  text-align: left;
  /* break long placeholder text gracefully on tiny screens */
  max-width: 100%;
}
.slot__label {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.2;
}
.slot__hint {
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.4;
  text-wrap: pretty;
}

/* --- Variant: brand (prominent, hero) --- */
.slot--brand {
  align-items: center;
  flex-direction: row;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-m);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--fg); /* AA on every theme; accent text was ~3.7:1 on warm paper */
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Variant: brand-sm (compact, single line; chrome + footer) --- */
.slot--brand-sm {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 0.28em 0.7em;
  border-width: 1px;
  border-color: color-mix(in srgb, currentColor 38%, transparent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;                 /* inherit chrome ink / footer ink */
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1.1;
}

/* --- Variant: story (a soft inline placeholder within prose flow) --- */
.slot--story {
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-s) var(--space-m);
  border-style: dashed;
  border-color: var(--line-strong);
  background: var(--surface);
  border-radius: var(--radius-m);
  max-width: var(--measure-wide);
}

/* --- Variant: name (presenter slot, footer) --- */
.slot--name {
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-s) var(--space-m);
  border-color: var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
}


/* ==========================================================================
   RESPONSIVE — keep the chrome clean and uncluttered on small screens.
   ========================================================================== */

/* Below ~720px: hide the act-nav entirely so the speaker's content has the
   whole stage. */
@media (max-width: 720px) {
  .act-nav {
    display: none;
  }
  .slot--brand-sm {
    padding: 0.24em 0.55em;
  }
}

/* Very small phones: tighten the hero brand slot + the login pill so neither
   overflows the corner. */
@media (max-width: 380px) {
  .slot--brand {
    font-size: var(--step--2);
    padding: var(--space-3xs) var(--space-s);
  }
  .partner-login {
    padding: 0.55em 0.85em;
    letter-spacing: 0.1em;
  }
}


/* ==========================================================================
   REDUCED MOTION — disable every decorative animation we introduced.
   (base.css already neutralizes [data-reveal]; here we kill our own glows,
   drifts, and the chrome's color crossfade easing where it implies motion.)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue__line::after {
    animation: none;
    /* show a static hint segment instead of a moving one */
    transform: none;
    opacity: 0.85;
    height: 100%;
  }
  /* keep color shifts effectively instant so nothing "moves" */
  .chrome,
  .act-nav,
  .act-nav__link,
  .act-nav__dot,
  .act-nav__label,
  .progress__bar,
  html {
    transition-duration: 0.001ms;
  }
  html.js.boot-cover .progress,
  html.js.boot-cover .partner-login { animation: none; }
}