/* HOOD P1 live deck (design r2). Palette = the pptx builder's Robinhood-dark palette (build_src/build2_head.js):
   panels #262626 / #303030 / #3F3F3F, hairline #3A3A3A, text #FFFFFF / #D9D9D9 / #B0B0B0, Robinhood green #00C805
   (Robinhood, the hero figure and the signal line only), neutral grey ramp for rivals. The canvas is app-black and is
   painted by the WebGL stage (#121313 to #2A2D2B, one soft light pool per slide); --canvas is the fallback under it.
   No gradients on text or data, no glass, no pill badges, no coloured-border cards, no fade-only motion. */
:root {
  --canvas: #161717; --panel: #262626; --panel2: #303030; --hair: #3A3A3A;
  --white: #FFFFFF; --soft: #D9D9D9; --muted: #B0B0B0; --green: #00C805; --tint: #245C29;
  /* the house curve: fast start, long settle, no overshoot (the Awwwards SOTD "AI in Banking UX" uses it on 65 rules) */
  --ease-print: cubic-bezier(.25, .74, .22, .99);
  /* liveliness pass: entrances use a quick phone-style ease-out (fast off the mark, soft landing), 0.3 s */
  --ease-app: cubic-bezier(.05, .7, .1, 1);
  --font: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}
html, body { background: var(--canvas); }
body.reveal-viewport { background: var(--canvas); color: var(--white); }
::selection { background: var(--tint); color: var(--white); }
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; pointer-events: none; }
.reveal { z-index: 1; font-family: var(--font); color: var(--white); -webkit-font-smoothing: antialiased; }
.reveal .slides { text-align: left; }
.reveal .slides > section { padding: 0; width: 1920px; height: 1080px; }
.sl { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; font-kerning: normal; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1; }
.sl > * { position: absolute; margin: 0; box-sizing: border-box; }
.sl p { margin: 0; white-space: pre-wrap; letter-spacing: -0.005em; }
.sl svg { overflow: visible; }
.sl .title p { letter-spacing: -0.012em; }

/* micro-typography: display figures set tight and tabular (so the ticker columns land on the laid-out glyphs);
   all-caps labels opened up; table figures tabular so columns of numbers align */
.sl span.hero { letter-spacing: -0.022em; font-variant-numeric: tabular-nums lining-nums; }
.sl span.caps { letter-spacing: 0.045em; }
.sl table.tb td { font-variant-numeric: tabular-nums; }

/* ---- tables (s7 head-to-head, s13 key figures, s14 competitor detail) ---- */
.sl table.tb { border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.sl table.tb td { padding: 4px 12px; overflow: hidden; line-height: 1.15; vertical-align: middle; border-bottom: 1px solid #1A1A1A; }
.sl table.tb tr:first-child td:first-child { border-top-left-radius: 10px; }
.sl table.tb tr:first-child td:last-child { border-top-right-radius: 10px; }
.sl table.tb tr:last-child td:first-child { border-bottom-left-radius: 10px; }
.sl table.tb tr:last-child td:last-child { border-bottom-right-radius: 10px; }
.sl table.tb td.hl { background: var(--tint) !important; transition: background-color .25s var(--ease-print); }
.sl table.tb td.hl span { color: var(--white) !important; }

/* ---- risk panels "light" as named (fill change, not a coloured border) ---- */
.sl .lit { background: var(--tint) !important; transition: background-color .25s var(--ease-print); }
.sl .lit-text span { color: #FFFFFF !important; }

/* ---- chapter signpost: one white rule under the active section (moved by deck.js, transform only) ---- */
.sl .tracker .trk-rule { position: absolute; left: 0; top: 0; width: 100px; height: 2px; background: var(--white); transform-origin: 0 0; opacity: 0; pointer-events: none; }

/* ---- entrances. Words print in left to right like tape (a clip wipe, no fade); filled cards and the hero figure snap
   up 14 px into place (no fade: they appear at once and rise) while the figure rolls. All in 0.3 s on the quick
   ease-out, staggered by at most 96 ms, so every entrance is done within 0.4 s. The cards move by transform only, so
   the compositor carries them (a clip-path reveal on the cards cost 2-3 fps during the 3D move). Only under
   html.motion: without the script everything is simply there. ---- */
html.motion .reveal .slides section .lbl,
/* deliberate-ignore round-stat (a clip-path inset, not a statistic) */
html.motion .reveal .slides section .footer { clip-path: inset(-40% 100% -40% -12%); }
html.motion .reveal .slides section .lbl.fill,
html.motion .reveal .slides section .lbl.herobox { clip-path: none; visibility: hidden; transform: translateY(14px); }
html.motion .reveal .slides section.shown .lbl,
html.motion .reveal .slides section.shown .footer {
  clip-path: inset(-40% -12% -40% -12%);
  transition: clip-path .3s var(--ease-app);
  transition-delay: calc(min(var(--i, 0), 8) * 12ms);
}
html.motion .reveal .slides section.shown .lbl.fill:not(.fragment),
html.motion .reveal .slides section.shown .lbl.herobox:not(.fragment) {   /* fragments keep their own visibility rules below */
  clip-path: none; visibility: visible; transform: none;
  transition: visibility 0s, transform .3s var(--ease-app);
  transition-delay: calc(min(var(--i, 0), 8) * 12ms);
}
/* fragments: Reveal adds .visible on the click; .ready is added by deck.js once the 3D step has (almost) settled */
.reveal .slides section .fragment.custom { transition: none; }
.reveal .slides section .fragment.custom:not(.visible) { opacity: 0; visibility: hidden; }
/* deliberate-ignore round-stat (a clip-path inset, not a statistic) */
html.motion .reveal .slides section .fragment.custom.visible:not(.ready) { visibility: hidden; clip-path: inset(-40% 100% -40% -12%); transition: none; }
html.motion .reveal .slides section .fragment.custom.fill.visible:not(.ready),
html.motion .reveal .slides section .fragment.custom.herobox.visible:not(.ready) { clip-path: none; transform: translateY(14px); }
html.motion .reveal .slides section.shown .fragment.custom.visible.ready { visibility: inherit; clip-path: inset(-40% -12% -40% -12%); transition: clip-path .3s var(--ease-app); transition-delay: 0ms; }
html.motion .reveal .slides section.shown .fragment.custom.fill.visible.ready,
html.motion .reveal .slides section.shown .fragment.custom.herobox.visible.ready { clip-path: none; transform: none; transition: transform .3s var(--ease-app); transition-delay: 0ms; }
.reveal .slides section .fragment.hook, .reveal .slides section .fragment.lit-hook { display: none; }

/* the ticker overlay (scenes/ticker.js): digit columns roll over the hidden hero glyphs, then the overlay is removed */
.sl .tick-ov { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 2; }
.sl .tick-c { position: absolute; display: block; white-space: pre; letter-spacing: 0; text-align: left; font-variant-numeric: tabular-nums lining-nums; }
.sl .tick-s { display: block; white-space: pre; will-change: transform; }

/* reduced motion: the same states, reached by a short cross-fade (no wipe, no rise, no roll, no 3D move) */
html.reduced .reveal .slides section .lbl, html.reduced .reveal .slides section .footer { opacity: 0; }
html.reduced .reveal .slides section.shown .lbl, html.reduced .reveal .slides section.shown .footer { opacity: 1; transition: opacity .18s linear; }
html.reduced .reveal .slides section .fragment.custom.visible { opacity: 1; visibility: inherit; transition: opacity .18s linear; }

/* signal line (Robinhood green progress) grows via auto-animate between slides */
.sl .sline { border-radius: 2px; }
.sl .strack { border-radius: 2px; }

/* receiver = the speaker-view previews; print = ?print-pdf: everything at rest, nothing hidden */
html.receiver .reveal .slides section .lbl, html.receiver .reveal .slides section .title, html.receiver .reveal .slides section .support, html.receiver .reveal .slides section .footer,
html.print .reveal .slides section .lbl, html.print .reveal .slides section .title, html.print .reveal .slides section .support, html.print .reveal .slides section .footer { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
html.receiver .reveal .slides section .fragment.custom.visible, html.print .reveal .slides section .fragment.custom { opacity: 1 !important; visibility: inherit !important; transform: none !important; clip-path: none !important; transition: none !important; }

/* print: one static PNG of the 3D scene per page, under the HTML layer */
.sl > img.snap { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: -1; }
html.print #stage { display: none; }
html.print body, html.print .reveal-viewport, html.print .pdf-page { background: var(--canvas) !important; }

/* overview (O): hide the live canvas, slides read as static pages */
.reveal.overview ~ #stage, html.overview #stage { opacity: 0; }

/* no WebGL: give 3D-backed text a flat panel so it still reads */
html.no3d .sl .plate3d { background: var(--plate); }
html.no3d .sl [data-bg] { background: #242424; border-radius: 12px; }

#selftest { position: fixed; right: 8px; bottom: 8px; z-index: 50; background: #000; color: #fff; font: 13px/1.3 Menlo, monospace; padding: 8px 10px; max-width: 46vw; white-space: pre-wrap; border-radius: 8px; }

/* s7: header names sit just under the 3D bubbles that lead each column */
#h2h-table tr:first-child td { padding-top: 16px; }
.sl table.tb td { overflow-wrap: normal; hyphens: manual; }
/* overview (O): every slide shows its full static face */
.reveal.overview .slides section .lbl, .reveal.overview .slides section .title, .reveal.overview .slides section .support,
.reveal.overview .slides section .footer, .reveal.overview .slides section .fragment.custom { opacity: 1 !important; visibility: inherit !important; transform: none !important; clip-path: none !important; transition: none !important; }
.reveal.overview .slides section .plate3d { background: var(--plate); }

/* ---- Rev 6: Maya's journey strip (bottom-left, under the signal line). Web-only chrome: not pptx text. ----
   The active stage is white with a green rule under it; on a step the rule slides over and glows briefly. */
.sl nav.journey { position: absolute; left: 86.4px; top: 1062px; height: 18px; margin: 0; font: 500 13px/16px var(--font); letter-spacing: 0.02em; color: #B0B0B0; white-space: nowrap; pointer-events: none; z-index: 2; }
.sl nav.journey span { display: inline-block; transition: color .8s var(--ease-print); }
.sl nav.journey b { font-weight: 500; color: #8C8C8C; margin: 0 8px; }
.sl nav.journey span.on { color: #FFFFFF; }
.sl nav.journey span.on.flash { color: var(--green); transition: none; }
.sl nav.journey .jy-rule { position: absolute; left: 0; top: 15px; width: 100px; height: 2px; background: var(--green); transform-origin: 0 0; border-radius: 1px; }
.sl nav.journey .jy-rule.go { transition: transform .62s cubic-bezier(.16, 1, .3, 1), box-shadow .8s ease-out; }
.sl nav.journey .jy-rule.glow { box-shadow: 0 0 10px 2px rgba(0, 200, 5, .75); }
html.reduced .sl nav.journey .jy-rule.go { transition: none; }
/* a 3D-plate panel that is lit keeps its HTML layer clear: the plate itself turns green in 3D (scene.js tintPlate) */
.sl .plate3d.lit { background: transparent !important; }

/* ---- liveliness pass (Oct 14) ----
   The strip's active step breathes: 2.5 s cycle, opacity 0.92 ± 0.08 (white on the app-black stage, ≥ 12:1 at its
   dimmest). The animation name starts with "amb-": the QA harness treats it as ambient, not as a move. */
html.motion .reveal .slides section.present nav.journey span.on,
html.motion .reveal .slides section.present nav.journey .jy-rule { animation: amb-breathe 2.5s ease-in-out infinite; }
/* deliberate-ignore round-stat (keyframe offsets, not a statistic) */
@keyframes amb-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .84; } }
/* the ambient price line (deck.js AMB): a small 2D canvas over the stage and under the words, plain blending (a blend
   mode would make the compositor re-read the stage every frame); its head stops short of the 3D objects */
#amb { position: fixed; left: 0; top: 0; z-index: 0; display: none; pointer-events: none; }   /* sized and shown by deck.js, only on its four slides */
html.print #amb, html.overview #amb, .reveal.overview ~ #amb { display: none; }