/* Full 3D (html.full3d): the page over the pre-rendered Blender journey, exactly as reviewed on the
   lab site preview (src/lab/site/preview.css, reviews 8-17), scoped so nothing here touches Lite.
   Full 3D also carries journey-on, so the journey layout rules in styles.css apply as they did there. */

/* The frame stage lives in the journey stage, beside Lite's WebGL canvas (which the choice screen uses) */
.frames-stage, .f3-gap, .f3-who { display: none; }
.full3d .frames-stage { display: block; position: absolute; inset: 0; }
.full3d .frames-stage canvas { display: block; width: 100%; height: 100%; }
.full3d:not(.gate-on) .journey-canvas { display: none; }
.full3d .journey-stage { background: var(--color-paper); }
/* under the choice screen the frames wait; they show as it hands over */
.full3d.gate-on .frames-stage { opacity: 0; }
.full3d.gate-on .gate.is-leaving ~ main .frames-stage { opacity: 1; transition: opacity 900ms ease-out; }
.full3d.gate-on .journey-canvas { position: relative; z-index: 2; }
.frames-overlays { position: absolute; inset: 0; pointer-events: none; }
.frames-overlays [data-quad] { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; will-change: transform; }
.frames-overlays [data-quad].is-on { opacity: 1; }
.frames-screen { width: 1600px; height: 889px; border-radius: 10px; }
.frames-sign { width: 900px; height: 300px; box-sizing: border-box; display: flex; align-items: center; gap: 36px; padding: 0 56px;
  border: 14px solid #e7d5ff; border-radius: 34px; background: #1b2350; color: #e7d5ff; font: 700 104px/1 var(--font-display); }
.frames-sign-arrow { width: 0; height: 0; border-block: 56px solid transparent; border-right: 80px solid currentColor; flex: none; }
.full3d .f3-gap { display: block; min-height: 150vh; }
.full3d .nav { z-index: 20; }

/* The page's own reveal effects were not part of the reviewed look: everything is simply there */
.full3d [data-reveal] { opacity: 1; transform: none; transition: none; }

/* Why: as on the live page (the text column is taller than a laptop screen, so it scrolls, never pins),
   with less empty sky before its heading */
.full3d .why { padding-top: 10vh; min-height: 0; padding-bottom: 15vh; }   /* review 14: ends with its text, no empty scroll */

/* Features: the heading late in the descent, then one stop per screen. The card keeps to the outer
   gutter and scales with the window, so it stays clear of its billboard (held ~37% from the edge). */
.full3d .features { padding-top: 0; }
.full3d .features h2 { min-height: 110vh; padding-top: 35vh; box-sizing: border-box; opacity: clamp(0, calc((var(--p, 0) - 0.3) * 8), 1); }
.full3d .step { min-height: 160vh; }
/* each card comes in as its screen settles into the hold (beat 44-81%) and leaves before the next */
.full3d .step-card { --in: clamp(0, calc((var(--p, 0) - 0.3) / 0.12), 1); --out: clamp(0, calc((0.97 - var(--p, 0)) / 0.09), 1);
  position: fixed; top: 50%; left: clamp(24px, 4vw, 72px); z-index: 2; width: min(400px, 26vw); box-sizing: border-box;
  opacity: min(var(--in), var(--out)); translate: 0 calc(-50% + (1 - var(--in)) * 24vh - (1 - var(--out)) * 16vh); pointer-events: none; }
.full3d .step:nth-child(even) .step-card { left: auto; right: clamp(24px, 4vw, 72px); }

/* Who and Also: their words sit at the screen's left gutter (as the step cards do), not in the centred column */
.full3d .whom > .container, .full3d .also > .container { max-width: none; margin-inline: 0; padding-inline: clamp(24px, 4vw, 72px); }

/* Who: the role text on the left, one role per house (the houses sit right of centre); the heading waits for the houses */
.full3d .whom { height: auto; }
/* the block starts high and stays compact, above the houses' roofs and left of them */
.full3d .whom > .container { justify-content: flex-start; padding-top: clamp(12px, 3vh, 40px); }
.full3d .whom h2, .full3d .whom .switch-panel { max-width: 34%; }
.full3d .whom .switch { margin-top: clamp(40px, 9vh, 110px); } /* the role text clearly apart from the heading */
.full3d .whom .switch-panel, .full3d .whom .switch-panel + .switch-panel { margin-top: 0; padding-top: 0; border-top: 0; }   /* no divider between the (one-at-a-time) panels */
.full3d .whom .switch-panel p { font-size: var(--text-lg); }
.full3d .whom h2 { opacity: 0; transition: opacity 400ms var(--ease-out); }
.f3-in-who .whom h2 { opacity: 1; }
.full3d .whom > .container { margin-bottom: calc(72px - 100dvh); }
.full3d .f3-who { display: block; height: 140vh; }

/* Also in the box: the list items hang on the pins; the heading waits for them */
.full3d .also { height: 220vh; }
.full3d .also h2 { opacity: 0; transition: opacity 400ms var(--ease-out); }
.f3-in-also .also h2 { opacity: 1; }
.full3d .also-list li[data-point] { position: fixed; transform: none; translate: -50% calc(-100% - 14px); display: flex; align-items: center; gap: var(--space-sm); opacity: 0; }
.full3d .also-list li[data-point].is-on { opacity: 1; }

/* Who: the role as the live page sets it (there under html.js, which would also hide the reveal-on-scroll text here) */
.full3d .whom .switch-role { display: block; margin: 0 0 var(--space-sm); padding: 0; font: 700 clamp(1.75rem, 2.6vw, 2.75rem)/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--color-ink); position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }

/* The section rail: hidden until hovered, a slim white line with marks to jump and a thumb to scrub */
.rail { position: fixed; right: 0; top: 50%; z-index: 15; height: min(50vh, 460px); padding: 0 clamp(10px, 1.4vw, 24px) 0 40px; translate: 0 -50%;
  opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.rail:hover, .rail:focus-within, .rail.is-dragging { opacity: 1; }
.rail-track { position: relative; width: 3px; height: 100%; border-radius: 2px; cursor: pointer; touch-action: none; background: rgba(255, 255, 255, 0.28); }
.rail-track::before { content: ""; position: absolute; inset: -8px -12px; } /* a wider hit area than the 3 px line */
.rail-fill { position: absolute; left: 0; top: 0; width: 100%; border-radius: 2px; background: rgba(255, 255, 255, 0.75); }
.rail-thumb { position: absolute; left: 50%; width: 9px; height: 22px; translate: -50% -50%; border-radius: 5px;
  background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); cursor: grab; }
.rail.is-dragging .rail-thumb { cursor: grabbing; }
.rail-thumb:focus-visible, .rail-mark:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.rail-mark { position: absolute; left: 50%; width: 18px; height: 18px; padding: 0; translate: -50% -50%; border: 0; background: none; cursor: pointer; }
.rail-mark::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); transition: background var(--dur-short) var(--ease-out), inset var(--dur-short) var(--ease-out); }
.rail-mark.is-current::before { inset: 5px; background: #fff; }
.rail-label { position: absolute; right: calc(100% + 8px); top: 50%; translate: 0 -50%; padding: 3px 9px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 var(--text-xs, 0.75rem)/1.2 var(--font-body); color: #fff; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-short) var(--ease-out); }
.rail-mark:hover .rail-label, .rail-mark:focus-visible .rail-label, .rail.is-dragging .rail-mark.is-current .rail-label { opacity: 1; }
/* once, after the hand-over: the rail shows itself softly for a moment, so people know it is there */
.rail.is-hinted { transition: opacity 1400ms ease-in-out; } /* slow and soft both ways */
.rail.is-hint { opacity: 0.8; }
@media (prefers-reduced-motion: reduce) { .rail, .rail-mark::before, .rail-label { transition: none; } }

/* The rail stands in for the browser's scrollbar */
html.full3d { scrollbar-width: none; }
html.full3d::-webkit-scrollbar { display: none; }

/* Review 14: no text selection on the page (form fields still take it) */
.full3d body { -webkit-user-select: none; user-select: none; }
.full3d input, .full3d textarea { -webkit-user-select: text; user-select: text; }