/* ==========================================================================
   EonLifeX Design System — Movimiento
   --------------------------------------------------------------------------
   Las 51 animaciones del catalogo del Brand OS, extraidas del prototipo
   design_handoff_eonlifex_design_system/EonLifeX Design System.dc.html

   POR QUE TODOS LLEVAN PREFIJO eon-
   ---------------------------------
   Los nombres de @keyframes son GLOBALES en CSS: no respetan selectores ni
   capas. El repo ya define shimmer, blink, fadeIn, zoomIn y shake en otras
   hojas; publicar los nombres del prototipo tal cual los habria pisado -- o
   habria sido pisado por ellos -- segun el orden de carga, rompiendo
   animaciones que hoy funcionan.

   Por eso aqui todo se llama eon-<nombre>. Cero colisiones, y el CSS legacy
   sigue intacto.

   Depende de eon_ds_tokens.css para --eds-dur-* y --eds-ease-*.
   ========================================================================== */

/* ==========================================================================
   1 · LA HOJA (8)
   El isotipo como pieza de movimiento: carga, progreso, exito y transicion.
   La longitud del contorno es 1140 (ver --eds-hoja-length).
   ========================================================================== */

@keyframes eon-hojaDraw {
  from { stroke-dashoffset: 1140; }
  to { stroke-dashoffset: 0; }
}

@keyframes eon-hojaDrawLoop {
  0% { stroke-dashoffset: 1140; }
  45% { stroke-dashoffset: 0; }
  55% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1140; }
}

@keyframes eon-hojaFillIn {
  0%, 42% { opacity: 0; transform: scale(0.94); }
  70% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes eon-hojaBreath {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.05) rotate(2.5deg); }
}

@keyframes eon-hojaSpin { to { transform: rotate(360deg); } }

@keyframes eon-hojaGlow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 6px 20px currentColor); }
}

@keyframes eon-hojaSpark {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

@keyframes eon-leafWipe {
  from { -webkit-mask-size: 0% auto; mask-size: 0% auto; }
  to { -webkit-mask-size: 460% auto; mask-size: 460% auto; }
}

/* ==========================================================================
   2 · ENTRADAS Y SALIDAS (12)
   ========================================================================== */

@keyframes eon-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes eon-fadeOut { to { opacity: 0; } }

@keyframes eon-riseUp {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes eon-sinkDown {
  from { transform: translateY(-16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes eon-slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes eon-slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes eon-slideInUp {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes eon-sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes eon-zoomIn {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes eon-zoomOut {
  from { transform: scale(1.35); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes eon-flipX {
  0% { transform: perspective(400px) rotateX(-92deg); opacity: 0; }
  100% { transform: perspective(400px) rotateX(0); opacity: 1; }
}

@keyframes eon-toastIn {
  0% { transform: translateY(18px) scale(0.96); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ==========================================================================
   3 · ENFASIS (10)
   ========================================================================== */

@keyframes eon-pulseScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

@keyframes eon-heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.16); }
  28% { transform: scale(1); }
  42% { transform: scale(1.12); }
  56% { transform: scale(1); }
}

@keyframes eon-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-9deg); }
  75% { transform: rotate(9deg); }
}

@keyframes eon-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

@keyframes eon-tada {
  0%, 100% { transform: scale(1) rotate(0); }
  20% { transform: scale(0.92) rotate(-4deg); }
  45% { transform: scale(1.12) rotate(4deg); }
  70% { transform: scale(1.06) rotate(-3deg); }
}

@keyframes eon-jelly {
  0%, 100% { transform: scale(1, 1); }
  30% { transform: scale(1.2, 0.82); }
  55% { transform: scale(0.86, 1.16); }
  78% { transform: scale(1.06, 0.95); }
}

@keyframes eon-bounceSoft {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-16px); }
  70% { transform: translateY(-5px); }
}

@keyframes eon-swing {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-13deg); }
  60% { transform: rotate(9deg); }
}

@keyframes eon-ringOut {
  0% { transform: scale(0.55); opacity: 0.8; }
  100% { transform: scale(1.85); opacity: 0; }
}

@keyframes eon-popIn {
  0% { transform: scale(0.3) rotate(-18deg); opacity: 0; }
  68% { transform: scale(1.1) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}

/* ==========================================================================
   4 · CONTINUAS Y DE ESTADO (10)
   ========================================================================== */

@keyframes eon-shimmer {
  from { background-position: -200% 0; }
  to { background-position: 200% 0; }
}

@keyframes eon-indeterminate {
  0% { transform: translateX(-100%) scaleX(0.4); }
  100% { transform: translateX(260%) scaleX(0.4); }
}

@keyframes eon-sweepX {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@keyframes eon-barGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes eon-gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes eon-rotateSlow { to { transform: rotate(360deg); } }
@keyframes eon-rotateSlowRev { to { transform: rotate(-360deg); } }

@keyframes eon-floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes eon-glowPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

@keyframes eon-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes eon-dotStep {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-7px); opacity: 1; }
}

/* ==========================================================================
   5 · AUXILIARES DEL PROTOTIPO
   Genealogia, graficas y transicion entre pantallas.
   ========================================================================== */

@keyframes eon-orbit { to { transform: rotate(360deg); } }

@keyframes eon-nodePulse {
  0%, 100% { r: 3; opacity: 0.55; }
  50% { r: 4.6; opacity: 1; }
}

@keyframes eon-drawLine { to { stroke-dashoffset: 0; } }

@keyframes eon-drawBadge {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes eon-borderRun { to { stroke-dashoffset: -220; } }

@keyframes eon-ripple {
  0% { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(2.6); opacity: 0; }
}

@keyframes eon-typing { from { width: 0; } to { width: 100%; } }

@keyframes eon-reveal {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes eon-screenOut {
  0% { transform: scale(1); filter: blur(0); opacity: 1; }
  100% { transform: scale(0.92); filter: blur(3px); opacity: 0.35; }
}

@keyframes eon-screenIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   6 · UTILIDADES
   Aplican una animacion sin escribir CSS. Solo dentro de .eon-ds.
   ========================================================================== */

.eon-ds [class*="eon-anim-"] { animation-fill-mode: both; }

.eon-ds .eds-anim-fade-in { animation: eon-fadeIn var(--eds-dur-2) var(--eds-ease-2); }
.eon-ds .eds-anim-rise { animation: eon-riseUp var(--eds-dur-2) var(--eds-ease-2); }
.eon-ds .eds-anim-sink { animation: eon-sinkDown var(--eds-dur-2) var(--eds-ease-2); }
.eon-ds .eds-anim-zoom-in { animation: eon-zoomIn var(--eds-dur-2) var(--eds-ease-2); }
.eon-ds .eds-anim-slide-up { animation: eon-slideInUp var(--eds-dur-2) var(--eds-ease-2); }
.eon-ds .eds-anim-toast { animation: eon-toastIn 340ms var(--eds-ease-2); }
.eon-ds .eds-anim-pop { animation: eon-popIn var(--eds-dur-2) var(--eds-ease-bounce); }

.eon-ds .eds-anim-shake { animation: eon-shake 420ms var(--eds-ease-1); }
.eon-ds .eds-anim-heartbeat { animation: eon-heartbeat 1.3s var(--eds-ease-1) infinite; }
.eon-ds .eds-anim-float { animation: eon-floaty 4.5s var(--eds-ease-1) infinite; }
.eon-ds .eds-anim-breath { animation: eon-hojaBreath 5s var(--eds-ease-1) infinite; }
.eon-ds .eds-anim-spin-slow { animation: eon-rotateSlow 26s linear infinite; }

/* Escalonado para listas y rejillas: --eds-i lo pone el template. */
.eon-ds .eds-anim-stagger { animation-delay: calc(var(--eds-i, 0) * 60ms); }

/* --------------------------------------------------------------------------
   Esqueleto de carga
   -------------------------------------------------------------------------- */

.eon-ds .eds-skeleton {
  background: linear-gradient(
    90deg,
    var(--panel) 25%,
    color-mix(in oklab, var(--ink) 8%, var(--panel)) 37%,
    var(--panel) 63%
  );
  background-size: 400% 100%;
  animation: eon-shimmer 1.6s ease-in-out infinite;
  border-radius: calc(var(--r) / 3);
}

@supports not (color: color-mix(in oklab, red 50%, blue)) {
  .eon-ds .eds-skeleton {
    background: linear-gradient(90deg, var(--panel) 25%, rgba(128, 128, 128, 0.18) 37%, var(--panel) 63%);
    background-size: 400% 100%;
  }
}

/* --------------------------------------------------------------------------
   Barra indeterminada
   -------------------------------------------------------------------------- */

.eon-ds .eds-progress-indeterminate {
  position: relative;
  overflow: hidden;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
}

.eon-ds .eds-progress-indeterminate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grad-portal);
  animation: eon-indeterminate 1.4s var(--eds-ease-1) infinite;
}

/* --------------------------------------------------------------------------
   Tres puntos de "escribiendo"
   -------------------------------------------------------------------------- */

.eon-ds .eds-dots { display: inline-flex; gap: 5px; align-items: flex-end; }

.eon-ds .eds-dots > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: eon-dotStep 1.3s var(--eds-ease-1) infinite;
}

.eon-ds .eds-dots > span:nth-child(2) { animation-delay: 0.16s; }
.eon-ds .eds-dots > span:nth-child(3) { animation-delay: 0.32s; }

/* ==========================================================================
   7 · APARICION AL HACER SCROLL
   --------------------------------------------------------------------------
   Dos avisos del handoff, respetados aqui:

   1. Ambos extremos del animation-range deben usar EL MISMO nombre de rango.
      Mezclar "entry" con "cover" deja los bloques altos a media opacidad.
   2. Es progressive enhancement: Firefox todavia no lo soporta. El estado
      final tiene que ser el visible por defecto, de modo que sin soporte el
      contenido simplemente se ve.
   ========================================================================== */

.eon-ds [data-eon-reveal] { opacity: 1; }

@supports (animation-timeline: view()) {
  @media not (prefers-reduced-motion: reduce) {
    .eon-ds [data-eon-reveal] {
      animation: eon-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }
}

/* ==========================================================================
   8 · MOVIMIENTO REDUCIDO
   Obligatorio: hay personas con trastornos vestibulares para quienes esto
   no es una preferencia estetica. Se apaga todo y se deja el estado final.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .eon-ds [class*="eon-anim-"],
  .eon-ds .eds-skeleton,
  .eon-ds .eds-dots > span,
  .eon-ds .eds-progress-indeterminate::after,
  .eon-ds [data-eon-reveal] {
    animation: none !important;
    transition-duration: 1ms !important;
  }

  .eon-ds .eds-skeleton { background: var(--panel); }
  .eon-ds [data-eon-reveal] { opacity: 1; transform: none; }
}