/* === Tokens === */

:root {
  --anim-rise: 12px;
  --anim-dur: 600ms;
  --anim-slow: 1200ms;    /* imágenes */
  --anim-ease: ease-out;
  --anim-step: 40ms;      /* escalonado de listas: chips, créditos, grid */
  --anim-step-lg: 120ms;  /* escalonado de bloques: cards, secciones */
}


/* === Keyframes === */

/* Trazo de los logos: el reposo es el logo dibujado */
@keyframes strokeDraw {
  from { stroke-dashoffset: var(--stroke-length, 1000); }
  to { stroke-dashoffset: 0; }
}

/* Copia de strokeDraw: con otro nombre, el trazo vuelve a correr en el hover */
@keyframes strokeDrawHover {
  from { stroke-dashoffset: var(--stroke-length, 1000); }
  to { stroke-dashoffset: 0; }
}

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

@keyframes riseIn {
  from { opacity: 0; transform: translateY(var(--anim-rise)); }
  to { opacity: 1; transform: none; }
}

@keyframes settleIn {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: none; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(calc(var(--anim-rise) * -1.6)); }
  to { opacity: 1; transform: none; }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(calc(var(--anim-rise) * 1.6)); }
  to { opacity: 1; transform: none; }
}

@keyframes drawRule {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}


/* === Reveal al hacer scroll === */

/* main.js pone .reveal--armed y luego .is-revealed; sin JS no se esconde nada */

[data-reveal].reveal--armed {
  opacity: 0;
}

[data-reveal].reveal--armed.is-revealed {
  opacity: 1;
}

/* Las entradas usan backwards: con forwards, el estado final anularía el scale del hover */


/* === Transiciones entre páginas === */

@view-transition {
  navigation: auto;
}

::view-transition-group(logo) {
  animation-duration: 520ms;
}

/* Sin esto el logo se estira al pasar del hero, ancho, a la tira de 1em del nav */
::view-transition-old(logo),
::view-transition-new(logo) {
  height: 100%;
  object-fit: contain;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
}


/* === Menos movimiento === */

/* Solo animation-*: las transiciones que mueven se quitan en la hoja de cada página */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }

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

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}