/* ---------- Sidekick spring easing ---------------------- */
.villain {
  --sk-spring: linear(
    0, 0.009 1%, 0.076 3.4%, 0.293 7.2%, 0.62 11.5%, 1.184 18.1%, 1.34 20.7%, 1.44 23.1%,
    1.474 25.6%, 1.45 28.2%, 1.373 30.8%, 1.129 36.6%, 0.937 41.4%, 0.85 44.9%, 0.822 48.4%,
    0.84 52.3%, 0.947 60.4%, 1.02 67.5%, 1.043 72.6%, 1.026 81%, 0.995 92.4%, 1
  );
  transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-timing-function: var(--sk-spring);
}

/* ---------- Beat 1: walking the planet arc -------------- */
.villain.is-walking svg,
.villain.is-launching svg,
.villain.is-landed svg {
  animation: none;
}

.villain.is-walking .sk-leg-l,
.villain.is-walking .sk-leg-r,
.villain.is-walking .sk-arm-l,
.villain.is-walking .sk-arm-r {
  transform-box: view-box;
  animation-duration: var(--sk-step, 460ms);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.villain.is-walking .sk-leg-l {
  transform-origin: 19.3px 29.5px;
  animation-name: sk-stride;
}

.villain.is-walking .sk-leg-r {
  transform-origin: 24.8px 29.5px;
  animation-name: sk-stride;
  animation-delay: calc(var(--sk-step, 460ms) / -2);
}

.villain.is-walking .sk-arm-r {
  transform-origin: 28.3px 19px;
  animation-name: sk-swing;
}

.villain.is-walking .sk-arm-l {
  transform-origin: 18.5px 19.3px;
  animation-name: sk-swing;
  animation-delay: calc(var(--sk-step, 460ms) / -2);
}

@keyframes sk-stride {
  0%, 100% { rotate: 24deg; }
  50% { rotate: -24deg; }
}

@keyframes sk-swing {
  0%, 100% { rotate: -15deg; }
  50% { rotate: 15deg; }
}


/* ---------- Beat 2: arriving at the centre of the orbit ring ---- */
.villain.is-landed {
  position: absolute;
  top: calc(var(--orbit-top) + var(--orbit-size) / 2);
  right: calc(var(--orbit-right) + var(--orbit-size) / 2);
  bottom: auto;
  left: auto;
  z-index: 0;
  transform-origin: 50% 50%;
  translate: 50% -50%;
  rotate: none;
}

.villain.is-landed svg {
  scale: 1 1;
}

.villain.is-landed .sk-cape {
  display: none;
}

.villain.is-landed .sk-leg-l,
.villain.is-landed .sk-leg-r,
.villain.is-landed .sk-arm-l,
.villain.is-landed .sk-arm-r {
  transform-box: view-box;
}

.villain.is-landed .sk-leg-l {
  transform-origin: 19.3px 29.5px;
  rotate: -13.1deg;
}

.villain.is-landed .sk-leg-r {
  transform-origin: 24.8px 29.5px;
  rotate: 17.8deg;
}

.villain.is-landed .sk-arm-l {
  transform-origin: 18.5px 19.3px;
  rotate: 36.5deg;
}

.villain.is-landed .sk-arm-r {
  transform-origin: 28.3px 19px;
  rotate: 43.2deg;
}

/* ---------- Beat 3: charging up, the corrupted palette ---- */
:root {
  --sk-charge-eye: #ff2f2f;
  --sk-charge-core: #ff8a6a;
  --sk-charge-suit: #a22b24;
  --sk-charge-pants: #88342c;
  --sk-charge-boot: #4a1b18;
  --sk-charge-belt: #ff2f2f;
  --sk-charge-helmet: #98a4b2;
  --sk-charge-emblem: #ff5a3c;
  --sk-charge-plate: #7d2019;
  --sk-charge-ridge: #b8382e;
  --sk-charge-jaw: #7c8794;
  --sk-charge-arc: var(--green, #7ee0a8);
}

.villain.is-landed .sk-tunic,
.villain.is-landed .sk-limb {
  animation: sk-suit-ignite 2.2s ease-in 0.6s forwards;
}

.villain.is-landed .sk-boot {
  animation: sk-boot-ignite 2.2s ease-in 0.6s forwards;
}

.villain.is-landed .sk-belt {
  animation: sk-belt-ignite 2.2s ease-in 0.6s forwards;
}

.villain.is-landed .sk-skin {
  animation: sk-helmet-ignite 2.2s ease-in 0.6s forwards;
}

.villain.is-landed .sk-plate {
  animation: sk-plate-ignite 2.2s ease-in 0.6s forwards;
}

.villain.is-landed .sk-ridge {
  animation: sk-ridge-ignite 2.2s ease-in 0.6s forwards;
}

.villain.is-landed .sk-jaw {
  animation: sk-jaw-ignite 2.2s ease-in 0.6s forwards;
}

@keyframes sk-plate-ignite {
  from { fill: var(--sk-plate); }
  to { fill: var(--sk-charge-plate); }
}

@keyframes sk-ridge-ignite {
  from { fill: var(--sk-ridge); }
  to { fill: var(--sk-charge-ridge); }
}

@keyframes sk-jaw-ignite {
  from { fill: var(--sk-jaw); }
  to { fill: var(--sk-charge-jaw); }
}

@keyframes sk-suit-ignite {
  from { fill: var(--sk-tunic); }
  to { fill: var(--sk-charge-suit); }
}

@keyframes sk-boot-ignite {
  from { fill: var(--sk-boot); }
  to { fill: var(--sk-charge-boot); }
}

@keyframes sk-belt-ignite {
  from { fill: var(--sk-cape); }
  to { fill: var(--sk-charge-belt); }
}

@keyframes sk-helmet-ignite {
  from { fill: var(--sk-skin); }
  to { fill: var(--sk-charge-helmet); }
}

.villain.is-landed .sk-tights {
  animation: sk-pants-ignite 2.2s ease-in 0.6s forwards;
}

.villain.is-landed .sk-emblem {
  animation: sk-emblem-ignite 2.2s ease-in 0.6s forwards;
}

@keyframes sk-emblem-ignite {
  from {
    fill: var(--sk-emblem);
  }
  to {
    fill: var(--sk-charge-emblem);
  }
}

@keyframes sk-pants-ignite {
  from {
    fill: var(--sk-tights);
  }
  to {
    fill: var(--sk-charge-pants);
  }
}

.villain.is-landed .sk-eye {
  animation:
    sk-eye-ignite 2.2s ease-in 0.6s forwards,
    sk-eye-pulse 1.9s ease-in-out 2.8s infinite;
}

@keyframes sk-eye-ignite {
  from {
    fill: var(--sk-eye);
  }
  to {
    fill: var(--sk-charge-eye);
  }
}

@keyframes sk-eye-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 1.4px var(--sk-charge-eye));
  }
  50% {
    filter: drop-shadow(0 0 3.6px var(--sk-charge-core));
  }
}

/* ---------- Beat 4: lightning from his hands and feet to the ring ---- */
.sk-arc-field {
  transform-box: view-box;
  transform-origin: 22px 25px;
}

.sk-arc {
  fill: none;
  stroke: var(--sk-charge-arc);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 1.6px var(--sk-charge-arc));
  opacity: 0;
}

.villain.is-landed .sk-arc {
  animation-name: sk-arc-flicker;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@keyframes sk-arc-flicker {
  0% { opacity: 0; }
  4% { opacity: 0.95; }
  9% { opacity: 0.4; }
  14% { opacity: 0.9; }
  20% { opacity: 0.55; }
  26% { opacity: 0.85; }
  32% { opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- Beat 5: the ring answers the charge --------- */
.hero.is-charging {
  --orbit-sat-charged: #ff3b3b;
}

.hero.is-charging .orbit-sat {
  background: var(--orbit-sat-charged);
  box-shadow: 0 0 14px var(--orbit-sat-charged);
}

.hero.is-charging .orbit::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--accent, #67e8f9);
  opacity: 0;
  animation: sk-ring-charge 2.6s ease-in-out 1.2s infinite;
}

@keyframes sk-ring-charge {
  0%,
  100% { opacity: 0; }
  50% { opacity: 0.5; }
}

/* ---------- Charged palette without animation: reduced motion, and the wreckage ---- */
.villain-wreck {
  --sk-tunic: var(--sk-charge-suit);
  --sk-limb: var(--sk-charge-suit);
  --sk-cape: var(--sk-charge-suit);
  --sk-tights: var(--sk-charge-pants);
  --sk-boot: var(--sk-charge-boot);
  --sk-plate: var(--sk-charge-plate);
  --sk-ridge: var(--sk-charge-ridge);
  --sk-jaw: var(--sk-charge-jaw);
  --sk-skin: var(--sk-charge-helmet);
  --sk-eye: var(--sk-charge-eye);
  --sk-emblem: var(--sk-charge-emblem);
}

.villain-wreck {
  line-height: 0;
  pointer-events: none;
}


.villain-wreck .sk-belt {
  fill: var(--sk-charge-belt);
}





/* ---------- Beat 6: the hero powers up in her corner ---- */
.heroine.is-rallying {
  top: 30px;
  left: 34px;
  transform-origin: 50% 50%;
  scale: var(--sk-rally, 1);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--green, #7ee0a8) 56%, transparent))
    drop-shadow(0 0 30px color-mix(in srgb, var(--green, #7ee0a8) 26%, transparent));
  transition:
    top 900ms cubic-bezier(0.34, 1.56, 0.64, 1),
    left 900ms cubic-bezier(0.34, 1.56, 0.64, 1),
    scale 900ms cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 900ms ease;
}

.heroine.is-rallying:hover,
.heroine.is-rallying:focus-visible {
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--green, #7ee0a8) 71%, transparent))
    drop-shadow(0 0 38px color-mix(in srgb, var(--green, #7ee0a8) 38%, transparent));
}

.heroine.is-rallying::before {
  content: "";
  position: absolute;
  inset: -34%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--green, #7ee0a8) 45%, transparent),
    color-mix(in srgb, var(--green, #7ee0a8) 20%, transparent) 42%,
    transparent 68%
  );
  animation: sk-rally-glow 2.4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}

.heroine.is-rallying svg {
  --sk-float: 7px;
  animation-duration: 1.5s;
}

@media (max-width: 680px) {
  .heroine.is-rallying {
    top: 96px;
    left: 26px;
  }
}

@keyframes sk-rally-glow {
  from { opacity: 0.45; scale: 0.9; }
  to { opacity: 1; scale: 1.08; }
}


/* ---------- Beat 7: the hero flies in and grows comic-book muscles ---- */
.heroine.is-summoned {
  z-index: 2;
  transition: none;
}

.heroine.is-summoned svg {
  animation: none;
}

.heroine.is-buff .lt-arm-l,
.heroine.is-buff .lt-arm-r,
.heroine.is-buff .lt-torso,
.heroine.is-buff .lt-shoulder,
.heroine.is-buff .lt-collar,
.heroine.is-buff .lt-belt {
  transform-box: view-box;
  animation-duration: 760ms;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: forwards;
}

.heroine.is-buff .lt-arm-l {
  transform-origin: 18.45px 17.4px;
  animation-name: sk-buff-limb;
}

.heroine.is-buff .lt-arm-r {
  transform-origin: 25.55px 17.4px;
  animation-name: heroine-take-aim;
}

.heroine.is-buff .lt-torso,
.heroine.is-buff .lt-shoulder,
.heroine.is-buff .lt-collar {
  transform-origin: 22px 24.6px;
  animation-name: sk-buff-torso;
}

.heroine.is-buff .lt-belt {
  transform-origin: 22px 24.4px;
  animation-name: sk-buff-belt;
}

@keyframes sk-buff-limb {
  to { scale: 1.55; }
}

@keyframes heroine-take-aim {
  to {
    rotate: -58deg;
    scale: 1.55;
  }
}

@keyframes sk-buff-torso {
  to { scale: 1.42 1.05; }
}

@keyframes sk-buff-belt {
  to { scale: 1.42 1; }
}


/* ---------- Beat 8: the page clears for the showdown ---- */
body.is-showdown > header,
body.is-showdown .hero-inner {
  animation: sk-clear-stage 900ms ease forwards;
  pointer-events: none;
}

@keyframes sk-clear-stage {
  to { opacity: 0; }
}


/* ---------- Beat 9: laser fire -------------------------- */
.sk-beam {
  position: absolute;
  height: 3px;
  transform-origin: 0 50%;
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
}

.sk-beam-good {
  background: linear-gradient(90deg, #8ae8b6, #5fd699 55%, #3fc482);
  box-shadow: 0 0 8px 1px rgba(126, 224, 168, 0.55);
}

.sk-beam-evil {
  background: linear-gradient(90deg, #ff6a58, #f03626 55%, #cf1a10);
  box-shadow: 0 0 8px 1px rgba(255, 62, 47, 0.55);
}

.sk-beam-finisher {
  height: 7px;
  box-shadow: 0 0 18px 4px rgba(255, 62, 47, 0.7);
}

.sk-struck-good {
  animation: sk-struck-green 150ms steps(1, end) 2;
}

.sk-struck-evil {
  animation: sk-struck-red 150ms steps(1, end) 2;
}

@keyframes sk-struck-green {
  0% { filter: drop-shadow(0 0 7px #7ee0a8) drop-shadow(0 0 18px rgba(126, 224, 168, 0.85)); }
  50% { filter: none; }
}

@keyframes sk-struck-red {
  0% { filter: drop-shadow(0 0 7px #ff4b3a) drop-shadow(0 0 18px rgba(255, 62, 47, 0.85)); }
  50% { filter: none; }
}

/* ---------- Ending B: the villain falls and the world comes back ---- */
html.is-triumph {
  --bg: #02170e;
  --surface: rgba(10, 74, 48, 0.55);
  --surface-solid: #06301f;
  --border: #126b44;
  --border-strong: #22a468;
  --text: #e9fff4;
  --secondary: #7dffc4;
  --muted: #46d894;
  --dim: #2ea770;
  --accent: #3fffa3;
  --accent-glow: rgba(63, 255, 163, 0.6);
  --gold: #c6ff6e;
  --green: #3fffa3;
}

.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  background: linear-gradient(to bottom, #06301f 0%, #041d13 42%, #02170e 78%);
  animation: sk-aurora-in 1800ms ease forwards;
}

.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  inset: -12% -30% 18%;
  filter: blur(26px);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 46%, transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 46%, transparent 88%);
}

.aurora::before {
  background:
    linear-gradient(97deg, transparent 6%, rgba(63, 255, 163, 0.55) 15%, transparent 24%),
    linear-gradient(88deg, transparent 28%, rgba(125, 255, 196, 0.42) 39%, transparent 49%),
    linear-gradient(101deg, transparent 54%, rgba(198, 255, 110, 0.3) 64%, transparent 73%);
  opacity: 0.85;
  animation: sk-curtain-a 14s ease-in-out infinite alternate;
}

.aurora::after {
  background:
    linear-gradient(84deg, transparent 12%, rgba(120, 210, 255, 0.28) 22%, transparent 32%),
    linear-gradient(104deg, transparent 44%, rgba(63, 255, 163, 0.38) 56%, transparent 66%),
    linear-gradient(92deg, transparent 74%, rgba(168, 130, 255, 0.26) 84%, transparent 93%);
  opacity: 0.7;
  animation: sk-curtain-b 19s ease-in-out infinite alternate;
}

@keyframes sk-aurora-in {
  to { opacity: 1; }
}

@keyframes sk-curtain-a {
  from { translate: -3% 0; scale: 1 1; }
  to { translate: 4% 0; scale: 1.08 1.12; }
}

@keyframes sk-curtain-b {
  from { translate: 3% 0; scale: 1.05 1.06; }
  to { translate: -4% 0; scale: 1 1.14; }
}

html.is-triumph .planet {
  background: radial-gradient(120% 92% at 50% 3%, #0d3a28 0%, #06251a 38%, #041710 72%);
  box-shadow:
    inset 0 2px 0 0 var(--accent, #3fffa3),
    inset 0 8px 22px -6px var(--accent, #3fffa3),
    0 -6px 26px 2px rgba(63, 255, 163, 0.55),
    0 -18px 74px 10px rgba(63, 255, 163, 0.42),
    0 -28px 120px 26px rgba(198, 255, 110, 0.3);
}

html.is-triumph .planet-lit {
  background: radial-gradient(48% 20% at 27% 0.4%, rgba(214, 255, 236, 0.5), rgba(63, 255, 163, 0.22) 40%, transparent 64%);
}

html.is-triumph .planet-bands {
  background: repeating-radial-gradient(circle at 50% 50%, transparent 0 13px, rgba(165, 255, 214, 0.12) 13px 14px);
}


html.is-triumph .atmo {
  background: radial-gradient(130% 100% at 50% 100%, rgba(63, 255, 163, 0.18), rgba(63, 255, 163, 0) 66%);
}

html.is-triumph .atmo-gold {
  background: radial-gradient(90% 100% at 50% 100%, rgba(198, 255, 110, 0.1), rgba(198, 255, 110, 0) 70%);
}

/* ---------- Ending A: the hero loses and the page burns ---- */
.inferno {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  background: radial-gradient(150% 80% at 50% 120%, rgba(255, 95, 34, 0.55) 0%, rgba(150, 18, 9, 0.5) 28%, rgba(45, 8, 5, 0.6) 56%, #14060a 82%);
  animation: sk-inferno-in 1600ms ease forwards;
}

.inferno::before,
.inferno::after {
  content: "";
  position: absolute;
  inset: -34% -12% -30%;
  background-repeat: no-repeat;
  filter: blur(6px);
  opacity: 0.42;
}

.inferno::before {
  background-image:
    radial-gradient(closest-side, rgba(255, 186, 56, 0.9), transparent 72%),
    radial-gradient(closest-side, rgba(255, 108, 26, 0.85), transparent 72%),
    radial-gradient(closest-side, rgba(214, 38, 16, 0.8), transparent 74%),
    radial-gradient(closest-side, rgba(255, 156, 44, 0.75), transparent 72%);
  background-size: 30% 82%, 24% 96%, 36% 70%, 21% 88%;
  background-position: 7% 100%, 33% 100%, 63% 100%, 90% 100%;
  animation: sk-lick-a 3.4s ease-in-out infinite alternate;
}

.inferno::after {
  background-image:
    radial-gradient(closest-side, rgba(255, 214, 92, 0.8), transparent 70%),
    radial-gradient(closest-side, rgba(255, 88, 20, 0.75), transparent 72%),
    radial-gradient(closest-side, rgba(255, 140, 32, 0.7), transparent 72%);
  background-size: 19% 68%, 28% 88%, 23% 74%;
  background-position: 19% 100%, 50% 100%, 78% 100%;
  animation: sk-lick-b 2.6s ease-in-out infinite alternate;
}

@keyframes sk-inferno-in {
  to { opacity: 1; }
}

@keyframes sk-lick-a {
  from { translate: -1.5% 4%; scale: 1 0.94; }
  to { translate: 1.5% -3%; scale: 1.04 1.06; }
}

@keyframes sk-lick-b {
  from { translate: 2% 3%; scale: 1.05 1.02; }
  to { translate: -2% -4%; scale: 0.97 1.1; }
}

html.is-inferno {
  --bg: #14060a;
  --surface: rgba(52, 13, 9, 0.62);
  --surface-solid: #26090a;
  --border: #5e1c14;
  --border-strong: #8a2a1c;
  --text: #ffdcd2;
  --secondary: #ffa48c;
  --muted: #cf6a52;
  --dim: #9c4a38;
  --accent: #ff4b2b;
  --accent-glow: rgba(255, 75, 43, 0.55);
  --gold: #ff9b3d;
  --green: #ff6a45;
}

body.is-showdown.is-aftermath > header,
body.is-showdown.is-aftermath .hero-inner {
  animation: sk-restore-stage 1400ms ease forwards;
  pointer-events: auto;
}

@keyframes sk-restore-stage {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* ---------- Ending A: the planet collapses into a black hole ---- */
html.is-inferno .planet {
  background: #000;
  box-shadow:
    0 -16px 84px 10px var(--accent, #ff4b2b),
    0 -40px 170px 44px var(--gold, #ff9b3d);
}

html.is-inferno .planet-bands,
html.is-inferno .planet-lit,
html.is-inferno .planet-term,
html.is-inferno .planet-mottle {
  display: none;
}

html.is-inferno footer {
  padding-top: 26rem;
}

html.is-inferno .atmo {
  background: radial-gradient(130% 100% at 50% 100%, rgba(255, 90, 45, 0.18), rgba(255, 90, 45, 0) 66%);
}

html.is-inferno .atmo-gold {
  background: radial-gradient(90% 100% at 50% 100%, rgba(255, 155, 61, 0.1), rgba(255, 155, 61, 0) 70%);
}