/* =========================================================================
   Daviana Piva — Biblioteca de animaciones (keyframes + utilidades)
   Movimiento premium, contenido. Todo respeta prefers-reduced-motion
   (guarda al final del archivo). Se apoya en los tokens de tema.css.
   ========================================================================= */

/* ----- Keyframes ------------------------------------------------------- */
@keyframes dp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dp-fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dp-fade-in-scale {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes dp-shimmer {
  from { background-position: -150% 0; }
  to   { background-position: 250% 0; }
}
@keyframes dp-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes dp-pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* ----- Utilidades de entrada ------------------------------------------ */
/* Entra el contenido al cargar / navegar */
.anim-in {
  animation: dp-fade-in-up var(--dur-slow) var(--ease-out) both;
}
.anim-fade {
  animation: dp-fade-in var(--dur) var(--ease) both;
}
.anim-scale {
  animation: dp-fade-in-scale var(--dur) var(--ease-out) both;
}

/* Cascada: los hijos directos entran escalonados.
   El delay incremental crea el efecto premium de "se va armando". */
.stagger > * {
  animation: dp-fade-in-up var(--dur) var(--ease-out) both;
}
.stagger > *:nth-child(1)  { animation-delay: 40ms; }
.stagger > *:nth-child(2)  { animation-delay: 80ms; }
.stagger > *:nth-child(3)  { animation-delay: 120ms; }
.stagger > *:nth-child(4)  { animation-delay: 160ms; }
.stagger > *:nth-child(5)  { animation-delay: 200ms; }
.stagger > *:nth-child(6)  { animation-delay: 240ms; }
.stagger > *:nth-child(7)  { animation-delay: 280ms; }
.stagger > *:nth-child(8)  { animation-delay: 320ms; }
.stagger > *:nth-child(9)  { animation-delay: 360ms; }
.stagger > *:nth-child(10) { animation-delay: 400ms; }
.stagger > *:nth-child(11) { animation-delay: 440ms; }
.stagger > *:nth-child(12) { animation-delay: 480ms; }

/* ----- Reveal on scroll (lo dispara animaciones.js) ------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Micro-interacción de icono ------------------------------------- */
.anim-pop { animation: dp-pop var(--dur) var(--ease); }

/* ----- Skeleton loaders (estado de carga de listados) ----------------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, .35) 40%,
    rgba(255, 255, 255, .6) 50%,
    rgba(255, 255, 255, .35) 60%,
    rgba(255, 255, 255, 0) 80%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: dp-shimmer 1.4s linear infinite;
}
/* Barra de texto simulada dentro de un skeleton */
.skeleton-line {
  display: block;
  height: .8rem;
  border-radius: 999px;
}
/* Celda de tabla que aloja un skeleton: sin línea divisoria dura */
.tabla-d tbody tr.skeleton-row td { border-bottom-color: var(--border-soft); }

/* ----- Pulso de atención (badges/alertas) ----------------------------- */
.anim-attention { animation: dp-pulse-soft 2.4s var(--ease) infinite; }

/* =========================================================================
   Accesibilidad: respetar la preferencia de movimiento reducido.
   Se desactiva el movimiento, se conserva el diseño y la legibilidad.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}