/**
 * utilities.css — animación de aparición al hacer scroll y pequeños
 * ajustes puntuales que no ameritan su propio componente.
 */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* El tema navy en textos de párrafo dentro de una sección oscura necesita
   más contraste que el color de texto por defecto. */
.theme-navy p,
.section--navy p {
  color: var(--on-navy-soft);
}

.theme-navy h1,
.theme-navy h2,
.theme-navy h3,
.section--navy h1,
.section--navy h2,
.section--navy h3 {
  color: var(--white);
}

.theme-red p,
.section--red p {
  color: rgba(255, 255, 255, 0.88);
}

.theme-red h1,
.theme-red h2,
.theme-red h3,
.section--red h1,
.section--red h2,
.section--red h3 {
  color: var(--white);
}

.theme-yellow .eyebrow {
  color: var(--navy);
}

/* Botón outline sobre fondo navy/rojo: usar el outline claro. */
.theme-navy .btn--outline,
.section--navy .btn--outline,
.theme-red .btn--outline,
.section--red .btn--outline {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}

.theme-navy .btn--outline:hover,
.section--navy .btn--outline:hover,
.theme-red .btn--outline:hover,
.section--red .btn--outline:hover {
  background: var(--white);
  color: var(--navy);
}