/* ============================================================
   Claudify Motion — the house reveal preset
   ------------------------------------------------------------
   ONE entrance for the whole store: a gentle fade + small rise,
   soft ease-out, with children staggered in order. Tune the four
   tokens below and every section using the preset updates at once.

   How to apply the preset to a section:
     <section class="section-name" data-cl-reveal>
       <h2 class="cl-reveal">Heading</h2>
       <p class="cl-reveal">Copy</p>
     </section>

   theme.js opts only below-viewport groups into the animation.
   Already reached content stays visible, including on restored scroll.
   No-JS and reduced-motion content remains visible.
   ============================================================ */
:root {
  --cl-reveal-duration: 1.0s;   /* was 1.8s — clearly faster but still a soft, graceful fade */
  --cl-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cl-reveal-rise: 24px;       /* was 28px — slightly tighter travel reads a touch quicker */
  --cl-reveal-stagger: 110ms;   /* was 200ms — quicker cascade without the slow drag */
}

/* Only groups below the viewport receive this hidden start state. */
.cl-anim .cl-reveal {
  opacity: 0;
  transform: translateY(var(--cl-reveal-rise));
  transition: opacity var(--cl-reveal-duration) var(--cl-reveal-ease),
              transform var(--cl-reveal-duration) var(--cl-reveal-ease);
  transition-delay: calc(var(--cl-i, 0) * var(--cl-reveal-stagger));
}

/* Revealed — once the section enters the viewport */
.cl-anim.is-in-view .cl-reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Accessibility: honour reduced-motion — content simply appears. */
@media (prefers-reduced-motion: reduce) {
  .cl-anim .cl-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}