/* ══════════════════════════════════════════════════════════════════════════
   RoboRAVE — Capa de movimiento
   v2 · se carga DESPUÉS de styles.css (curvas y duraciones en sus tokens)

   El movimiento se reserva para lo que PASA: un equipo sube de lugar, cae un
   gol, se revela el podio. Nada late, flota ni rebota por decorar: en una
   jornada de 8 horas eso cansa la vista y gasta la batería de la tableta.
   Reglas: solo `transform` y `opacity`; todo se apaga con movimiento reducido;
   lo que late se pausa con la pantalla inactiva (.rr-idle).
   ══════════════════════════════════════════════════════════════════════════ */
:root { --dur-instant: 90ms; --dur-scene: 560ms }

/* ── Cambio de posición en la tabla ─────────────────────────────────────── */
@keyframes rrClimb { 0% { transform: translate3d(0, 14px, 0); opacity: .4 } 60% { transform: translate3d(0, -3px, 0); opacity: 1 } 100% { transform: none } }
@keyframes rrDrop { 0% { transform: translate3d(0, -14px, 0); opacity: .4 } 60% { transform: translate3d(0, 3px, 0); opacity: 1 } 100% { transform: none } }
.rr-climb { animation: rrClimb var(--dur-slow) var(--ease-spring) both }
.rr-drop { animation: rrDrop var(--dur-slow) var(--ease-standard) both }

/* Destello de un dato que acaba de cambiar (solo opacidad de un pseudo) */
@keyframes rrFlash { 0% { opacity: 0 } 18% { opacity: .45 } 100% { opacity: 0 } }
.rr-flash { position: relative }
.rr-flash::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--hazard); pointer-events: none; opacity: 0; animation: rrFlash 900ms var(--ease-exit) both }

/* Gol / punto: el número da un salto corto */
@keyframes rrScorePop { 0% { transform: scale(1) } 35% { transform: scale(1.22) } 100% { transform: scale(1) } }
.rr-pop { display: inline-block; animation: rrScorePop 520ms var(--ease-spring) both }
.bkt-done .bkt-sc-w { animation: rrScorePop 620ms var(--ease-spring) both }

/* Cambio de pantalla y capas */
@keyframes rrSceneIn { from { opacity: 0; transform: translate3d(0, 8px, 0) } to { opacity: 1; transform: none } }
.rr-scene { animation: rrSceneIn var(--dur-slow) var(--ease-enter) both }
@keyframes rrOverlayIn { from { opacity: 0 } to { opacity: 1 } }
.rr-overlay { animation: rrOverlayIn var(--dur-base) var(--ease-standard) both }
.rr-dialog { animation: rrDialogIn var(--dur-slow) var(--ease-enter) both }

/* Punto EN VIVO (variante usada en tarjetas) */
.rr-live-dot { animation: rrLivePulse 1.6s var(--ease-standard) infinite }

/* ── Contención de repintado en listas largas ───────────────────────────── */
.rr-list-item, .standing-row, .match-row, .rank-row, .sched-row { contain: layout style }
.rr-defer { content-visibility: auto; contain-intrinsic-size: auto 56px }

/* ══════════════════════════════════════════════════════════════════════════
   PROYECTOR — se ve desde 20 m en una laptop modesta por HDMI: nada de
   desenfoques ni sombras animadas a pantalla completa.
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes rrSlideIn { from { opacity: 0; transform: translate3d(0, 24px, 0) } to { opacity: 1; transform: none } }
.prj-slide { animation: rrSlideIn 620ms var(--ease-enter) both }
@keyframes rrRowIn { from { opacity: 0; transform: translate3d(-22px, 0, 0) } to { opacity: 1; transform: none } }
.prj-slide .lb-row { animation: rrRowIn 480ms var(--ease-enter) both }
.prj-slide .lb-row:nth-child(1) { animation-delay: 120ms } .prj-slide .lb-row:nth-child(2) { animation-delay: 170ms }
.prj-slide .lb-row:nth-child(3) { animation-delay: 220ms } .prj-slide .lb-row:nth-child(4) { animation-delay: 270ms }
.prj-slide .lb-row:nth-child(5) { animation-delay: 320ms } .prj-slide .lb-row:nth-child(6) { animation-delay: 370ms }
.prj-slide .lb-row:nth-child(7) { animation-delay: 420ms } .prj-slide .lb-row:nth-child(n+8) { animation-delay: 470ms }
@keyframes rrPictoIn { from { opacity: 0; transform: scale(.9) rotate(-6deg) } to { opacity: 1; transform: none } }
.prj-slide .picto-hero, .prj-slide .side-ic { animation: rrPictoIn 900ms var(--ease-enter) both }
.prj-progress.run { animation: rrProgress var(--prj-dwell, 12s) linear both }
@keyframes rrProgress { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* ══════════════════════════════════════════════════════════════════════════
   CEREMONIA — el momento que los equipos recordarán
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes rrSpotSweep {
  0% { opacity: 0; transform: translate3d(-60%, 0, 0) rotate(14deg) } 18% { opacity: .85 } 82% { opacity: .85 }
  100% { opacity: 0; transform: translate3d(60%, 0, 0) rotate(14deg) }
}
.rr-spotlight {
  position: absolute; inset: -20% -40%; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.08) 47%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.08) 53%, transparent 62%);
  animation: rrSpotSweep 1100ms var(--ease-standard) both;
}
.podium-layout { perspective: 1400px }
@keyframes rrPodiumRise {
  0% { opacity: 0; transform: translate3d(0, 90px, -220px) rotateX(28deg) scale(.86) } 45% { opacity: 1 }
  72% { transform: translate3d(0, -12px, 0) rotateX(-4deg) scale(1.04) } 88% { transform: translate3d(0, 3px, 0) rotateX(1deg) scale(.995) }
  100% { transform: none }
}
.podium-slot.revealed { animation: rrPodiumRise 1150ms var(--ease-spring) both; transform-style: preserve-3d }
.podium-slot.revealed.place-1 { animation-duration: 1400ms }
@keyframes rrMedalSpin { 0% { opacity: 0; transform: rotateY(-540deg) scale(.2) } 55% { opacity: 1 } 78% { transform: rotateY(18deg) scale(1.18) } 100% { transform: rotateY(0) scale(1) } }
.podium-slot.revealed .podium-medal { animation: rrMedalSpin 1200ms var(--ease-spring) 240ms both; transform-style: preserve-3d }
@keyframes rrDetailIn { from { opacity: 0; transform: translate3d(0, 12px, 0) } to { opacity: 1; transform: none } }
.podium-slot.revealed .podium-flag { animation: rrDetailIn 460ms var(--ease-enter) 620ms both }
.podium-slot.revealed .podium-team { animation: rrDetailIn 460ms var(--ease-enter) 720ms both }
.podium-slot.revealed .podium-inst { animation: rrDetailIn 460ms var(--ease-enter) 800ms both }
.podium-slot.revealed .podium-country { animation: rrDetailIn 460ms var(--ease-enter) 860ms both }
.podium-slot.revealed .podium-score { animation: rrDetailIn 520ms var(--ease-spring) 940ms both }
.podium-slot.revealed .podium-member:nth-child(1) { animation: rrDetailIn 400ms var(--ease-enter) 1040ms both }
.podium-slot.revealed .podium-member:nth-child(2) { animation: rrDetailIn 400ms var(--ease-enter) 1110ms both }
.podium-slot.revealed .podium-member:nth-child(3) { animation: rrDetailIn 400ms var(--ease-enter) 1180ms both }
.podium-slot.revealed .podium-member:nth-child(4) { animation: rrDetailIn 400ms var(--ease-enter) 1250ms both }
.podium-slot.revealed .podium-coach { animation: rrDetailIn 400ms var(--ease-enter) 1320ms both }
/* Halo del campeón: una sola respiración lenta, sin box-shadow animado */
.podium-slot.revealed.place-1 { position: relative }
.podium-slot.revealed.place-1::before {
  content: ""; position: absolute; inset: -18px; z-index: -1; border-radius: 22px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(226,178,58,.38), transparent 68%);
  animation: rrChampionHalo 3.2s var(--ease-standard) 900ms infinite;
}
@keyframes rrChampionHalo { 0%, 100% { opacity: .3 } 50% { opacity: .7 } }
@keyframes rrSuspense { 0%, 100% { opacity: .34 } 50% { opacity: .62 } }
.podium-slot.unrevealed .podium-unknown { animation: rrSuspense 1.4s var(--ease-standard) infinite; display: inline-block }

/* Cuenta atrás antes de coronar al campeón */
.rr-drumroll { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(6,5,7,.8); animation: rrOverlayIn 260ms var(--ease-standard) both; pointer-events: none }
.rr-drumroll-inner { text-align: center }
@keyframes rrCountPop { 0% { opacity: 0; transform: scale(2.1) } 30% { opacity: 1; transform: scale(.92) } 55% { transform: scale(1.04) } 80% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(.9) } }
.rr-drumroll-num { font-family: var(--font-display); font-stretch: 80%; font-size: clamp(120px, 20vw, 280px); font-weight: 900; line-height: 1; color: var(--gold); animation: rrCountPop 900ms var(--ease-standard) both }
.rr-drumroll-label { font-size: clamp(18px, 2.2vw, 32px); font-weight: 700; color: rgba(255,255,255,.82); margin-top: 14px }

/* Confeti y fuegos artificiales */
.confetti-container { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden }
.confetti-piece { position: absolute; top: -12vh; border-radius: 1px; will-change: transform, opacity; animation-name: rrConfettiFall; animation-timing-function: linear; animation-fill-mode: both }
@keyframes rrConfettiFall {
  0% { opacity: 0; transform: translate3d(0, -10vh, 0) rotate3d(1, 1, 0, 0deg) } 8% { opacity: 1 }
  100% { opacity: 0; transform: translate3d(var(--drift, 40px), 112vh, 0) rotate3d(1, 1, .4, var(--spin, 900deg)) }
}
.rr-firework { position: fixed; z-index: 54; pointer-events: none; width: 6px; height: 6px; border-radius: 50%; will-change: transform, opacity; animation: rrFireworkOut 1250ms var(--ease-exit) both }
@keyframes rrFireworkOut { 0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.5) } 70% { opacity: 1 } 100% { opacity: 0; transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0) scale(.25) } }

@keyframes rrTitleIn { 0% { opacity: 0; transform: translate3d(0, -20px, 0) } 100% { opacity: 1; transform: none } }
.ceremony-title { animation: rrTitleIn 800ms var(--ease-enter) both }
@keyframes rrIntroIcon { 0% { opacity: 0; transform: scale(.6) rotate(-12deg) } 100% { opacity: 1; transform: none } }
.ceremony-intro-icon { display: inline-block; animation: rrIntroIcon 1000ms var(--ease-enter) both }
.ceremony-intro-title { animation: rrDetailIn 620ms var(--ease-enter) 320ms both }
.ceremony-intro-cat { animation: rrDetailIn 620ms var(--ease-enter) 440ms both }
.ceremony-intro-text { animation: rrDetailIn 620ms var(--ease-enter) 560ms both }
@keyframes rrRevealBreath { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.04) } }
.ceremony-reveal.pulse { animation: rrRevealBreath 1.8s var(--ease-standard) infinite }

/* La ceremonia manda: no se pausa por inactividad (nadie toca la pantalla
   mientras se entregan las medallas). */
.rr-idle .ceremony-stage *, .rr-idle .ceremony-reveal { animation-play-state: running }

/* ── Ahorro de batería y movimiento reducido ───────────────────────────── */
.rr-idle .rr-live-dot, .rr-idle .live-dot { animation-play-state: paused }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
  .rr-flash::after { animation: rrFlash 600ms linear both !important; animation-duration: 600ms !important }
  .rr-live-dot, .live-dot { opacity: 1 !important }
}