/* The front door: a violet night, a flood of real names, one light, six lanes. Calm everywhere except the flood. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.scene-page .site-header { position:absolute; inset:0 0 auto; z-index:7; }
.scene-page .header-inner { min-height:72px; }
.js .scene-page .nav.is-open { background:rgba(11,9,21,.94); }

/* ---- the scene */
.cave { display:none; position:relative; height:100svh; min-height:620px; overflow:hidden; isolation:isolate;
  background:radial-gradient(ellipse 80% 70% at 70% 100%, #16112b 0%, #0b0915 58%, #08070f 100%); }
.js .cave { display:block; }
html[data-view='text'] .cave { display:none; }
.cave-stage { position:absolute; inset:0; z-index:2; }
.cave-canvas { position:absolute; inset:0; width:100%; height:100%; display:none; image-rendering:pixelated; image-rendering:crisp-edges; }
html[data-view='pixel'] .cave-canvas { display:block; }

.story { position:absolute; z-index:4; left:max(40px,7vw); top:50%; transform:translateY(-54%); width:min(500px,36vw); }
.story h1 { font:600 clamp(2.4rem,4.3vw,4.1rem)/1.02 var(--sans); letter-spacing:-.035em; color:var(--ink); margin:0; }
.story-line { font:italic 400 clamp(2.3rem,4.2vw,4rem)/1.04 var(--serif); color:var(--lamp); margin:6px 0 0; letter-spacing:-.01em; min-height:2.1em; }
.story-sub { margin:26px 0 0; color:var(--muted); font-size:1.05rem; line-height:1.55; max-width:34ch; }
.story-actions { margin:30px 0 0; }
.cta { min-height:52px; padding:0 26px; border:0; border-radius:999px; background:var(--lamp); color:#0a0b16; font:600 1rem var(--sans); letter-spacing:-.005em; box-shadow:0 0 0 0 rgba(143,156,255,0); transition:box-shadow .3s, transform .15s; }
.cta:hover,.cta:focus-visible { box-shadow:0 0 30px 2px rgba(143,156,255,.45); }
.cta:active { transform:scale(.98); }
.cta[hidden] { display:none; }

/* the light: a soft violet-white glow that blooms from the orb, and a second one that follows the open lane */
.light { position:absolute; width:1300px; height:1300px; margin:-650px 0 0 -650px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(236,228,255,.5) 0%, rgba(175,150,255,.22) 14%, rgba(120,90,230,.09) 34%, rgba(90,60,200,0) 62%);
  transform:scale(.13); transition:transform 1.4s cubic-bezier(.2,.8,.2,1), opacity .8s, left 1.1s cubic-bezier(.2,.8,.2,1), top 1.1s cubic-bezier(.2,.8,.2,1); }
.cave:not([data-phase='flood']) .light { transform:scale(1); }
.cave[data-phase='lane'] .light { opacity:.55; }
.light-lane { width:700px; height:700px; margin:-350px 0 0 -350px; opacity:0; transform:scale(.6);
  background:radial-gradient(circle, rgba(236,228,255,.38) 0%, rgba(175,150,255,.16) 22%, rgba(120,90,230,0) 64%); }
.cave[data-phase='lane'] .light-lane { opacity:1; transform:scale(1); }
.lanes { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity 1s .2s; }
.cave:not([data-phase='flood']) .lanes { opacity:1; }
.lane { fill:none; stroke:rgba(143,156,255,.26); stroke-width:1.2; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.6s cubic-bezier(.3,.7,.2,1), stroke .6s, stroke-width .6s; }
.cave:not([data-phase='flood']) .lane { stroke-dashoffset:0; }
.cave[data-phase='lane'] .lane { stroke:rgba(143,156,255,.12); }
.cave[data-phase='lane'] .lane.is-open { stroke:rgba(226,216,255,.9); stroke-width:2; filter:drop-shadow(0 0 6px rgba(143,156,255,.8)); }

/* the orb: the one thing to touch first */
.orb { position:absolute; z-index:5; width:76px; height:76px; transform:translate(-50%,-50%); border:0; padding:0; background:none; border-radius:50%; cursor:pointer; }
.orb-core { position:absolute; inset:24px; border-radius:50%; background:radial-gradient(circle at 45% 40%, #ffffff, #d9ccff 45%, #9a82ff 100%); box-shadow:0 0 22px 6px rgba(200,185,255,.55), 0 0 70px 18px rgba(140,110,255,.25); transition:transform .3s; }
.orb:hover .orb-core,.orb:focus-visible .orb-core { transform:scale(1.15); }
.orb-ring { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(200,185,255,.55); animation:ring 2.6s ease-out infinite; }
.cave:not([data-phase='flood']) .orb-ring { animation:none; opacity:0; }
.orb:hover .orb-ring,.orb:focus-visible .orb-ring { animation-play-state:paused; }
@keyframes ring { 0% { transform:scale(.55); opacity:.9; } 100% { transform:scale(1.5); opacity:0; } }
.orb-label { position:absolute; left:50%; top:100%; transform:translateX(-50%); margin-top:4px; white-space:nowrap; font:500 .9rem var(--sans); color:var(--ink); letter-spacing:.01em; }
.cave:not([data-phase='flood']) .orb-label { font-size:.78rem; color:var(--muted); }

/* lane labels: an icon, a name, a count */
.lane-label { position:absolute; z-index:4; transform:translate(-50%,-100%); display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px 0 12px; border-radius:999px; border:1px solid var(--line); background:rgba(16,13,30,.82); color:var(--ink); font:600 .88rem var(--sans); white-space:nowrap; opacity:0; visibility:hidden; transition:opacity .8s .6s, border-color .3s, background .3s; }
.cave:not([data-phase='flood']) .lane-label { opacity:1; visibility:visible; }
.lane-label .icon { width:18px; height:18px; color:var(--lamp); flex:none; }
.lane-count { font:500 .75rem var(--sans); color:var(--muted); }
.lane-label:hover,.lane-label:focus-visible { border-color:rgba(143,156,255,.6); }
.lane-label[aria-pressed='true'] { border-color:var(--lamp); background:rgba(143,156,255,.14); }
.cave[data-phase='lane'] .lane-label:not([aria-pressed='true']) { opacity:.55; }

/* the releases: real names and logos, always readable */
.pill { position:absolute; left:0; top:0; z-index:3; display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px 0 10px; border-radius:999px; border:1px solid rgba(143,156,255,.14); background:rgba(19,16,36,.88); color:#c9c3e0; font:500 .82rem/1 var(--sans); white-space:nowrap; overflow:hidden; will-change:transform,opacity; cursor:default; transition:border-color .3s, color .3s, background .3s; }
.pill::before { content:''; position:absolute; inset:-5px 0; }
.pill .mark { width:16px; height:16px; flex:none; color:#e4defa; }
.pill-name { overflow:hidden; text-overflow:ellipsis; }
.pill:hover,.pill:focus-visible { border-color:rgba(143,156,255,.65); color:var(--ink); background:rgba(28,23,52,.96); z-index:5; }
.cave:not([data-phase='flood']) .pill:not(.is-dot) { border-color:rgba(143,156,255,.3); color:#ddd8f0; }
.pill.is-near { border-color:rgba(143,156,255,.5); }
.cave .pill.is-dot { width:8px!important; height:8px!important; padding:0!important; gap:0; border:0; background:rgba(143,156,255,.75); pointer-events:none; }
.pill.is-dot .mark,.pill.is-dot .pill-name { display:none; }
.cave[data-phase='lane'] .pill.is-dot { background:rgba(143,156,255,.4); }

/* the hover card */
.card { position:absolute; z-index:6; width:270px; padding:14px 16px; border-radius:14px; border:1px solid var(--strong-line); background:rgba(16,13,30,.97); box-shadow:0 22px 60px rgba(0,0,0,.55); }
.card[hidden] { display:none; }
.card-meta { display:flex; align-items:center; gap:7px; margin:0; font:500 .76rem var(--sans); color:var(--muted); }
.card-mark { width:14px; height:14px; color:var(--ink); }
.card-name { margin:6px 0 4px; font:600 1rem/1.25 var(--sans); color:var(--ink); }
.card-line { margin:0; font-size:.88rem; line-height:1.45; color:#cbc5df; }
.card-src { display:inline-block; margin-top:8px; font-size:.78rem; color:var(--ink); text-decoration-color:rgba(143,156,255,.6); }

/* the story so far */
.rail { position:absolute; z-index:4; left:50%; bottom:20px; transform:translateX(-50%); display:flex; margin:0; padding:0; list-style:none; }
.rail li { position:relative; width:140px; text-align:center; padding-top:16px; font:500 .7rem var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); transition:color .6s; }
.rail li::before { content:''; position:absolute; top:0; left:50%; width:7px; height:7px; margin-left:-3.5px; border-radius:50%; border:1px solid var(--dim); background:var(--paper); transition:background .6s, border-color .6s, box-shadow .6s; }
.rail li+li::after { content:''; position:absolute; top:3px; right:calc(50% + 8px); width:calc(100% - 16px); height:1px; background:var(--line); }
.rail li.is-on { color:var(--ink); }
.rail li.is-on::before { background:var(--lamp); border-color:var(--lamp); box-shadow:0 0 10px var(--lamp); }

.cave-views { position:absolute; z-index:6; right:16px; top:76px; display:flex; gap:2px; align-items:center; font:500 .75rem var(--sans); }
.cave-views button,.cave-views a { min-height:44px; min-width:44px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; color:var(--dim); text-decoration:none; }
.cave-views [aria-pressed='true'] { color:var(--ink); }
.cave-views a { color:var(--muted); }
.cave-views button:hover,.cave-views a:hover { color:var(--ink); }

/* ---- phones: words on top, the scene below (same breakpoint as lanes.js geometry) */
@media (max-width:759.98px) {
  .cave .story { left:20px; right:20px; top:64px; transform:none; width:auto; }
  .cave .story h1 { font-size:clamp(1.75rem,8vw,2.2rem); }
  .cave .story-line { font-size:clamp(1.7rem,7.6vw,2.1rem); min-height:0; }
  .cave .story-sub { font-size:.95rem; margin-top:12px; }
  .cave .story-actions { position:fixed; left:20px; right:20px; bottom:calc(16px + env(safe-area-inset-bottom)); margin:0; z-index:6; }
  .cave .cta { width:100%; }
  .cave .rail { display:none; }
  .cave .pill { height:30px; font-size:.75rem; padding:0 10px 0 8px; gap:6px; }
  .cave .pill .mark { width:14px; height:14px; }
  .cave .lane-label { flex-direction:column; gap:2px; padding:5px 8px; border-radius:12px; font-size:.72rem; }
  .cave .lane-count { display:none; }
  .cave .cave-views { top:auto; bottom:6px; right:4px; }
  .cave[data-phase='lane'] .orb { opacity:.7; }
  .cave[data-phase='lane'] .lane-label { opacity:0; visibility:hidden; }
  .cave[data-phase='lane'] .cave-views { display:none; }
  html[data-view='pixel'] .cave .pill { font-size:.66rem; letter-spacing:0; }
}

/* ---- Pixel: the same scene as a dithered picture; square edges, mono type for the names */
html[data-view='pixel'] .light,html[data-view='pixel'] .lanes { display:none; }
html[data-view='pixel'] .cave { background:#07060d; }
html[data-view='pixel'] .pill,html[data-view='pixel'] .lane-label,html[data-view='pixel'] .card,html[data-view='pixel'] .cta { border-radius:0; }
html[data-view='pixel'] .pill { font:700 .74rem/1 'Courier New',Courier,monospace; text-transform:uppercase; letter-spacing:.03em; border:2px solid #3b2d61; background:#0e0b1a; box-shadow:3px 3px 0 #07060d; }
html[data-view='pixel'] .pill.is-dot { border:0; box-shadow:none; background:#9b82db; }
html[data-view='pixel'] .lane-label { border:2px solid #4d3a7d; background:#0e0b1a; font-family:'Courier New',Courier,monospace; text-transform:uppercase; letter-spacing:.04em; }
html[data-view='pixel'] .orb-core { border-radius:0; inset:28px; background:#e6dcff; box-shadow:0 0 0 4px #9b82db, 0 0 0 8px #4d3a7d; }
html[data-view='pixel'] .orb-ring { border-radius:0; border:2px dashed #7d62bd; }
html[data-view='pixel'] .cta { box-shadow:4px 4px 0 #4d3a7d; font-family:'Courier New',Courier,monospace; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }

/* ---- the sheet for early access */
.cave-sheet { position:absolute; inset:0; z-index:9; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(7,6,13,.6); }
.cave-sheet[hidden] { display:none; }
.sh { position:relative; width:min(520px,100%); max-height:90%; overflow:auto; background:#120f22; border:1px solid var(--strong-line); border-radius:20px; padding:26px 24px 22px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
html[data-view='pixel'] .sh { border-radius:0; border:2px solid #4d3a7d; box-shadow:6px 6px 0 #07060d; }
.sh-close { position:absolute; top:10px; right:10px; min-height:44px; min-width:44px; padding:0 12px; background:none; border:0; color:var(--muted); font:500 .8rem var(--sans); }
.sh-close:hover { color:var(--ink); }
.sh-eyebrow { font:500 .72rem var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 60px 10px 0; }
.sh-title { font:italic 400 1.75rem/1.15 var(--serif); margin:0 30px 18px 0; color:var(--ink); }

/* ---- the text version */
.read { display:block; padding:110px 0 80px; }
.js .read { display:none; }
html[data-view='text'] .read { display:block; }
.read:focus { outline:none; }
.read-wrap { width:min(720px,calc(100% - 40px)); margin-inline:auto; }
.read h2 { font:600 clamp(2rem,6vw,3rem)/1.05 var(--sans); letter-spacing:-.03em; margin:12px 0 18px; }
.read-lead { color:var(--muted); font-size:1.08rem; }
.read-access { margin:34px 0 10px; padding:26px 0; border-block:1px solid var(--line); }
.read-back { display:none; margin:0 0 24px; }
html.js[data-view='text'] .read-back { display:block; }
.ghost { min-height:44px; padding:0 18px; border:1px solid var(--strong-line); border-radius:999px; background:none; color:var(--ink); font:500 .9rem var(--sans); }
.read-lane { margin-top:52px; }
.read-lane h3 { display:flex; align-items:center; gap:10px; font:600 1.35rem var(--sans); margin:0; }
.read-lane h3 .icon { width:22px; height:22px; color:var(--lamp); }
.read-count { font:500 .85rem var(--sans); color:var(--muted); }
.read-blurb { color:var(--muted); margin:6px 0 10px; }
.read-items { list-style:none; padding:0; margin:0; }
.read-item { padding:16px 0; border-top:1px solid var(--line); }
.read-item h4 { font:600 1.02rem var(--sans); margin:4px 0; }
.read-item p { margin:0; }
.read-meta { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.8rem; }
.read-meta .mark { width:14px; height:14px; color:var(--ink); }
.read-src { font-size:.82rem; margin-top:6px!important; }
.read-src a { color:var(--muted); }
.read-note { color:var(--muted); font-size:.9rem; margin-top:44px; }

@media (prefers-reduced-motion:reduce) {
  .light,.lane,.lane-label,.cta,.pill,.rail li,.rail li::before { transition:none!important; }
  .orb-ring { animation:none; opacity:.6; transform:scale(1.1); }
}