/* =============================================================================
   CTFY · Reviews (/theta-chamber/reviews/, PRD pages/14) · page-only layout
   Builds on css/site.css (foundation) and css/modules.css (M01–M33). Lives here: the M13 `stack` variant
   (the page's hero moment), the spec-strip head and the studio frame. Motion is transform/opacity only.

   Story stack, no page JS. Each <li> holds a 1px probe with the core.js hook `data-inview`
   (data-in-view="true|false" while it crosses the viewport, .is-entered once, motion on only).
   - Light-up (every width): a card waits (Before at .35, hairline undrawn, quote words at .18) until its probe
     enters; then the Before line comes up, and after 500ms the hairline draws and the words light .18 → 1 in
     reading order (stagger ≤40ms). Time-based, fires once.
   - Stacking (≥1024 × ≥680, motion on): the <li>s stick at 14vh + n·18px, so each card slides over the last.
     The card under a card whose probe is in view recedes to .96 / .55 (two deep .92 / .4), 400ms ease-out.
     Keyboard focus inside a covered card lifts it to the front.
   - Reduced motion, motion off, no JS, no :has(): a plain list with every line at full opacity.
   ============================================================================= */

/* ---------- 1 · Hero (H4 field) ---------- */
.rv-hero .hero__main{max-width:800px}

/* ---------- 2 · Story stack (M13 variant `stack`) ---------- */
/* BG-B aurora rides along with the viewport through the tall chapter, so every card sits over light */
.rv-stories{overflow:clip;padding-top:var(--section-y-tight)}
.rv-stories>.aurora{position:sticky;inset:auto;top:0;width:100%;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh}
/* the light settles into bg-1 before the numbers band instead of being cut by the chapter edge */
.rv-stories::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;height:min(44vh,400px);pointer-events:none;background:linear-gradient(to bottom,transparent,var(--bg-1) 78%)}

.rv-stack{display:grid;gap:clamp(24px,4vw,40px);max-width:1100px;margin-inline:auto}
.rv-item{position:relative}
.rv-item:nth-child(2){--k:1}
.rv-item:nth-child(3){--k:2}
.rv-probe{position:absolute;left:0;top:62%;width:1px;height:1px;pointer-events:none}

/* Card: a Lens card (edge light + sheen from .glass-lens) on an opaque fill, so a card never shows the one beneath */
.rv-card.m-story{--pad:clamp(10px,1.1vw,16px);display:grid;grid-template-columns:minmax(0,1fr);align-items:center;height:auto;overflow:visible;
  padding:var(--pad);border-radius:calc(var(--r-l) + var(--pad));border-color:transparent;
  background:radial-gradient(80% 70% at 100% 0%,rgba(62,85,245,.13),transparent 62%) padding-box,
             linear-gradient(180deg,#1A1E2C,#0D1018) padding-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 40px 90px -40px rgba(0,0,0,.85),0 2px 8px rgba(0,0,0,.3)}
.rv-card .m-story__media{border-radius:var(--r-l);aspect-ratio:4/5}
.rv-card .m-story__media picture{display:contents}
.rv-card .m-story__body{justify-content:center;gap:16px;padding:clamp(18px,2.6vw,30px) clamp(8px,1.6vw,22px) clamp(10px,1.6vw,22px)}
.rv-card .m-story__before{max-width:60ch}
.rv-card .m-story__tag{--veil-fill:rgba(10,12,18,.6)}
/* hairline with the 6px theta dot: the dot lights, then the line draws out of it */
.rv-line{position:relative;display:block;height:6px;margin:2px 0}
.rv-line::before{content:"";position:absolute;left:0;top:0;width:6px;height:6px;border-radius:50%;background:var(--theta-500);box-shadow:0 0 12px var(--theta-glow)}
.rv-line i{position:absolute;left:14px;right:0;top:50%;height:1px;margin-top:-.5px;background:var(--line-2);transform-origin:left}
.rv-card .m-story__mark{margin:6px 0 -2px;font-size:4.5rem}
.rv-quote{font-size:calc(var(--t-title) * 1.6 * var(--k-display));line-height:1.2;letter-spacing:-.005em;text-wrap:pretty}
.rv-quote span{display:inline}
.rv-who{color:var(--text-2)}
.rv-card .m-story__body .rv-ig{margin-top:-2px;align-self:flex-start}

@media (min-width:768px){
  .rv-card.m-story{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(20px,3vw,44px)}
  .rv-card .m-story__body{padding:clamp(16px,2vw,28px) clamp(12px,2vw,32px) clamp(16px,2vw,28px) 0}
}
@media (max-width:1023px) and (min-width:768px){.rv-quote{font-size:calc(var(--t-title) * 1.4 * var(--k-display))}}
@media (max-width:599px){.rv-quote{font-size:calc(1.625rem * var(--k-display))}}

/* Light-up (motion on). Pending = the probe has not entered yet (or core.js has not run: then a 2.5s fail-safe
   shows everything, as the foundation's heroes do). Focus inside a card always shows it complete. */
@media (prefers-reduced-motion:no-preference){
  html.js:not([data-motion="off"]) .rv-item:not(:focus-within):has(>.rv-probe:not([data-in-view="true"]):not(.is-entered)) .m-story__before{opacity:.35;transition:none}
  html.js:not([data-motion="off"]) .rv-item:not(:focus-within):has(>.rv-probe:not([data-in-view="true"]):not(.is-entered)) .rv-line::before{transform:scale(0);transition:none}
  html.js:not([data-motion="off"]) .rv-item:not(:focus-within):has(>.rv-probe:not([data-in-view="true"]):not(.is-entered)) .rv-line i{transform:scaleX(0);transition:none}
  html.js:not([data-motion="off"]) .rv-item:not(:focus-within):has(>.rv-probe:not([data-in-view="true"]):not(.is-entered)) .rv-quote span{opacity:.18;transition:none}
  html.js:not([data-motion="off"]) .rv-item:not(:focus-within):has(>.rv-probe:not([data-in-view="true"]):not(.is-entered)) :is(.rv-who,.rv-ig){opacity:0;transition:none}
  html.js .rv-item:has(>.rv-probe:not([data-in-view])) :is(.m-story__before,.rv-line i,.rv-quote span,.rv-who,.rv-ig),
  html.js .rv-item:has(>.rv-probe:not([data-in-view])) .rv-line::before{animation:rv-failsafe 0s linear 2.5s forwards}
  /* the resolve: Before first, then (500ms) dot + hairline, then the words in reading order, then who + link */
  html:not([data-motion="off"]) .rv-card .m-story__before{transition:opacity 400ms var(--ease-out)}
  html:not([data-motion="off"]) .rv-line::before{transition:transform 360ms var(--ease-pop) 500ms}
  html:not([data-motion="off"]) .rv-line i{transition:transform 700ms var(--ease-out) 560ms}
  html:not([data-motion="off"]) .rv-quote span{transition:opacity 900ms var(--ease-out) calc(560ms + var(--i,0) * min(40ms, 900ms / var(--n,30)))}
  html:not([data-motion="off"]) :is(.rv-who,.rv-ig){transition:opacity 500ms var(--ease-out) 1500ms}
}
@keyframes rv-failsafe{to{opacity:1;transform:none}}

/* Stacking: desktop with room for a whole card under the dock, motion on */
@media (min-width:1024px) and (min-height:680px) and (prefers-reduced-motion:no-preference){
  html:not([data-motion="off"]) .rv-stack{gap:clamp(180px,34vh,360px)}
  html:not([data-motion="off"]) .rv-item{position:sticky;top:calc(14vh + var(--k,0) * 18px)}
  /* the last card needs room to settle: a sticky box's own margin does not extend its range, an extra grid row does */
  html:not([data-motion="off"]) .rv-stack::after{content:"";height:1px}
  html:not([data-motion="off"]) .rv-probe{top:70%}
  /* a stuck card always fits below its slot: the portrait gives way first on short screens */
  html:not([data-motion="off"]) .rv-card .m-story__media{max-height:calc(86vh - 36px - 2 * var(--pad) - 32px)}
  html:not([data-motion="off"]) .rv-card{transform-origin:50% 0;transition:transform 400ms var(--ease-out),opacity 400ms var(--ease-out)}
  html:not([data-motion="off"]) .rv-item:not(:focus-within):has(+ .rv-item>.rv-probe[data-in-view="true"])>.rv-card{transform:scale(.96);opacity:.55}
  html:not([data-motion="off"]) .rv-item:not(:focus-within):has(+ .rv-item + .rv-item>.rv-probe[data-in-view="true"])>.rv-card{transform:scale(.92);opacity:.4}
  html:not([data-motion="off"]) .rv-item:focus-within{z-index:3}
}

/* ---------- 3 · Link row ---------- */
.rv-more{display:flex;justify-content:center;margin-top:clamp(56px,7vw,96px)}
@media (max-width:599px){.rv-more .btn{width:100%}}

/* ---------- 4 · The session in numbers + the Sofia studio ---------- */
.rv-numbers__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;margin-bottom:clamp(28px,3.4vw,48px)}
.rv-place{margin:clamp(72px,9vw,136px) 0 0;aspect-ratio:2/1;--pos:50% 60%}
.rv-place::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(6,7,11,.5),transparent 38%)}
.rv-place figcaption{position:absolute;z-index:2;left:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px)}
.rv-place .chip{--veil-fill:rgba(10,12,18,.72)}
@media (max-width:767px){.rv-place{aspect-ratio:4/3;--pos:40% 62%}}