/* A single coherent arena, with copy separated from the animated scenery. */
.cinematic-arena.motion-hero{--scene-x:0px;--scene-y:0px;border-color:#587e99;background:#050d18;min-height:710px;position:relative}
.league-home .cinematic-arena.hero.motion-hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;min-height:710px;padding-block:76px 82px}
.cinematic-arena.motion-hero:before,.league-home .cinematic-arena.hero.motion-hero:before{z-index:1;inset:0;background:linear-gradient(90deg,#050c18f2 0%,#050d18dc 27%,#050d189c 45%,#050d1829 70%,#050d183b 100%),linear-gradient(0deg,#050d18f0 0%,transparent 30%,#050d1830 75%,#050d1866 100%)}
.arena-scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:paint;background:#06101b}
.arena-landscape{position:absolute;inset:-3%;display:block;animation:arena-breathe 28s ease-in-out infinite;transform:translate3d(var(--scene-x),var(--scene-y),0) scale(1.03);transition:translate .8s ease;will-change:transform}
.arena-landscape img{display:block;width:100%;height:100%;object-fit:cover;object-position:65% 50%;opacity:.88}
.cinematic-arena .motion-copy{z-index:4;max-width:730px}.cinematic-arena .motion-copy p{color:#c2d2df;text-shadow:0 2px 8px #02060c}.cinematic-arena .hero-bottom{z-index:4;color:#acc7d7}
.cinematic-arena.motion-hero:after{z-index:5;opacity:.65}.cinematic-arena .motion-control{z-index:6;background:#06111fea;color:#b4d0df}
.cinematic-arena .motion-art,.league-home .cinematic-arena .motion-art{z-index:3;height:500px;isolation:isolate}
.cinematic-arena .motion-art-glow{background:radial-gradient(ellipse,#8bcfff30 0%,#68bff51a 35%,transparent 68%);height:112%;width:130%;filter:blur(8px)}
.cinematic-arena .motion-portrait,.league-home .cinematic-arena .motion-portrait{height:440px;width:min(75%,340px);filter:drop-shadow(0 23px 30px #010610cc)}
.cinematic-arena .motion-poster{opacity:1}.cinematic-arena .motion-poster-frame{background:linear-gradient(135deg,#c1ecff,#365c8780 45%,#98c6f9);box-shadow:none}
.cinematic-arena .art-caption{color:#b4cbdc;text-shadow:0 2px 7px #000;bottom:-29px!important;font-size:8px!important}
.arena-light{position:absolute;inset:0;background:radial-gradient(ellipse at 82% 18%,#a1dcff45,transparent 54%);mix-blend-mode:screen;opacity:.12;animation:arena-illumination 18s ease-in-out infinite}
.arena-mist{position:absolute;right:-15%;width:95%;height:55%;pointer-events:none;mix-blend-mode:screen;opacity:.16;background:radial-gradient(ellipse at 30% 65%,#7097b078,transparent 45%),radial-gradient(ellipse at 75% 50%,#93b6cf66,transparent 43%);filter:blur(22px);animation:arena-mist 34s ease-in-out infinite;will-change:transform}
.mist-far{bottom:10%;opacity:.12;animation-delay:-12s;animation-direction:reverse}.mist-near{bottom:-20%;height:65%;animation-duration:27s}
.arena-snow{position:absolute;inset:0;opacity:.65}.arena-snow i{position:absolute;display:block;width:var(--snow-size);height:var(--snow-size);background:#cee9f9;border-radius:50%;opacity:0;animation:arena-snow var(--snow-time) linear infinite;animation-delay:var(--snow-delay)}
.cinematic-arena .deck-flow{--flight-x:265px;--flight-y:255px;perspective:900px;z-index:0}.cinematic-arena .deck-flow .stream-card{animation-name:arena-card-depth;animation-duration:23s;opacity:0;border-color:#7aabc8;filter:blur(.25px)}
.cinematic-arena .arena-front-flow{position:absolute;inset:0;z-index:3;pointer-events:none}.cinematic-arena .arena-front-card{width:132px;height:190px;margin:-95px 0 0 -66px;animation:arena-front-passage 26s linear infinite;animation-delay:var(--card-delay);filter:blur(.4px);box-shadow:0 15px 40px #01050cbf;border-color:#a3c7e0}
.cinematic-arena .hero-action{background:#0a1a2ed9;border-color:#5e839e}.cinematic-arena .hero-action.primary{background:linear-gradient(120deg,#275571eb,#12314be6);border-color:#a3d9ed;box-shadow:0 5px 30px #03091288,inset 3px 0 #b4e7f7}
.cinematic-arena .hero-stats{background:#243e53cc;border-color:#557b9366}.cinematic-arena .hero-stat{background:#081729e8}
.motion-offscreen.cinematic-arena .arena-scene *,.motion-offscreen.cinematic-arena .arena-scene i{animation-play-state:paused!important}
@keyframes arena-breathe{0%,100%{transform:translate3d(var(--scene-x),var(--scene-y),0) scale(1.03)}50%{transform:translate3d(calc(var(--scene-x) - 7px),calc(var(--scene-y) + 4px),0) scale(1.07)}}
@keyframes arena-illumination{0%,58%,76%,100%{opacity:.08}65%{opacity:.24}70%{opacity:.12}}
@keyframes arena-mist{0%,100%{transform:translate3d(-3%,0,0) scale(1)}50%{transform:translate3d(8%,-8px,0) scale(1.08)}}
@keyframes arena-snow{0%{opacity:0;transform:translate3d(0,-35px,0)}20%{opacity:.45}80%{opacity:.25}100%{opacity:0;transform:translate3d(-65px,140px,0)}}
@keyframes arena-card-depth{0%{opacity:0;transform:translate3d(calc(var(--flight-x) * -1 + var(--lane-x)),calc(var(--flight-y) + var(--lane-y)),0) rotate(-26deg) scale(var(--card-scale))}15%{opacity:.5}50%{opacity:.74;transform:translate3d(var(--lane-x),var(--lane-y),0) rotate(-8deg) scale(calc(var(--card-scale) + .15))}85%{opacity:.48}100%{opacity:0;transform:translate3d(calc(var(--flight-x) + var(--lane-x)),calc(var(--flight-y) * -1 + var(--lane-y)),0) rotate(16deg) scale(var(--card-scale))}}
@keyframes arena-front-passage{0%{opacity:0;transform:translate3d(-140px,330px,0) rotate(-32deg) scale(.9)}18%{opacity:.45}48%{opacity:.56;transform:translate3d(210px,220px,0) rotate(-16deg) scale(1.12)}80%{opacity:.44}100%{opacity:0;transform:translate3d(400px,-90px,0) rotate(14deg) scale(.95)}}
@media(min-width:1600px){.cinematic-arena .motion-art,.league-home .cinematic-arena .motion-art{height:540px}.cinematic-arena .motion-portrait,.league-home .cinematic-arena .motion-portrait{height:480px;width:355px}.cinematic-arena .arena-landscape img{object-position:70% 50%}}
@media(max-width:1100px) and (min-width:801px){.league-home .cinematic-arena.hero.motion-hero{gap:24px;padding-inline:4%}.cinematic-arena .motion-art,.league-home .cinematic-arena .motion-art{height:460px}.cinematic-arena .motion-portrait,.league-home .cinematic-arena .motion-portrait{height:390px;width:78%}.cinematic-arena .deck-flow{--flight-x:200px;--flight-y:230px}}
@media(max-width:800px){
 .league-home .cinematic-arena.hero.motion-hero,.cinematic-arena.motion-hero{grid-template-columns:minmax(0,1fr);gap:33px;min-height:0;padding:35px 22px 65px}
 .cinematic-arena.motion-hero:before,.league-home .cinematic-arena.hero.motion-hero:before{background:linear-gradient(0deg,#050d18 0%,#050d18f2 42%,#050d18a8 58%,#050d181a 100%)}
 .arena-landscape{inset:-2% -10% 36%;animation:none;transform:none;will-change:auto}.arena-landscape img{object-position:70% 50%;opacity:.76}
 .cinematic-arena .motion-art,.league-home .cinematic-arena .motion-art{height:290px;max-width:360px;width:100%;justify-self:center}
 .cinematic-arena .motion-portrait,.league-home .cinematic-arena .motion-portrait{width:190px;height:262px}
 .cinematic-arena .motion-copy{grid-row:2}.cinematic-arena .motion-copy p{font-size:13px;color:#c2d2df}
 .cinematic-arena .art-caption{font-size:6px!important;bottom:-21px!important}.cinematic-arena .deck-flow{--flight-x:150px;--flight-y:145px}
 .cinematic-arena .deck-flow .stream-card{animation-duration:20s}.cinematic-arena .deck-flow .stream-card:nth-child(1){animation-delay:0s}.cinematic-arena .deck-flow .stream-card:nth-child(2){animation-delay:-5s}.cinematic-arena .deck-flow .stream-card:nth-child(3){animation-delay:-10s}.cinematic-arena .deck-flow .stream-card:nth-child(4){animation-delay:-15s}
 .cinematic-arena .arena-front-card{width:82px;height:118px;margin:-59px 0 0 -41px;animation-name:arena-front-mobile;animation-duration:24s}.cinematic-arena .arena-front-card:nth-child(2){display:none}
 .arena-mist{filter:blur(15px);height:35%;width:130%}.mist-near{bottom:40%;opacity:.12}.mist-far{bottom:55%;opacity:.08}.arena-snow i:nth-child(n+9){display:none}.arena-snow{opacity:.4}.arena-light{animation-duration:24s;opacity:.12}
}
@keyframes arena-front-mobile{0%{opacity:0;transform:translate3d(-115px,175px,0) rotate(-25deg)}25%{opacity:.3}65%{opacity:.4;transform:translate3d(130px,130px,0) rotate(-8deg)}100%{opacity:0;transform:translate3d(215px,25px,0) rotate(18deg)}}
@media(prefers-reduced-motion:reduce){.cinematic-arena .arena-scene *{animation:none!important;transition:none!important;will-change:auto}.cinematic-arena .arena-landscape{transform:none}.cinematic-arena .arena-front-flow,.cinematic-arena .arena-snow{display:none}.cinematic-arena .arena-light{opacity:.12}}
