/* Template: home-page — solo lo específico del layout de portada.
 * Lo común va en style.css global; lo de cada componente en su styles.css. */

.pf-riojano-home {
  display: flex;
  flex-direction: column;
  gap: var(--pf-riojano-space-8);
  padding-bottom: var(--pf-riojano-space-8);
}

/* Scroll-reveal genérico: fade-in desde abajo cuando entra al viewport.
 * Activado vía `data-pf-riojano-reveal` + clase `is-visible` (JS). */
[data-pf-riojano-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
[data-pf-riojano-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-pf-riojano-reveal],
  [data-pf-riojano-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}