/* ═════════ Movimiento ═════════
 * Todo es transform u opacity (no obliga a redibujar). Con «reducir movimiento»
 * queda en fundidos (ver el final) y la pantalla se entiende igual.
 *
 * Entrada de pantalla: el router pone .view-enter en el contenedor y lo quita al
 * primer toque (o a los 4 s). Mientras está, lo que aparece entra escalonado, aunque
 * llegue tarde de la red; después, volver a pintar una lista no la hace brincar.
 * .anim-list y .anim-swap (lo de adentro de una pestaña) hacen lo mismo en algo que se
 * vuelve a pintar porque la persona eligió otra cosa.
 */
@keyframes m-rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }
@keyframes m-bounce { 0% { transform: none; } 30% { transform: translateY(-5px) scale(1.12); } 55% { transform: translateY(1px) scale(0.96); } 100% { transform: translateY(-1px); } }
@keyframes m-bar { from { transform: scaleX(0); } }
@keyframes m-shine { 0%, 70% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes m-glow { 50% { opacity: 0.55; transform: scale(1.06); } }
@keyframes m-drift { 50% { transform: translate3d(-3%, 2%, 0) scale(1.06); } }
@keyframes m-wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-10deg) scale(1.1); } 60% { transform: rotate(8deg) scale(1.05); } }

/* Escalonado: hasta 12 piezas, 45 ms entre una y otra */
.view-enter :is(.stack, .stack-lg, .list, .grid, .stats, .rt-carousel, .chips) > *,
.anim-list > *, .anim-swap > * {
  animation: m-rise 560ms var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
:is(.stack, .stack-lg, .list, .grid, .stats, .rt-carousel, .chips, .anim-list, .anim-swap) > :nth-child(2) { --i: 1; }
:is(.stack, .stack-lg, .list, .grid, .stats, .rt-carousel, .chips, .anim-list, .anim-swap) > :nth-child(3) { --i: 2; }
:is(.stack, .stack-lg, .list, .grid, .stats, .rt-carousel, .chips, .anim-list, .anim-swap) > :nth-child(4) { --i: 3; }
:is(.stack, .stack-lg, .list, .grid, .stats, .rt-carousel, .chips, .anim-list, .anim-swap) > :nth-child(5) { --i: 4; }
:is(.stack, .stack-lg, .list, .grid, .stats, .rt-carousel, .chips, .anim-list, .anim-swap) > :nth-child(6) { --i: 5; }
:is(.stack, .stack-lg, .list, .grid, .stats, .rt-carousel, .chips, .anim-list, .anim-swap) > :nth-child(7) { --i: 6; }
:is(.stack, .stack-lg, .list, .grid, .stats, .rt-carousel, .chips, .anim-list, .anim-swap) > :nth-child(8) { --i: 7; }
:is(.stack, .stack-lg, .list, .grid, .stats, .rt-carousel, .chips, .anim-list, .anim-swap) > :nth-child(9) { --i: 8; }
:is(.stack, .stack-lg, .list, .grid, .stats, .rt-carousel, .chips, .anim-list, .anim-swap) > :nth-child(10) { --i: 9; }
:is(.stack, .stack-lg, .list, .grid, .stats, .rt-carousel, .chips, .anim-list, .anim-swap) > :nth-child(n+11) { --i: 10; }

/* Barras que se llenan al aparecer */
.view-enter .mbar-track > span, .anim-list .mbar-track > span, .view-enter .seat-bar > span {
  transform-origin: left center;
  animation: m-bar 900ms var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * 60ms + 150ms);
}
.mbars > :nth-child(2) { --i: 1; } .mbars > :nth-child(3) { --i: 2; } .mbars > :nth-child(4) { --i: 3; }
.mbars > :nth-child(5) { --i: 4; } .mbars > :nth-child(6) { --i: 5; }

/* Íconos con brillo: brincan al entrar y se mueven al tocarlos */
.view-enter .li-icon, .view-enter .empty-icon { animation: m-pop 620ms var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
@media (hover: hover) {
  .list-item:hover .li-icon { animation: m-wiggle 520ms var(--ease-spring); }
  .card-link:hover, a.card:hover { transform: translateY(-2px); }
}
.list-item, a.card, .card-link, .class-card, .next-class { transition: transform 300ms var(--ease-spring), background-color 200ms, border-color 200ms; }
.list-item:active, a.card:active, .class-card:active, .next-class:active { transform: scale(0.98); }
@media (hover: hover) { .class-card:hover .type-tile, .next-class:hover .type-tile { animation: m-wiggle 520ms var(--ease-spring); } }
.view-enter .type-tile-lg, .anim-list .type-tile-lg, .view-enter .type-tile-xl { animation: m-pop 620ms var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 45ms + 120ms); }
.empty-icon { will-change: transform; }

/* Botón principal: un destello de luz que cruza cada tantos segundos */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ""; position: absolute; inset: -2px auto -2px 0; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.55), transparent);
  animation: m-shine 4.8s ease-in-out infinite;
}
.btn-primary:disabled::after, .btn-primary[aria-busy="true"]::after { animation: none; opacity: 0; }
.btn:hover svg { transform: scale(1.1); }
.btn svg { transition: transform 300ms var(--ease-spring); }

/* Pestañas y opciones: la elegida brinca con brillo */
.segmented input:checked + span {
  border-color: transparent; color: var(--on-flame);
  background: var(--gloss), var(--flame-grad);
  box-shadow: var(--gloss-edge), 0 8px 18px -10px var(--flame);
  animation: m-pop 420ms var(--ease-spring);
}
.segmented span { transition: transform 300ms var(--ease-spring), background-color 200ms; }
.segmented label:active span { transform: scale(0.95); }
.chip.is-on, .type-chip.is-on, .mchip-pick[aria-pressed="true"], .day-chip[aria-selected="true"] { animation: m-pop 420ms var(--ease-spring); }

/* Barra de abajo: el ícono de la pestaña elegida rebota */
.m-nav a[aria-current="page"] svg { animation: m-bounce 560ms var(--ease-spring) both; }
.m-nav a.nav-main .nav-orb { transition: transform 300ms var(--ease-spring); }
.m-nav a.nav-main:active .nav-orb { transform: scale(0.92); }
.m-nav a.nav-main[aria-current="page"] .nav-orb::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--flame) 50%, transparent);
  animation: m-glow 2.6s ease-in-out infinite;
}

/* Números grandes que cuentan (core/motion.js) y el resplandor del fondo que respira */
.stat-num, [data-count] { font-variant-numeric: tabular-nums; }
body::before { animation: m-drift 18s ease-in-out infinite; will-change: transform; }

/* ───────── Sabor extra (lo mismo que la página de Nozua) ───────── */

/* Títulos: cada palabra entra de borroso a nítido, una tras otra (core/motion.js las separa) */
@keyframes word-in { from { opacity: 0; filter: blur(8px); transform: translateY(0.35em); } }
h1 .w { display: inline-block; }
.view-enter h1 .w { animation: word-in 820ms var(--ease-out-expo) both; animation-delay: calc(var(--wi, 0) * 70ms + 60ms); }

/* Lo que está debajo del borde espera y sube al llegar con el scroll */
.rv {
  animation: none !important;
  opacity: 0; transform: translateY(30px) scale(0.98); filter: blur(4px);
  transition: opacity 850ms var(--ease-out-expo), transform 850ms var(--ease-out-expo), filter 850ms var(--ease-out-expo);
  transition-delay: var(--rv, 0ms);
}
.rv.rv-in { opacity: 1; transform: none; filter: none; }
/* Lo de adentro (barras, medalla, segmentos) espera a que se vea para moverse */
.rv:not(.rv-in) * { animation-play-state: paused !important; }

/* Íconos que se dibujan solos al entrar */
@keyframes m-draw { from { stroke-dashoffset: 1; } }
:is(.view-enter, .rv-in, .anim-swap) :is(.li-icon, .empty-icon, .pill-icon, .sum-icon, .streak-flame, .today-orb) svg :is(path, circle, rect, line, polyline, polygon) {
  stroke-dasharray: 1; animation: m-draw 1.2s var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * 45ms + 260ms);
}

/* Fotos de ejercicios: se destapan de abajo hacia arriba mientras se acomodan */
@keyframes img-wipe { from { clip-path: inset(100% 0 0 0); transform: scale(1.18); } }
:is(.view-enter, .anim-list, .anim-swap, .rv-in) .ex-photo { animation: img-wipe 900ms var(--ease-out-expo) both; animation-delay: calc(var(--i, 0) * 45ms + 140ms); }

/* Barras doradas que se llenan al aparecer (membresía, clases, días, maestría) */
:is(.view-enter, .rv-in) :is(.days-bar, .credits-bar) > span { transform-origin: left center; animation: m-bar 1.1s var(--ease-out-expo) 300ms both; }

/* Cosas que flotan: suben y bajan despacio */
@keyframes m-float { 50% { transform: translateY(-5px); } }
.member-status .li-icon, .empty-icon { animation: m-float 4.5s ease-in-out 1.2s infinite; }
.view-enter .member-status .li-icon, .view-enter .empty-icon { animation: m-pop 620ms var(--ease-spring) both, m-float 4.5s ease-in-out 1.2s infinite; }

/* Con «reducir movimiento» (Windows: Accesibilidad › Efectos visuales › Efectos de
 * animación) nada se desliza, rebota ni gira: las mismas entradas se vuelven un
 * fundido suave, con el mismo escalonado. Se redefinen los @keyframes aquí, al final
 * de la última hoja, así cada componente sigue igual y solo cambia cómo entra.
 * Lo que se mueve en el lugar (destellos, halos, el fondo que respira) se apaga. */
@media (prefers-reduced-motion: reduce) {
  @keyframes m-rise { from { opacity: 0; } }
  @keyframes m-pop { from { opacity: 0; } }
  @keyframes m-bar { from { opacity: 0; } }
  @keyframes rise-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes bm-in { from { opacity: 0; } }
  @keyframes viz-grow { from { opacity: 0; } }
  @keyframes live-in { from { opacity: 0; } }
  @keyframes pop-in { from { opacity: 0; } }
  @keyframes m-bounce { to { opacity: 1; } }
  @keyframes m-wiggle { to { opacity: 1; } }
  @keyframes bm-pick { to { opacity: 1; } }
  @keyframes nudge { to { opacity: 1; } }
  @keyframes word-in { from { opacity: 0; } }
  @keyframes img-wipe { from { opacity: 0; } }
  @keyframes m-draw { to { stroke-dashoffset: 0; } }
  @keyframes m-float { to { transform: none; } }
  .rv { transform: none; filter: none; transition-duration: 400ms; }
  .view-enter :is(.stack, .stack-lg, .list, .grid, .stats, .rt-carousel, .chips) > *, .anim-list > *, .anim-swap > *, .enter {
    animation-duration: 320ms; animation-delay: calc(var(--i, 0) * 30ms);
  }
  body::before, .nav-orb::after { animation: none !important; }
  .btn-primary::after, .rank-bar > span::after { display: none; }
  .list-item:active, a.card:active, .class-card:active, .next-class:active, .m-nav a.nav-main:active .nav-orb, .m-nav a:active svg { transform: none; }
  .card-link:hover, a.card:hover { transform: none; }
}