/* Reveal-on-scroll: estado inicial oculto, revela una sola vez.
   reveal.js agrega .is-visible vía IntersectionObserver.

   Usa la propiedad `translate` (no `transform`) a propósito: así el reveal
   no compite en la cascada con los transform de hover de componentes como
   .card (bug detectado en QA de F0). */
.reveal {
  opacity: 0;
  translate: 0 16px;
  transition: opacity var(--duration-ambient) var(--ease-standard),
              translate var(--duration-ambient) var(--ease-standard);
  transition-delay: calc(var(--reveal-index, 0) * 80ms);
}

.reveal.is-visible {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }
}

/* Entrada de página (noir): cada pantalla monta con un fadeUp suave.
   base.css ya anula toda animación bajo prefers-reduced-motion. */
@keyframes fadeUp {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: none; }
}

main {
  animation: fadeUp var(--duration-ambient) var(--ease-standard);
}