/* ========================================================
   ICONOS DEL MENÚ - estilo «Ilustrado pegatina» (rosco y bingo)
   Cada icono es un SVG 100 × 100 con su animación en bucle.
   - En reposo solo «respira» muy suavemente (.ico-idle).
   - La animación completa suena al pasar el ratón, al enfocar
     con el teclado o al pulsar la tarjeta.
   - Con «reducir movimiento» no se mueve nada.
   Solo se animan transform y opacity.
   ======================================================== */

svg.ico { display: block; width: 100%; height: 100%; overflow: visible; }

/* Reposo: un balanceo de 1,5 px, desfasado entre tarjetas */
.ico .ico-idle {
  animation: ico-idle 5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.7s);
}
@keyframes ico-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

/* ---------- rosco · Pasapalabra musical ---------- */
.r-hl { transform-box: view-box; transform-origin: 50px 50px; animation: r-hl 6s steps(12) infinite; }
.r-hl path { transform-box: fill-box; transform-origin: 50% 50%; animation: r-letter 6s steps(12) infinite; }
.r-note { transform-box: fill-box; transform-origin: 45% 100%; animation: r-note 1s ease-in-out infinite; }
@keyframes r-hl { to { transform: rotate(360deg); } }
@keyframes r-letter { to { transform: rotate(-360deg); } }
@keyframes r-note { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }

/* ---------- bingo · Bingo musical ---------- */
.bg-ball { transform-box: fill-box; transform-origin: 50% 100%; animation: bg-ball 3s var(--ease-out, ease-out) infinite; }
.bg-sh { transform-box: fill-box; transform-origin: center; animation: bg-sh 3s var(--ease-out, ease-out) infinite; }
.bg-chip { transform-box: fill-box; transform-origin: center; animation: bg-chip 3s var(--ease-out, ease-out) infinite; }
@keyframes bg-ball {
  0%, 30%, 46%, 100% { transform: none; }
  15% { transform: translateY(-7px) rotate(-6deg); }
  38% { transform: translateY(-2.5px) rotate(3deg); }
}
@keyframes bg-sh { 0%, 30%, 46%, 100% { transform: none; opacity: 1; } 15% { transform: scaleX(.75); opacity: .5; } }
@keyframes bg-chip {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0); opacity: 0; }
  62% { transform: scale(1.3); opacity: 1; }
  72% { transform: scale(1); }
}

/* El resto de iconos (estilo «recortes de partituras») tienen sus
   animaciones en iconos-papel.css. */

/* ---------- Cuándo se anima ----------
   En reposo, todo menos el balanceo queda en pausa; al pasar el ratón,
   enfocar o pulsar la tarjeta, la animación sigue desde donde estaba. */
svg.ico :not(.ico-idle) { animation-play-state: var(--ico-play, paused); }
.game-card:focus-visible, a.game-card:active { --ico-play: running; }
@media (hover: hover) and (pointer: fine) {
  a.game-card:hover { --ico-play: running; }
}

/* Reducir movimiento: iconos quietos */
@media (prefers-reduced-motion: reduce) {
  svg.ico, svg.ico * { animation: none !important; }
}