/* ============================================================================
   Explore.com.sa — smooth scrolling and section entrance on the home page
   (see explore-scroll.js)
   ========================================================================== */

/* smooth scrolling (Lenis): the page scrolls itself frame by frame, so the
   browser's own smooth scrolling must not animate it a second time */
html.lenis, html.lenis body { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto !important; }
html.lenis.lenis-smooth iframe { pointer-events: none; }
html.lenis.lenis-stopped { overflow: clip; }

/* A section below the fold waits faded and slightly lowered, then its blocks
   rise in one after another the first time it comes into view. The classes
   are only set by explore-scroll.js, which is off in the admin editor and
   under reduced motion, so content is never left hidden without it. */
html.xs-on .xs-wait > * {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}
html.xs-on .xs-wait.xs-in > * {
  animation: xs-rise .8s cubic-bezier(.22, 1, .36, 1) both;
}
html.xs-on .xs-wait.xs-in > :nth-child(2) { animation-delay: .07s; }
html.xs-on .xs-wait.xs-in > :nth-child(3) { animation-delay: .14s; }
html.xs-on .xs-wait.xs-in > :nth-child(n+4) { animation-delay: .21s; }
@keyframes xs-rise {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.xs-on .xs-wait > * { opacity: 1 !important; transform: none !important; animation: none !important; }
}