.oh-version { --oh-css-version: "3"; }
/* BBDT outline hero — draw-on outline, photo wipes in along the stroke, then completes.
   Timing vars (--t, --d, --fill-t, --fill-d, --line-t, --line-d, --oh-wipe-w) are set per slide by outline-hero.js.
   Every animation ends on the fully-revealed photo, so a reduced-motion collapse of durations is safe. */

.oh-root { position: absolute; inset: 0; overflow: hidden; background: #07070A; }
.oh-pool { display: none; }

.oh-slide { position: absolute; inset: 0; opacity: 1; will-change: opacity; }
.oh-slide.oh-out { opacity: 0; transition: opacity 900ms cubic-bezier(.33,0,.2,1); pointer-events: none; }

.oh-video, .oh-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.oh-video { object-fit: cover; }
.oh-video, .oh-svg { filter: saturate(1.22) contrast(1.08); }
.oh-video { opacity: 0; }                       /* hidden until the still has fully wiped in */
.oh-slide.oh-play .oh-video { opacity: 1; transition: opacity 520ms cubic-bezier(.33,0,.2,1); }
.oh-slide.oh-play .oh-svg { opacity: 0; transition: opacity 520ms cubic-bezier(.33,0,.2,1); }

/* ── the stroke animation ─────────────────────────────────────────────── */
@keyframes oh-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes oh-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes oh-fade { from { opacity: 1; } to { opacity: 0; } }

.oh-line path, .oh-wipe path {
  fill: none; stroke-dasharray: 1 2; stroke-dashoffset: 1.02;
  animation: oh-draw var(--d, 1200ms) cubic-bezier(.16,1,.3,1) var(--t, 0ms) both;
}
/* thick white strokes inside the <mask>: the photo appears along the line */
.oh-wipe path { stroke: #fff; stroke-width: var(--oh-wipe-w, 60); stroke-linecap: round; stroke-linejoin: round;
  animation-delay: var(--wt, 2000ms); animation-duration: var(--wd, 1000ms); }
/* thin visible strokes on top of the photo */
.oh-line path { stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.oh-line path.oh-c { stroke: #fff; stroke-opacity: .92; }
.oh-line path.oh-i { stroke: var(--oh-accent, #fff); stroke-opacity: .85; }
/* body layer: each figure's silhouette fills in as its outline wipe closes, so no dark pockets are
   left inside a figure (a face with no interior lines would otherwise stay black until the finish) */
.oh-body path, .oh-body ellipse { stroke: none; }
.oh-body .oh-solid { fill: #fff; opacity: 0;
  animation: oh-in calc(var(--wd, 1000ms) * 0.7 + 250ms) cubic-bezier(.33,0,.2,1) calc(var(--wt, 2000ms) + var(--wd, 1000ms) * 0.3) both; }
/* faces: each one is uncovered the moment its outline wipe starts (contours begin at the head) */
.oh-body .oh-face { fill: #fff; opacity: 0;
  animation: oh-in 380ms cubic-bezier(.33,0,.2,1) calc(var(--wt, 2000ms) + 60ms) both; }
.oh-body .oh-hole { fill: #000; opacity: 1; }
/* finishing layer: completes the reveal after the wipe */
.oh-fill { opacity: 0; animation: oh-in var(--fill-d, 900ms) cubic-bezier(.33,0,.2,1) var(--fill-t, 1800ms) both; }
/* the drawn line lingers, then goes */
.oh-line { animation: oh-fade var(--line-d, 1300ms) cubic-bezier(.33,0,.2,1) var(--line-t, 2300ms) both; }
.oh-still .oh-fill, .oh-still .oh-line path, .oh-still .oh-wipe path, .oh-still .oh-line, .oh-still .oh-body path, .oh-still .oh-body ellipse { animation: none; }
.oh-still .oh-body .oh-solid, .oh-still .oh-body .oh-face { opacity: 1; }
.oh-still .oh-fill { opacity: 1; } .oh-still .oh-line { opacity: 0; }

/* ── Ken Burns on photo slides (same envelopes as the boards' kb1–kb5) ─── */
.oh-kb { transform-box: fill-box; transform-origin: 50% 50%; will-change: transform; }
@keyframes oh-kb1 { from { transform: scale(1.04) translate(0,0); }        to { transform: scale(1.20) translate(-2.4%,-1.6%); } }
@keyframes oh-kb2 { from { transform: scale(1.19) translate(1.8%,1%); }    to { transform: scale(1.03) translate(-1.4%,-0.8%); } }
@keyframes oh-kb3 { from { transform: scale(1.05) translate(2%,-1.2%); }   to { transform: scale(1.21) translate(-1.6%,1.4%); } }
@keyframes oh-kb4 { from { transform: scale(1.18) translate(-1.8%,1.2%); } to { transform: scale(1.04) translate(1.8%,-1.2%); } }
@keyframes oh-kb5 { from { transform: scale(1.03) translate(-1.6%,-1.4%); } to { transform: scale(1.19) translate(1.4%,1.6%); } }
.oh-kb.k1 { animation: oh-kb1 24s ease-in-out infinite alternate; }
.oh-kb.k2 { animation: oh-kb2 26s ease-in-out infinite alternate; }
.oh-kb.k3 { animation: oh-kb3 23s ease-in-out infinite alternate; }
.oh-kb.k4 { animation: oh-kb4 27s ease-in-out infinite alternate; }
.oh-kb.k5 { animation: oh-kb5 25s ease-in-out infinite alternate; }

/* ── scroll-in tiles (OutlineReveal) ──────────────────────────────────── */
.oh-tile { position: relative; overflow: hidden; background: #0A0A0B; }
.oh-tile .oh-svg { filter: saturate(1.2) contrast(1.07); transition: transform 1600ms cubic-bezier(.16,1,.3,1); }
.oh-tile:hover .oh-svg { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .oh-fill { opacity: 1; animation: none; }
  .oh-body .oh-solid, .oh-body .oh-face { opacity: 1; animation: none; }
  .oh-line { opacity: 0; animation: none; }
  .oh-line path, .oh-wipe path { stroke-dashoffset: 0; animation: none; }
  .oh-kb { animation: none !important; }
}