/* Movimiento editorial compartido. Requiere colors_and_type.css. */

/* El estado oculto sólo existe cuando reveal.js confirmó soporte y lo activó. */
.motion-ready [data-reveal].is-pending,
.motion-ready [data-stagger] > .is-pending {
  opacity: 0;
}

.motion-ready [data-reveal="headline"].is-pending {
  clip-path: inset(0 100% 0 0);
  transform: translateY(var(--space-4));
}

.motion-ready [data-reveal="rise"].is-pending,
.motion-ready [data-reveal="scroll-shift"].is-pending,
.motion-ready [data-stagger] > .is-pending {
  transform: translateY(var(--space-5));
}

.motion-ready [data-reveal="bar"].is-pending,
.motion-ready [data-stagger="bars"] > .is-pending {
  transform: scaleY(0);
  transform-origin: bottom;
}

.motion-ready [data-reveal].is-revealed,
.motion-ready [data-stagger] > .is-revealed {
  animation: reveal-rise var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms) both;
}

.motion-ready [data-reveal="headline"].is-revealed {
  animation-name: reveal-headline;
}

.motion-ready [data-reveal="bar"].is-revealed,
.motion-ready [data-stagger="bars"] > .is-revealed {
  animation-name: reveal-bar;
  transform-origin: bottom;
}

@keyframes reveal-headline {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateY(var(--space-4));
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(var(--space-5));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reveal-bar {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

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

  .motion-ready [data-reveal],
  .motion-ready [data-stagger] > * {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
}
