/* juego-feel.css — el «toque de juego» común (29-sep-2026).
 *
 * El vocabulario de la portada del Duelo que le gustó a Nico (commit 31beffac,
 * variante 2): lo que entra, entra con peso (se pasa de largo y asienta), hay
 * un fogonazo y un temblor corto en el impacto, y los marcos y el oro laten.
 *
 * REGLA: solo se anima opacity y las propiedades de transformación sueltas
 * (translate, scale, rotate). Van aparte de `transform`, así que se SUMAN a la
 * transformación que cada juego ya tenga puesta (un translate(-50%), el drag de
 * una carta, la deriva de un fondo) en vez de pisarla. Todo en el compositor.
 * Con «reducir movimiento» se apaga entero (al final del fichero).
 */

/* ── fogonazo de pantalla (lo dispara juego-feel.js · fogonazo) ── */
.jf-fogonazo { position: fixed; inset: 0; z-index: 9989; pointer-events: none; opacity: 0;
  background: var(--jf-c, #fff); }
.jf-fogonazo[data-forma="bordes"] { background: radial-gradient(120% 90% at 50% 50%, transparent 38%, var(--jf-c, #fff) 100%); }
.jf-fogonazo[data-forma="centro"] { background: radial-gradient(70% 55% at 50% 45%, var(--jf-c, #fff) 0%, transparent 72%); }
.jf-fogonazo.jf-on { animation: jfFogonazo .46s ease-out both; }
@keyframes jfFogonazo { 0% { opacity: 0 } 14% { opacity: var(--jf-a, .45) } 100% { opacity: 0 } }

/* ── chispas que vuelan al marcador ── */
.jf-vuelo { position: fixed; inset: 0; z-index: 9993; pointer-events: none; overflow: hidden; }
.jf-chispa { position: absolute; border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(circle at 35% 30%, #fff 0%, var(--jf-c, #f7d372) 45%, rgba(0,0,0,0) 72%); }

/* ── copia de un nodo que revienta en su sitio ── */
.jf-estalla { position: fixed !important; margin: 0 !important; z-index: 9992; pointer-events: none;
  animation: jfEstalla .52s cubic-bezier(.2,.8,.3,1) both; }
@keyframes jfEstalla { 0% { opacity: .95; scale: 1 } 100% { opacity: 0; scale: var(--jf-e, 2.4) } }

/* ═════════════ Las entradas (se usan desde el CSS de cada juego) ═════════════ */
/* golpe desde grande: el rótulo que cae sobre la pantalla */
@keyframes jfSlam {
  0%   { opacity: 0; scale: 2.3; rotate: -7deg; }
  55%  { opacity: 1; scale: .9;  rotate: 2deg; }
  78%  { scale: 1.05; rotate: -1deg; }
  100% { opacity: 1; scale: 1;   rotate: 0deg; }
}
/* cae desde arriba y rebota */
@keyframes jfCae {
  0%   { opacity: 0; translate: 0 -140%; scale: .9; }
  60%  { opacity: 1; translate: 0 8%;    scale: 1.04; }
  80%  { translate: 0 -3%; scale: .99; }
  100% { opacity: 1; translate: 0 0;     scale: 1; }
}
/* entra de lado con peso */
@keyframes jfDeIzq {
  0%   { opacity: 0; translate: -70% 0; rotate: -4deg; }
  65%  { opacity: 1; translate: 5% 0;    rotate: 1deg; }
  100% { opacity: 1; translate: 0 0;     rotate: 0deg; }
}
@keyframes jfDeDer {
  0%   { opacity: 0; translate: 70% 0;  rotate: 4deg; }
  65%  { opacity: 1; translate: -5% 0;  rotate: -1deg; }
  100% { opacity: 1; translate: 0 0;    rotate: 0deg; }
}
/* sube desde abajo, se pasa y asienta (los botones oro) */
@keyframes jfSube {
  0%   { opacity: 0; translate: 0 45%; scale: .82; }
  65%  { opacity: 1; translate: 0 -6%; scale: 1.05; }
  100% { opacity: 1; translate: 0 0;   scale: 1; }
}
/* aparece de la nada con rebote */
@keyframes jfPop {
  0%   { opacity: 0; scale: .2; }
  60%  { opacity: 1; scale: 1.18; }
  82%  { scale: .95; }
  100% { opacity: 1; scale: 1; }
}
/* el fondo se acerca (la cámara entra) */
@keyframes jfArte {
  from { opacity: 0; scale: 1.16; }
  to   { opacity: 1; scale: 1; }
}
/* temblor del dibujo en el impacto */
@keyframes jfTiembla {
  0%, 100% { translate: 0 0; }
  15% { translate: -7px 3px; } 30% { translate: 6px -4px; } 45% { translate: -5px 2px; }
  60% { translate: 4px -2px; } 80% { translate: -2px 1px; }
}
/* latido del botón de oro y de lo que invita a pulsar */
@keyframes jfLatido { 0%, 100% { scale: 1; } 50% { scale: 1.045; } }
/* halo que late (va en un ::before/::after con su box-shadow estático) */
@keyframes jfHalo { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }
/* el sello que se estampa */
@keyframes jfSello {
  0%   { opacity: 0; scale: 2.6; rotate: -16deg; }
  55%  { opacity: 1; scale: .88; rotate: -9deg; }
  75%  { scale: 1.06; }
  100% { opacity: 1; scale: 1;   rotate: -10deg; }
}
/* «no»: sacudida lateral fuerte */
@keyframes jfNo {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  18% { translate: -11px 0; rotate: -1.5deg; } 36% { translate: 10px 0; rotate: 1.2deg; }
  54% { translate: -7px 0; rotate: -.8deg; }   72% { translate: 5px 0; } 88% { translate: -2px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .jf-fogonazo, .jf-vuelo, .jf-estalla { display: none !important; }
}