/* BBDT outline journey — pinned stage scrubbed by scroll. Pairs with outline-journey.js; every animated
   value is written by the script, so this file only sets geometry, resting states and the chrome. */

.oj { position: relative; background: #07070A; color: #fff; }
.oj-stage { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: #07070A; contain: layout paint; }
.oj-beats { position: absolute; inset: 0; }
.oj-beat { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.oj-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.oj-cam .oh-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* depth: the room (subject inpainted away) sits under the cutout and follows the camera only partly */
.oj-ambient { position: absolute; inset: 0; z-index: 0; opacity: 0; background-size: cover; background-position: center; }
.oj-bg { z-index: 0; } .oj-cam:not(.oj-bg) { z-index: 1; }
.oj-room { position: absolute; display: block; }
.oj-room.oj-blur { opacity: 0; }
/* spotlight: a dark field with a soft hole, moved to the detail a callout points at */
.oj-spot { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; z-index: 2; }

/* scrub mode: the hero's CSS animations are off and its per-frame filter is gone (grading is baked into
   the full-frame JPEG); the script owns dash offsets, opacities and transforms */
.oh-scrub, .oh-scrub * { animation: none !important; }
.oh-scrub { filter: none !important; }
.oh-scrub .oh-fill, .oh-scrub .oh-body .oh-solid, .oh-scrub .oh-body .oh-face { opacity: 0; }
.oh-scrub .oh-line path, .oh-scrub .oh-wipe path { stroke-dashoffset: 1.02; }

/* ambient light, one of the hero's five palettes per beat */
.oj-glow { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; }

/* the morph: one silhouette becoming the next, drawn in stage px */
.oj-morph { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.oj-morph path { fill: none; stroke: #fff; stroke-opacity: .92; stroke-width: 1.6; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; opacity: 0; }
.oj-probe { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* callouts: dot, leader, label — translated to the anchor's screen point, never scaled */
.oj-cos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }   /* above the cutout (z1) and the spotlight (z2) */
.oj-co { position: absolute; left: 0; top: 0; will-change: transform; }
.oj-co .dot { position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: #fff;
  transform: translate(-50%, -50%); box-shadow: 0 0 0 3px rgba(255,255,255,0.16); }
.oj-co .lead { position: absolute; left: 0; top: 0; width: 120px; height: 1px; background: rgba(255,255,255,0.72); transform-origin: 0 50%; }
.oj-co .lab { position: absolute; white-space: nowrap; font-size: 13px; line-height: 1.35; color: rgba(255,255,255,0.86);
  padding: 0 10px; transform: translateY(-50%); }
.oj-co.l .lab { transform: translate(-100%, -50%); }
/* the second label of a swapping callout sits exactly on the first */
.oj-co .lab2 { opacity: 0; }
/* the second line of a two-anchor callout: same weight, drawn from the label outward */
.oj-co .lead2 { position: absolute; left: 0; top: 0; height: 1px; background: rgba(255,255,255,0.72);
  transform-origin: 0 50%; }
.phw { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.92); padding: 0 5px; border-radius: 4px; }

/* phone: callouts stack at the bottom of the stage instead of pointing */
.oj-costack { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 120px 20px 118px; display: flex; flex-direction: column; gap: 8px; pointer-events: none;
  background: linear-gradient(to top, rgba(7,7,10,0.88) 0%, rgba(7,7,10,0.62) 45%, rgba(7,7,10,0) 100%); }
.oj-costack:empty, .oj-costack.oj-idle { background: none; }
.oj-co.stack { position: relative; opacity: 0; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.86); padding-left: 16px; }
.oj-co.stack .dot { top: 0.7em; left: 4px; transform: translate(-50%, -50%); }
.oj-co.stack .lab { position: static; white-space: normal; padding: 0; transform: none; }

/* chrome — the board's pinned-gallery block, per act */
.oj-title { position: absolute; left: 56px; top: 104px; z-index: 3; opacity: 0; visibility: hidden; max-width: 560px; }
.oj-title .eyebrow { color: rgba(255,255,255,0.52); margin-bottom: 16px; }
.oj-title h2 { font-size: 62px; color: #fff; margin: 0; }
.oj-foot { position: absolute; left: 56px; right: 56px; bottom: 58px; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.oj-caption { max-width: 560px; flex: 1; font-size: 13px; color: rgba(255,255,255,0.76); padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.20); }
.oj-bars { display: flex; align-items: flex-end; gap: 14px; }
.oj-dot { cursor: pointer; display: flex; flex-direction: column; gap: 10px; }
.oj-bar { position: relative; height: 2px; width: 58px; border-radius: 2px; background: rgba(255,255,255,0.24); overflow: hidden; }
.oj-bar i { position: absolute; left: 0; top: 0; bottom: 0; display: block; width: 0%; background: #fff; }
.oj-num { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255,255,255,0.40); }
.oj-progress { position: absolute; left: 56px; right: 56px; bottom: 34px; height: 2px; background: rgba(255,255,255,0.16); border-radius: 2px; overflow: hidden; z-index: 3; }
.oj-progress i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #CE0E2D, #FF9F1C); }
.oj-end { position: absolute; right: 56px; bottom: 96px; z-index: 4; opacity: 0; visibility: hidden; pointer-events: none; text-align: right; color: #fff; }
.oj-end .oj-endtitle { font-size: 40px; margin-bottom: 22px; }

/* static fallback (reduced motion, no sticky): a stacked, fully revealed gallery */
.oj-static .oj-stage { display: none; }
.oj-static .oj-list { padding: 120px 56px 80px; display: grid; gap: 64px; max-width: 1100px; margin: 0 auto; }
.oj-fig { margin: 0; }
.oj-figbox { position: relative; width: 100%; background: #0A0A0B; border-radius: 20px; overflow: hidden; }
.oj-figbox .oh-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.oj-figcap { margin-top: 18px; font-size: 14px; color: rgba(255,255,255,0.76); }
.oj-figcap ul { margin: 10px 0 0; padding-left: 18px; color: rgba(255,255,255,0.6); }

@media (max-width: 640px) {
  .oj-title { left: 20px; top: 84px; right: 20px; }
  .oj-title h2 { font-size: 40px; }
  .oj-foot { left: 20px; right: 20px; bottom: 44px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .oj-bars { gap: 10px; } .oj-bar { width: 30px; }
  .oj-progress { left: 20px; right: 20px; bottom: 22px; }
  .oj-end { right: 20px; left: 20px; bottom: 150px; text-align: left; }
  .oj-end .oj-endtitle { font-size: 30px; }
  .oj-static .oj-list { padding: 80px 16px 40px; gap: 40px; }
}