/* ==========================================================================
   Animaciones: discretas, con propósito y respetuosas con "reducir movimiento"
   ========================================================================== */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.5; } 40% { transform: translateY(-5px); opacity: 1; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes float-slow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes celebrate { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes flip-in { from { transform: rotateY(90deg); } to { transform: rotateY(0); } }
@keyframes draw { from { stroke-dashoffset: var(--len, 1000); } to { stroke-dashoffset: 0; } }

.view-enter { animation: rise var(--dur-3) var(--ease) both; }
.stagger > * { animation: rise var(--dur-3) var(--ease) both; }
.stagger > *:nth-child(2) { animation-delay: 40ms; }
.stagger > *:nth-child(3) { animation-delay: 80ms; }
.stagger > *:nth-child(4) { animation-delay: 120ms; }
.stagger > *:nth-child(5) { animation-delay: 160ms; }
.stagger > *:nth-child(6) { animation-delay: 200ms; }
.stagger > *:nth-child(n + 7) { animation-delay: 240ms; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.pulse { animation: pulse-ring 1.8s infinite; }
.celebrate { animation: celebrate 600ms var(--ease-spring) both; }
.shake { animation: shake 420ms var(--ease); }

/* ==========================================================================
   Microinteracciones de Space Note: breves, suaves y sin bloquear la interacción.
   Solo usan transform/opacity (baratas para la GPU). Con «reducir movimiento» se desactivan (ver reglas al final).
   ========================================================================== */
@keyframes select-pop { 0% { transform: scale(0.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes sparkle-pop { 0% { opacity: 0; transform: scale(0.4) rotate(-20deg); } 55% { opacity: 1; transform: scale(1.18) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes glow-in { from { box-shadow: 0 0 0 0 transparent; } to { box-shadow: var(--glow, none); } }

/* Botones: elevación suave al pasar y pulsación visible */
.btn { transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 10px 22px -10px rgba(76, 175, 80, 0.65); }
.icon-btn { transition: transform var(--dur-1) var(--ease), background-color var(--dur-2) var(--ease); }
.icon-btn:hover:not(:disabled) { transform: scale(1.06); }
.icon-btn:active:not(:disabled) { transform: scale(0.94); }

/* Selección: pequeño «pop» al elegir opciones */
.kind-opt input:checked + span, .answer-opt:has(input:checked) { animation: select-pop 240ms var(--ease-spring); }
.segmented button { transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.chip, .tab { transition: transform var(--dur-1) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.chip:hover { transform: translateY(-1px); }

/* Tarjetas y paneles: aparición gradual escalonada al abrir una sección */
.view-enter .grid > *, .view-enter .stat-grid > * { animation: rise var(--dur-3) var(--ease) both; }
.view-enter .grid > *:nth-child(2), .view-enter .stat-grid > *:nth-child(2) { animation-delay: 45ms; }
.view-enter .grid > *:nth-child(3), .view-enter .stat-grid > *:nth-child(3) { animation-delay: 90ms; }
.view-enter .grid > *:nth-child(4), .view-enter .stat-grid > *:nth-child(4) { animation-delay: 135ms; }
.view-enter .grid > *:nth-child(n + 5), .view-enter .stat-grid > *:nth-child(n + 5) { animation-delay: 170ms; }

/* Notas y logros */
.grade-chip { animation: pop-in 260ms var(--ease) both; }
.toast.success svg, .toast.xp svg { animation: sparkle-pop 520ms var(--ease-spring) both; }
.celebrate::after { content: '✦'; position: absolute; right: -6px; top: -8px; color: var(--accent); font-size: 18px; animation: sparkle-pop 600ms var(--ease-spring) both; pointer-events: none; }

/* Logo: la mascota saluda al pasar el cursor (el parpadeo y el brillo van dentro del propio SVG) */
.sidebar .brand:hover img, .auth-brand:hover img, .logo:hover img, .mobile-brand:hover img { animation: wiggle 600ms var(--ease); }

/* Navegación: el elemento activo aparece con un brillo discreto (solo visible en el tema noche) */
.nav-link[aria-current='page'] { animation: glow-in 320ms var(--ease) both; }

/* Carga: puntos de «escribiendo» y esqueletos coherentes con la identidad */
.typing span { background: var(--brand); }
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; }

/* Error reintentable en el chat */
.bubble-error { background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--ink); }
.bubble-error strong { color: var(--danger); }
/* Preferencia del sistema o del usuario para reducir el movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}
:root[data-motion='reduce'] *, :root[data-motion='reduce'] *::before, :root[data-motion='reduce'] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
:root[data-motion='reduce'] .reveal { opacity: 1; transform: none; }