@keyframes event-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -35%);
  }
  20%,
  85% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -62%);
  }
}

/*
  How every major surface over the table ARRIVES. None of them writes its own exit: the page owns
  their lifetimes, and a closing frame can only guess shorter than the surface lasts.
*/
@keyframes major-overlay-arrive {
  from {
    opacity: 0;
  }
}

@keyframes turn-change-pop {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  22%,
  76% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes attack-result-pop {
  0%,
  100% {
    opacity: 0;
  }

  18%,
  78% {
    opacity: 1;
  }
}

@keyframes chip-rise {
  0% {
    transform: translateY(180px) scale(0.72);
  }
  42% {
    transform: translateY(-120px) scale(1.08);
  }
  82%,
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes chip-flip-badge {
  0% {
    transform: rotateX(68deg) rotateY(0);
  }
  82%,
  100% {
    transform: rotateX(0) rotateY(1800deg);
  }
}

@keyframes chip-flip-blank {
  0% {
    transform: rotateX(68deg) rotateY(0);
  }
  82%,
  100% {
    transform: rotateX(0) rotateY(1980deg);
  }
}

@keyframes chip-result-in {
  0%,
  74% {
    opacity: 0;
    transform: translateY(10px);
  }
  84%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes source-action {
  40% {
    filter: drop-shadow(0 0 16px var(--gold));
    transform: translateY(-32px) scale(1.06);
  }
}

@keyframes target-pulse {
  45% {
    filter: drop-shadow(0 0 18px var(--danger));
    transform: scale(1.05) rotate(-1deg);
  }
}

/* Turns by its own angle, not its box, so the rim stays on the card. It must be REGISTERED or
   it jumps between two strings instead of animating. */
@property --corona-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes aura-corona {
  to {
    --corona-angle: 360deg;
  }
}

/*
  And it breathes: one continuous ease-in-out swell of the whole rim, no step, no colour change
  and no hard edge.
*/
@keyframes aura-breathe {
  0%,
  100% {
    opacity: 0.52;
  }

  50% {
    opacity: 1;
  }
}

@keyframes sheet-centre-in {
  from {
    opacity: 0;
    scale: 0.96;
  }
}

@keyframes viewer-in {
  from {
    opacity: 0;
    scale: 0.94;
  }
}

@keyframes shuffle {
  35% {
    transform: translateX(-12px) rotate(-8deg);
  }
  70% {
    transform: translateX(10px) rotate(7deg);
  }
}