:root {
  --ink: #05070f;
  --night: #0b1224;
  --gold: #e2b85a;
  --gold-2: #f6dc94;
  --ember: #ff6a3d;
  --teal: #4fd1c5;
  --paper: #f3eee2;
  --mute: #a6adbf;
  --serif: "Cormorant Garamond", Georgia, serif;
  --display: "Oswald", Impact, sans-serif;
  --sans: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* ---------- top bar ---------- */
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px clamp(16px, 4vw, 40px); }
.brand { font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; font-size: 13px; text-decoration: none; color: var(--gold-2); }
.brand i { opacity: .4; font-style: normal; margin: 0 .3em; }
.bolt { color: var(--gold); }
.top-cta { font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; font-size: 13px; text-decoration: none; padding: 8px 16px; border: 1px solid var(--gold); border-radius: 99px; color: var(--gold-2); transition: background .2s, color .2s; }
.top-cta:hover { background: var(--gold); color: var(--ink); }

/* ---------- theater / stage ---------- */
.theater { padding: 0 clamp(8px, 3vw, 40px); }
.stage {
  position: relative; overflow: hidden; margin: 0 auto; width: 100%; max-width: 1280px;
  aspect-ratio: 16 / 9; border-radius: 14px; background: radial-gradient(120% 90% at 50% 40%, #111a33 0%, var(--ink) 70%);
  box-shadow: 0 30px 120px -20px rgba(226, 184, 90, .25), 0 0 0 1px rgba(226, 184, 90, .18);
  container-type: inline-size; outline: none;
}
.stage:fullscreen { max-width: none; border-radius: 0; aspect-ratio: auto; height: 100vh; }
@media (max-width: 640px) { .stage { aspect-ratio: 4 / 5; } }

.bg { position: absolute; inset: 0; background: var(--src) center / cover no-repeat; opacity: 0; transform: scale(1.12); transition: opacity 1.4s ease; }
.bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,7,15,.55), rgba(5,7,15,.35) 40%, rgba(5,7,15,.85)); }
.bg.on { opacity: 1; animation: kenburns 16s linear forwards; }
@keyframes kenburns { from { transform: scale(1.12) translate(0, 0); } to { transform: scale(1.0) translate(-1%, -1%); } }

.grain { position: absolute; inset: -50%; pointer-events: none; opacity: .09; z-index: 5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite; }
@keyframes grain { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); } 50% { transform: translate(2%,-3%); } 75% { transform: translate(-1%,3%); } }

.bars span { position: absolute; left: 0; right: 0; height: 6.5%; background: #000; z-index: 6; }
.bars span:first-child { top: 0; } .bars span:last-child { bottom: 0; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 7; }
.flash.go { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: .55; } 100% { opacity: 0; } }

/* ---------- scenes ---------- */
.scene {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 9% 7%; gap: 2.2cqi; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s;
}
.scene.on { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.scene > * { opacity: 0; transform: translateY(24px); filter: blur(6px); }
.scene.on > * { animation: rise .9s cubic-bezier(.2,.8,.2,1) forwards; }
.scene.on > *:nth-child(2) { animation-delay: .35s; }
.scene.on > *:nth-child(3) { animation-delay: .7s; }
.scene.on > *:nth-child(4) { animation-delay: 1.05s; }
.scene.on > .late-in { animation-delay: 1.9s; }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }

.eyebrow { margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: .3em; font-size: clamp(10px, 1.35cqi, 16px); color: var(--gold); }
.mega { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .95; font-size: clamp(30px, 7.4cqi, 104px); letter-spacing: .01em; text-shadow: 0 6px 40px rgba(0,0,0,.6); }
.serif { margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.12; }
.big { font-size: clamp(22px, 4.6cqi, 64px); }
.mega-serif { font-size: clamp(32px, 7cqi, 96px); }
.gold { color: var(--gold-2); }
.ember { color: var(--ember); }

.gate-num { color: var(--gold-2); position: relative; display: inline-block; }
.scene.on .gate-num::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .08em; background: var(--ember); transform: scaleX(0); transform-origin: left; animation: line 1s 1.5s ease forwards; }
@keyframes line { to { transform: scaleX(1); } }

.strike { position: relative; display: inline-block; }
.scene.on .strike::after { content: ""; position: absolute; left: -3%; right: -3%; top: 55%; height: .07em; background: var(--ember); transform: scaleX(0); transform-origin: left; animation: line .6s 1.2s ease forwards; }

/* versus */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 3cqi; width: 100%; max-width: 980px; }
.side { display: flex; flex-direction: column; gap: .6cqi; padding: 2.4cqi; border-radius: 1.4cqi; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.side.late { border-color: rgba(255,106,61,.55); background: rgba(255,106,61,.08); box-shadow: 0 0 60px -10px rgba(255,106,61,.45); }
.tag { font-family: var(--display); text-transform: uppercase; letter-spacing: .14em; font-size: clamp(9px, 1.25cqi, 15px); color: var(--mute); }
.side .num { font-family: var(--display); font-size: clamp(40px, 10cqi, 140px); line-height: 1; color: var(--paper); }
.side.late .num { color: var(--ember); }
.cap { font-size: clamp(11px, 1.5cqi, 18px); }
.sev { font-size: clamp(10px, 1.3cqi, 16px); color: var(--mute); }
.sev strong { color: var(--gold-2); font-size: 1.3em; }
.side.late .sev strong { color: var(--ember); }
.divider { font-family: var(--display); font-size: clamp(16px, 2.6cqi, 34px); color: var(--gold); }
.punch { margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; font-size: clamp(16px, 3.4cqi, 46px); }
@media (max-width: 640px) { .vs { grid-template-columns: 1fr; gap: 8px; } .divider { display: none; } }

/* method */
.sss { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.6cqi; font-family: var(--display); text-transform: uppercase; font-weight: 700; font-size: clamp(26px, 6.4cqi, 92px); }
.sss .w, .sss .arr { opacity: 0; display: inline-block; }
.scene.on .sss .w, .scene.on .sss .arr { animation: slam .5s cubic-bezier(.2,1.6,.4,1) forwards; }
.w1 { color: var(--ember); } .w2 { color: var(--gold-2); } .w3 { color: var(--teal); }
.arr { color: rgba(255,255,255,.4); }
.scene.on .sss > :nth-child(1) { animation-delay: .4s; }
.scene.on .sss > :nth-child(2) { animation-delay: 1.0s; }
.scene.on .sss > :nth-child(3) { animation-delay: 1.3s; }
.scene.on .sss > :nth-child(4) { animation-delay: 1.9s; }
.scene.on .sss > :nth-child(5) { animation-delay: 2.2s; }
@keyframes slam { from { opacity: 0; transform: scale(1.8); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.motto { margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(16px, 2.6cqi, 36px); color: var(--paper); }
.motto b { color: var(--gold-2); font-weight: 700; }
.method .motto { animation-delay: 2.8s !important; }

/* modules ticker */
.ticker { position: relative; width: 100%; height: clamp(110px, 18cqi, 240px); }
.ticker .m { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .6cqi; animation: tick .52s ease forwards; }
.ticker .m b { font-family: var(--display); color: var(--gold); font-size: clamp(14px, 2.2cqi, 30px); letter-spacing: .2em; }
.ticker .m span { font-family: var(--display); text-transform: uppercase; font-weight: 700; font-size: clamp(22px, 5.4cqi, 76px); line-height: 1; }
.ticker .m small { font-family: var(--serif); font-style: italic; color: var(--mute); font-size: clamp(12px, 1.9cqi, 26px); }
@keyframes tick { from { opacity: 0; transform: translateY(30%) scale(.96); } to { opacity: 1; transform: none; } }

/* audience */
.aud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqi; max-width: 1000px; }
.aud li { font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: clamp(14px, 2.8cqi, 40px); padding: .7cqi 1.8cqi; border: 1px solid rgba(226,184,90,.45); border-radius: 99px; opacity: 0; }
.scene.on .aud li { animation: rise .6s ease forwards; }
.scene.on .aud li:nth-child(1) { animation-delay: .5s; } .scene.on .aud li:nth-child(2) { animation-delay: .9s; }
.scene.on .aud li:nth-child(3) { animation-delay: 1.3s; } .scene.on .aud li:nth-child(4) { animation-delay: 1.7s; }
.scene.on .aud li:nth-child(5) { animation-delay: 2.1s; } .scene.on .aud li:nth-child(6) { animation-delay: 2.5s; background: var(--gold); color: var(--ink); }

/* creds */
.stats { display: flex; justify-content: center; gap: 5cqi; flex-wrap: wrap; }
.stats div { display: flex; flex-direction: column; gap: .4cqi; }
.stats b { font-family: var(--display); font-size: clamp(30px, 6.4cqi, 90px); line-height: 1; color: var(--gold-2); }
.stats span { font-size: clamp(10px, 1.4cqi, 17px); color: var(--mute); text-transform: uppercase; letter-spacing: .12em; }
.names { margin: 0; font-family: var(--serif); font-size: clamp(13px, 1.9cqi, 26px); max-width: 900px; }
.names i { color: var(--gold); }

/* end card */
.shine { background: linear-gradient(100deg, var(--gold) 20%, #fff7da 45%, var(--gold) 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 3.5s linear infinite; }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 99px; border: 1px solid rgba(226,184,90,.6); background: rgba(5,7,15,.55); color: var(--paper); text-decoration: none; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: clamp(12px, 1.4cqi, 16px); transition: transform .15s, background .2s; }
.btn:hover { transform: translateY(-2px); background: rgba(226,184,90,.15); }
.btn.primary { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--ink); border-color: transparent; font-weight: 600; box-shadow: 0 10px 40px -10px rgba(226,184,90,.7); }
.scene.on .btn.primary { animation: pulse 2.2s 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(226,184,90,0), 0 10px 50px -6px rgba(226,184,90,.9); } }

/* controls */
.controls { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent); opacity: 0; transition: opacity .25s; }
.stage:hover .controls, .stage:focus-within .controls, .stage.paused .controls { opacity: 1; }
@media (hover: none) { .controls { opacity: 1; } }
.controls button { background: none; border: 0; color: var(--paper); font-size: 16px; padding: 4px 6px; }
.progress { flex: 1; height: 4px; background: rgba(255,255,255,.2); border-radius: 4px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--gold); }
.time { font-family: var(--display); font-size: 12px; color: var(--mute); min-width: 34px; }
.tap-start { position: absolute; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 16px 28px; border-radius: 99px; border: 0; background: var(--gold); color: var(--ink); font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- share ---------- */
.share { max-width: 900px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) 20px 32px; text-align: center; display: flex; flex-direction: column; gap: 18px; align-items: center; container-type: inline-size; }
.share .big { font-size: clamp(26px, 4.4vw, 50px); }
.share blockquote { margin: 0; padding: 18px 22px; border-left: 3px solid var(--gold); background: rgba(255,255,255,.04); border-radius: 0 10px 10px 0; text-align: left; font-family: var(--serif); font-size: clamp(17px, 2vw, 22px); line-height: 1.45; }
.share-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.share .btn { font-size: 13px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pills span { font-size: 13px; color: var(--gold-2); padding: 4px 10px; border-radius: 99px; background: rgba(226,184,90,.1); }

.fine { max-width: 900px; margin: 0 auto; padding: 0 20px 28px; }
.fine p { font-size: 12px; line-height: 1.6; color: var(--mute); }
.copyright { text-align: center; font-size: 11px; color: #6c7389; padding: 18px 20px 28px; border-top: 1px solid rgba(255,255,255,.06); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--gold); color: var(--ink); padding: 10px 18px; border-radius: 99px; font-weight: 600; z-index: 20; }

@media (prefers-reduced-motion: reduce) {
  .bg.on, .grain, .shine, .scene.on .btn.primary { animation: none; }
  .scene > *, .scene.on > *, .aud li, .sss .w, .sss .arr { animation-duration: .01s !important; animation-delay: 0s !important; }
}

/* Freeze every entrance animation while the commercial is paused. */
.stage.paused *, .stage.paused *::after { animation-play-state: paused !important; }
.stage.paused .grain, .stage.paused .shine, .stage.paused .controls * { animation-play-state: running !important; }