/* Landing stage (spec 2026-10-11): the "You said" chip, the Now-yours box, the legend and the canvas — all inside
   the hero art column, above the example card. External file per CSP style-src-elem. Motion only under html.lp-stage;
   without it (reduced motion, no JS, second load) everything is static and visible. */
.lp-hero-art.has-receipt { overflow: visible; }
.lp-stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
/* width: 100% is load-bearing — .lp-hero-art's base rule sets place-items: center, and current Chrome applies
   justify-items to block children, so a width-auto block here shrink-wraps to 0 and centres (seen 2026-10-11). */
.lp-stage-slot { position: relative; z-index: 3; width: 100%; min-height: 112px; margin: 0 0 14px; }

/* chip */
.lp-stage-said { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--border-subtle); background: color-mix(in srgb, var(--surface-flat) 72%, transparent);
  backdrop-filter: blur(8px); font-size: 0.95rem; line-height: 1.4; }
.lp-stage-said-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; }
.lp-stage-said-text { color: var(--fg); }
html.lp-stage .lp-stage-said-text::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.15em;
  background: var(--accent-purple); animation: lpStageCaret 0.9s steps(2, start) infinite; }
html.lp-stage .is-typed .lp-stage-said-text::after { display: none; }
@keyframes lpStageCaret { to { visibility: hidden; } }

/* legend */
.lp-stage-legend { margin: 8px 0 0 4px; font-size: 0.78rem; color: var(--fg-muted); display: flex; gap: 14px; align-items: center; }
.lp-stage-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.lp-stage-legend .dot-run { background: var(--accent-purple); box-shadow: 0 0 8px var(--accent-purple); }
.lp-stage-legend .dot-you { background: var(--accent-gold, #d7b36a); box-shadow: 0 0 8px var(--accent-gold, #d7b36a); }
.lp-stage-legend[hidden] { display: none; }   /* unscoped: the author display:flex above beats the UA [hidden] rule in EVERY state */

/* box */
.lp-stage-box { margin: 0; }
.lp-stage-box-label { display: block; font-size: 0.92rem; font-weight: 600; color: var(--fg); margin-bottom: 8px; }
.lp-stage-box-row { display: flex; gap: 8px; }
.lp-stage-box-row input { flex: 1 1 auto; min-width: 0; padding: 11px 14px; border-radius: 10px; font: inherit; font-size: 0.95rem;
  color: var(--fg); background: color-mix(in srgb, var(--surface-flat) 85%, transparent); border: 1px solid var(--border-subtle); }
.lp-stage-box-row input::placeholder { color: var(--fg-faded); }
.lp-stage-box-row input:focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 2px; }
.lp-stage-box-row .btn { white-space: nowrap; }
.lp-stage-box-status { min-height: 18px; margin: 6px 0 0; font-size: 0.82rem; color: var(--fg-muted); }
/* (the status line carries aria-live="polite" but NOT role="status": cozy-theme.css paints that role as a gradient banner,
   with :not(#id) terms no class selector can beat; the line is empty until a too-short submit) */
@media (max-width: 560px) { .lp-stage-box-row { flex-direction: column; } .lp-stage-slot { min-height: 150px; } }

/* no-motion state: chip compact, box static beneath it. The slot reserves the stacked height so a late webfont
   (cozy's serif) cannot grow the column and re-centre the whole hero grid (CLS .24 measured without this). */
html:not(.lp-stage) .lp-stage-said { min-height: 0; padding: 6px 12px; font-size: 0.82rem; margin-bottom: 8px; }
html:not(.lp-stage) .lp-stage-slot { min-height: 156px; }
@media (max-width: 560px) { html:not(.lp-stage) .lp-stage-slot { min-height: 232px; } }

/* story state: chip + legend + box share the slot; the box waits for phase 4 (.is-now) */
html.lp-stage .lp-stage-said, html.lp-stage .lp-stage-legend, html.lp-stage .lp-stage-box { position: absolute; left: 0; right: 0; }
html.lp-stage .lp-stage-said { top: 0; transition: opacity .35s ease, transform .35s ease; }
html.lp-stage .lp-hero-art:not(.is-typing) .lp-stage-said-text { opacity: 0; }   /* phone: no show-then-blank-then-retype before the column is in view */
html.lp-stage .lp-stage-legend { top: 54px; transition: opacity .35s ease, transform .35s ease; }
/* visibility, not only opacity: an invisible input must be out of the tab order and the accessibility tree */
html.lp-stage .lp-stage-box { top: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease .15s, visibility 0s .15s; }
html.lp-stage .is-now .lp-stage-box, html.lp-stage-done .lp-stage-box { opacity: 1; visibility: visible; pointer-events: auto; }
html.lp-stage .is-now .lp-stage-said, html.lp-stage .is-now .lp-stage-legend,
html.lp-stage-done .lp-stage-said, html.lp-stage-done .lp-stage-legend { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* the card during the story: ghost frame, hidden lines, then staggered reveal */
html.lp-stage .lp-hero-art:not(.is-settled) .lp-receipt-card { border-color: color-mix(in srgb, var(--accent-purple) 35%, transparent); }
html.lp-stage .lp-receipt-lines li, html.lp-stage .lp-receipt-stamp, html.lp-stage .lp-receipt-foot, html.lp-stage .lp-receipt-title {
  opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
html.lp-stage .lp-receipt-lines li.is-in, html.lp-stage .lp-receipt-title.is-in,
html.lp-stage-done .lp-receipt-lines li, html.lp-stage-done .lp-receipt-title { opacity: 1; transform: none; }
/* revealed values match landing-receipt.css's design opacities, so the settled card is the static card */
html.lp-stage .lp-receipt-lines li.more.is-in, html.lp-stage-done .lp-receipt-lines li.more { opacity: 0.7; }
html.lp-stage .lp-receipt-stamp.is-in, html.lp-stage-done .lp-receipt-stamp { opacity: 0.65; transform: none; }
html.lp-stage .lp-receipt-foot.is-in, html.lp-stage-done .lp-receipt-foot { opacity: 0.85; transform: none; }

/* glass shimmer over the tease line, once, after the settle */
.lp-receipt-lines li.more { position: relative; overflow: hidden; }
html.lp-stage .is-settled .lp-receipt-lines li.more::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, #fff 20%, transparent) 50%, transparent 80%);
  transform: translateX(-120%); animation: lpStageShimmer 1.5s ease-out 0.2s 1 forwards; }
html[data-ux-mode="cozy"].lp-stage .is-settled .lp-receipt-lines li.more::after {
  background: linear-gradient(100deg, transparent 20%, var(--accent-gold-soft) 50%, transparent 80%); }
@keyframes lpStageShimmer { to { transform: translateX(120%); } }

/* cozy: paper, not glass */
[data-ux-mode="cozy"] .lp-stage-said, [data-ux-mode="cozy"] .lp-stage-box-row input { background: var(--surface-raised, #FFFBF2); backdrop-filter: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-stage-canvas { display: none; }
}

/* ── motion through the page (spec §5) ─────────────────────────────────────── */
[data-reveal] { transition: opacity .55s ease, transform .55s ease; }
html.lp-reveal [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }
html.lp-reveal [data-reveal]:nth-child(2) { transition-delay: .08s; }
html.lp-reveal [data-reveal]:nth-child(3) { transition-delay: .16s; }
html.lp-reveal [data-reveal]:nth-child(4) { transition-delay: .24s; }
html.lp-reveal [data-reveal]:nth-child(n+5) { transition-delay: .32s; }

/* step connector: one path through the three card centres, drawn on reveal */
.steps-grid { position: relative; }
.lp-steps-wire { position: absolute; left: 0; right: 0; top: 50%; height: 24px; width: 100%; transform: translateY(-50%); pointer-events: none; z-index: 0; }
.lp-steps-wire path { fill: none; stroke: var(--accent-purple); stroke-width: 1.5; stroke-dasharray: 200; stroke-dashoffset: 200; opacity: .55;
  transition: stroke-dashoffset 1.2s ease-out .2s; }
.steps-grid.is-in .lp-steps-wire path { stroke-dashoffset: 0; }
.steps-grid .step-card { position: relative; z-index: 1; }
@media (max-width: 900px) { .lp-steps-wire { display: none; } }

/* run tiles count up without jitter */
.lp-run-tile dd { font-variant-numeric: tabular-nums; }

/* aurora halo outside the two primary buttons (the fill and its 5.17:1 text are untouched) */
[data-cta="hero-register"], [data-cta="final-register"] { position: relative; isolation: isolate; }
[data-cta="hero-register"]::before, [data-cta="final-register"]::before {
  content: ""; position: absolute; inset: -3px; border-radius: inherit; z-index: -1; pointer-events: none; opacity: .7;
  background: conic-gradient(from var(--lp-aurora-angle, 0deg), var(--accent-blue), var(--accent-purple), var(--accent-gold, #d7b36a), var(--accent-blue));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 3px;
  animation: lpAurora 6s linear infinite; }
@property --lp-aurora-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes lpAurora { to { --lp-aurora-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { [data-cta="hero-register"]::before, [data-cta="final-register"]::before { animation: none; } }

/* ── final CTA: Lumis in a showcase card above its caption line (2026-10-24) ─────
   The card keeps the clip's deep-indigo backdrop — a cut-out would fray the violet glow. The poster is the loop's
   first frame, so the video fading in over it never jumps; under reduced motion / Save-Data the poster is all. */
.final-cta__pet { position: relative; width: min(280px, 70vw); aspect-ratio: 1; margin: 0 auto 18px; border-radius: 28px; overflow: hidden;
  background: #1a1c3f; box-shadow: 0 22px 60px -18px color-mix(in srgb, var(--accent-purple) 55%, transparent); }
.final-cta__pet img, .final-cta__pet video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.final-cta__pet video { opacity: 0; transition: opacity .4s ease; }
.final-cta__pet.is-playing video { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .final-cta__pet video { display: none; } }

/* Landing handoff task 4 (owner 2026-10-26): the YouTube bridge line, above the eyebrow, only for a known
   utm_campaign. landing-bridge.js sets html.lp-bridge-on in <head> — before first paint — so this space is held from
   the start and the text that fills it at DOMContentLoaded moves nothing (no layout shift). The heights are the
   longest line's, measured at each width (two rows below 1100 px). */
.lp-bridge { display: none; }
html.lp-bridge-on .lp-bridge { display: block; min-height: 1.5em; margin: 0 0 10px; font-size: 0.95rem; line-height: 1.5;
  font-weight: 600; color: #cdd6ff; }
@media (max-width: 1100px) { html.lp-bridge-on .lp-bridge { min-height: 3em; } }
/* data-ux-mode sits ON <html>, and this must outrank the rule above (0,2,1): */
html[data-ux-mode="cozy"].lp-bridge-on .lp-bridge { color: var(--cozy-ink, #2c2418); }