/* DAB Cinematic Deck - player chrome. Deck-specific look lives in the deck's own <style>. */
@font-face { font-family: "Assistant"; src: url("../fonts/Assistant.ttf") format("truetype"); font-weight: 200 800; font-display: block; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg, #000); color: var(--ink, #fff); }
body { font-family: var(--sans, system-ui); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
html:not(.awake).started, html:not(.awake).started * { cursor: none !important; }

#stage { position: fixed; inset: 0; overflow: hidden; }
/* the stage behind everything: shows on content slides, when the film steps away */
.backdrop { position: absolute; inset: 0; background: var(--backdrop, #000); }
#film { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .4s ease, transform 1.1s cubic-bezier(.4,0,.2,1), filter 1.1s; }
/* film -> content slide: the picture sinks back and goes; another film: a short dip to black */
html.nofilm #film { opacity: 0; transform: scale(1.04); filter: blur(10px); transition: opacity .7s ease, transform 1.1s cubic-bezier(.4,0,.2,1), filter 1.1s; }
html.dip #film { opacity: 0; }

/* the 1920x1080 safe frame every slide is laid out in */
#deck { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; transform-origin: 0 0; pointer-events: none; }
.slide { position: absolute; inset: 0; visibility: hidden; }
.slide.on { visibility: visible; }
.slide a, .slide button { pointer-events: auto; }

/* entrance: children marked [data-in] rise in one after another; they leave together, quickly */
.slide [data-in] { opacity: 0; transform: translateY(26px); transition: opacity .35s ease, transform .35s ease; }
.slide.on [data-in] { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 130ms + 80ms), transform 1.2s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0) * 130ms + 80ms); }
.slide:not(.on) { transition: visibility 0s .35s; }

/* HUD */
#hud { position: fixed; inset: auto 0 0 0; height: 46px; display: flex; align-items: center; gap: 18px; padding: 0 28px; opacity: 0; transition: opacity .5s; pointer-events: none; z-index: 5; }
html.awake #hud { opacity: 1; }
#hud .bar { flex: 1; height: 2px; background: rgba(127,127,127,.25); overflow: hidden; }
#hud .bar i { display: block; height: 100%; background: var(--accent, #fff); transform-origin: right; transform: scaleX(0); transition: transform .6s cubic-bezier(.4,0,.2,1); }
#hud .count { font: 600 13px/1 var(--sans); letter-spacing: .14em; color: var(--muted, #888); direction: ltr; }

/* blank screens (B / W, as in PowerPoint) */
#blank { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0; transition: opacity .5s; background: #000; }
html.blank #blank { opacity: 1; }
html.white #blank { opacity: 1; background: #fff; }

/* help card */
#help { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(20,14,12,.55); opacity: 0; pointer-events: none; transition: opacity .3s; }
html.help #help { opacity: 1; pointer-events: auto; }
#help .card-help { background: var(--bg, #fff); color: var(--ink, #000); border-radius: 18px; padding: 34px 40px; min-width: 460px; box-shadow: 0 30px 80px rgba(0,0,0,.25); }
#help h3 { margin: 0 0 18px; font: 600 20px/1.2 var(--sans); }
#help dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; margin: 0; font-size: 16px; }
#help dt { font-weight: 600; direction: ltr; text-align: left; color: var(--accent); }
#help dd { margin: 0; color: var(--muted); }

/* loader + start */
#loader { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: var(--bg, #000); transition: opacity .9s ease, visibility 0s .9s; }
html.started #loader { opacity: 0; visibility: hidden; }
#loader .in { display: grid; justify-items: center; gap: 26px; text-align: center; }
#loader .ring { width: 220px; height: 1px; background: rgba(127,127,127,.25); overflow: hidden; }
#loader .ring i { display: block; height: 100%; background: var(--accent); transform-origin: right; transform: scaleX(0); transition: transform .2s; }
#loader .pct { font: 600 12px/1 var(--sans); letter-spacing: .3em; color: var(--muted); direction: ltr; }
#start { font: 600 17px/1 var(--sans); letter-spacing: .04em; padding: 18px 34px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent, #fff); cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .6s, transform .6s; }
html.ready #start { opacity: 1; transform: none; pointer-events: auto; }
html.ready #loader .ring, html.ready #loader .pct { opacity: 0; transition: opacity .4s; }
#loader .keys { font-size: 14px; color: var(--muted); opacity: 0; transition: opacity .6s .2s; }
html.ready #loader .keys { opacity: 1; }
#loader kbd { font: 600 12px/1 var(--sans); padding: 4px 7px; border: 1px solid var(--line, rgba(127,127,127,.4)); border-radius: 5px; margin: 0 2px; }

@media (prefers-reduced-motion: reduce) {
  .slide [data-in], .slide.on [data-in] { transition-duration: .01s !important; transform: none !important; }
}

/* ?shot - stills for testing: no transitions, every animation at its end */
html.shot *, html.shot *::before, html.shot *::after { transition: none !important; animation-delay: -60s !important; animation-duration: .001s !important; animation-iteration-count: 1 !important; }
html.shot #loader { display: none; }