/* ÚLTIMO REFÚGIO — efeitos de UI (cura)
   Posicionar absoluto sobre .tc-carta (ou .carta).
   Spritesheet: 12 frames × 256px, horizontal (3072×256). */

:root {
  --efeito-cura-sprite: url("./efeito_cura_sprite.webp");
  --efeito-cura-frames: 12;
  --efeito-cura-frame: 256px;
  --efeito-cura-duracao: 0.8s;
  --efeito-cura-verde: #3cd464;
  --efeito-cura-verde-claro: #a8ffb8;
  --efeito-cura-borda: #1a2818;
}

/* Spritesheet — uma vez, steps(12) */
.efeito-cura {
  position: absolute;
  left: 50%;
  top: 42%;
  width: var(--efeito-cura-frame);
  height: var(--efeito-cura-frame);
  margin-left: calc(var(--efeito-cura-frame) / -2);
  margin-top: calc(var(--efeito-cura-frame) / -2);
  pointer-events: none;
  z-index: 20;
  background-image: var(--efeito-cura-sprite);
  background-repeat: no-repeat;
  background-size: calc(var(--efeito-cura-frame) * var(--efeito-cura-frames)) var(--efeito-cura-frame);
  background-position: 0 0;
  image-rendering: auto;
  animation: efeito-cura-play var(--efeito-cura-duracao) steps(12) forwards;
  /* escala p/ caber sobre carta ~110px */
  transform: scale(0.55);
  transform-origin: center center;
}

@keyframes efeito-cura-play {
  from { background-position: 0 0; opacity: 1; }
  to {
    background-position: calc(var(--efeito-cura-frame) * -11) 0;
    opacity: 1;
  }
}

/* Após a animação some (opcional via classe JS) */
.efeito-cura.is-fim,
.efeito-cura[data-fim] {
  opacity: 0;
  visibility: hidden;
}

/* Versão leve: só CSS + SVG (sem spritesheet) */
.efeito-cura--leve {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 96px;
  height: 96px;
  margin-left: -48px;
  margin-top: -48px;
  pointer-events: none;
  z-index: 20;
  background: none;
  animation: efeito-cura-leve var(--efeito-cura-duracao) ease-out forwards;
  transform: none;
}

.efeito-cura--leve::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(60, 212, 100, 0.55), transparent 70%);
  box-shadow: 0 0 18px rgba(60, 212, 100, 0.45);
  animation: efeito-cura-glow var(--efeito-cura-duracao) ease-out forwards;
}

.efeito-cura--leve::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  margin-top: -28px;
  background: url("./cruz_cura_leve.svg") center / contain no-repeat;
  border: 0;
  box-shadow: 0 0 14px rgba(60, 212, 100, 0.55);
  animation: efeito-cura-cruz var(--efeito-cura-duracao) ease-out forwards;
}

/* partículas SVG flutuando */
.efeito-cura--leve .efeito-cura__particulas {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.efeito-cura--leve .efeito-cura__particulas li {
  position: absolute;
  width: 12px;
  height: 12px;
  background: url("./particula_cura.svg") center / contain no-repeat;
  opacity: 0;
  animation: efeito-cura-particula var(--efeito-cura-duracao) ease-out forwards;
}

.efeito-cura--leve .efeito-cura__particulas li:nth-child(1) { left: 28%; bottom: 30%; animation-delay: 0.05s; }
.efeito-cura--leve .efeito-cura__particulas li:nth-child(2) { left: 48%; bottom: 22%; animation-delay: 0.12s; }
.efeito-cura--leve .efeito-cura__particulas li:nth-child(3) { left: 62%; bottom: 34%; animation-delay: 0.02s; }
.efeito-cura--leve .efeito-cura__particulas li:nth-child(4) { left: 38%; bottom: 26%; animation-delay: 0.18s; }
.efeito-cura--leve .efeito-cura__particulas li:nth-child(5) { left: 55%; bottom: 28%; animation-delay: 0.1s; }

@keyframes efeito-cura-leve {
  0% { opacity: 0; transform: scale(0.7); }
  15% { opacity: 1; transform: scale(1.08); }
  55% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.92); }
}

@keyframes efeito-cura-glow {
  0% { opacity: 0; transform: scale(0.6); }
  20% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.3); }
}

@keyframes efeito-cura-cruz {
  0% { opacity: 0; transform: scale(0.5); }
  18% { opacity: 1; transform: scale(1.12); }
  50% { opacity: 1; transform: scale(1); filter: brightness(1.2); }
  100% { opacity: 0; transform: scale(0.9); }
}

@keyframes efeito-cura-particula {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-56px) scale(1.1); }
}

/* Sobre carta do combate */
.tc-carta > .efeito-cura,
.tc-carta > .efeito-cura--leve,
.carta > .efeito-cura,
.carta > .efeito-cura--leve {
  /* herda position absolute do pai relative */
}

.tc-carta,
.carta {
  /* garante contexto se ainda não houver */
}

@media (prefers-reduced-motion: reduce) {
  .efeito-cura,
  .efeito-cura--leve,
  .efeito-cura--leve::before,
  .efeito-cura--leve::after,
  .efeito-cura--leve .efeito-cura__particulas li {
    animation: none !important;
  }
  .efeito-cura {
    /* quadro médio estático (~frame 6) */
    background-position: calc(var(--efeito-cura-frame) * -5) 0;
    opacity: 0.9;
  }
  .efeito-cura--leve {
    opacity: 0.9;
    transform: none;
  }
  .efeito-cura--leve::before,
  .efeito-cura--leve::after {
    opacity: 0.9;
  }
  .efeito-cura--leve .efeito-cura__particulas li {
    opacity: 0.5;
    transform: translateY(-20px);
  }
}