/* ===========================================================================
   THE FINISHERS' PROPS — see js/finishers.js for the rules they keep.
   Only transform and opacity move here. The two filters (charred, frozen)
   are on a potato that is standing still.
   =========================================================================== */
.ko-anchor { position: absolute; width: 0; height: 0; transform-origin: 0 100%; pointer-events: none; }
.ko { position: absolute; pointer-events: none; }
.ko > svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Dizzy stars: three on a flattened ellipse, each a third of a turn apart. */
.ko-stars { width: 0; height: 0; }
.ko-stars > .ko-star { animation: fxStarOrbit 0.9s linear infinite; }
@keyframes fxStarOrbit {
  0%   { transform: translate(-26px, 0) scale(0.8); }
  25%  { transform: translate(0, 7px) scale(1.15); }
  50%  { transform: translate(26px, 0) scale(0.8); }
  75%  { transform: translate(0, -7px) scale(0.6); }
  100% { transform: translate(-26px, 0) scale(0.8); }
}

.ko-flame > svg { transform-origin: 50% 100%; animation: fxFlicker 0.32s ease-in-out infinite alternate; }
@keyframes fxFlicker {
  0%   { transform: scale(1, 1) skewX(0deg); }
  50%  { transform: scale(0.9, 1.12) skewX(-4deg); }
  100% { transform: scale(1.05, 0.92) skewX(4deg); }
}

.ko-ufo .ko-ufo-lights circle { animation: fxBlink 0.5s steps(1) infinite; }
.ko-ufo .ko-ufo-lights circle:nth-child(2n) { animation-delay: -0.25s; }
@keyframes fxBlink { 50% { opacity: 0.25; } }

/* A lightning flash: a white bloom round the strike, not the whole screen. */
.ko-flash {
  left: -160px; bottom: -40px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,240,0.95) 0%, rgba(255,255,220,0.5) 35%, rgba(255,255,220,0) 70%);
}

/* The potato that comes back at the viewer (launch). Sized to the screen, not
   the stage: it is on #screen-splat, outside the stage entirely. */
.ko-glass { left: 50%; top: 42%; width: 16vw; height: 14.5vw; transform: translate(-50%, -50%); }

.ko-charred .sprite { filter: brightness(0.28) saturate(0.4); transition: filter 0.35s ease-out; }
.ko-frozen .sprite { filter: saturate(0.25) brightness(1.35) hue-rotate(170deg); transition: filter 0.3s ease-out; }

/* The black hole's arms turn on their own, faster than the disc. */
.ko-blackhole .ko-hole-arms { transform-origin: 40px 40px; animation: fxSpin 0.9s linear infinite; }
@keyframes fxSpin { to { transform: rotate(360deg); } }

/* The energy blast leaves only the outline: the body goes see-through, the
   face and hat with it. Static, so the class switch is one repaint. */
.ko-outline .sprite { background: transparent !important; box-shadow: none !important; border-color: #15171c !important; }
.ko-outline .sprite::after, .ko-outline .face { opacity: 0 !important; }

/* The tornado's funnel twists; the debris orbits it. */
.ko-tornado > svg { transform-origin: 50% 100%; animation: fxTwist 0.5s ease-in-out infinite alternate; }
@keyframes fxTwist { from { transform: skewX(-7deg) scaleX(0.94); } to { transform: skewX(7deg) scaleX(1.06); } }
.ko-debris { animation: fxOrbit 0.8s linear infinite; }
@keyframes fxOrbit {
  0%   { transform: translateX(-34px); }
  50%  { transform: translateX(34px); }
  100% { transform: translateX(-34px); }
}
.ko-vacuum .ko-vac-light { animation: fxBlink 0.6s steps(1) infinite; }