/* Clash Arena V2 — motion. Short, purposeful, GPU-friendly (transform/opacity only). */
@keyframes v2-spin{to{transform:rotate(360deg)}}
@keyframes v2-shimmer{to{background-position:-300% 0}}
@keyframes v2-pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes v2-sheet-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes v2-ping{0%{box-shadow:0 0 0 0 rgba(255,125,110,.7)}80%,100%{box-shadow:0 0 0 10px rgba(255,125,110,0)}}
@keyframes v2-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes v2-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes v2-ember{0%{transform:translate3d(0,0,0) scale(1);opacity:0}10%{opacity:1}100%{transform:translate3d(var(--dx,20px),-110vh,0) scale(.4);opacity:0}}
@keyframes v2-sweep{to{transform:rotate(360deg)}}
@keyframes v2-pulse-ring{0%{transform:scale(.55);opacity:.85}100%{transform:scale(1.45);opacity:0}}
@keyframes v2-slam-left{0%{transform:translateX(-120%) rotate(-8deg);opacity:0}60%{transform:translateX(6%) rotate(1deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes v2-slam-right{0%{transform:translateX(120%) rotate(8deg);opacity:0}60%{transform:translateX(-6%) rotate(-1deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes v2-vs{0%{transform:scale(3);opacity:0}55%{transform:scale(.9);opacity:1}100%{transform:scale(1)}}
@keyframes v2-flash{0%{opacity:.9}100%{opacity:0}}
@keyframes v2-shine{0%{transform:translateX(-120%) skewX(-20deg)}100%{transform:translateX(220%) skewX(-20deg)}}

/* Reveal-on-scroll (progressive: content is visible without JS) */
.v2-js [data-v2-reveal]{opacity:0;transform:translateY(22px);transition:opacity var(--v2-slow) var(--v2-ease),transform var(--v2-slow) var(--v2-ease)}
.v2-js [data-v2-reveal].is-in{opacity:1;transform:none}

/* Page transitions where the browser supports cross-document view transitions */
@view-transition{navigation:auto}
::view-transition-old(root){animation:180ms var(--v2-ease) both v2-fade-out}
::view-transition-new(root){animation:260ms var(--v2-ease) both v2-fade-in}
@keyframes v2-fade-out{to{opacity:0}}
@keyframes v2-fade-in{from{opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .v2-js [data-v2-reveal]{opacity:1;transform:none}
  @view-transition{navigation:none}
}