@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Great Fighter';
  src: url('assets/fonts/GreatFighterDemo.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #0b0a09;
  --ink: #f2eee8;
  --muted: #9b958e;
  --line: rgba(242, 238, 232, 0.17);
  --orange: #ffbf0a;
  --orange-bright: #ffd34a;
  --display-font: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --accent-font: 'Great Fighter', 'Arial Black', Impact, sans-serif;
  --cool: #d3d9dc;
  --header-height: 84px;
  --progress: 0;
  --scroll-velocity: 0;
  --chapter-opacity: 1;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; background: var(--bg); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font-family: 'Space Grotesk', Arial, sans-serif; overflow-x: hidden; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.skip-link { position: fixed; z-index: 100; top: -100px; left: 20px; padding: 10px 14px; background: var(--orange); color: #111; font-weight: 700; }
.skip-link:focus { top: 20px; }

.fight-video, .cinematic-fallback, .video-wash, .grain, .impact-flash { position: fixed; inset: 0; width: 100%; height: 100%; }
.fight-video { z-index: 1; object-fit: cover; opacity: 1; filter: saturate(0.88) contrast(1.06) brightness(0.7); transition: opacity 1s ease; }
.fight-video.is-ready { opacity: 1; }
body.no-video .fight-video { opacity: 0; }
.cinematic-fallback { z-index: 0; overflow: hidden; background: radial-gradient(circle at 28% 52%, #51301f 0%, rgba(52, 26, 15, 0.65) 18%, transparent 44%), radial-gradient(circle at 75% 20%, #45484a 0%, rgba(17, 18, 18, 0.3) 30%, transparent 55%), linear-gradient(112deg, #090909 0%, #1b1613 48%, #060707 100%); }
.fallback-glow { position: absolute; width: 58vw; height: 58vw; top: -18vw; left: -13vw; border-radius: 50%; background: radial-gradient(circle, rgba(224, 102, 42, 0.62), rgba(140, 48, 18, 0.2) 28%, transparent 70%); filter: blur(20px); mix-blend-mode: screen; transform: translate3d(calc(var(--progress) * 18vw), calc(var(--progress) * 12vh), 0); transition: transform 0.6s var(--ease-out); }
.fallback-cage { position: absolute; inset: -20%; opacity: 0.2; transform: perspective(700px) rotateX(63deg) translateY(23%) rotateZ(-10deg) scale(1.2); background: repeating-linear-gradient(18deg, transparent 0 26px, rgba(195, 202, 203, 0.45) 27px 29px, transparent 30px 54px), repeating-linear-gradient(72deg, transparent 0 26px, rgba(195, 202, 203, 0.36) 27px 29px, transparent 30px 54px); -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%); mask-image: radial-gradient(ellipse at center, black 0%, transparent 72%); }
.fallback-fighter { position: absolute; bottom: -7vh; width: min(24vw, 360px); height: 74vh; opacity: 0.9; filter: blur(0.2px); transition: transform 1.1s var(--ease-out); }
.fallback-fighter::before { content: ''; position: absolute; top: 0; left: 26%; width: 28%; height: 20%; border-radius: 50%; background: #080808; box-shadow: 0 11vh 0 3.5vw #0b0a0a, 3vw 24vh 0 2.1vw #0c0b0b, -2.5vw 36vh 0 2vw #080808; }
.fallback-fighter::after { content: ''; position: absolute; inset: 15% 0 0; background: linear-gradient(130deg, #050505 0 36%, transparent 37% 44%, #131313 45% 62%, transparent 63%), linear-gradient(55deg, transparent 0 42%, #080808 43% 67%, transparent 68%); clip-path: polygon(28% 0, 67% 0, 100% 20%, 85% 100%, 8% 100%, 0 27%); }
.fallback-fighter--sedo { left: 16%; transform: translate3d(calc(var(--progress) * 8vw), 0, 0) rotate(-3deg); background: radial-gradient(ellipse at 45% 20%, rgba(255, 191, 10, 0.55), transparent 35%); }
.fallback-fighter--johnny { right: 14%; transform: translate3d(calc(var(--progress) * -8vw), 0, 0) scaleX(-1) rotate(4deg); background: radial-gradient(ellipse at 45% 20%, rgba(215, 224, 227, 0.27), transparent 35%); }
.fallback-haze { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 58%, transparent 15%, rgba(6, 7, 7, 0.4) 74%), linear-gradient(180deg, rgba(4, 4, 4, 0.1) 0 50%, rgba(4, 4, 4, 0.7) 100%); }
.video-wash { z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(4, 4, 4, 0.8), transparent 38%, transparent 65%, rgba(4, 4, 4, 0.54)), linear-gradient(180deg, rgba(4, 4, 4, 0.52), transparent 26%, transparent 72%, rgba(4, 4, 4, 0.72)); mix-blend-mode: multiply; }
.atmosphere { z-index: 3; position: fixed; inset: 0; overflow: hidden; pointer-events: none; contain: paint; }
.fog { position: absolute; border-radius: 50%; filter: blur(34px); mix-blend-mode: screen; pointer-events: none; will-change: transform, opacity; }
.fog--low { left: -18vw; bottom: -18vh; width: 136vw; height: 52vh; background: radial-gradient(ellipse at 48% 45%, rgba(238, 152, 101, .36), rgba(132, 76, 49, .18) 38%, transparent 72%); opacity: calc(.3 + var(--scroll-velocity) * .54); transform: translate3d(calc(var(--progress) * -10vw), calc(var(--progress) * -4vh), 0) rotate(-3deg); animation: fog-crawl 16s ease-in-out infinite alternate; }
.fog--high { top: -22vh; right: -25vw; width: 90vw; height: 70vh; background: radial-gradient(ellipse at 42% 55%, rgba(200, 208, 205, .24), transparent 67%); opacity: calc(.24 + (1 - var(--progress)) * .22 + var(--scroll-velocity) * .38); transform: translate3d(calc(var(--progress) * 8vw), calc(var(--progress) * 6vh), 0); animation: fog-breathe 13s ease-in-out infinite alternate; }
.fog--streak { top: 34%; left: -30%; width: 85vw; height: 11vh; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(240, 129, 73, .24), transparent); opacity: calc(.18 + var(--scroll-velocity) * .66); filter: blur(22px); transform: translate3d(calc(var(--progress) * 120vw), 0, 0) rotate(-11deg); }
.spark-field { position: absolute; inset: 0; opacity: calc(.58 + var(--scroll-velocity) * .95); mix-blend-mode: screen; contain: paint; will-change: transform, opacity; transform: translate3d(calc(var(--progress) * -4vw), calc(var(--progress) * -9vh), 0); transition: transform .45s var(--ease-out), opacity .3s ease; }
.spark { position: absolute; width: var(--size); height: var(--size); top: var(--y); left: var(--x); border-radius: 50%; background: radial-gradient(circle at 48% 34%, #fff8bd 0 13%, #ffd34b 26%, #ff7b1c 60%, #d93808 100%); box-shadow: 0 0 5px 1px rgba(255, 126, 20, .92), 0 0 16px 3px rgba(220, 50, 7, .52), 0 0 28px 6px rgba(255, 100, 12, .25); animation: ember-rise var(--duration) ease-in-out var(--delay) infinite; }
.spark::after { content: ''; position: absolute; top: 100%; left: 50%; width: 1px; height: var(--tail); background: linear-gradient(rgba(255, 218, 123, .95), rgba(255, 103, 16, .72) 45%, transparent); transform: translateX(-50%); }
@keyframes fog-crawl { from { margin-left: -2vw; } to { margin-left: 5vw; } }
@keyframes fog-breathe { from { transform: translate3d(calc(var(--progress) * 8vw), calc(var(--progress) * 6vh), 0) scale(.92); } to { transform: translate3d(calc(var(--progress) * 3vw), calc(var(--progress) * 6vh), 0) scale(1.05); } }
@keyframes ember-rise { 0%, 100% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.35); } 15% { opacity: .78; } 48% { opacity: .92; transform: translate3d(var(--drift), -28px, 0) scale(1); } 76% { opacity: .44; } 100% { opacity: 0; transform: translate3d(var(--drift), -72px, 0) scale(.12); } }
.lightning { position: fixed; z-index: 6; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 58% 30%, rgba(255, 245, 196, .48), transparent 42%), rgba(255, 224, 120, .08); mix-blend-mode: screen; }
.lightning::before, .lightning::after { content: ''; position: absolute; top: -10vh; left: calc(20% + var(--progress) * 48%); width: clamp(150px, 18vw, 280px); height: 122vh; background: linear-gradient(90deg, transparent 38%, rgba(255, 246, 199, .9) 49%, transparent 53%); clip-path: polygon(47% 0, 62% 0, 54% 26%, 76% 26%, 42% 56%, 50% 56%, 25% 100%, 35% 59%, 15% 59%, 48% 28%, 36% 28%); filter: blur(.5px) drop-shadow(0 0 14px rgba(255, 219, 111, .9)); opacity: 0; transform: rotate(7deg); }
.lightning::after { left: calc(62% - var(--progress) * 28%); width: clamp(100px, 12vw, 190px); transform: scaleX(-1) rotate(-9deg); opacity: 0; }
.lightning.is-striking { animation: lightning-flash 850ms ease-out both; }
.lightning.is-striking::before { animation: lightning-bolt 850ms steps(1, end) both; }
.lightning.is-striking::after { animation: lightning-bolt 850ms steps(1, end) 70ms both; }
@keyframes lightning-flash { 0%, 8%, 18%, 100% { opacity: 0; } 10% { opacity: .86; } 14% { opacity: .2; } 24% { opacity: .54; } 31% { opacity: .08; } 48% { opacity: .28; } 58% { opacity: 0; } }
@keyframes lightning-bolt { 0%, 8%, 100% { opacity: 0; } 10%, 16% { opacity: .9; } 18% { opacity: .08; } 25%, 33% { opacity: .72; } 36% { opacity: 0; } }
.grain { z-index: 20; pointer-events: none; opacity: 0.11; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.impact-flash { z-index: 19; pointer-events: none; background: var(--orange-bright); opacity: 0; mix-blend-mode: screen; }
.impact-flash.is-flashing { animation: flash 550ms var(--ease-out); }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: 0.7; } 100% { opacity: 0; } }

.site-header { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: var(--header-height); padding: 0 clamp(22px, 4vw, 68px); border-bottom: 1px solid rgba(242, 238, 232, 0.13); background: linear-gradient(180deg, rgba(6, 6, 6, 0.74), transparent); }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 155px; letter-spacing: 0.11em; font-size: 11px; font-weight: 600; }
.brand-logo { display: block; width: 86px; height: auto; max-height: 34px; object-fit: contain; }
.brand-copy b { color: var(--orange); font-weight: 600; }
.desktop-nav { display: flex; align-items: center; gap: clamp(22px, 3.2vw, 58px); margin-left: auto; margin-right: auto; }
.desktop-nav a { position: relative; color: rgba(242, 238, 232, 0.64); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; transition: color 250ms ease; }
.desktop-nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--orange); transition: right 250ms ease; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--ink); }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { right: 0; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 155px; }
.button { border: 0; cursor: pointer; text-transform: uppercase; letter-spacing: 0.13em; font-size: 10px; font-weight: 700; }
.button span { margin-left: 12px; font-size: 14px; }
.menu-toggle { display: none; width: 37px; height: 37px; border: 1px solid var(--line); background: rgba(0,0,0,.18); cursor: pointer; }
.menu-toggle span { display: block; width: 14px; height: 1px; margin: 4px auto; background: var(--ink); transition: transform 220ms ease; }
.mobile-menu { position: fixed; z-index: 25; inset: 0; display: none; padding: 120px 24px 30px; background: rgba(9, 8, 7, 0.96); }
.mobile-menu.is-open { display: flex; flex-direction: column; justify-content: space-between; }
.mobile-menu nav { display: grid; gap: 12px; }
.mobile-menu nav a { display: flex; justify-content: space-between; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); font: 800 42px/1 var(--display-font); text-transform: uppercase; letter-spacing: .02em; }
.mobile-menu nav a span { color: var(--orange); font: 11px 'Space Grotesk', sans-serif; letter-spacing: .16em; }
.mobile-menu p { color: var(--muted); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }

.fight-progress { position: fixed; z-index: 31; top: 50%; right: clamp(16px, 2.8vw, 44px); display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(242, 238, 232, 0.55); font-size: 9px; letter-spacing: 0.16em; transform: translateY(-50%); }
.progress-track { position: relative; width: 1px; height: 104px; background: rgba(242, 238, 232, 0.28); }
.progress-track span { position: absolute; left: 0; top: 0; width: 1px; height: calc(var(--progress) * 100%); background: var(--orange); box-shadow: 0 0 11px rgba(255, 191, 10, 0.8); }

.story-track { position: relative; z-index: 2; }
.scroll-chapter { min-height: 100svh; pointer-events: none; }
.story-ui { position: fixed; z-index: 10; inset: 0; pointer-events: none; overflow: hidden; }
.chapter { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-height) + 32px) clamp(24px, 8vw, 140px) 70px; opacity: 0; visibility: hidden; transition: opacity 180ms linear, visibility 180ms linear; }
.chapter.is-active { opacity: 1; visibility: visible; }
.chapter.is-interactive.is-active { pointer-events: auto; }
.eyebrow, .chapter-kicker, .chapter-number, .panel-label { color: rgba(242, 238, 232, .58); font-size: 10px; letter-spacing: .23em; line-height: 1.4; text-transform: uppercase; }
.eyebrow span { color: var(--orange); margin: 0 4px; }
.eyebrow.accent { color: var(--orange-bright); }
.eyebrow.cool, .matchup-side--johnny .eyebrow { color: var(--cool); }
.display-title, .hero-title, .fighter-name { margin: 0; font-family: var(--display-font); font-weight: 900; letter-spacing: .025em; text-transform: uppercase; }
.display-title { font-size: clamp(70px, 10.2vw, 164px); line-height: .82; }
.display-title span { display: inline-block; color: var(--orange); font-family: var(--accent-font); font-size: .9em; font-weight: 400; letter-spacing: .035em; line-height: .88; transform: scaleX(.92); transform-origin: left center; }
.body-copy, .profile-text { margin: 28px 0 0; color: rgba(242, 238, 232, .7); font-size: 13px; line-height: 1.7; }

.chapter--hero { align-items: center; padding-top: 110px; text-align: center; }
.chapter-kicker { color: var(--orange-bright); font-weight: 600; }
.chapter-kicker span { color: var(--ink); margin: 0 6px; }
.hero-title { display: flex; align-items: center; gap: clamp(12px, 2vw, 35px); margin-top: 23px; font-size: clamp(90px, 17vw, 260px); line-height: .78; letter-spacing: .01em; }
.hero-title span:first-child { color: var(--orange); font-family: var(--accent-font); font-size: .92em; font-weight: 400; letter-spacing: .035em; transform: scaleX(.92); }
.hero-title em { color: rgba(242, 238, 232, .78); font: 400 clamp(18px, 2.4vw, 38px)/1 'Space Grotesk', sans-serif; font-style: normal; letter-spacing: .15em; }
.hero-tagline { margin: 30px 0 0; color: rgba(242, 238, 232, .82); font-size: clamp(11px, 1.2vw, 15px); letter-spacing: .16em; text-transform: uppercase; }
.hero-tagline span { color: var(--orange-bright); }
.hero-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: clamp(25px, 4vw, 80px); width: min(1160px, 100%); margin-top: clamp(82px, 14vh, 150px); text-align: left; }
.event-details { display: grid; gap: 5px; color: var(--muted); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.event-details strong { color: var(--ink); font-size: 12px; }
.event-details i { color: var(--orange); font-style: normal; margin: 0 4px; }
.countdown { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.countdown > div { display: grid; gap: 4px; min-width: 42px; text-align: center; }
.countdown strong { font: 800 clamp(23px, 2.8vw, 42px)/1 var(--display-font); letter-spacing: .04em; }
.countdown span { color: rgba(242, 238, 232, .45); font-size: 7px; letter-spacing: .18em; }
.countdown > b { color: var(--orange); font: 800 20px/1 var(--display-font); }
.hero-actions { display: flex; justify-content: flex-end; gap: 10px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; transition: transform 220ms var(--ease-out), background 220ms ease, color 220ms ease; }
.button:hover, .button:focus-visible, .text-button:hover, .text-button:focus-visible, .share-button:hover, .share-button:focus-visible { transform: translateY(-3px); }
.button--solid { background: var(--orange); color: #15100c; }
.button--solid:hover, .button--solid:focus-visible { background: var(--orange-bright); }
.button--ghost { border: 1px solid rgba(242, 238, 232, .45); background: rgba(12, 12, 12, .18); color: var(--ink); }
.button--ghost:hover, .button--ghost:focus-visible { border-color: var(--ink); background: rgba(242, 238, 232, .1); }
.scroll-cue { position: absolute; bottom: 26px; display: flex; align-items: center; gap: 12px; color: rgba(242, 238, 232, .52); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }
.scroll-cue__line { display: inline-block; width: 42px; height: 1px; background: var(--orange); }
.scroll-cue > span:last-child { color: var(--orange); font-size: 14px; }

.chapter-number { position: absolute; top: calc(var(--header-height) + 30px); left: clamp(24px, 8vw, 140px); color: var(--orange); }
.chapter-number span { color: var(--muted); }
.chapter--talk { padding-left: clamp(24px, 14vw, 250px); }
.talk-copy { position: relative; z-index: 1; }
.talk-copy .display-title span { color: var(--orange); }
.ghost-word { position: absolute; right: -3vw; bottom: 7vh; color: transparent; -webkit-text-stroke: 1px rgba(242, 238, 232, .2); font: 800 clamp(120px, 23vw, 390px)/.8 var(--display-font); letter-spacing: .01em; white-space: nowrap; }
.ghost-word b { color: transparent; -webkit-text-stroke: 1px rgba(255, 191, 10, .43); font-weight: 400; }

.chapter--profile { align-items: flex-start; padding-left: clamp(24px, 15vw, 270px); }
.chapter--profile .profile-copy { width: min(470px, 100%); }
.fighter-name { margin-top: 13px; color: var(--orange); font-size: clamp(96px, 16vw, 260px); line-height: .8; }
.chapter--sedo .fighter-name { font-family: var(--accent-font); font-weight: 400; letter-spacing: .035em; transform: scaleX(.92); transform-origin: left center; }
.chapter--johnny { align-items: flex-end; padding-right: clamp(54px, 15vw, 270px); padding-left: 24px; text-align: right; }
.chapter--johnny .fighter-name { color: var(--cool); }
.chapter--johnny .attribute-list i b { background: var(--cool); }
.chapter--johnny .profile-copy { display: flex; flex-direction: column; align-items: flex-end; }
.attribute-list { display: grid; gap: 11px; width: min(360px, 100%); margin-top: 38px; }
.attribute-list > div { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 15px; color: rgba(242, 238, 232, .64); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.attribute-list i { display: block; height: 2px; background: rgba(242, 238, 232, .17); }
.attribute-list i b { display: block; width: var(--meter); height: 100%; background: var(--orange); box-shadow: 0 0 9px rgba(255, 191, 10, .48); }
.profile-index { position: absolute; right: clamp(24px, 6vw, 90px); bottom: 20%; display: grid; gap: 12px; justify-items: center; color: rgba(242, 238, 232, .62); font-size: 9px; letter-spacing: .16em; }
.profile-index i { display: block; width: 1px; height: 68px; background: linear-gradient(var(--orange), rgba(242, 238, 232, .2)); }

.chapter--impact { align-items: center; padding-left: 14vw; }
.impact-copy { width: min(730px, 90vw); }
.impact-copy .eyebrow { margin-bottom: 22px; }
.impact-before, .impact-after { transition: opacity 220ms ease, transform 400ms var(--ease-out); }
.impact-after { position: absolute; opacity: 0; transform: translateY(20px) skewX(-3deg); }
.chapter--impact.impact-hit .impact-before { opacity: 0; transform: translateY(-22px) skewX(3deg); }
.chapter--impact.impact-hit .impact-after { opacity: 1; transform: translateY(0) skewX(-3deg); }
.chapter--impact.impact-hit .display-title { animation: impact-jolt 480ms var(--ease-out); }
@keyframes impact-jolt { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 52% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

.chapter--matchup { padding: calc(var(--header-height) + 35px) clamp(24px, 8vw, 130px) 56px; }
.chapter-topline { display: flex; justify-content: space-between; color: rgba(242, 238, 232, .54); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.matchup-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(22px, 5vw, 90px); width: min(1160px, 100%); margin: auto; }
.matchup-side { display: grid; gap: 10px; font: 800 clamp(28px, 3.8vw, 60px)/.95 var(--display-font); text-transform: uppercase; }
.matchup-side--johnny { text-align: right; }
.matchup-side .eyebrow { margin-bottom: 10px; font: 10px/1.4 'Space Grotesk', sans-serif; }
.matchup-side--sedo span:nth-of-type(2) { color: var(--orange); font-family: var(--accent-font); font-weight: 400; letter-spacing: .035em; }
.matchup-side--johnny span:nth-of-type(2) { color: var(--cool); }
.versus { color: rgba(242, 238, 232, .88); font: 900 clamp(70px, 10vw, 160px)/1 var(--display-font); letter-spacing: .02em; }

.chapter--cage { align-items: center; text-align: center; }
.octagon-lines { position: absolute; width: min(62vw, 780px); aspect-ratio: 1; border: 1px solid rgba(242, 238, 232, .26); clip-path: polygon(29% 0, 71% 0, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0 71%, 0 29%); opacity: .7; }
.octagon-lines::before, .octagon-lines::after { content: ''; position: absolute; inset: 6%; border: 1px solid rgba(255, 191, 10, .38); clip-path: inherit; }
.octagon-lines::after { inset: 12%; border-color: rgba(242, 238, 232, .13); }
.cage-copy { position: relative; z-index: 1; transition: transform 500ms var(--ease-out); }
.chapter--cage.is-active .cage-copy { transform: scale(calc(1 - var(--chapter-local, 0) * .12)); }
.cage-copy .display-title { font-size: clamp(70px, 9.4vw, 150px); }
.cage-copy .display-title span { color: var(--cool); font-family: var(--display-font); font-size: 1em; font-weight: 900; letter-spacing: .025em; line-height: .82; transform: none; }
.event-tags { margin-top: 28px; color: rgba(242, 238, 232, .55); font-size: 10px; letter-spacing: .25em; }
.event-tags i { color: var(--orange); font-style: normal; margin: 0 8px; }
.cage-copy > strong { display: block; margin-top: 18px; color: var(--orange); font-size: 12px; letter-spacing: .28em; }

.chapter--nowhere { justify-content: space-between; align-items: flex-start; flex-direction: row; padding-top: 24vh; padding-bottom: 17vh; }
.nowhere-copy { padding-left: clamp(0px, 3vw, 52px); }
.location-panel { align-self: flex-end; width: min(270px, 100%); }
.glass-panel { display: grid; gap: 8px; padding: 23px; border: 1px solid rgba(242, 238, 232, .2); background: rgba(14, 14, 14, .37); backdrop-filter: blur(9px); box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.panel-label { color: var(--orange); font-size: 8px; }
.location-panel strong { font-size: 12px; letter-spacing: .08em; }
.location-panel > span:not(.panel-label) { color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.text-button, .share-button { padding: 0; border: 0; background: transparent; color: var(--orange-bright); cursor: pointer; text-align: left; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; transition: transform 220ms var(--ease-out); }
.text-button { margin-top: 22px; }
.text-button span, .share-button span { margin-left: 8px; font-size: 14px; }

.chapter--pick { align-items: center; padding-top: 14vh; }
.pick-heading { width: min(1060px, 100%); }
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; width: min(1060px, 100%); margin-top: 32px; }
.fighter-choice { position: relative; display: grid; align-content: space-between; height: min(275px, 28vh); min-height: 210px; padding: 23px 24px; border: 1px solid rgba(242, 238, 232, .2); border-radius: 0; background: rgba(7, 7, 7, .2); cursor: pointer; overflow: hidden; text-align: left; transition: border-color 250ms ease, background 250ms ease, transform 350ms var(--ease-out); }
.fighter-choice::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 191, 10, .22), transparent 60%); opacity: 0; transition: opacity 250ms ease; }
.fighter-choice--johnny::before { background: linear-gradient(225deg, rgba(215, 224, 227, .18), transparent 60%); }
.fighter-choice:hover, .fighter-choice:focus-visible, .fighter-choice.is-selected { border-color: var(--orange); background: rgba(35, 20, 13, .4); transform: translateY(-6px); }
.fighter-choice--johnny:hover, .fighter-choice--johnny:focus-visible, .fighter-choice--johnny.is-selected { border-color: var(--cool); background: rgba(27, 30, 31, .4); }
.fighter-choice:hover::before, .fighter-choice:focus-visible::before, .fighter-choice.is-selected::before { opacity: 1; }
.choice-number, .choice-action { position: relative; z-index: 1; color: var(--muted); font-size: 9px; letter-spacing: .19em; text-transform: uppercase; }
.choice-name { position: relative; z-index: 1; font: 900 clamp(48px, 6vw, 92px)/.8 var(--display-font); text-transform: uppercase; }
.choice-action { color: var(--orange-bright); }
.fighter-choice--johnny .choice-action { color: var(--cool); }
.pick-result { display: flex; align-items: center; justify-content: space-between; width: min(1060px, 100%); margin-top: 18px; color: var(--muted); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.pick-result strong { color: var(--ink); font: 800 20px var(--display-font); letter-spacing: .12em; }
.pick-result strong i { color: var(--muted); font-style: normal; margin: 0 8px; }
.share-button { align-self: flex-end; margin-top: 25px; }

.chapter--final { align-items: center; padding-top: 14vh; text-align: center; }
.hero-title--final { margin-top: 20px; font-size: clamp(76px, 13vw, 210px); }
.final-meta { display: grid; justify-items: center; gap: 17px; margin-top: 50px; }
.countdown--final strong { font-size: clamp(24px, 3.2vw, 46px); }
.final-meta p { margin: 0; color: rgba(242, 238, 232, .6); font-size: 10px; line-height: 1.8; letter-spacing: .18em; text-transform: uppercase; }
.final-meta p i { color: var(--orange); font-style: normal; margin: 0 5px; }
.final-actions { display: flex; gap: 10px; margin-top: 32px; }
.final-message { margin-top: 52px; color: var(--orange-bright); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; }
.site-footer { position: fixed; z-index: 30; right: clamp(22px, 4vw, 68px); bottom: 24px; left: clamp(22px, 4vw, 68px); display: flex; justify-content: space-between; color: rgba(242, 238, 232, .42); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; pointer-events: none; }

@media (max-width: 800px) {
  :root { --header-height: 69px; }
  .site-header { padding: 0 18px; }
  .desktop-nav { display: none; }
  .brand { min-width: auto; }
  .header-actions { min-width: auto; }
  .menu-toggle { display: block; }
  .fight-progress { right: 11px; }
  .progress-track { height: 74px; }
  .chapter { padding-right: 24px; padding-left: 24px; }
  .chapter--hero { padding-top: 91px; }
  .hero-title { display: grid; gap: 2px; line-height: .73; }
  .hero-title em { margin: 4px 0; font-size: 17px; }
  .hero-tagline { max-width: 270px; line-height: 1.5; }
  .hero-tagline span { display: block; }
  .hero-bottom { grid-template-columns: 1fr; align-items: start; gap: 25px; margin-top: 60px; }
  .countdown { justify-content: flex-start; gap: 7px; }
  .countdown > div { min-width: 36px; }
  .countdown strong { font-size: 26px; }
  .hero-actions { justify-content: flex-start; }
  .button { min-height: 44px; padding: 0 16px; font-size: 9px; }
  .scroll-cue { bottom: 20px; font-size: 8px; }
  .talk-copy .display-title, .display-title { font-size: clamp(68px, 21vw, 128px); }
  .ghost-word { right: -28vw; bottom: 18vh; font-size: 42vw; }
  .chapter--profile, .chapter--johnny { align-items: flex-start; padding-left: 24px; padding-right: 52px; text-align: left; }
  .chapter--johnny .profile-copy { align-items: flex-start; }
  .fighter-name { font-size: clamp(82px, 24vw, 155px); }
  .chapter--sedo .fighter-name { transform: scaleX(.9); }
  .profile-text { margin-top: 23px; }
  .attribute-list { margin-top: 29px; }
  .profile-index { right: 17px; bottom: 21%; }
  .chapter--impact { padding-left: 24px; }
  .impact-copy { width: 100%; }
  .chapter-topline { display: grid; gap: 12px; }
  .chapter-topline span:last-child { color: var(--orange); }
  .matchup-grid { gap: 15px; }
  .matchup-side { font-size: clamp(23px, 7vw, 43px); }
  .matchup-side .eyebrow { font-size: 9px; }
  .versus { font-size: 53px; }
  .octagon-lines { width: 92vw; }
  .cage-copy .display-title { font-size: clamp(59px, 16vw, 100px); }
  .chapter--nowhere { flex-direction: column; justify-content: center; gap: 44px; padding-top: 17vh; padding-bottom: 13vh; }
  .location-panel { align-self: flex-start; width: min(300px, 100%); }
  .pick-heading { margin-top: 8px; }
  .pick-grid { gap: 8px; margin-top: 24px; }
  .fighter-choice { min-height: 178px; height: 26vh; padding: 16px; }
  .choice-name { font-size: clamp(43px, 12vw, 67px); }
  .choice-action { font-size: 8px; }
  .pick-result { margin-top: 13px; }
  .share-button { margin-top: 20px; }
  .chapter--final { padding-top: 13vh; }
  .hero-title--final { font-size: clamp(68px, 16vw, 120px); }
  .final-meta { margin-top: 43px; }
  .final-actions { flex-wrap: wrap; justify-content: center; }
  .final-message { margin-top: 40px; }
  .site-footer { right: 18px; bottom: 16px; left: 18px; font-size: 8px; }
  .site-footer span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .fight-video { display: none; }
  .lightning { display: none; }
}