@layer retro {
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  @keyframes rainbow {
    0% { color: oklch(75% 0.25 0); }
    16% { color: oklch(75% 0.25 60); }
    33% { color: oklch(75% 0.25 120); }
    50% { color: oklch(75% 0.25 180); }
    66% { color: oklch(75% 0.25 240); }
    83% { color: oklch(75% 0.25 300); }
    100% { color: oklch(75% 0.25 360); }
  }

  @keyframes sparkle {
    0% {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }
    100% {
      opacity: 0;
      transform: scale(0) rotate(180deg);
    }
  }

  @keyframes confetti-fall {
    0% {
      transform: translateY(0) rotate(0deg);
      opacity: 1;
    }
    100% {
      transform: translateY(500px) rotate(720deg);
      opacity: 0;
    }
  }

  @keyframes counter-pop {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 1; }
  }

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-2px) rotate(-0.3deg); }
    40% { transform: translateX(2px) rotate(0.3deg); }
    60% { transform: translateX(-1px) rotate(-0.2deg); }
    80% { transform: translateX(1px) rotate(0.2deg); }
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }

  .cursor-star {
    position: absolute;
    width: 12px;
    height: 12px;
    pointer-events: none;
    background: oklch(90% 0.2 95);
    clip-path: polygon(
      50% 0%, 61% 35%, 98% 35%, 68% 57%,
      79% 91%, 50% 70%, 21% 91%, 32% 57%,
      2% 35%, 39% 35%
    );
    animation: sparkle 500ms ease-out forwards;
    z-index: 9999;
  }
}