/* Landing: hero, choice screen and the warp layer. Tokens come from site.css. */
body[data-page="landing"] { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow-x: hidden; }
.warp-stage { flex: 1; display: grid; position: relative; }
.warping .warp-stage { will-change: transform, opacity, filter; }
.screen { grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; justify-content: center; padding: var(--section) 0; }
.screen[hidden] { display: none; }

/* Hero: the H1 leads. The wordmark is header-sized; on desktop a small static spectrum (same bar motif as the choice cards) fills the right column. */
.hero-mark { display: block; height: 26px; width: auto; margin-bottom: var(--s-7); }
.hero-viz { display: none; }
@media (min-width: 960px) {
  .hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
  .hero-viz { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 280px; padding: var(--s-5) var(--s-5) var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
  .hero-viz::before { content: ""; position: absolute; left: var(--s-5); right: var(--s-5); top: 34%; border-top: 1px dashed var(--muted); opacity: .6; } /* the genre target line */
  .hero-viz::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-top: 1px solid var(--line); background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 12px); }
  .hero-viz i { flex: 1; display: block; background: var(--line-strong); border-radius: 1px; }
  .hero-viz i:nth-child(1) { height: 30%; } .hero-viz i:nth-child(2) { height: 44%; } .hero-viz i:nth-child(3) { height: 58%; } .hero-viz i:nth-child(4) { height: 72%; }
  .hero-viz i:nth-child(5) { height: 66%; } .hero-viz i:nth-child(6) { height: 54%; } .hero-viz i:nth-child(7) { height: 62%; } .hero-viz i:nth-child(8) { height: 80%; background: var(--accent); }
  .hero-viz i:nth-child(9) { height: 68%; } .hero-viz i:nth-child(10) { height: 50%; } .hero-viz i:nth-child(11) { height: 42%; } .hero-viz i:nth-child(12) { height: 46%; }
  .hero-viz i:nth-child(13) { height: 36%; } .hero-viz i:nth-child(14) { height: 28%; } .hero-viz i:nth-child(15) { height: 20%; } .hero-viz i:nth-child(16) { height: 14%; }
}
.hero h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.035em; max-width: 16ch; margin-bottom: var(--s-6); }
.hero .kicker { margin-bottom: var(--s-4); }
.hero .kicker::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .5rem; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.go { min-height: 56px; padding: 0 2rem; font-size: var(--fs-md); }
.go [aria-hidden] { display: inline-block; transition: transform var(--fast) var(--ease-out); }
.ruler { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-top: 1px solid var(--line); background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 12px); opacity: .7; }
@media (hover: hover) { .go:hover [aria-hidden] { transform: translateX(4px); } }

/* Choice screen */
.chead { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); margin-bottom: var(--s-6); }
.chead h2 { font-size: var(--fs-xl); }
.chead h2:focus { outline: none; }
.picks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.pick { position: relative; display: grid; grid-template-rows: auto 1fr auto auto auto; gap: var(--s-3); min-height: 340px; padding: var(--s-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; overflow: hidden; transition: border-color var(--fast) ease, background-color var(--fast) ease, transform 240ms var(--ease-out); }
.pick .ch { font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: .06em; color: var(--faint); }
.pick .pt { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.pick .pd { color: var(--muted); max-width: 34ch; }
.pick .po { font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); transition: color var(--fast) ease; }
.pick .arrow { display: inline-block; transition: transform var(--fast) var(--ease-out); }
.pick:focus-visible { border-color: var(--accent); }
.pick:active { transform: scale(0.985); }

/* Hover life: each card draws its own small instrument from 1px-wide bars. */
.viz { display: flex; align-items: flex-end; gap: 6px; height: 88px; align-self: end; }
.viz i { display: block; background: var(--line-strong); border-radius: 1px; transition: background-color var(--fast) ease, height 420ms var(--ease-out), transform 420ms var(--ease-out); }
/* Lessons: stacked track rows that slide in sequence. */
.lessons .viz { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 8px; }
.lessons .viz i { height: 8px; width: 100%; transform-origin: left; }
.lessons .viz i:nth-child(1) { width: 92%; } .lessons .viz i:nth-child(2) { width: 64%; } .lessons .viz i:nth-child(3) { width: 78%; } .lessons .viz i:nth-child(4) { width: 46%; }
/* Analyzer: a spectrum that breathes. */
.analyzer .viz i { width: 100%; max-width: 22px; height: 28%; }
.analyzer .viz i:nth-child(2) { height: 52%; } .analyzer .viz i:nth-child(3) { height: 76%; } .analyzer .viz i:nth-child(4) { height: 46%; } .analyzer .viz i:nth-child(5) { height: 64%; } .analyzer .viz i:nth-child(6) { height: 34%; } .analyzer .viz i:nth-child(7) { height: 18%; }
@media (hover: hover) {
  .pick:hover { border-color: var(--line-strong); background: var(--surface-2); }
  .pick:hover .po { color: var(--accent); }
  .pick:hover .arrow { transform: translateX(4px); }
  .lessons:hover .viz i:nth-child(1) { background: var(--accent); animation: slide 520ms var(--ease-out) both; }
  .lessons:hover .viz i:nth-child(2) { animation: slide 520ms 60ms var(--ease-out) both; background: var(--muted); }
  .lessons:hover .viz i:nth-child(3) { animation: slide 520ms 120ms var(--ease-out) both; background: var(--muted); }
  .lessons:hover .viz i:nth-child(4) { animation: slide 520ms 180ms var(--ease-out) both; background: var(--muted); }
  .analyzer:hover .viz i { background: var(--muted); animation: meter 900ms ease-in-out infinite alternate; }
  .analyzer:hover .viz i:nth-child(3) { background: var(--accent); }
  .analyzer:hover .viz i:nth-child(2n) { animation-duration: 700ms; animation-delay: -200ms; }
  .analyzer:hover .viz i:nth-child(3n) { animation-duration: 1100ms; animation-delay: -450ms; }
}
@keyframes slide { from { transform: scaleX(.15); } to { transform: none; } }
@keyframes meter { from { transform: scaleY(.55); } to { transform: scaleY(1.25); } }
.analyzer .viz i { transform-origin: bottom; }

/* Choice enter: arrives from "inside" the warp. */
.choose:not([hidden]) .wrap { transform-origin: 50% 50%; animation: arrive 320ms var(--ease-out) both; }
@keyframes arrive { from { opacity: 0; transform: scale(.7); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* Warp layer: radial streaks drawn by js/landing.js. Never intercepts input except to block double clicks. */
.warp-fx { transition: opacity 220ms ease; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; opacity: 0; }
.warping .warp-fx { opacity: 1; pointer-events: auto; }
.warping { overflow: hidden; }

@media (max-width: 720px) {
  .picks { grid-template-columns: 1fr; }
  .pick { min-height: 260px; padding: var(--s-5); }
  .chead { flex-direction: column; align-items: flex-start; }
  .hero h1 { max-width: none; }
  .go { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .choose:not([hidden]) .wrap, .pick:hover .viz i { animation: none !important; }
  .pick, .viz i, .go [aria-hidden], .pick .arrow { transition: none; }
}
.screen > .wrap { width: 100%; }