/* Oliva scroll-reveal motion.
 *
 * Section items fade and slide in as they enter the viewport. Direction comes
 * from the item's position in its row: alternating left/right creates the
 * "swipe" feel. Everything is driven by the `oliva-reveal-in` class that the
 * observer adds, so if JS is disabled the `no-js` fallback below simply shows
 * the content instead of leaving the page blank.
 */

html.oliva-motion .oliva-reveal {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--oliva-reveal-delay, 0ms);
}
html.oliva-motion .oliva-reveal.oliva-from-left  { transform: translate3d(-46px, 0, 0); }
html.oliva-motion .oliva-reveal.oliva-from-right { transform: translate3d(46px, 0, 0); }
html.oliva-motion .oliva-reveal.oliva-from-bottom { transform: translate3d(0, 46px, 0); }
html.oliva-motion .oliva-reveal.oliva-from-zoom  { transform: scale(0.94); }

html.oliva-motion .oliva-reveal.oliva-reveal-in {
  opacity: 1;
  transform: none;
}

/* Escape hatch: force a single item visible regardless of observer state. Kept
   as a hook for debugging and for print styles below. */
html.oliva-motion .oliva-reveal.oliva-reveal-force { opacity: 1; transform: none; }

@media print {
  html.oliva-motion .oliva-reveal { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.oliva-motion .oliva-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}