/* ==========================================================================
   Animaciones · sistema propio
   Todo se anima con transform y opacity para no forzar reflow.
   Las duraciones vienen de tokens.css, que ya las anula bajo
   prefers-reduced-motion; aquí solo se apagan los desplazamientos.
   ========================================================================== */

/* --- Revelado al entrar en pantalla --------------------------------------
   js/animations.js marca los elementos con [data-reveal] y añade
   .esta-visible cuando cruzan el umbral. --i escalona a los hermanos. */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
  will-change: opacity, transform;
}

[data-reveal].esta-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Si no hay JavaScript, el contenido debe verse igual. */
.sin-js [data-reveal] { opacity: 1; transform: none; }

/* --- Entrada de vista ------------------------------------------------------
   Fallback para navegadores sin View Transitions API. */

@keyframes entrada-vista {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.course-main[data-transicion="entrando"] {
  animation: entrada-vista var(--dur-base) var(--ease-out) both;
}

/* Con View Transitions API el navegador hace el trabajo. */
@supports (view-transition-name: none) {
  ::view-transition-old(root) {
    animation: salida-vista var(--dur-fast) var(--ease-in-out) both;
  }
  ::view-transition-new(root) {
    animation: entrada-vista var(--dur-base) var(--ease-out) both;
  }
}

@keyframes salida-vista {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* --- Cuenta regresiva ------------------------------------------------------
   El valor cambia cada minuto; se marca con un pulso breve en vez de saltar. */

@keyframes latido-cuenta {
  0% { opacity: 0.45; transform: translateY(-3px); }
  100% { opacity: 1; transform: none; }
}

.countdown[data-actualizado="true"],
.locked-countdown strong[data-actualizado="true"] {
  animation: latido-cuenta var(--dur-base) var(--ease-out);
}

/* --- Avisos ---------------------------------------------------------------- */

@keyframes entrada-aviso {
  from { opacity: 0; transform: translateX(18px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes salida-aviso {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateX(18px) scale(0.97); }
}

.toast { animation: entrada-aviso var(--dur-base) var(--ease-out); }
.toast[data-saliendo="true"] { animation: salida-aviso var(--dur-fast) var(--ease-in-out) both; }

/* --- Diálogo --------------------------------------------------------------- */

@keyframes entrada-dialogo {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.dialog[open] { animation: entrada-dialogo var(--dur-base) var(--ease-out); }

/* Sacudida al fallar la contraseña. */
@keyframes sacudida {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

.dialog[data-error="true"] .dialog__body { animation: sacudida 380ms var(--ease-in-out); }

/* --- Menú ------------------------------------------------------------------ */

@keyframes entrada-menu {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.menu__panel:not([hidden]) {
  animation: entrada-menu var(--dur-fast) var(--ease-out);
  transform-origin: top right;
}

/* --- Barra de progreso indeterminada (generación de PDF) ------------------- */

@keyframes giro {
  to { transform: rotate(360deg); }
}

.btn[data-cargando="true"] .icon { animation: giro 900ms linear infinite; }
.btn[data-cargando="true"] { pointer-events: none; opacity: 0.75; }

/* --- Movimiento reducido ---------------------------------------------------
   Las duraciones ya son de 1 ms; aquí se eliminan los desplazamientos para
   que nada se mueva, ni siquiera durante ese instante. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal].esta-visible { opacity: 1; transform: none; }

  .session-card:hover,
  .tools-grid a:hover { transform: none; }
}