/* Crystal home stage: one knight, heavy type behind it, colour fields that shift
   with scroll, a horizontal gallery of modes, pill CTAs, a floating play button,
   and the crystal shatter transition. Crystal UI only.
   The palette extends crystal: paper, cobalt ink, deep cobalt, amber. */

/* ---------- stage ---------- */
.stage-hero {
  --field: var(--paper); --fg: var(--ink-deep); --glow: 0;
  color: var(--fg);
  background:
    repeating-conic-gradient(color-mix(in srgb, var(--field) 97.5%, #0c1836) 0 25%, var(--field) 0 50%) 50% 0 / clamp(120px, 14vw, 200px) clamp(120px, 14vw, 200px);
}
.stage-hero[data-field="cobalt"] { --field: var(--cobalt-deep); --fg: var(--paper); --glow: 1; }
.stage-hero[data-field="amber"] { --field: var(--amber); --fg: var(--ink-deep); --glow: 0; }
.stage-hero.has-sculpture { background:
    radial-gradient(ellipse 34% 46% at 50% 54%, color-mix(in srgb, #4b74f0 calc(var(--glow) * 55%), transparent), transparent 72%),
    repeating-conic-gradient(color-mix(in srgb, var(--field) 97.5%, #0c1836) 0 25%, var(--field) 0 50%) 50% 0 / clamp(120px, 14vw, 200px) clamp(120px, 14vw, 200px); }
.stage-hero::before, .stage-hero::after { display: none; }

.stage-type { position: absolute; inset: 0 0 76px; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.stage-line {
  grid-area: 1 / 1; margin: 0; max-width: 94%; text-align: center; text-wrap: balance;
  font: 700 clamp(64px, 12.6vw, 216px)/.86 Heebo, var(--sans); letter-spacing: -.045em;
  color: inherit; transform-origin: 50% 55%;
}
.stage-line.s2 { color: var(--paper); }
/* Hidden from the first frame, not only once the spritesheets have decoded (slow networks). */
.has-sculpture .stage-line:not(.s1) { visibility: hidden; }

.stage-hero.has-sculpture .knight-stage {
  inset: 2% auto 70px 50%; width: auto; height: auto; aspect-ratio: 440 / 592;
  translate: -50% 0; top: 2%; bottom: 76px;
}
.stage-foot {
  position: absolute; z-index: 4; inset: auto 0 0; min-height: 76px; display: flex; align-items: center; gap: 12px 20px;
  padding: 10px 1%; border-top: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
}
.stage-foot p { margin: 0; margin-inline-end: auto; font-size: 15px; color: color-mix(in srgb, var(--fg) 78%, transparent); }
.stage-hero .hero-skip { position: static; flex: none; }

/* Pills come from tokens.css. On the stage the outline pill follows the field colour. */
.stage-hero .pill:not(.primary) { --pill-fg: var(--fg); }
[dir="rtl"] .pill .ic-arrow { transform: none; }

/* Without motion the stage is a still poster: knight photo on the start side, first line on the other. */
.stage-hero:not(.has-sculpture) { min-height: clamp(420px, 56vw, 640px); }
.stage-hero:not(.has-sculpture) .stage-type { inset: 0 0 76px; place-items: center start; padding-inline-start: max(16px, calc(50vw - 600px)); }
.stage-hero:not(.has-sculpture) .stage-line.s1 { max-width: 52%; text-align: start; font-size: clamp(56px, 9vw, 150px); }
.stage-hero:not(.has-sculpture) .stage-line:not(.s1) { display: none; }

/* ---------- mode gallery ---------- */
.mode-gallery { position: relative; background: var(--amber); color: var(--ink-deep); overflow: hidden; width: 100vw; margin-inline-start: calc(50% - 50vw); }
.mode-gallery h2 { margin: 0; padding: clamp(28px, 5vw, 64px) max(16px, calc(50vw - 600px)) 0; font: 700 clamp(40px, 6.4vw, 104px)/.92 Heebo, var(--sans); letter-spacing: -.04em; }
.gallery-track {
  display: flex; gap: clamp(14px, 2vw, 28px); padding: clamp(20px, 3vw, 40px) max(16px, calc(50vw - 600px)) clamp(32px, 5vw, 64px);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.gallery-track::-webkit-scrollbar { display: none; }
.mode-gallery.pinned .gallery-track { overflow: visible; scroll-snap-type: none; width: max-content; }
.mode-card {
  flex: none; scroll-snap-align: center; width: min(82vw, 440px); display: grid; grid-template-rows: auto 1fr; gap: 18px;
  padding: 18px; border: 2px solid var(--ink-deep); border-radius: 26px; background: var(--paper); color: var(--ink-deep);
  text-align: start; cursor: pointer; font: inherit;
}
.mode-card .mini { width: 100%; border-radius: 14px; overflow: hidden; }
.mode-card strong { display: block; font: 700 clamp(28px, 3vw, 40px)/1 Heebo, var(--sans); letter-spacing: -.03em; }
.mode-card small { display: block; margin-top: 8px; font-size: 15px; color: var(--text2); }
.mode-card .tag { display: inline-block; margin-top: 14px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid currentColor; font-weight: 600; font-size: 14px; }
.mode-card[data-home="online"] { background: var(--cobalt); color: #fff; border-color: var(--cobalt-deep); }
.mode-card[data-home="online"] small { color: #dfe6ff; }
.mode-card[data-home="analysis"] { background: var(--cobalt-deep); color: var(--paper); }
.mode-card[data-home="analysis"] small { color: #c9d4f5; }
.mode-card:focus-visible { outline: 3px solid var(--ink-deep); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  [data-motion="on"] .mode-card { transition: translate .32s cubic-bezier(.3, 1.6, .5, 1), rotate .32s cubic-bezier(.3, 1.6, .5, 1); }
  [data-motion="on"] .mode-card:hover { translate: 0 -8px; rotate: -1.2deg; }
}

/* ---------- floating play button ---------- */
.fab-play {
  position: fixed; z-index: 30; inset-block-end: max(18px, env(safe-area-inset-bottom)); inset-inline-end: 18px;
  width: 64px; height: 64px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #4b74f0, var(--cobalt) 45%, var(--cobalt-deep)); color: #fff;
  box-shadow: inset 0 1px 1px #ffffff66, 0 12px 26px -10px #0d1b5ecc; opacity: 0; scale: .6; pointer-events: none;
}
.fab-play svg { width: 26px; height: 26px; }
.fab-play.show { opacity: 1; scale: 1; pointer-events: auto; }
[data-motion="on"] .fab-play { transition: opacity .25s, scale .35s cubic-bezier(.3, 1.6, .5, 1); }
body:not([data-mode="home"]) .fab-play, body:not([data-ui="crystal"]) .fab-play { display: none; }

/* ---------- crystal shatter ---------- */
.shatter { position: fixed; inset: 0; z-index: 70; width: 100vw; height: 100vh; pointer-events: auto; }
.shatter.revealing { pointer-events: none; }

/* ---------- layout ---------- */
.stage-hero ~ * { position: relative; }
[data-ui="crystal"] .home:has(.stage-hero) { padding-bottom: 0; }
.home-scene .stage-hero { min-height: calc(100svh - 77px); }
/* Today's status: streak and goal chips, then one sentence. */
.stage-foot p.today { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.stage-foot p.today > span:last-child { min-width: 0; }
.stage-foot p.today .chip { flex: none; }
.stage-foot p.today .chip.on, .stage-foot p.today .chip.on * { color: var(--white); }
/* Wider screens: the headline gets its own band at the top and the knight stands below it,
   so the knight never covers the words (the lines change while you scroll; the knight stays).
   The type size follows the screen height too, so two lines and a large knight both fit. */
@media (min-width: 601px) {
  .stage-hero.has-sculpture { --type: clamp(52px, min(8.4vw, 12vh), 140px); --band: calc(var(--type) * 1.76 + 3vh); }
  .stage-hero.has-sculpture .stage-line { font-size: var(--type); }
  .stage-hero.has-sculpture .stage-type { inset: 0 0 auto; height: var(--band); place-items: center; padding-top: 1.5vh; }
  .stage-hero.has-sculpture .knight-stage { top: var(--band); bottom: 84px; }
}
@media (max-width: 860px) {
  /* Its own centred row above the buttons, so phones see it too. */
  .stage-foot { flex-wrap: wrap; justify-content: center; }
  .stage-foot p.today { flex: 0 0 100%; justify-content: center; margin: 0; font-size: 14px; line-height: 1.25; text-align: center; }
}
@media (min-width: 601px) and (max-width: 860px) {
  .stage-hero.has-sculpture .knight-stage { bottom: 116px; }
}
@media (max-width: 600px) {
  .home-scene .stage-hero { min-height: calc(100svh - 53px); }
  .stage-line { font-size: clamp(50px, 16.5vw, 96px); }
  .stage-type { inset: 0 0 168px; place-items: start center; padding-top: 12%; }
  .stage-hero.has-sculpture .knight-stage { top: auto; bottom: 164px; height: 54%; }
  .stage-foot { flex-wrap: wrap; justify-content: center; min-height: 156px; padding: 10px 12px 12px; gap: 10px 12px; }
  .stage-foot .hero-skip { order: 3; }
  .pill { padding: 11px 18px; font-size: 15px; }
  .stage-hero:not(.has-sculpture) .stage-line.s1 { max-width: 60%; font-size: clamp(46px, 13vw, 80px); }
  .mode-card { width: 80vw; padding: 14px; border-radius: 22px; }
  .fab-play { width: 56px; height: 56px; }
}

/* Full-bleed colour fields; clip (not hidden) keeps position: sticky working. */
body[data-mode="home"][data-ui="crystal"] { overflow-x: clip; }
.home-scene .stage-hero { margin-inline: calc(50% - 50vw); border-bottom: 0; }
.stage-foot { padding-inline: max(16px, calc(50vw - 600px)); }
.stage-hero .stage-type { padding-inline: max(8px, calc(50vw - 640px)); }
/* Scroll runway for three stages. */
.hero-track.is-moving:has(.stage-hero)::after { height: var(--knight-scroll, 900px); }
@media (max-width: 600px) { .hero-track.is-moving:has(.stage-hero)::after { height: var(--knight-scroll, 900px); } }

/* The bar stays on the crystal home so navigation is always reachable; the stage sticks below it. */
body[data-ui="crystal"] { --topbar-h: 77px; }
body[data-mode="home"][data-ui="crystal"] .topbar {
  position: sticky; top: 0; z-index: 25; background: var(--bg);
  box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax);
}
.hero-track.is-moving .home-scene:has(.stage-hero) { top: var(--topbar-h); }
@media (max-width: 600px) { body[data-ui="crystal"] { --topbar-h: 53px; } }

/* Still poster on phones: a shorter stage, the photo low on the start-opposite side, headline on top. */
@media (max-width: 600px) {
  .home-scene .stage-hero:not(.has-sculpture) { min-height: clamp(460px, 125vw, 560px); }
  .stage-hero:not(.has-sculpture) .knight-studio { top: auto; bottom: 120px; height: 64%; left: -30%; }
  .stage-hero:not(.has-sculpture) .stage-type { inset: 0 0 120px; place-items: start start; padding-top: 7%; }
  .stage-hero:not(.has-sculpture) .stage-line.s1 { max-width: 72%; }
}

/* Guard against sideways scrolling on phones (a 25px overflow was reported on a Pixel 7):
   the full-bleed fields use 100vw. clip, unlike hidden, keeps position: sticky working. */
html { overflow-x: clip; }
/* Phones: the stage fits between the top bar and the tab bar, so "Play now" is always on screen. */
@media (max-width: 600px) {
  .home-scene .stage-hero.has-sculpture, .home-scene .stage-hero:not(.has-sculpture) {
    min-height: 0; height: min(560px, calc(100svh - var(--topbar-h) - var(--tabbar-h)));
  }
}
/* The scroll runway exists from the first frame on the moving stage (no layout shift). */
.hero-track.will-move::after { content: ""; display: block; height: clamp(260px, 52svh, 500px); }
.hero-track.will-move:has(.stage-hero)::after { height: var(--knight-scroll, 900px); }
.hero-track.will-move .home-scene { position: sticky; top: 0; display: flow-root; }
.hero-track.will-move .home-scene:has(.stage-hero) { top: var(--topbar-h); }
@media (max-width: 600px) { .hero-track.will-move:has(.stage-hero)::after { height: var(--knight-scroll, 900px); } }

/* Phones: the same rule as wider screens. The headline (up to two lines while you scroll)
   has its own band at the top and the knight stands between it and the buttons, so the
   knight never covers a word. */
@media (max-width: 600px) {
  .stage-hero.has-sculpture { --type: clamp(44px, 14.5vw, 80px); --band: calc(var(--type) * 1.72 + 30px); }
  .stage-hero.has-sculpture .stage-line { font-size: var(--type); }
  .stage-hero.has-sculpture .stage-type { inset: 0 0 auto; height: var(--band); place-items: center; padding-top: 10px; }
  .stage-hero.has-sculpture .knight-stage { top: var(--band); bottom: 164px; height: auto; }
}

/* ---------- first visit: two equal doors, and the shortcuts row ---------- */
/* Learn and play side by side, same size and weight; learn in amber, play in cobalt. */
.hero-choice { display: flex; gap: 12px; }
.hero-choice .pill { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
.stage-hero .hero-choice .hero-learn { --pill-bg: var(--amber); --pill-fg: var(--ink-deep); --pill-edge: transparent; box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 22px color-mix(in srgb, var(--amber) 45%, transparent); }
.stage-hero[data-field="amber"] .hero-choice .hero-learn { --pill-bg: var(--ink-deep); --pill-fg: var(--paper); box-shadow: none; }
/* Online, strong bots, puzzles, analysis: visible on the first screen, under the main actions. */
.stage-quick { flex: 0 0 100%; order: 10; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.qlink {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 13px; border-radius: var(--r-pill, 999px);
  border: 1px solid color-mix(in srgb, var(--fg) 24%, transparent); background: color-mix(in srgb, var(--field) 72%, transparent);
  color: var(--fg); font: 600 14px/1 Heebo, var(--sans); cursor: pointer; white-space: nowrap;
  transition: border-color .2s, background-color .2s;
}
.qlink .ic { width: 16px; height: 16px; flex: none; opacity: .8; }
.qlink:hover { border-color: color-mix(in srgb, var(--fg) 55%, transparent); }
.qlink:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.stage-foot { flex-wrap: wrap; row-gap: 10px; }
@media (min-width: 861px) {
  .stage-foot { padding-bottom: 14px; }
  .stage-hero.has-sculpture .knight-stage { bottom: 136px; }
  .stage-hero:not(.has-sculpture) .stage-type { inset-block-end: 124px; }
}
@media (min-width: 601px) and (max-width: 860px) {
  .stage-quick { justify-content: center; }
  .stage-hero.has-sculpture .knight-stage { bottom: 164px; }
}
@media (max-width: 600px) {
  /* Phones: the shortcuts row replaces the scroll arrow (scrolling does the same). */
  .stage-foot .hero-skip { display: none; }
  .stage-quick { justify-content: center; gap: 6px; }
  .qlink { min-height: 34px; padding: 5px 10px; font-size: 13.5px; gap: 5px; }
  .qlink .ic { width: 15px; height: 15px; }
  .stage-foot { min-height: 176px; gap: 8px 10px; padding-bottom: 14px; }
  .stage-foot .hero-choice { flex: 1 1 0; min-width: 0; gap: 10px; }
  .stage-foot .hero-choice .pill { padding-inline: 12px; }
  .stage-type { inset: 0 0 184px; }
  .stage-hero.has-sculpture .knight-stage { bottom: 180px; height: 50%; }
}
/* iPhone SE and narrower: four shortcuts on one row, icons give way to the words. */
@media (max-width: 400px) {
  .qlink { padding-inline: 9px; }
  .qlink .ic { display: none; }
}