:root {
  /* compliance tokens from DESIGN typography: Sla Slab** primary headings Grotes Grotesk** labels */
  --burnt: #C75A1B;
  --ember: #FF8A2A;
  --asphalt: #111111;
  --fog: #D8D0C2;
  --bone: #F3E7D2;
  --crimson: #D9364A;
  --ice: #9FD8E8;
  --graphite: #2E3033;
  --slab: "Roboto Slab", "Roboto", Georgia, serif;
  --hud: "Space Grotesk", "Roboto", Arial, sans-serif;
  --jp: "Noto Sans JP", "Roboto", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--asphalt); color: var(--bone); overflow: hidden; }

body { font-family: var(--hud); cursor: crosshair; }

.asphalt-noise {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .43;
  background:
    radial-gradient(circle at 17% 23%, rgba(255, 138, 42, .09) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 44%, rgba(216, 208, 194, .08) 0 1px, transparent 2px),
    linear-gradient(135deg, rgba(199, 90, 27, .08), transparent 35%, rgba(159, 216, 232, .04) 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px);
  background-size: 31px 31px, 43px 43px, cover, 100% 8px;
  mix-blend-mode: screen;
}

.broadcast { position: relative; z-index: 1; height: 100vh; width: 100vw; }

.take {
  position: absolute; inset: 0; overflow: hidden; opacity: 0; transform: scale(1.025) rotate(.2deg);
  pointer-events: none; transition: opacity .38s ease, transform .44s cubic-bezier(.7, 0, .2, 1);
  background: var(--asphalt);
}

.take.active { opacity: 1; transform: scale(1) rotate(0deg); pointer-events: auto; }

.take::before {
  content: ""; position: absolute; inset: -10%;
  background: linear-gradient(115deg, rgba(46,48,51,.75), transparent 33%, rgba(199,90,27,.18) 54%, transparent 74%);
  clip-path: polygon(0 15%, 67% 0, 100% 74%, 18% 100%); opacity: .68;
}

.take::after {
  content: ""; position: absolute; inset: 8% 10%; border: 1px solid rgba(216,208,194,.18);
  clip-path: polygon(0 0, 88% 0, 100% 22%, 92% 100%, 12% 100%, 0 80%); transform: skew(-8deg);
}

.take-copy { position: absolute; z-index: 5; max-width: min(760px, 82vw); }

.slate { margin: 0 0 14px; font: 700 12px/1 var(--hud); letter-spacing: .24em; color: var(--ice); text-transform: uppercase; }

h1, h2 {
  margin: 0; font-family: var(--slab); font-weight: 900; line-height: .82; letter-spacing: -.065em;
  text-transform: uppercase; text-shadow: 8px 8px 0 rgba(199,90,27,.45), -2px -2px 0 rgba(159,216,232,.16);
}

h1 { font-size: clamp(82px, 18vw, 260px); }
h2 { font-size: clamp(68px, 15vw, 210px); }

.aside { margin: 20px 0 0; display: inline-block; padding: 8px 16px; color: var(--asphalt); background: var(--bone); font: 900 clamp(18px, 2.4vw, 32px)/1.1 var(--jp); transform: rotate(-2deg); box-shadow: 10px 10px 0 rgba(0,0,0,.35); }

.cold-copy { left: 7vw; top: 18vh; }
.corner-copy { right: 7vw; top: 13vh; text-align: right; }
.lower-copy { left: 9vw; bottom: 12vh; }
.live-copy { left: 11vw; top: 16vh; }
.final-copy { right: 9vw; bottom: 13vh; text-align: right; }

.hud-shell { position: fixed; inset: 22px; z-index: 20; pointer-events: none; color: var(--fog); font-family: var(--hud); mix-blend-mode: screen; }
.crop { position: absolute; width: 78px; height: 78px; border-color: rgba(243,231,210,.82); animation: cropTwitch 5.2s steps(2,end) infinite; }
.crop-tl { left: 0; top: 0; border-top: 3px solid; border-left: 3px solid; }
.crop-tr { right: 0; top: 0; border-top: 3px solid; border-right: 3px solid; animation-delay: .2s; }
.crop-bl { left: 0; bottom: 0; border-bottom: 3px solid; border-left: 3px solid; animation-delay: .5s; }
.crop-br { right: 0; bottom: 0; border-bottom: 3px solid; border-right: 3px solid; animation-delay: .8s; }

.exposure { position: absolute; top: 23%; display: grid; gap: 18px; }
.exposure-left { left: 13px; } .exposure-right { right: 13px; }
.exposure span { display: block; width: 34px; height: 2px; background: rgba(216,208,194,.55); }
.exposure-right span { margin-left: auto; }
.arc { position: absolute; left: 50%; top: 50%; border: 1px dashed rgba(159,216,232,.24); border-radius: 50%; transform: translate(-50%, -50%); }
.arc-one { width: 36vw; height: 36vw; }
.arc-two { width: 52vw; height: 52vw; border-color: rgba(199,90,27,.25); }
.hud-label { position: absolute; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(216,208,194,.75); }
.label-top { left: 122px; top: 7px; }
.label-side { right: -63px; top: 50%; transform: rotate(90deg); }
.record-module { position: absolute; right: 118px; top: -2px; display: flex; gap: 10px; align-items: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.record-module i { width: 12px; height: 12px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 0 0 rgba(217,54,74,.7), 0 0 24px rgba(255,138,42,.9); animation: recPulse 3.4s cubic-bezier(.7,0,.2,1) infinite; }
.record-module i.steady { animation: none; background: var(--ember); box-shadow: 0 0 28px rgba(255,138,42,.9); }

.site-mark { position: fixed; z-index: 30; left: 5.4vw; bottom: 5vh; font: 900 clamp(26px, 4.4vw, 72px)/.85 var(--slab); letter-spacing: -.07em; color: var(--bone); text-transform: lowercase; transform: rotate(-4deg); transition: transform .22s ease; text-shadow: 5px 5px 0 var(--burnt); }
.site-mark em { color: var(--ember); font-style: normal; }

.take-nav { position: fixed; z-index: 31; right: 34px; bottom: 28px; display: flex; gap: 8px; }
.take-nav button { width: 42px; height: 30px; border: 1px solid rgba(216,208,194,.38); color: var(--fog); background: rgba(17,17,17,.5); font: 700 12px var(--hud); cursor: pointer; transform: skew(-10deg); transition: background .18s, color .18s, transform .18s; }
.take-nav button.active, .take-nav button:hover { background: var(--ember); color: var(--asphalt); transform: skew(-10deg) translateY(-4px); }

.metadata-bar { position: fixed; z-index: 23; left: 24px; right: 24px; bottom: 25px; display: flex; justify-content: center; gap: 18px; font: 700 11px var(--hud); letter-spacing: .18em; text-transform: uppercase; color: rgba(216,208,194,.65); pointer-events: none; }
.metadata-bar span:first-child { color: var(--ember); }

.fractured-lens { position: absolute; z-index: 3; width: min(54vw, 720px); aspect-ratio: 1; right: 4vw; top: 12vh; filter: drop-shadow(18px 22px 0 rgba(0,0,0,.35)); transform: rotate(-8deg); }
.shard { position: absolute; display: grid; place-items: center; color: rgba(17,17,17,.78); font: 900 12px var(--hud); letter-spacing: .12em; text-transform: uppercase; border: 2px solid rgba(243,231,210,.2); background: linear-gradient(135deg, rgba(255,138,42,.94), rgba(199,90,27,.88)); transform-origin: 50% 60%; animation: shardSnap .85s cubic-bezier(.18,.9,.16,1.2) both; }
.shard b { transform: rotate(-7deg); }
.s1 { inset: 7% 36% 51% 18%; clip-path: polygon(8% 2%,100% 12%,75% 100%,0 68%); }
.s2 { inset: 14% 9% 43% 48%; clip-path: polygon(10% 0,92% 16%,100% 86%,0 100%); animation-delay: .06s; }
.s3 { inset: 42% 15% 14% 44%; background: linear-gradient(135deg, rgba(159,216,232,.92), rgba(199,90,27,.86)); clip-path: polygon(0 8%,100% 0,79% 100%,10% 84%); animation-delay: .12s; }
.s4 { inset: 50% 48% 9% 13%; background: linear-gradient(135deg, var(--bone), var(--burnt)); clip-path: polygon(19% 0,100% 24%,86% 100%,0 81%); animation-delay: .18s; }
.s5 { inset: 30% 31% 32% 30%; background: linear-gradient(135deg, var(--crimson), var(--ember)); clip-path: polygon(49% 0,100% 38%,75% 100%,12% 86%,0 28%); animation-delay: .22s; }
.aperture { position: absolute; left: 42%; top: 42%; width: 16%; height: 16%; border-radius: 50%; background: var(--asphalt); box-shadow: inset 0 0 0 10px rgba(46,48,51,.7), 0 0 0 2px var(--ice); }

.sticker { position: absolute; z-index: 6; padding: 11px 22px; background: var(--bone); color: var(--asphalt); font: 900 18px var(--jp); box-shadow: 8px 8px 0 rgba(0,0,0,.38); }
.sticker-a { right: 17vw; bottom: 19vh; transform: rotate(7deg); }
.spray-arrow { position: absolute; z-index: 6; color: var(--crimson); font: 900 120px var(--slab); }
.arrow-a { left: 45vw; top: 58vh; transform: rotate(21deg); }
.subtitle-strip { position: absolute; z-index: 6; left: -4vw; bottom: 17vh; padding: 12px 80px; background: var(--burnt); color: var(--asphalt); font: 900 16px var(--hud); letter-spacing: .16em; text-transform: uppercase; transform: rotate(-3deg); }

.take-look { background: radial-gradient(circle at 80% 22%, rgba(217,54,74,.19), transparent 30%), var(--asphalt); }
.tape { position: absolute; z-index: 6; left: 24vw; top: 7vh; padding: 12px 40px; background: var(--fog); color: var(--graphite); font: 900 18px var(--jp); transform: rotate(-4deg); }
.blade-stack { position: absolute; inset: 18% 6% 10% 4%; z-index: 3; }
.blade-stack i { position: absolute; height: 26%; width: 88%; background: linear-gradient(90deg, rgba(199,90,27,.91), rgba(46,48,51,.92)); clip-path: polygon(0 15%, 91% 0, 100% 84%, 8% 100%); box-shadow: 12px 12px 0 rgba(0,0,0,.28); animation: bladeShift 2.9s steps(2,end) infinite; }
.blade-stack i:nth-child(1) { top: 0; left: 0; } .blade-stack i:nth-child(2) { top: 18%; left: 10%; animation-delay: .2s; } .blade-stack i:nth-child(3) { top: 36%; left: -5%; animation-delay: .4s; } .blade-stack i:nth-child(4) { top: 54%; left: 14%; animation-delay: .6s; } .blade-stack i:nth-child(5) { top: 72%; left: 2%; animation-delay: .8s; }
.caption-chip { position: absolute; z-index: 7; left: 10vw; top: 37vh; color: var(--crimson); font: 900 clamp(30px,5vw,78px) var(--jp); transform: rotate(-90deg); }
.warning-stripe { position: absolute; z-index: 7; right: -12vw; bottom: 26vh; padding: 13px 60px; background: repeating-linear-gradient(45deg, var(--ember) 0 18px, var(--asphalt) 18px 34px); color: var(--bone); font: 900 14px var(--hud); letter-spacing: .22em; transform: rotate(12deg); }

.production-note { position: absolute; z-index: 7; right: 12vw; top: 20vh; padding: 9px 14px; border: 1px solid var(--ice); color: var(--ice); font: 700 13px var(--hud); letter-spacing: .14em; text-transform: uppercase; }
.focus-brackets { position: absolute; z-index: 4; inset: 20vh 19vw; }
.focus-brackets span { position: absolute; width: 118px; height: 118px; border-color: var(--bone); animation: focusTick 2.1s cubic-bezier(.7,0,.2,1) infinite; }
.focus-brackets span:nth-child(1) { left: 0; top: 0; border-top: 5px solid; border-left: 5px solid; }
.focus-brackets span:nth-child(2) { right: 0; top: 0; border-top: 5px solid; border-right: 5px solid; animation-delay: .1s; }
.focus-brackets span:nth-child(3) { left: 0; bottom: 0; border-bottom: 5px solid; border-left: 5px solid; animation-delay: .2s; }
.focus-brackets span:nth-child(4) { right: 0; bottom: 0; border-bottom: 5px solid; border-right: 5px solid; animation-delay: .3s; }
.crystal-field i { position: absolute; z-index: 3; background: rgba(159,216,232,.35); border: 1px solid rgba(159,216,232,.8); clip-path: polygon(50% 0,100% 42%,70% 100%,8% 82%,0 24%); }
.c1 { width: 16vw; height: 20vw; right: 17vw; top: 19vh; transform: rotate(19deg); } .c2 { width: 10vw; height: 13vw; right: 34vw; top: 50vh; transform: rotate(-18deg); } .c3 { width: 12vw; height: 15vw; left: 36vw; top: 15vh; transform: rotate(42deg); } .c4 { width: 7vw; height: 9vw; right: 8vw; bottom: 18vh; transform: rotate(-8deg); } .c5 { width: 9vw; height: 13vw; left: 5vw; top: 22vh; transform: rotate(11deg); }
.right-strip { left: auto; right: -7vw; bottom: 44vh; transform: rotate(89deg); }

.waveform { position: absolute; z-index: 5; right: 10vw; bottom: 20vh; height: 28vh; display: flex; align-items: end; gap: 13px; }
.waveform span { width: 18px; background: var(--ember); box-shadow: 0 0 30px rgba(255,138,42,.5); animation: wave 1.2s steps(3,end) infinite; }
.waveform span:nth-child(1) { height: 22%; } .waveform span:nth-child(2) { height: 70%; animation-delay: .1s; } .waveform span:nth-child(3) { height: 38%; animation-delay: .2s; } .waveform span:nth-child(4) { height: 88%; animation-delay: .3s; } .waveform span:nth-child(5) { height: 50%; animation-delay: .4s; } .waveform span:nth-child(6) { height: 96%; animation-delay: .5s; } .waveform span:nth-child(7) { height: 34%; animation-delay: .6s; } .waveform span:nth-child(8) { height: 62%; animation-delay: .7s; }
.speech-burst { position: absolute; z-index: 6; right: 25vw; top: 19vh; padding: 20px 28px; background: var(--crimson); color: var(--bone); font: 900 30px var(--slab); clip-path: polygon(0 15%,85% 0,100% 45%,76% 100%,15% 91%); transform: rotate(9deg); }
.glass-note { position: absolute; z-index: 6; left: 42vw; bottom: 12vh; color: var(--ice); border-bottom: 2px solid var(--ice); font: 700 13px var(--hud); letter-spacing: .18em; text-transform: uppercase; }
.orange-orbit { position: absolute; right: 18vw; top: 26vh; width: 24vw; height: 24vw; border: 2px dashed rgba(255,138,42,.55); border-radius: 50%; animation: orbitSpin 7s linear infinite; }

.aligned-lens { position: absolute; z-index: 4; left: 10vw; top: 15vh; width: min(44vw, 610px); aspect-ratio: 1; filter: drop-shadow(0 0 45px rgba(255,138,42,.28)); }
.aligned-lens span { position: absolute; inset: 14%; border: 10px solid rgba(255,138,42,.72); border-radius: 50%; transform: rotate(calc(var(--r) * 1deg)); }
.aligned-lens span:nth-child(1) { --r: 0; clip-path: polygon(50% 0,100% 0,100% 50%,50% 50%); }
.aligned-lens span:nth-child(2) { --r: 90; clip-path: polygon(50% 0,100% 0,100% 50%,50% 50%); }
.aligned-lens span:nth-child(3) { --r: 180; clip-path: polygon(50% 0,100% 0,100% 50%,50% 50%); }
.aligned-lens span:nth-child(4) { --r: 270; clip-path: polygon(50% 0,100% 0,100% 50%,50% 50%); }
.aligned-lens i { position: absolute; inset: 38%; border-radius: 50%; background: var(--ember); box-shadow: 0 0 60px rgba(255,138,42,.85); }
.final-subtitles { position: absolute; z-index: 7; left: 12vw; bottom: 13vh; display: grid; gap: 9px; }
.final-subtitles b { font: 900 36px var(--jp); color: var(--crimson); }
.final-subtitles span { padding: 10px 16px; background: var(--bone); color: var(--asphalt); font: 900 18px var(--hud); }

.shutter-wipe { position: fixed; inset: 0; z-index: 50; pointer-events: none; display: grid; grid-template-columns: repeat(4, 1fr); }
.shutter-wipe span { background: var(--asphalt); transform: scaleY(0); transform-origin: top; }
.shutter-wipe.wiping span { animation: wipeBlade .58s cubic-bezier(.7,0,.2,1); }
.shutter-wipe span:nth-child(2) { animation-delay: .04s; } .shutter-wipe span:nth-child(3) { animation-delay: .08s; } .shutter-wipe span:nth-child(4) { animation-delay: .12s; }

@keyframes recPulse { 0%, 72%, 100% { box-shadow: 0 0 0 0 rgba(217,54,74,0), 0 0 13px rgba(217,54,74,.35); transform: scale(.72); } 8% { box-shadow: 0 0 0 18px rgba(217,54,74,.14), 0 0 42px rgba(255,138,42,.9); transform: scale(1.25); } 18% { transform: scale(.82); } }
@keyframes cropTwitch { 0%, 88%, 100% { transform: translate(0); } 90% { transform: translate(5px,-3px); } 94% { transform: translate(-2px,4px); } }
@keyframes shardSnap { from { transform: translateY(60px) rotate(25deg) scale(.2); opacity: 0; } to { opacity: 1; } }
@keyframes bladeShift { 0%,100% { transform: translateX(0) rotate(-4deg); } 50% { transform: translateX(28px) rotate(-2deg); } }
@keyframes focusTick { 0%,100% { transform: translate(0); border-color: var(--bone); } 48% { transform: translate(8px,-6px); border-color: var(--ember); } }
@keyframes wave { 0%,100% { transform: scaleY(.7); background: var(--burnt); } 50% { transform: scaleY(1.24); background: var(--ember); } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes wipeBlade { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media (max-width: 760px) {
  .hud-shell { inset: 14px; }
  .arc-one, .arc-two { width: 80vw; height: 80vw; }
  .site-mark { bottom: 9vh; }
  .take-nav { right: 14px; bottom: 14px; }
  .metadata-bar { display: none; }
  .fractured-lens, .aligned-lens { width: 76vw; right: -6vw; left: auto; top: 38vh; }
  .corner-copy, .final-copy { right: 6vw; text-align: left; }
  .waveform { right: 4vw; }
}