/**
 * efectos.css — las animaciones de respuesta al tacto.
 *
 * Todo lo de aquí se dibuja por encima de la interfaz pero sin capturar el
 * ratón: son adornos, nunca deben estorbar a un botón.
 */

.efectos {
  position: fixed;
  inset: 0;
  z-index: var(--z-aviso);
  pointer-events: none;
  overflow: hidden;
}

/* ── Chispas ────────────────────────────────────────────────────────────── */

.chispa {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 1px;
  rotate: 45deg;
  animation: chispa-vuela 700ms var(--curva) forwards;
}

@keyframes chispa-vuela {
  0% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  100% {
    opacity: 0;
    translate: var(--dx) var(--dy);
    scale: .2;
    rotate: calc(45deg + var(--giro));
  }
}

/* ── Onda ───────────────────────────────────────────────────────────────── */

.onda {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid;
  border-radius: 50%;
  animation: onda-expande 620ms var(--curva) forwards;
}

@keyframes onda-expande {
  0%   { opacity: .9; scale: 1; }
  100% { opacity: 0; scale: 9; }
}

/* ── Corazón que sube ───────────────────────────────────────────────────── */

.sube {
  position: absolute;
  font-size: 1.4rem;
  line-height: 1;
  margin: -12px 0 0 -12px;
  animation: sube-flota 1500ms var(--curva) forwards;
}

@keyframes sube-flota {
  0%   { opacity: 0; translate: 0 0; scale: .4; }
  15%  { opacity: 1; scale: 1.15; }
  100% { opacity: 0; translate: var(--deriva) -130px; scale: .85; }
}

/* ── Rupias cayendo ─────────────────────────────────────────────────────── */

.cae {
  position: absolute;
  top: -40px;
  font-size: 1.5rem;
  line-height: 1;
  animation: cae-gira 1800ms ease-in forwards;
}

@keyframes cae-gira {
  0%   { opacity: 0; translate: 0 0; rotate: 0deg; }
  10%  { opacity: 1; }
  100% { opacity: .2; translate: 0 105vh; rotate: var(--giro); }
}

/* ── Reacciones de elementos ────────────────────────────────────────────── */

/* La luna rebota al tocarla. */
.cielo-luna.sacudida { animation: luna-rebota 700ms var(--curva); }

@keyframes luna-rebota {
  0%   { scale: var(--luna-escala); }
  30%  { scale: calc(var(--luna-escala) * 1.14); rotate: -3deg; }
  60%  { scale: calc(var(--luna-escala) * .96); rotate: 2deg; }
  100% { scale: var(--luna-escala); rotate: 0deg; }
}

/* Eco al pulsar cualquier control. */
.pulsado-eco { animation: eco-pulsacion 320ms var(--curva); }

@keyframes eco-pulsacion {
  0%   { scale: 1; }
  40%  { scale: .95; }
  100% { scale: 1; }
}

/* ── Entradas escalonadas ───────────────────────────────────────────────── */

.entra-escalonado {
  animation: entra-tarjeta 420ms var(--curva) backwards;
  animation-delay: var(--retardo, 0ms);
}

@keyframes entra-tarjeta {
  from { opacity: 0; translate: 0 18px; scale: .98; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}

/* ── Números del contador ───────────────────────────────────────────────── */

/* Al cambiar un dígito, un empujón hacia arriba. */
.contador-numero.cambia { animation: digito-cambia 380ms var(--curva); }

@keyframes digito-cambia {
  0%   { translate: 0 0; }
  35%  { translate: 0 -5px; color: #fff; }
  100% { translate: 0 0; }
}

/* ── Casilla de misión ──────────────────────────────────────────────────── */

/* Al marcar, el rombo da una vuelta y se hincha. */
.mision[data-hecha='true'] .mision-casilla { animation: casilla-marca 480ms var(--curva); }

@keyframes casilla-marca {
  0%   { rotate: 45deg; scale: 1; }
  45%  { rotate: 225deg; scale: 1.35; }
  100% { rotate: 45deg; scale: 1; }
}

/* ── Barra del ciclo ────────────────────────────────────────────────────── */

/* Un brillo que recorre la barra de vez en cuando. */
.barra-ciclo-relleno {
  position: relative;
  overflow: hidden;
}
.barra-ciclo-relleno::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  translate: -100% 0;
  animation: brillo-barra 3.5s ease-in-out infinite;
}

@keyframes brillo-barra {
  0%, 60% { translate: -100% 0; }
  100%    { translate: 200% 0; }
}

/* ── El hada ────────────────────────────────────────────────────────────── */

.tatl-boton {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  transition: scale var(--rapido) var(--curva);
}
.tatl-boton:hover { scale: 1.15; }
.tatl-boton:active { scale: .9; }

/* Aleteo continuo, para que se note que está viva. */
.hada { animation: hada-flota 2.6s ease-in-out infinite; }

@keyframes hada-flota {
  0%, 100% { translate: 0 0; rotate: -4deg; }
  50%      { translate: 0 -3px; rotate: 4deg; }
}

.hada-alas {
  transform-origin: 50% 50%;
  animation: hada-aletea 260ms ease-in-out infinite alternate;
}

@keyframes hada-aletea {
  from { scale: 1 1; opacity: .75; }
  to   { scale: 1.14 .82; opacity: 1; }
}

.hada-halo { animation: hada-brilla 2s ease-in-out infinite; }

@keyframes hada-brilla {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}

/* Cuando aún no ha hecho el tutorial, el botón insiste. */
.tatl-boton.tatl-insiste::after {
  content: '';
  position: absolute;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 2px solid var(--hada);
  animation: tatl-llama 2s ease-out infinite;
  pointer-events: none;
}

@keyframes tatl-llama {
  0%   { opacity: .9; scale: .8; }
  100% { opacity: 0; scale: 1.9; }
}

/* El hada que sale volando por la pantalla. */
.hada-volando {
  position: fixed;
  z-index: calc(var(--z-aviso) + 1);
  margin: -23px 0 0 -23px;
  pointer-events: none;
  filter: drop-shadow(0 0 14px rgba(255, 243, 168, .8));
}

.hada-volando.hada-se-va {
  animation: hada-desaparece 900ms var(--curva) forwards;
}

@keyframes hada-desaparece {
  0%   { opacity: 1; scale: 1; }
  35%  { scale: 1.3; }
  100% { opacity: 0; scale: .1; translate: 0 -60px; }
}

/* La estela que va soltando al volar. */
.hada-estela {
  position: fixed;
  z-index: var(--z-aviso);
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: #fff3a8;
  box-shadow: 0 0 6px 2px rgba(255, 243, 168, .65);
  pointer-events: none;
  animation: estela-apaga 750ms ease-out forwards;
}

@keyframes estela-apaga {
  0%   { opacity: .95; scale: 1; }
  100% { opacity: 0; scale: .2; }
}

/* ── Respeto por quien no quiere movimiento ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .chispa, .onda, .sube, .cae,
  .cielo-luna.sacudida, .pulsado-eco, .entra-escalonado,
  .contador-numero.cambia, .mision[data-hecha='true'] .mision-casilla,
  .barra-ciclo-relleno::after {
    animation: none !important;
  }
  .chispa, .onda, .sube, .cae { display: none; }
}

:root[data-movimiento='reducido'] .chispa,
:root[data-movimiento='reducido'] .onda,
:root[data-movimiento='reducido'] .sube,
:root[data-movimiento='reducido'] .cae { display: none; }

:root[data-movimiento='reducido'] .barra-ciclo-relleno::after { animation: none; }