*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--speed: .42s;--ease: cubic-bezier(.4, 0, .2, 1);--font-head: "Barlow Condensed", sans-serif;--font-body: "Barlow", sans-serif;--bg: #080808;--text: #ffffff;--muted: rgba(255, 255, 255, .28);--header-h: 44px;--footer-h: 44px}html,body{height:100%;overflow:hidden;background:var(--bg)}body{color:var(--text);font-family:var(--font-body);cursor:crosshair}@keyframes intro-screen{0%{opacity:0}to{opacity:1}}@keyframes intro-header{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes intro-footer{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes intro-panel{0%{opacity:0;transform:translateY(20px) scale(.97);filter:brightness(.06)}to{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}}@keyframes intro-label{0%{opacity:0;letter-spacing:.08em}to{opacity:1;letter-spacing:.45em}}@keyframes intro-shine{0%{transform:translate(-120%);opacity:0}6%{opacity:1}94%{opacity:.55}to{transform:translate(500%);opacity:0}}@keyframes intro-pulse{0%{opacity:.35}45%{opacity:1}to{opacity:.6}}.screen{position:relative;width:100vw;height:100vh;display:flex;flex-direction:column;overflow:hidden;animation:intro-screen .28s ease-out both}.scanlines{position:fixed;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.045) 3px,rgba(0,0,0,.045) 4px);pointer-events:none;z-index:600}.header{position:relative;z-index:100;height:var(--header-h);animation:intro-header .36s ease-out 40ms both;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 2rem;border-bottom:1px solid rgba(255,255,255,.07);font-family:var(--font-head);font-size:.6rem;font-weight:300;letter-spacing:.4em;text-transform:uppercase;color:#ffffffa6}.header__center{text-align:center}.header__right{text-align:right}.grid{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;transition:grid-template-columns var(--speed) var(--ease);overflow:hidden}.grid[data-active=baseliner]{grid-template-columns:5fr .65fr .65fr .65fr}.grid[data-active=aggressor]{grid-template-columns:.65fr 5fr .65fr .65fr}.grid[data-active=defender]{grid-template-columns:.65fr .65fr 5fr .65fr}.grid[data-active=playmaker]{grid-template-columns:.65fr .65fr .65fr 5fr}.intro__sweep{position:absolute;top:0;bottom:0;left:0;width:18%;background:linear-gradient(105deg,transparent 0%,transparent 30%,rgba(255,255,255,.025) 44%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.025) 56%,transparent 70%,transparent 100%);pointer-events:none;z-index:50;animation:intro-shine .9s cubic-bezier(.4,0,.6,1) 1.35s 1 both}.faction{position:relative;height:100%;background:var(--primary);overflow:hidden;border-right:1px solid rgba(255,255,255,.04);transition:opacity var(--speed) var(--ease),background var(--speed) var(--ease)}.faction:last-child{border-right:none}.faction:nth-child(2){animation:intro-panel .52s cubic-bezier(.22,1,.36,1) .1s both}.faction:nth-child(3){animation:intro-panel .52s cubic-bezier(.22,1,.36,1) .3s both}.faction:nth-child(4){animation:intro-panel .52s cubic-bezier(.22,1,.36,1) .5s both}.faction:nth-child(5){animation:intro-panel .52s cubic-bezier(.22,1,.36,1) .7s both}.faction.is-inactive{opacity:.32}.faction__image{position:absolute;top:0;right:0;bottom:0;left:0;background-size:var(--img-size, cover);background-position:var(--img-pos, center center);background-repeat:no-repeat;opacity:0;transform:scale(1);will-change:opacity,transform,filter;filter:saturate(.75) brightness(.92);transition:opacity var(--speed) var(--ease),transform var(--speed) var(--ease),filter var(--speed) var(--ease)}.faction.is-active .faction__image{opacity:1;transform:scale(1.05);filter:saturate(.88) brightness(1.02)}.faction__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,.52) 100%),linear-gradient(to right,var(--primary) 0%,rgba(0,0,0,.75) 25%,rgba(0,0,0,.28) 55%,rgba(0,0,0,.05) 100%),linear-gradient(to top,var(--primary) 0%,rgba(0,0,0,.65) 30%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.04) 100%);z-index:1;pointer-events:none}.faction__glow{position:absolute;top:-30%;right:-30%;bottom:-30%;left:-30%;background:radial-gradient(ellipse at 50% 85%,var(--accent) 0%,transparent 55%);opacity:0;pointer-events:none;will-change:transform,opacity;z-index:2;transition:opacity var(--speed) var(--ease),transform 80ms linear}.faction.is-active .faction__glow{opacity:.2}.faction__hint{position:absolute;bottom:0;left:0;right:0;height:35%;background:linear-gradient(to top,var(--accent),transparent);opacity:.04;pointer-events:none;z-index:2;transition:opacity var(--speed) var(--ease)}.faction.is-active .faction__hint{opacity:0}.faction__line{position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform var(--speed) var(--ease);z-index:10}.faction.is-active .faction__line{transform:scaleX(1)}.faction__bracket{position:absolute;top:12px;right:12px;width:18px;height:18px;border-top:1px solid var(--accent);border-right:1px solid var(--accent);opacity:0;transition:opacity var(--speed) var(--ease);z-index:10}.faction.is-active .faction__bracket{opacity:.5}.faction__label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;opacity:1;transition:opacity .2s var(--ease);pointer-events:none;z-index:2}.faction.is-active .faction__label{opacity:0}.label__number{font-family:var(--font-head);font-size:.55rem;font-weight:300;letter-spacing:.2em;color:var(--accent);opacity:.6;writing-mode:vertical-rl;transform:rotate(180deg)}.label__name{font-family:var(--font-head);font-size:.7rem;font-weight:700;letter-spacing:.45em;text-transform:uppercase;color:#ffffff73;writing-mode:vertical-rl;transform:rotate(180deg)}.faction:nth-child(2) .label__name{animation:intro-label .46s ease-out .22s both}.faction:nth-child(3) .label__name{animation:intro-label .46s ease-out .42s both}.faction:nth-child(4) .label__name{animation:intro-label .46s ease-out .62s both}.faction:nth-child(5) .label__name{animation:intro-label .46s ease-out .82s both}.faction:nth-child(2) .label__number{animation:intro-pulse .7s ease-in-out 2.35s 1 both}.faction:nth-child(3) .label__number{animation:intro-pulse .7s ease-in-out 2.5s 1 both}.faction:nth-child(4) .label__number{animation:intro-pulse .7s ease-in-out 2.65s 1 both}.faction:nth-child(5) .label__number{animation:intro-pulse .7s ease-in-out 2.8s 1 both}.label__subtitle{font-family:var(--font-head);font-size:.5rem;font-weight:300;letter-spacing:.25em;color:var(--accent);opacity:.5;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}.faction__content{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;justify-content:flex-end;padding:2.5rem 3rem 3rem;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity var(--speed) var(--ease),transform var(--speed) var(--ease);z-index:3}.faction.is-active .faction__content{opacity:1;transform:translateY(0);pointer-events:all;transition-delay:80ms}.content__meta{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}.content__number{font-family:var(--font-head);font-size:.6rem;font-weight:300;letter-spacing:.4em;color:var(--accent)}.content__divider{color:#fff3;font-weight:300}.content__role{font-family:var(--font-head);font-size:.6rem;font-weight:300;letter-spacing:.3em;text-transform:uppercase;color:#ffffff59}.content__subtitle{font-family:var(--font-head);font-size:.7rem;font-weight:300;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);opacity:.8;margin-bottom:1rem;margin-top:-1rem}.content__name{font-family:var(--font-head);font-weight:900;font-size:clamp(5.5rem,10.5vw,13rem);line-height:.85;text-transform:uppercase;letter-spacing:-.025em;color:#fff;margin-bottom:1.75rem;will-change:transform;transition:transform 80ms linear;text-shadow:0 0 120px rgba(255,255,255,.04),0 2px 40px rgba(0,0,0,.6)}.content__player{display:flex;align-items:center;gap:.6rem;margin-bottom:.85rem}.player__name{font-family:var(--font-head);font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#fff}.player__sep{color:var(--accent);opacity:.5;font-size:.6rem}.player__label{font-family:var(--font-body);font-style:italic;font-weight:300;font-size:.7rem;color:var(--accent);opacity:.75}.content__desc{font-family:var(--font-body);font-weight:300;font-size:clamp(.65rem,.9vw,.82rem);line-height:1.7;color:#ffffff7a;max-width:42ch;margin-bottom:.85rem}.content__achievements{list-style:none;display:flex;flex-direction:column;gap:.3rem;margin-bottom:1.4rem}.content__achievements li{font-family:var(--font-head);font-size:.58rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:#ffffff61;padding-left:.9rem;position:relative}.content__achievements li:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:3px;background:var(--accent);border-radius:50%;opacity:.7}.content__stats{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.75rem}.stat-row{display:grid;grid-template-columns:6rem 1fr 2.8rem;align-items:center;gap:.85rem;opacity:0;transform:translateY(5px);transition:opacity .28s ease var(--delay, 0ms),transform .28s ease var(--delay, 0ms)}.faction.is-active .stat-row{opacity:1;transform:translateY(0)}.stat-row__label{font-family:var(--font-head);font-size:.52rem;font-weight:300;letter-spacing:.32em;text-transform:uppercase;color:#ffffff61}.stat-row__track{position:relative;height:2px;background:#ffffff14;overflow:hidden}.stat-row__fill{position:absolute;inset:0 auto 0 0;width:0%;background:var(--accent);box-shadow:0 0 8px var(--accent),0 0 2px var(--accent);transition:width .72s cubic-bezier(.16,1,.3,1)}.stat-row__value{font-family:var(--font-head);font-size:.55rem;font-weight:400;letter-spacing:.05em;color:var(--accent);text-align:right;min-width:2.5rem}.content__select{display:inline-flex;align-items:center;gap:.85rem;padding:.85rem 2.5rem;background:transparent;border:1px solid rgba(255,255,255,.22);color:#fff;font-family:var(--font-head);font-size:.75rem;font-weight:700;letter-spacing:.35em;text-transform:uppercase;cursor:pointer;align-self:flex-start;transition:background .22s ease,border-color .22s ease,color .22s ease}.content__select:hover{background:var(--accent);border-color:var(--accent);color:var(--primary)}.select__arrow{display:inline-block;transition:transform .22s ease}.content__select:hover .select__arrow{transform:translate(5px)}.footer{position:relative;z-index:100;height:var(--footer-h);animation:intro-footer .38s ease-out .82s both;display:flex;align-items:center;justify-content:center;border-top:1px solid rgba(255,255,255,.05);padding:0 2rem}.footer__quote{font-family:var(--font-body);font-style:italic;font-weight:300;font-size:.65rem;letter-spacing:.12em;color:#ffffff8c;text-align:center}.confirm{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#040406f0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s ease}.confirm.is-visible{opacity:1;pointer-events:all;animation:confirm-bg 1.4s ease-out both}@keyframes confirm-bg{0%{background:#040406bf}35%{background:#040406f7}to{background:#040406f0}}.confirm__inner{text-align:center;display:flex;flex-direction:column;align-items:center}.confirm__inner.is-entering .confirm__label{animation:fade-up .32s ease-out 0ms both}.confirm__inner.is-entering .confirm__name{animation:title-lock .52s cubic-bezier(.16,1,.3,1) 60ms both}@keyframes title-lock{0%{opacity:0;transform:scale(.95);letter-spacing:.04em}to{opacity:1;transform:scale(1);letter-spacing:-.03em}}.confirm__name{position:relative;overflow:hidden}.confirm__name:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.09) 50%,transparent 62%);transform:translate(-150%);pointer-events:none}.confirm__inner.is-entering .confirm__name:after{animation:light-sweep .95s ease-out .42s both}@keyframes light-sweep{0%{transform:translate(-150%)}to{transform:translate(150%)}}.confirm__inner.is-entering .confirm__line{animation:line-in .38s ease-out .28s both}@keyframes line-in{0%{transform:scaleX(0);opacity:0;transform-origin:left}to{transform:scaleX(1);opacity:1;transform-origin:left}}.confirm__inner.is-entering .confirm__role{animation:fade-up .32s ease-out .34s both}.confirm__inner.is-entering .confirm__reset{animation:fade-up .32s ease-out .48s both}@keyframes fade-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.confirm__label{font-family:var(--font-head);font-size:.6rem;font-weight:300;letter-spacing:.6em;text-transform:uppercase;color:#ffffff40;margin-bottom:1.25rem}.confirm__name{font-family:var(--font-head);font-weight:900;font-size:clamp(5rem,15vw,14rem);line-height:.85;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:.75rem}.confirm__line{width:40px;height:2px;margin-bottom:1rem}.confirm__role{font-family:var(--font-head);font-size:.75rem;font-weight:300;letter-spacing:.5em;text-transform:uppercase;color:#ffffff59;margin-bottom:3.5rem}.confirm__reset{background:transparent;border:1px solid rgba(255,255,255,.15);color:#ffffff59;font-family:var(--font-head);font-size:.65rem;font-weight:400;letter-spacing:.35em;text-transform:uppercase;padding:.8rem 2rem;cursor:pointer;transition:border-color .2s ease,color .2s ease}.confirm__reset:hover{border-color:#fff6;color:#fff}