@font-face{font-family:Barlow;src:url('/assets/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Plex;src:url('/assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url('/assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
:root{color-scheme:dark;--steel:#132934;--navy:#081b27;--slate:#233e49;--ash:#ecede5;--muted:#bdcbd0;--cyan:#7ad6e8;--amber:#ffb66c;--content:1280px;--gutter:clamp(22px,5vw,88px);--header-height:88px}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 20px)}
body{margin:0;padding-top:var(--header-height);background:var(--navy);color:var(--ash);font-family:Plex,'Segoe UI',sans-serif;font-size:17px;line-height:1.65}
a{color:inherit;text-underline-offset:5px}
button{font:inherit}
a,button,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible,video:focus-visible{outline:3px solid var(--cyan);outline-offset:5px}
main:focus{outline:none}
img{display:block;max-width:100%;height:auto}
figure,p,h1,h2,h3{margin:0}
h1,h2,h3,.brand,.site-footer b{font-family:Barlow,'Arial Narrow',sans-serif;font-weight:700;line-height:1.02}
h2{font-size:clamp(40px,4.8vw,72px);max-width:18ch;text-wrap:balance}
h3{font-size:clamp(29px,2.9vw,42px);max-width:22ch}
p{max-width:66ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:20px;top:-90px;z-index:40;padding:12px 20px;background:var(--ash);color:var(--navy)}
.skip-link:focus{top:16px}
.site-header{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:14px max(var(--gutter),calc((100vw - 1480px)/2));height:var(--header-height);background:#081b27eb;border-bottom:1px solid #7ad6e82e;box-shadow:0 8px 36px #0003;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.site-header::after{content:'';position:absolute;bottom:-1px;left:var(--gutter);width:95px;height:2px;background:var(--cyan);box-shadow:0 0 18px #7ad6e880;pointer-events:none}
.brand{display:flex;align-items:center;gap:11px;flex:none;font-size:29px;letter-spacing:.035em;text-decoration:none}
.brand img{width:34px;height:34px}
.site-header nav{display:flex;gap:clamp(18px,3vw,40px);font-size:14px}
.site-header nav a{position:relative;padding:10px 0;text-decoration:none;white-space:nowrap;transition:color .2s ease}
.site-header nav a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.site-header nav a:hover::after,.site-header nav a:focus-visible::after{transform:scaleX(1)}
.site-header nav a:hover,.text-link:hover,.site-footer a:hover{color:var(--cyan)}
.header-tools{display:flex;align-items:center;gap:14px;flex:none}
.languages{display:flex;gap:2px}
.languages button,.motion-toggle{min-width:44px;min-height:44px;border:1px solid transparent;background:transparent;color:var(--muted);padding:7px;cursor:pointer;font-size:13px;font-weight:600;transition:background .2s ease,border-color .2s ease}
.languages button[aria-pressed=true]{border-color:#7ad6e869;background:#7ad6e80d;color:var(--ash)}
.motion-toggle{display:grid;place-items:center;border-color:#50697866}
.motion-toggle:hover{color:var(--cyan);border-color:var(--cyan)}
.motion-toggle:disabled{cursor:default;color:var(--muted)}
.motion-play-icon{display:none}
.motion-toggle[aria-pressed=true] .motion-play-icon{display:block}
.motion-toggle[aria-pressed=true] .motion-pause-icon{display:none}
.hero{position:relative;isolation:isolate;min-height:clamp(730px,56vw,930px);display:flex;align-items:center;overflow:hidden;background:var(--steel)}
.hero-art{position:absolute;inset:0;z-index:-3}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:58% center;transform-origin:70% 55%}
.hero::after{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#081b27e8 0%,#081b27c9 22%,#081b2773 42%,#081b2700 70%),linear-gradient(0deg,#081b27 0%,#081b2710 28%,transparent 80%)}
.hero-copy{width:100%;max-width:calc(var(--content) + var(--gutter)*2);margin:auto;padding:55px var(--gutter) 125px}
.platform{font-size:14px;font-weight:600;color:var(--cyan)}
h1{font-size:clamp(90px,11.6vw,185px);letter-spacing:-.025em;line-height:.87;margin:23px 0 27px;text-shadow:0 3px 0 #0c2734,0 0 45px #7ad6e822}
.hero-line{font-family:Barlow,'Arial Narrow',sans-serif;font-size:clamp(32px,3.7vw,53px);line-height:1.08;max-width:19ch;text-wrap:balance}
.hero-description{max-width:36ch;margin-top:24px;font-size:17px;color:#e1e6df}
.steam-status{display:flex;align-items:center;gap:11px;margin-top:27px;color:var(--amber);font-size:16px}
.signal{display:block;flex:none;width:7px;height:7px;background:var(--amber);box-shadow:0 0 16px #ffb66c99}
.hero-actions{display:flex;align-items:center;gap:27px;flex-wrap:wrap;margin-top:27px}
.button{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--amber);border:1px solid #ffd3a1;color:var(--navy);padding:14px 25px;min-height:50px;font-size:15px;font-weight:600;text-decoration:none;box-shadow:5px 5px 0 #081b2780;transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
.button::after{content:'';position:absolute;inset:-50% auto -50% -80%;width:45%;background:#fff6;transform:skewX(-20deg);transition:left .5s ease;z-index:-1;pointer-events:none}
.button:hover,.button:focus-visible{background:#ffd19e;box-shadow:5px 5px 0 #081b2780,0 0 40px #ffb66c33;transform:translateY(-2px)}
.button:hover::after,.button:focus-visible::after{left:140%}
.text-link{font-size:15px;padding:13px 0}
.hero-bottom{position:absolute;inset:auto var(--gutter) 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}
.explore-link{display:inline-flex;align-items:center;gap:18px;text-decoration:none;min-height:44px}
.explore-link svg{color:var(--cyan)}
.art-caption{color:#ccd6d5;font-size:11px}
.hero-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-light{position:absolute;inset:0;background:radial-gradient(ellipse at 63% 54%,#7ad6e82b,transparent 28%),radial-gradient(ellipse at 91% 73%,#ffb66c33,transparent 23%);opacity:.75}
.hero-sparks{position:absolute;inset:0}
.hero-sparks span{position:absolute;left:73%;top:66%;width:3px;height:3px;background:var(--amber);box-shadow:0 0 10px #ffb66c90;opacity:.3}
.hero-sparks span:nth-child(2){left:89%;top:78%;width:2px;height:2px}
.hero-sparks span:nth-child(3){left:65%;top:81%;width:2px;height:2px}
.hero-sparks span:nth-child(4){left:83%;top:58%}
.hero-sparks span:nth-child(5){left:59%;top:61%;background:var(--cyan);box-shadow:0 0 12px #7ad6e899}
.hero-sparks span:nth-child(6){left:94%;top:51%;width:2px;height:2px}
.section{max-width:calc(var(--content) + var(--gutter)*2);margin:0 auto;padding:100px var(--gutter)}
.campaign-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:75px;align-items:end;margin-bottom:46px}
.campaign-heading>p,.section-intro>p{font-size:16px;color:var(--muted);max-width:48ch}
.campaign-scene{display:grid;grid-template-columns:1.55fr 1fr;align-items:center;position:relative}
.campaign-art{position:relative;margin-right:-75px;align-self:stretch;min-height:610px}
.campaign-art picture{display:block;height:100%}
.campaign-art img{width:100%;height:100%;min-height:610px;object-fit:cover;object-position:41% center}
.campaign-art::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#081b27a6,transparent 30%)}
.campaign-art figcaption{position:absolute;bottom:20px;left:25px;z-index:1;font-size:11px;color:#dae2df;max-width:35ch}
.campaign-panel{position:relative;padding:44px 40px 45px;background:linear-gradient(135deg,#50463d,#2a3335 75%);border:1px solid #b39a6c6b;box-shadow:18px 20px 0 #030f173d;clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%)}
.campaign-panel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber)}
.campaign-mode{color:var(--amber);font-size:13px;font-weight:600;margin-bottom:20px}
.campaign-panel>p:not(.campaign-mode),.movement-copy p{color:#d3d7cf;font-size:15px;margin-top:18px}
.movement-copy{padding-top:28px;margin-top:28px;border-top:1px solid #9a9e8052}
.movement-copy h3{font-size:30px}
.world{position:relative;isolation:isolate;min-height:850px;display:flex;align-items:flex-end;overflow:hidden;margin:40px 0 0}
.world-art{position:absolute;inset:0;z-index:-3}
.world-art picture{display:block;height:100%}
.world-art img{height:100%;width:100%;object-fit:cover;object-position:65% 38%}
.world-art figcaption{position:absolute;right:var(--gutter);bottom:26px;font-size:11px;z-index:4;color:var(--muted);max-width:33ch;text-align:right}
.world::after{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(0deg,#081b27 0%,#081b27eb 8%,#081b2782 38%,#081b2700 75%),linear-gradient(90deg,#081b275c,transparent 80%)}
.world-copy{max-width:calc(var(--content) + var(--gutter)*2);width:100%;margin:0 auto;padding:390px var(--gutter) 90px}
.world h2{font-size:clamp(48px,6vw,86px);max-width:15ch}
.world-copy p{margin-top:30px;color:#dde2dc;font-size:17px;max-width:61ch}
.fracture-light{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 70% 28%,#7ad6e833,transparent 35%);opacity:.7}
.section-intro{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:65px;margin-bottom:42px}
.trailer{padding-top:100px;padding-bottom:110px}
.trailer-console{position:relative;padding:14px 18px 0;background:linear-gradient(130deg,#3b4c51,#1a303a 38%,#3a403b);border:1px solid #687f7e80;box-shadow:0 30px 80px #0005,inset 0 0 0 5px #081b2740;border-radius:4px}
.console-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:6px 7px 17px;color:#d6ddd5;font-size:12px}
.console-lights{display:flex;gap:8px}
.console-lights i{width:5px;height:5px;background:#7ad6e85e}
.console-lights i:first-child{background:var(--cyan);box-shadow:0 0 12px #7ad6e880}
.trailer video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;border:1px solid #081b27;box-shadow:0 0 0 4px #081b2770}
.console-base{display:flex;justify-content:space-between;padding:17px 8px}
.console-base span{width:65px;height:3px;background:repeating-linear-gradient(90deg,#081b27 0 3px,transparent 3px 6px)}
.transcript{margin:22px 0 0 20px;font-size:14px;color:var(--muted);max-width:80ch}
.transcript summary{cursor:pointer;padding:8px 0;color:var(--ash);width:fit-content}
.transcript p{margin:10px 0}
.arenas{padding-top:25px;padding-bottom:110px}
.arena-explorer{display:grid;grid-template-columns:2.15fr 1fr;align-items:stretch;gap:0;background:#142e3c;border:1px solid #52758459}
.arena-feature{position:relative;overflow:hidden;min-width:0}
.arena-feature>img{width:100%;height:100%;min-height:430px;object-fit:cover;aspect-ratio:1.65}
.arena-feature::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#081b27e6,transparent 57%)}
.arena-feature figcaption{position:absolute;left:30px;bottom:25px;right:20px;z-index:1;display:flex;flex-direction:column;gap:13px;font-size:11px;color:#d2dfdc}
.arena-name{font-family:Barlow,'Arial Narrow',sans-serif;font-size:clamp(35px,4vw,56px);line-height:1;color:var(--ash)}
.arena-brief{padding:38px 30px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#1e3c4a,#102632)}
.arena-brief p{font-size:15px;color:var(--muted);margin-top:23px}
.arena-brief .arena-instruction{font-size:13px;margin-top:30px;color:var(--cyan)}
.arena-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:18px}
.arena-options button{position:relative;min-width:0;padding:0;background:var(--steel);color:var(--ash);border:1px solid #54748266;cursor:pointer;text-align:left;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.arena-options img{width:100%;height:115px;object-fit:cover;opacity:.65;transition:opacity .2s ease,transform .3s ease}
.arena-options span{position:absolute;inset:auto 0 0;padding:18px 10px 10px;background:linear-gradient(transparent,#081b27f2);font-family:Barlow,'Arial Narrow',sans-serif;font-size:20px;line-height:1.05;text-shadow:0 1px 4px #000}
.arena-options button[aria-pressed=true]{border-color:var(--cyan);box-shadow:inset 0 -3px var(--cyan),0 0 20px #7ad6e814}
.arena-options button[aria-pressed=true] img,.arena-options button:hover img{opacity:1}
.arena-options button:hover{border-color:#7ad6e899}
.arena-options button:hover img{transform:scale(1.045)}
.arena-options button:disabled{cursor:default}
.coming-soon{position:relative;isolation:isolate;min-height:620px;display:flex;align-items:center;overflow:hidden;border-top:1px solid #7ad6e82e}
.closing-art{position:absolute;inset:0;z-index:-3}
.closing-art img{width:100%;height:100%;object-fit:cover;object-position:center 44%}
.coming-soon::after{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#081b27f0,#081b27bf 45%,#081b271a),linear-gradient(0deg,#081b27,transparent 55%)}
.closing-copy{width:100%;max-width:calc(var(--content) + var(--gutter)*2);margin:0 auto;padding:100px var(--gutter)}
.coming-soon h2{margin:22px 0 28px;max-width:15ch;font-size:clamp(45px,5vw,76px)}
.closing-copy>p:not(.platform){color:#d4ded9;max-width:45ch;font-size:16px}
.release-status{display:inline-block;margin-top:32px;color:var(--amber);font-size:22px}
.closing-copy .closing-caption{font-size:11px;margin-top:50px;color:var(--muted)}
.site-footer{position:relative;display:grid;grid-template-columns:1fr auto;align-items:start;gap:24px 40px;max-width:calc(var(--content) + var(--gutter)*2);padding:55px var(--gutter) 35px;margin:auto;border-top:1px solid #52758455}
.site-footer::before{content:'';position:absolute;top:-1px;left:var(--gutter);width:64px;height:2px;background:var(--amber)}
.site-footer b{font-size:37px;letter-spacing:.03em}
.site-footer p{font-size:13px;margin-top:12px;color:var(--muted)}
.site-footer a{font-size:13px}
.footer-legal{grid-column:1;display:flex;flex-wrap:wrap;gap:10px 26px;color:var(--muted)}
.footer-legal a{padding:5px 0}
.footer-top{grid-column:2;grid-row:1;display:inline-flex;align-items:center;gap:12px;padding:10px 0;white-space:nowrap}
.footer-top svg{transition:transform .2s ease}
.footer-top:hover svg{transform:translateY(-3px)}
.site-footer .footer-owner{grid-column:1 / -1;margin:0;font-size:11px;color:#a7bbc2}
html[data-motion] .hero-art img{animation:panorama-drift 24s ease-in-out infinite alternate}
html[data-motion] .hero-light{animation:energy-drift 12s ease-in-out infinite alternate}
html[data-motion] .fracture-light{animation:fracture-breathe 10s ease-in-out infinite alternate}
html[data-motion] .hero-sparks span{animation:ember-drift 9s linear infinite}
html[data-motion] .hero-sparks span:nth-child(2){animation-delay:-3s;animation-duration:12s}
html[data-motion] .hero-sparks span:nth-child(3){animation-delay:-7s}
html[data-motion] .hero-sparks span:nth-child(4){animation-delay:-5s;animation-duration:13s}
html[data-motion] .hero-sparks span:nth-child(5){animation-delay:-2s}
html[data-motion] .hero-sparks span:nth-child(6){animation-delay:-8s}
@keyframes panorama-drift{from{transform:scale(1.015) translateX(0)}to{transform:scale(1.055) translateX(-.5%)}}
@keyframes energy-drift{from{opacity:.55;transform:translate3d(0,0,0)}to{opacity:.95;transform:translate3d(-2%,1%,0)}}
@keyframes fracture-breathe{from{opacity:.5}to{opacity:.85}}
@keyframes ember-drift{0%,100%{opacity:0;transform:translate3d(0,16px,0)}20%{opacity:.55}75%{opacity:.25}90%{opacity:0;transform:translate3d(-30px,-75px,0)}}
html[data-motion=paused]{scroll-behavior:auto}
html[data-motion=paused] *,html[data-motion=paused] *::before,html[data-motion=paused] *::after{animation-play-state:paused!important;transition:none!important}
@media(max-width:1000px){.site-header{gap:15px}.site-header nav{gap:20px}.header-tools{gap:7px}.hero{min-height:780px}.hero-art img{object-position:63% center}.hero-copy{padding-bottom:110px}.hero h1{font-size:clamp(100px,13vw,150px)}.campaign-heading{gap:35px}.campaign-scene{grid-template-columns:1.2fr 1fr}.campaign-art{margin-right:-35px}.campaign-panel{padding:32px 28px}.campaign-art,.campaign-art img{min-height:650px}.world{min-height:800px}.section-intro{gap:35px}.arena-explorer{grid-template-columns:1.75fr 1fr}.arena-feature>img{min-height:450px}.arena-brief{padding:30px 23px}.arena-options{grid-template-columns:repeat(3,minmax(0,1fr))}.arena-options img{height:125px}}
@media(max-width:760px){:root{--header-height:128px}.site-header{display:grid;grid-template-columns:1fr auto;padding:11px var(--gutter);gap:8px 10px}.brand{font-size:25px;gap:8px}.brand img{width:29px;height:29px}.header-tools{gap:7px}.site-header nav{grid-column:1 / -1;grid-row:2;justify-content:space-between;gap:12px;font-size:14px}.site-header nav a{min-height:44px;display:flex;align-items:center}.hero{min-height:810px;align-items:flex-start}.hero-copy{padding-top:45px;padding-bottom:360px}.hero h1{font-size:clamp(87px,17vw,130px);margin-top:20px}.hero-art img{object-position:70% bottom}.hero::after{background:linear-gradient(180deg,#081b27f5,#081b27de 30%,#081b2733 65%,#081b2700 79%,#081b27)}.hero-line{font-size:38px;max-width:21ch}.hero-description{max-width:38ch;font-size:16px}.hero-bottom{bottom:17px}.hero-bottom .art-caption{max-width:18ch;text-align:right}.hero-actions{margin-top:23px}.section{padding-top:70px;padding-bottom:75px}.campaign-heading{grid-template-columns:1fr;gap:22px;margin-bottom:32px}.campaign-scene{grid-template-columns:1fr}.campaign-art{margin:0;min-height:0}.campaign-art img{min-height:0;height:auto;aspect-ratio:1.12;object-position:center}.campaign-panel{margin:-60px 17px 0;padding:32px 28px 35px}.campaign-art figcaption{top:15px;bottom:auto;left:17px;padding:4px 7px;background:#081b27b3}.world{min-height:820px;margin-top:0}.world-art img{object-position:67% top}.world-copy{padding-top:360px;padding-bottom:80px}.world h2{font-size:clamp(48px,8vw,67px);max-width:16ch}.world-copy p{font-size:16px;margin-top:23px}.world-art figcaption{bottom:20px;font-size:10px}.section-intro{grid-template-columns:1fr;gap:22px;margin-bottom:30px}.trailer-console{padding:8px 8px 0}.console-heading{font-size:10px;padding:7px 4px 13px}.console-base{padding:13px 4px}.transcript{margin-left:0}.arenas{padding-top:20px}.arena-explorer{grid-template-columns:1fr}.arena-feature>img{min-height:0;aspect-ratio:1.4;height:auto}.arena-feature figcaption{left:22px;bottom:20px;gap:10px}.arena-brief{padding:28px}.arena-brief h3{font-size:32px}.arena-brief p{margin-top:16px}.arena-brief .arena-instruction{margin-top:20px}.arena-options{gap:10px}.arena-options img{height:115px}.arena-options span{font-size:18px;padding:18px 8px 9px}.coming-soon{min-height:600px;align-items:flex-end}.closing-copy{padding-top:160px;padding-bottom:70px}.closing-art img{object-position:60% center}.coming-soon::after{background:linear-gradient(0deg,#081b27,#081b27b3 70%,#081b272e)}.coming-soon h2{font-size:52px}.site-footer{padding-top:38px;grid-template-columns:1fr;gap:23px}.footer-top{grid-column:1;grid-row:auto}.footer-legal{gap:9px 22px}}
@media(max-width:380px){.brand{font-size:22px;gap:6px}.brand img{width:25px;height:25px}.header-tools{gap:4px}.hero h1{font-size:82px}.hero-line{font-size:34px}.hero{min-height:850px}.hero-actions{gap:17px}.hero-description{max-width:32ch}.campaign-panel{margin-left:8px;margin-right:8px;padding:28px 23px}.arena-options{grid-template-columns:repeat(2,minmax(0,1fr))}.arena-options img{height:115px}.coming-soon h2{font-size:46px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero-art img{transform:none}.hero-sparks{display:none}.button:hover,.button:focus-visible,.footer-top:hover svg,.arena-options button:hover img{transform:none}}
