:root{color-scheme:dark;--red:#ef3b3d;--yellow:#f0bd4f;--blue:#2f91ef;--paper:#d8dee7}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;background:#04070b}
body{margin:0;background:#04070b;color:var(--paper);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
.stage{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;min-height:100dvh;display:grid;place-items:center;padding:clamp(20px,4vh,42px) clamp(18px,3vw,46px);background:radial-gradient(ellipse 44% 46% at 26% 35%,rgba(100,16,21,.13),transparent 84%),radial-gradient(ellipse 46% 44% at 74% 35%,rgba(108,70,18,.12),transparent 86%),radial-gradient(ellipse 46% 44% at 50% 76%,rgba(8,51,102,.18),transparent 90%),#04070b}
.stage>*{position:absolute;pointer-events:none}
.battlefield{inset:-7%;z-index:-6;background:url('assets/atmosphere.webp') center 54%/cover no-repeat;opacity:.17;filter:contrast(1.55) saturate(.55) blur(28px) brightness(.72);transform:scale(1.12);animation:slow-pan 20s ease-in-out infinite alternate}
.ambient{z-index:-5;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;opacity:.42}.ambient.red{left:-24vw;top:2%;width:58vw;height:76vh;background:radial-gradient(circle at center,rgba(208,37,43,.35),rgba(85,12,16,.05) 42%,transparent 70%);animation:breathe-red 7s ease-in-out infinite}.ambient.yellow{right:-24vw;top:1%;width:60vw;height:78vh;background:radial-gradient(circle at center,rgba(205,142,35,.24),rgba(80,46,10,.04) 42%,transparent 70%);animation:breathe-yellow 8.5s ease-in-out infinite}.ambient.blue{left:18vw;bottom:-48vh;width:64vw;height:64vh;background:radial-gradient(circle at center,rgba(41,118,222,.24),rgba(12,48,122,.04) 44%,transparent 72%);animation:breathe-blue 6.7s ease-in-out infinite}
.tactical-grid{inset:-42px;z-index:-4;opacity:.17;background-image:linear-gradient(rgba(181,197,212,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(181,197,212,.07) 1px,transparent 1px);background-size:82px 82px;mask-image:radial-gradient(ellipse 58% 62% at 50% 49%,#000,transparent 100%)}
.embers{inset:0;z-index:-2;width:100%;height:100%}
.vignette{inset:0;z-index:-1;background:radial-gradient(ellipse 76% 88% at 50% 48%,transparent 34%,rgba(1,2,4,.52) 79%,rgba(1,2,4,.92) 100%)}
.grain{inset:0;z-index:-1;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 144 144' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");mix-blend-mode:screen}
/* Reduce the complete foreground composition by 30%, without zooming out the full-screen background.
   The independent CSS scale preserves the reveal and floating animations. */
.hero{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:min(100%,1120px);pointer-events:auto;scale:.7;animation:reveal 1.1s cubic-bezier(.21,.7,.2,1) both}
.logo-wrap{position:relative;width:min(56vw,62svh,620px);max-width:100%;margin:0 auto 4px;pointer-events:none;animation:hover-badge 8s ease-in-out infinite}
.logo-wrap,.title-wrap,.release{position:relative}
.logo-glow{position:absolute;inset:9% 8% 11%;z-index:0;background:conic-gradient(from 0deg at 50% 50%,rgba(246,172,59,.24),rgba(38,129,233,.25),rgba(227,55,59,.23),rgba(246,172,59,.24));filter:blur(56px);border-radius:50%;transform:scale(1.13);animation:backlight-pulse 8.8s ease-in-out infinite alternate}
.logo-flames{position:absolute;inset:0;z-index:0;opacity:.9;mix-blend-mode:screen;filter:blur(6px)}
.logo-flames.red{background:radial-gradient(circle at 24% 47%,rgba(255,86,61,.48),transparent 20%),radial-gradient(circle at 18% 62%,rgba(255,114,68,.37),transparent 18%),radial-gradient(circle at 26% 74%,rgba(255,196,96,.14),transparent 18%);transform:translate(-1.4%,.6%) scale(1.02);animation:flame-red 4.8s ease-in-out infinite alternate}
.logo-flames.yellow{background:radial-gradient(circle at 76% 45%,rgba(255,202,85,.45),transparent 20%),radial-gradient(circle at 82% 63%,rgba(255,159,62,.32),transparent 18%),radial-gradient(circle at 74% 75%,rgba(255,231,163,.14),transparent 18%);transform:translate(1.3%,.2%) scale(1.02);animation:flame-yellow 5.1s ease-in-out infinite alternate}
.logo-flames.blue{background:radial-gradient(circle at 50% 78%,rgba(72,162,255,.42),transparent 19%),radial-gradient(circle at 51% 89%,rgba(126,213,255,.18),transparent 15%),radial-gradient(circle at 41% 71%,rgba(58,136,255,.20),transparent 17%),radial-gradient(circle at 59% 71%,rgba(58,136,255,.20),transparent 17%);transform:translate(0,.8%) scale(1.01);animation:flame-blue 4.2s ease-in-out infinite alternate}
.emblem{display:block;position:relative;z-index:1;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 22px 30px rgba(0,0,0,.95)) drop-shadow(0 4px 24px rgba(0,0,0,.4));user-select:none;-webkit-user-drag:none}
.title-wrap{width:min(77vw,930px);max-width:100%;margin-top:2px;pointer-events:none}
.wordmark{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.95));user-select:none;-webkit-user-drag:none}
.release{display:flex;align-items:center;justify-content:center;gap:clamp(15px,3vw,34px);width:min(57vw,605px);margin-top:clamp(31px,4.8vh,54px);pointer-events:none}
.release .line{display:block;height:1px;min-width:12px;flex:1;background:linear-gradient(90deg,transparent,rgba(203,218,235,.34))}.release .line:last-child{transform:scaleX(-1)}
.release .text{font-size:clamp(12px,1.25vw,16px);font-weight:700;letter-spacing:.5em;line-height:1.4;white-space:nowrap;color:#d5dbe4;text-shadow:0 0 18px rgba(255,255,255,.13);padding-left:.5em;animation:text-breathe 4.6s ease-in-out infinite}
.faction-stripe{left:50%;bottom:0;z-index:2;transform:translateX(-50%);width:min(235px,43vw);height:2px;opacity:.7;background:linear-gradient(90deg,transparent 0%,#c62d33 26%,#3087dd 50%,#d9b04a 74%,transparent 100%);box-shadow:0 0 24px rgba(53,117,207,.18)}
.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}
@keyframes reveal{0%{opacity:0;transform:translateY(18px) scale(.98);filter:brightness(.75)}100%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}}
@keyframes hover-badge{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes backlight-pulse{from{opacity:.56;transform:scale(1.03)}to{opacity:.92;transform:scale(1.15)}}
@keyframes flame-red{0%{opacity:.55;filter:blur(6px)}50%{opacity:.8;filter:blur(8px)}100%{opacity:.62;filter:blur(7px);transform:translate(-1.8%,-.3%) scale(1.04)}}
@keyframes flame-yellow{0%{opacity:.5;filter:blur(6px)}50%{opacity:.74;filter:blur(8px)}100%{opacity:.59;filter:blur(7px);transform:translate(1.8%,-.4%) scale(1.04)}}
@keyframes flame-blue{0%{opacity:.46;filter:blur(5px)}50%{opacity:.68;filter:blur(7px)}100%{opacity:.55;filter:blur(6px);transform:translate(0,1.3%) scale(1.03)}}
@keyframes text-breathe{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes slow-pan{from{transform:scale(1.10) translate3d(-8px,0,0)}to{transform:scale(1.13) translate3d(8px,-6px,0)}}
@keyframes breathe-red{0%,100%{opacity:.36;transform:scale(1)}50%{opacity:.52;transform:scale(1.04)}}
@keyframes breathe-yellow{0%,100%{opacity:.31;transform:scale(1)}50%{opacity:.47;transform:scale(1.03)}}
@keyframes breathe-blue{0%,100%{opacity:.22;transform:scale(1)}50%{opacity:.40;transform:scale(1.06)}}
@media (max-width:700px){.stage{padding:24px 20px}.logo-wrap{width:min(87vw,44svh,410px)}.title-wrap{width:min(88vw,580px)}.release{width:min(77vw,425px);margin-top:34px;gap:14px}.release .text{font-size:clamp(10px,2.75vw,12px);letter-spacing:.32em;padding-left:.32em}.tactical-grid{background-size:53px 53px;opacity:.16}.ambient{filter:blur(55px)}.battlefield{opacity:.14;filter:contrast(1.4) saturate(.6) blur(24px) brightness(.72)}.logo-glow{filter:blur(40px)}}
@media (max-width:370px){.logo-wrap{width:min(87vw,41svh,370px)}.title-wrap{width:87vw}.release{margin-top:27px}}
@media (max-height:560px) and (min-width:701px){.stage{padding:8px 20px}.logo-wrap{width:min(39vw,49svh)}.title-wrap{width:min(55vw,700px)}.release{margin-top:17px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}