/* The Reel look: one app per screen, like stories. Near-black ground and one lime accent; a 3D phone
   (reel.js) stays pinned while the slides scroll past and spins once between apps. Every rule here is
   scoped to :root[data-theme="reel"]; the rest of the page keeps the Thread rules from studio.css.
   Without WebGL each slide shows its own flat phone. Reduced motion: no spin, no cycling screens. */

:root[data-theme="reel"] {
  --ground: #050506;
  --panel: #101012;
  --panel-hi: #19191c;
  --amber: #d8f26a;
  --amber-hi: #eaff9a;
  --on-amber: #0b0d02;
  scroll-snap-type: y proximity;
}
/* The header is a snap point too, so the page opens on it and the look switch stays in reach. */
:root[data-theme="reel"] body > header { scroll-snap-align: start; }
.reel[hidden] { display: none; }
:root[data-theme="reel"] .reel { display: block; position: relative; border-bottom: 1px solid var(--hair); }
/* The reel stands in for the cover and the picker; the shelves and the rest follow it as usual. */
:root[data-theme="reel"] .hero-band { display: none; }

/* The stage: pinned for the whole reel, under the slides. */
.reel-stage { position: sticky; top: 0; height: 100svh; margin-bottom: -100svh; pointer-events: none; overflow: hidden; }
.reel-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(90vw, 900px); aspect-ratio: 1; translate: -18% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(216, 242, 106, .13), transparent); }
.reel-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.reel.has-3d .reel-sky { display: block; }
.reel-bars { position: absolute; top: 12px; left: var(--gutter); right: var(--gutter); display: flex; gap: 4px; max-width: var(--wrap); margin: 0 auto; }
.reel-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(242, 241, 236, .18); }
.reel-bars i.seen { background: rgba(242, 241, 236, .85); }
.reel-bars i.now { background: var(--amber); }

.reel-slide { position: relative; min-height: 100svh; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px; max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) 40px; }
.reel-text { gap: 16px; max-width: 480px; }
.reel-name { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(56px, 8vw, 120px); line-height: .92; letter-spacing: -.02em; }
.reel-line { margin: 0; font-size: clamp(18px, 1.7vw, 21px); color: var(--ink-2); max-width: 34ch; }
.reel .facts { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink-3); }
.reel .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.reel-phone { max-width: 260px; }
.reel.has-3d .reel-phone { visibility: hidden; }
.reel-end { margin: 0; padding-block: 28px 48px; }
.reel-end a { color: var(--ink-2); }

/* The words of the slide in view rise in; the others wait. */
@media (prefers-reduced-motion: no-preference) {
  .reel.has-3d .reel-text { opacity: .25; translate: 0 18px; transition: opacity .5s ease, translate .6s cubic-bezier(.2, .7, .2, 1); }
  .reel.has-3d .reel-slide.on .reel-text { opacity: 1; translate: 0 0; }
}

/* Phones: the phone sits in the top half, the words at the bottom over a fade. */
@media (max-width: 720px) {
  .reel-slide { grid-template-columns: 1fr; align-content: end; padding-top: 40px; }
  .reel-phone { max-width: 200px; justify-self: center; order: -1; }
  .reel.has-3d .reel-phone { height: 44svh; }
  .reel-stage::before { translate: -50% -78%; }
  .reel-name { font-size: clamp(48px, 14vw, 64px); }
  .reel .passes { display: none; }
}