/* eResonate intro films — one stylesheet for every scene type.
   The stage is a fixed 1920x1080 canvas; engine.js scales it to fit when previewing.
   Colours and type follow the existing narrated films (product-tour.html, why-now.html). */

:root {
  --bg: #070B18;
  --card: #0D1428;
  --card2: #111A33;
  --line: #252C4A;
  --accent: #2E5CFF;
  --accent-text: #5B8CFF;
  --sky: #6BC5FF;
  --green: #3EE08C;
  --gold: #F0C560;
  --text: #F5F4FB;
  --muted: #9BA0C4;
  --dim: #5F6590;
  --display: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #02040A;
  color: var(--text);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  height: 100%;
}

#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: var(--bg);
  transform-origin: 0 0;
}

/* ───────────────────────────── backdrop (shared by every scene) */

#backdrop { position: absolute; inset: 0; }
#backdrop .glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .55;
}
#backdrop .glow.a { width: 1100px; height: 1100px; left: -380px; top: -520px; background: #17307F; }
#backdrop .glow.b { width: 900px; height: 900px; right: -340px; bottom: -520px; background: #0E4A4A; opacity: .42; }
#backdrop svg { position: absolute; left: 50%; top: 50%; width: 2400px; height: 2400px; margin: -1200px 0 0 -1200px; opacity: .5; }
#backdrop .vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(7,11,24,0) 40%, rgba(4,6,14,.72) 100%);
}

/* ───────────────────────────── scenes */

#scenes { position: absolute; inset: 0; isolation: isolate; }
.scene { position: absolute; inset: 0; display: none; }
.scene.on { display: block; }

.scene .a {
  animation-duration: calc(var(--dur, .85) * 1s);
  animation-delay: calc(var(--at, 0) * 1s);
  animation-timing-function: cubic-bezier(.16, .84, .24, 1);
  animation-fill-mode: both;
  animation-play-state: paused;
}
.a.rise { animation-name: rise; }
.a.fade { animation-name: fade; }
.a.pop { animation-name: pop; }
.a.growx { animation-name: growx; transform-origin: left center; }
.a.slide-l { animation-name: slide-l; }
.a.slide-r { animation-name: slide-r; }
.a.draw { animation-name: draw; }
@keyframes rise { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.84); } to { opacity: 1; transform: none; } }
@keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes slide-l { from { opacity: 0; transform: translateX(90px); } to { opacity: 1; transform: none; } }
@keyframes slide-r { from { opacity: 0; transform: translateX(-90px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }

/* footage behind a scene */
.broll { position: absolute; inset: 0; width: 1920px; height: 1080px; }
.broll-shade { position: absolute; inset: 0; }

/* shared type */
.eyebrow {
  font: 600 26px/1 var(--body);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow.green { color: var(--green); }
.h1 { font: 800 118px/1.03 var(--display); letter-spacing: -.025em; margin: 0; }
.h2 { font: 800 84px/1.06 var(--display); letter-spacing: -.02em; margin: 0; }
.h3 { font: 700 58px/1.1 var(--display); letter-spacing: -.015em; margin: 0; }
.sub { font: 400 38px/1.38 var(--body); color: var(--muted); margin: 0; }
.c-accent { color: var(--accent-text); }
.c-green { color: var(--green); }
.c-gold { color: var(--gold); }
.c-muted { color: var(--muted); }
.c-sky { color: var(--sky); }
.w { display: inline-block; white-space: pre; }
.src {
  position: absolute; left: 130px; right: 130px; bottom: 150px;
  font: 400 24px/1.4 var(--body); color: #7C84B4;
}

/* text over footage: lift it off the picture */
.scene.has-bg .line, .scene.has-bg .eyebrow, .scene.has-bg .wordmark, .scene.has-bg .tag { text-shadow: 0 4px 34px rgba(2,4,12,.75), 0 1px 3px rgba(2,4,12,.5); }
.scene.has-bg .c-accent { color: #9DB9FF; }
.scene.has-bg .line.small { color: #D5D9EE; }

/* ───────────────────────────── open + end (logo scenes) */

.s-open .center, .s-end .center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 70px;
}
.logo-row { display: flex; align-items: center; gap: 44px; }
.logo-mark { width: 230px; height: 230px; overflow: visible; }
.wordmark { font: 800 176px/1 var(--display); letter-spacing: -.035em; }
.s-open .tag {
  margin-top: 46px;
  font: 500 40px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}
.s-open .tag b { color: var(--text); font-weight: 600; }

.s-end .logo-mark { width: 150px; height: 150px; }
.s-end .wordmark { font-size: 112px; }
.s-end .logo-row { gap: 30px; }
.s-end .lines { margin-top: 54px; text-align: center; }
.s-end .lines .h1 { font-size: 104px; }
.s-end .cta {
  margin-top: 62px; display: flex; align-items: center; gap: 34px;
}
.s-end .btn {
  font: 700 40px/1 var(--display); color: #fff; background: var(--accent);
  padding: 30px 52px; border-radius: 22px;
  box-shadow: 0 18px 60px rgba(46,92,255,.5);
}
.s-end .url { font: 600 46px/1 var(--display); color: var(--text); letter-spacing: -.005em; }
.s-end .url span { color: var(--green); }
.s-end .note { margin-top: 40px; font: 400 30px/1.3 var(--body); color: var(--muted); }

/* ───────────────────────────── words (kinetic statements) */

.s-words .box {
  position: absolute; left: 130px; right: 130px; top: 0; bottom: 150px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.s-words.center .box { align-items: center; text-align: center; }
.s-words .eyebrow { margin-bottom: 32px; }
.s-words .line { font: 800 112px/1.07 var(--display); letter-spacing: -.025em; }
.s-words.size-l .line { font-size: 92px; }
.s-words.size-m .line { font-size: 76px; line-height: 1.12; }
.s-words.size-xl .line { font-size: 150px; }
.s-words .line.small { font: 500 46px/1.35 var(--body); letter-spacing: 0; color: var(--muted); margin-top: 26px; }

/* ───────────────────────────── strings (the resonance metaphor) */

.s-strings canvas { position: absolute; inset: 0; }
.s-strings .box {
  position: absolute; left: 130px; right: 130px; top: 96px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
}
.s-strings .line { font: 800 96px/1.08 var(--display); letter-spacing: -.02em; }
.s-strings .line.small { font: 500 42px/1.3 var(--body); color: var(--muted); letter-spacing: 0; }

/* ───────────────────────────── stat */

.s-stat .box { position: absolute; left: 130px; right: 130px; top: 110px; bottom: 210px; display: flex; flex-direction: column; justify-content: center; }
.s-stat .eyebrow { margin-bottom: 30px; }
.s-stat .title { font: 700 62px/1.1 var(--display); letter-spacing: -.015em; margin-bottom: 44px; max-width: 1500px; }
.s-stat .row { display: flex; align-items: center; gap: 90px; }
.s-stat .stat { flex: 1; min-width: 0; }
.s-stat .n {
  font: 900 250px/.95 var(--display); letter-spacing: -.04em;
  background: linear-gradient(100deg, #7FA4FF 0%, #6BC5FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.s-stat .stat.green .n { background-image: linear-gradient(100deg, #3EE08C, #9BF3C5); }
.s-stat .stat.gold .n { background-image: linear-gradient(100deg, #F0C560, #F9E3A6); }
.s-stat .stat.dimmed .n { background-image: linear-gradient(100deg, #5F6590, #8389B4); }
.s-stat .k { font: 600 30px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.s-stat .l { font: 500 42px/1.3 var(--body); color: var(--text); margin-top: 22px; max-width: 760px; }
.s-stat .l small { display: block; font-size: 30px; color: var(--muted); margin-top: 10px; }
.s-stat.multi .n { font-size: 190px; }
.s-stat.multi .l { font-size: 36px; }
.s-stat .arrow { flex: 0 0 auto; width: 120px; height: 120px; color: var(--accent-text); }
.s-stat .bars { flex: 0 0 720px; display: flex; flex-direction: column; gap: 34px; }
.s-stat .bar-k { font: 600 30px/1 var(--body); color: var(--muted); margin-bottom: 14px; display: flex; justify-content: space-between; }
.s-stat .bar-k b { color: var(--text); font: 800 34px/1 var(--display); }
.s-stat .bar { height: 44px; border-radius: 22px; background: #141C3A; overflow: hidden; }
.s-stat .bar i { display: block; height: 100%; border-radius: 22px; background: linear-gradient(90deg, #2E5CFF, #6BC5FF); }
.s-stat .bar.hot i { background: linear-gradient(90deg, #3EE08C, #9BF3C5); }
.s-stat .dots { flex: 0 0 560px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; margin-right: 40px; }
.s-stat .dots i { aspect-ratio: 1; border-radius: 50%; background: #141C3A; }
.s-stat .dots i.on { background: var(--sky); box-shadow: 0 0 18px rgba(107,197,255,.45); }
.s-stat .dots.green i.on { background: var(--green); box-shadow: 0 0 18px rgba(62,224,140,.45); }

/* ───────────────────────────── screen (real product pages in a browser window) */

.s-screen .copy { position: absolute; top: 120px; bottom: 210px; width: 620px; display: flex; flex-direction: column; justify-content: center; }
.s-screen.right .copy { left: 120px; }
.s-screen.left .copy { right: 110px; }
.s-screen .copy .eyebrow { margin-bottom: 28px; }
.s-screen .copy .h2 { font-size: 78px; }
.s-screen .copy .h2.long { font-size: 62px; line-height: 1.1; }
.s-screen .copy .sub { margin-top: 30px; font-size: 34px; }
.s-screen .bullets { margin: 36px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; }
.s-screen .bullets li { font: 500 34px/1.25 var(--body); display: flex; gap: 18px; align-items: center; }
.s-screen .bullets svg { flex: 0 0 34px; width: 34px; height: 34px; color: var(--green); }
/* The website is shown on a monitor: a dark bezel with a camera, on a neck and a base. */
.win { position: absolute; }
.win-frame {
  position: relative;
  padding: 14px;
  border-radius: 30px;
  background: #05070F;
  border: 2px solid #3A4270;
  box-shadow: 0 50px 130px rgba(0,0,0,.6), 0 0 160px rgba(46,92,255,.25);
}
.win-cam { position: absolute; left: 50%; top: 4px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2A3260; }
.win-neck {
  width: 200px; height: 62px; margin: 0 auto;
  background: linear-gradient(180deg, #161C38 0%, #2A3258 100%);
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}
.win-base {
  width: 430px; height: 14px; margin: 0 auto; border-radius: 9px;
  background: linear-gradient(180deg, #3D4674, #232A4C);
  box-shadow: 0 22px 44px rgba(0,0,0,.55);
}
.win-bar { height: 56px; background: var(--card2); display: flex; align-items: center; gap: 10px; padding: 0 24px; border-bottom: 1px solid #1B2444; border-radius: 16px 16px 0 0; }
.win-bar i { width: 14px; height: 14px; border-radius: 50%; background: #2B3560; }
.win-url {
  margin-left: 20px; height: 32px; border-radius: 16px; background: #0A1022; color: var(--muted);
  font: 500 18px/32px var(--body); padding: 0 20px; letter-spacing: .01em;
}
.win-url b { color: var(--green); font-weight: 500; }
.win-view { position: relative; overflow: hidden; background: #EEF0F8; border-radius: 0 0 16px 16px; }
.win-pan { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.win-pan img, .win-pan canvas { position: absolute; display: block; }
.s-screen.center .head { position: absolute; left: 130px; right: 130px; top: 64px; text-align: center; }
.s-screen.center .head .eyebrow { margin-bottom: 18px; }
.s-screen.center .head .h3 { font-size: 60px; }

/* ───────────────────────────── phone (an iPhone showing the app, or the site at phone size) */

.phone {
  position: absolute;
  background: #05070F;
  border: 2px solid #3A4270;
  box-shadow: 0 44px 110px rgba(0,0,0,.62), 0 0 90px rgba(46,92,255,.24);
}
.phone-screen { position: absolute; overflow: hidden; background: #F8F6FB; }
.phone-screen img, .phone-screen canvas { position: absolute; display: block; }
.phone-status {
  position: absolute; left: 0; top: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  color: #0B0E1A; font-family: var(--body); font-weight: 700; letter-spacing: -.01em;
}
.phone-status svg { display: block; height: 46%; }
.phone-island { position: absolute; left: 50%; background: #05070F; border-radius: 999px; }
.s-end.has-phones .center { right: 520px; }

/* ───────────────────────────── grid (feature tiles) and pillars (three or four cards) */

.s-grid .head, .s-pillars .head, .s-goals .head, .s-team .head, .s-map .head { position: absolute; left: 130px; right: 130px; top: 104px; }
.s-grid .head .eyebrow, .s-pillars .head .eyebrow, .s-goals .head .eyebrow, .s-team .head .eyebrow { margin-bottom: 26px; }
.s-grid .tiles { position: absolute; left: 130px; right: 130px; top: 400px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; }
.s-grid.four .tiles { grid-template-columns: repeat(4, 1fr); }
.tile {
  background: linear-gradient(180deg, rgba(17,26,51,.96), rgba(13,20,40,.96));
  border: 1px solid var(--line); border-radius: 28px; padding: 34px 30px 36px;
  min-height: 380px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.tile .ico {
  width: 84px; height: 84px; border-radius: 22px; display: flex; align-items: center; justify-content: center;
  background: rgba(46,92,255,.16); color: var(--accent-text); margin-bottom: 30px;
}
.tile .ico svg { width: 46px; height: 46px; }
.tile.green .ico { background: rgba(62,224,140,.14); color: var(--green); }
.tile.gold .ico { background: rgba(240,197,96,.14); color: var(--gold); }
.tile .t { font: 700 46px/1.1 var(--display); letter-spacing: -.01em; }
.tile .d { font: 400 30px/1.36 var(--body); color: var(--muted); margin-top: 16px; }

.s-pillars .cards { position: absolute; left: 130px; right: 130px; top: 380px; display: flex; gap: 30px; align-items: stretch; }
.s-pillars .card {
  flex: 1; background: linear-gradient(180deg, rgba(17,26,51,.96), rgba(13,20,40,.96));
  border: 1px solid var(--line); border-radius: 30px; padding: 44px 40px 50px; min-height: 400px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.s-pillars .card .ico {
  width: 92px; height: 92px; border-radius: 24px; display: flex; align-items: center; justify-content: center;
  background: rgba(46,92,255,.16); color: var(--accent-text); margin-bottom: 30px;
}
.s-pillars .card .ico svg { width: 50px; height: 50px; }
.s-pillars .card.green .ico { background: rgba(62,224,140,.14); color: var(--green); }
.s-pillars .card.gold .ico { background: rgba(240,197,96,.14); color: var(--gold); }
.s-pillars .card .k { font: 600 24px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 16px; }
.s-pillars .card.green .k { color: var(--green); }
.s-pillars .card.gold .k { color: var(--gold); }
.s-pillars .card .t { font: 700 46px/1.1 var(--display); letter-spacing: -.012em; }
.s-pillars .card .d { font: 400 32px/1.38 var(--body); color: var(--muted); margin-top: 20px; }
.s-pillars .join { flex: 0 0 44px; align-self: center; color: var(--dim); }
.s-pillars .join svg { width: 44px; height: 44px; }

/* ───────────────────────────── split (where a show's money goes) */

.s-split .head { position: absolute; left: 130px; right: 130px; top: 96px; }
.s-split .head .eyebrow { margin-bottom: 24px; }
.s-split .feed { position: absolute; left: 130px; right: 130px; top: 420px; display: flex; align-items: center; gap: 18px; font: 500 30px/1 var(--body); color: var(--muted); }
.s-split .chip { padding: 14px 24px; border-radius: 999px; border: 1px solid var(--line); background: rgba(17,26,51,.9); color: var(--text); font: 600 28px/1 var(--body); }
.s-split .bar {
  position: absolute; left: 130px; width: 1660px; top: 500px; height: 150px; border-radius: 36px;
  overflow: hidden; display: flex; box-shadow: 0 30px 90px rgba(0,0,0,.45);
}
.s-split .seg { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 44px; overflow: hidden; white-space: nowrap; }
.s-split .seg.artist { background: linear-gradient(90deg, #2247D6, #2E5CFF 60%, #4C78FF); }
.s-split .seg.venue { background: linear-gradient(90deg, #1FAE68, #3EE08C); color: #04150C; flex: 1; }
.s-split .seg b { font: 800 44px/1 var(--display); letter-spacing: .04em; }
.s-split .seg span { font: 800 72px/1 var(--display); font-variant-numeric: tabular-nums; }
.s-split .knob {
  position: absolute; top: 478px; width: 14px; height: 194px; margin-left: -7px; border-radius: 7px; background: #fff;
  box-shadow: 0 0 0 8px rgba(255,255,255,.16), 0 10px 30px rgba(0,0,0,.5);
}
.s-split .under { position: absolute; left: 130px; right: 130px; top: 690px; display: flex; justify-content: space-between; align-items: center; }
.s-split .under .note { font: 500 34px/1.2 var(--body); color: var(--text); }
.s-split .under .tot { font: 700 34px/1 var(--display); color: var(--green); }
.s-split .lane {
  position: absolute; left: 130px; width: 1660px; top: 778px; height: 96px; border-radius: 26px;
  border: 2px dashed #34406F; display: flex; align-items: center; gap: 22px; padding: 0 36px;
  font: 500 32px/1 var(--body); color: var(--muted);
}
.s-split .lane b { color: var(--text); font: 700 34px/1 var(--display); }
.s-split .lane svg { width: 40px; height: 40px; color: var(--accent-text); }

/* ───────────────────────────── map (every venue page, by state and province) */

.s-map .left { position: absolute; left: 130px; top: 120px; bottom: 210px; width: 760px; display: flex; flex-direction: column; justify-content: center; }
.s-map .left .eyebrow { margin-bottom: 26px; }
.s-map .count { font: 900 196px/.95 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #7FA4FF, #6BC5FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-map .count-l { font: 600 46px/1.2 var(--display); margin-top: 16px; }
.s-map .facts { margin-top: 40px; display: flex; gap: 46px; }
.s-map .facts div { font: 400 28px/1.3 var(--body); color: var(--muted); }
.s-map .facts b { display: block; font: 800 60px/1 var(--display); color: var(--text); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.s-map .tiles { position: absolute; left: 990px; top: 96px; width: 820px; height: 800px; }
.s-map .st {
  position: absolute; width: 68px; height: 68px; border-radius: 14px; background: #101936; border: 1px solid #1C2650;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.s-map .st b { font: 700 19px/1 var(--display); color: #7C84B4; letter-spacing: .02em; }
.s-map .st i { font: 500 13px/1 var(--body); font-style: normal; color: #5F6590; margin-top: 6px; font-variant-numeric: tabular-nums; }
.s-map .st .fill { position: absolute; inset: 0; border-radius: 13px; background: linear-gradient(140deg, #2E5CFF, #6BC5FF); opacity: 0; }
.s-map .st.ca .fill { background: linear-gradient(140deg, #1FAE68, #3EE08C); }
.s-map .st b, .s-map .st i { position: relative; }
.s-map .st.lit b { color: #fff; }
.s-map .st.lit i { color: rgba(255,255,255,.82); }

/* ───────────────────────────── team, quote, goals */

.s-team .people { position: absolute; left: 130px; right: 130px; top: 370px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.person { background: linear-gradient(180deg, rgba(17,26,51,.96), rgba(13,20,40,.96)); border: 1px solid var(--line); border-radius: 28px; padding: 34px 30px 36px; }
.person .mono {
  width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 800 34px/1 var(--display); color: #fff; background: linear-gradient(140deg, #2E5CFF, #6BC5FF); margin-bottom: 26px;
}
.person .nm { font: 700 38px/1.1 var(--display); }
.person .rl { font: 600 22px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--green); margin-top: 12px; }
.person .cr { font: 400 26px/1.36 var(--body); color: var(--muted); margin-top: 18px; }
.s-team .adv { position: absolute; left: 130px; right: 130px; top: 838px; font: 500 30px/1.3 var(--body); color: var(--muted); }
.s-team .adv b { color: var(--text); font-weight: 600; }

.s-quote .box { position: absolute; left: 200px; right: 200px; top: 80px; bottom: 190px; display: flex; flex-direction: column; justify-content: center; }
.s-quote .mark { font: 900 260px/.6 var(--display); color: var(--accent); height: 120px; }
.s-quote .q { font: 700 96px/1.1 var(--display); letter-spacing: -.02em; }
.s-quote .by { margin-top: 50px; display: flex; align-items: center; gap: 26px; }
.s-quote .by .bar { width: 70px; height: 5px; border-radius: 3px; background: var(--green); }
.s-quote .by .nm { font: 700 40px/1 var(--display); }
.s-quote .by .rl { font: 400 30px/1.3 var(--body); color: var(--muted); margin-top: 10px; }

.s-goals .list { position: absolute; left: 130px; right: 130px; top: 372px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.goal { border-radius: 28px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(17,26,51,.96), rgba(13,20,40,.96)); padding: 34px 36px 38px; position: relative; overflow: hidden; }
.goal .num { font: 800 30px/1 var(--display); color: var(--accent-text); letter-spacing: .08em; }
.goal .gt { font: 800 52px/1.08 var(--display); letter-spacing: -.015em; margin-top: 20px; }
.goal .gt em { font-style: normal; color: var(--green); }
.goal .glow { position: absolute; inset: 0; border-radius: 28px; box-shadow: inset 0 0 0 2px var(--accent-text); opacity: 0; }

/* ───────────────────────────── captions + preview controls */

#caption { position: absolute; left: 0; right: 0; bottom: 54px; z-index: 10; display: flex; justify-content: center; pointer-events: none; }
#caption span {
  display: none;
  max-width: 1380px;
  padding: 14px 30px 16px;
  border-radius: 16px;
  background: rgba(4, 7, 16, .78);
  font: 500 35px/1.3 var(--body);
  color: #fff;
  text-align: center;
  text-wrap: balance;
}
#caption span.on { display: inline-block; }
body.no-captions #caption { display: none; }
/* Scene layouts leave room at the bottom for captions. Without them, everything except footage
   sits a little lower so the picture stays centred. `translate` is separate from `transform`,
   so it does not disturb the entrance animations. */
body.no-captions .scene > :not(.broll):not(.broll-shade) { translate: 0 42px; }

/* ───────────────────────────── cover (the poster image) */

.s-cover .center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
body.no-captions .scene.s-cover > .center { translate: none; }
.s-cover .logo-row { gap: 50px; }
.s-cover .logo-mark { width: 260px; height: 260px; }
.s-cover .wordmark { font-size: 212px; text-shadow: 0 6px 44px rgba(2,4,12,.8), 0 2px 4px rgba(2,4,12,.5); }
.s-cover .headline {
  margin-top: 58px; max-width: 1560px; text-align: center;
  font: 700 88px/1.12 var(--display); letter-spacing: -.02em;
  text-shadow: 0 4px 34px rgba(2,4,12,.85), 0 1px 3px rgba(2,4,12,.6);
}
.s-cover .headline .c-accent { color: #9DB9FF; }
.s-cover .chip {
  margin-top: 62px; padding: 22px 38px 20px; border-radius: 999px;
  font: 600 34px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: #E6E9F7;
  background: rgba(7,11,24,.55); border: 1.5px solid rgba(255,255,255,.3);
}

#controls {
  position: fixed; left: 0; right: 0; bottom: 0; height: 56px; padding: 0 18px;
  display: flex; align-items: center; gap: 14px;
  background: #0A0F20; border-top: 1px solid #1B2444; font: 500 14px/1 var(--body); color: var(--muted);
}
#controls button {
  font: 600 14px/1 var(--body); color: #fff; background: var(--accent); border: 0; border-radius: 8px; padding: 10px 16px; cursor: pointer;
}
#controls select { font: 500 14px/1 var(--body); background: #111A33; color: #fff; border: 1px solid #252C4A; border-radius: 8px; padding: 8px 10px; }
#controls input[type=range] { flex: 1; accent-color: var(--accent); }
body.capture #controls { display: none; }