arena/src/styles/animations.css

@keyframes intro-rise {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes preview-attack {
  to {
    background-position-x: var(--sprite-end);
  }
}

@keyframes preview-breathe {
  0%,
  100% {
    margin-top: 0;
  }
  50% {
    margin-top: -8px;
  }
}

@keyframes preview-strike {
  0%,
  58%,
  100% {
    opacity: 0;
  }
  64%,
  76% {
    opacity: 0.86;
  }
}

@keyframes status-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes battle-notice-roll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * (var(--battle-notice-message-width) + var(--battle-notice-roll-gap))));
  }
}

@keyframes kill-log-entry {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes banner-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.78);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes victory-banner-sheen {
  from {
    opacity: 0;
    transform: translateX(0) skewX(-18deg);
  }
  18% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(560%) skewX(-18deg);
  }
}

@keyframes victory-confetti-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--confetti-tilt)) scale(0.3);
  }
  12% {
    opacity: 1;
  }
  74% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y)))
      rotate(calc(var(--confetti-tilt) + var(--confetti-spin)))
      scale(1);
  }
}

@keyframes victory-glow {
  from {
    opacity: 0;
    transform: scale(0.58);
  }
  35% {
    opacity: 1;
  }
  to {
    opacity: 0.8;
    transform: scale(1);
  }
}

@keyframes victory-rays-in {
  from {
    transform: scale(0.56);
  }
  to {
    transform: scale(1);
  }
}

@keyframes victory-rays-turn {
  to {
    rotate: 360deg;
  }
}

@keyframes victory-message-pulse {
  from {
    opacity: 0.72;
    transform: scale(0.88);
  }
  58% {
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .victory-banner,
  .victory-banner::before,
  .victory-banner-message,
  .victory-celebration::before,
  .victory-confetti-piece,
  .victory-rays {
    animation-duration: 1ms;
    animation-iteration-count: 1;
  }
}