/* ════════════════════════════════════════════════════════
   SHARED SCROLL-REVEAL SYSTEM — sabres-events.co.il
   One base animation system for the whole site. Pairs with
   /assets/js/reveal.js (the IntersectionObserver engine) and
   a tiny synchronous inline snippet in each page's <head>
   (see reveal.js header comment for the exact snippet and why
   it must be inline).

   Usage (write these directly on elements in the HTML):
     class="reveal-up"     fade + rise from below (default, most common)
     class="reveal-fade"   fade only, no movement
     class="reveal-left"   fade + enter from the left
     class="reveal-right"  fade + enter from the right
     class="reveal-scale"  fade + gentle scale-in

   Stagger (cards, grids, lists): wrap the container with
   data-reveal-group and an optional data-reveal-step="0.08"
   (seconds). Only DESCENDANTS (any depth) that already carry one
   of the reveal-* classes above are staggered, in document order
   — nothing is animated automatically just for being inside the
   group, and nothing is added to elements that aren't explicitly
   marked. If a marked descendant sits inside a NESTED
   data-reveal-group, that inner group staggers it instead — a
   descendant is always staggered by its nearest enclosing group,
   never by more than one.

   Optional data-reveal-cycle="N": repeats the stagger every N
   items (delay = (index % N) * step) instead of growing without
   bound — useful for long lists (8-10+ items) where a continuous
   stagger would make the last items wait too long. Omit it for
   the default continuous stagger.

   Gating (html.reveal-ready): elements are fully visible
   (opacity:1) by default — this is the unconditional fallback.
   They are only hidden pending reveal while html.reveal-ready
   is present. That class is added synchronously, before first
   paint, by a tiny inline snippet (not by this stylesheet and
   not by reveal.js) — see reveal.js for the full explanation
   of why, and for the failure-safety timer that removes
   reveal-ready again if reveal.js never manages to load or
   initialize. Net effect: content is either hidden from its
   very first paint (no flash), or never hidden at all — it is
   never visible-then-hidden.

   Settle: once an element's entrance transition has finished,
   reveal.js removes its reveal-* class, so the rules below stop
   applying and the element's own transition/hover styles take
   over again (see "Settle" in reveal.js for why).
   ════════════════════════════════════════════════════════ */

.reveal-up,.reveal-fade,.reveal-left,.reveal-right,.reveal-scale{opacity:1;transform:none;}

.reveal-ready .reveal-up{opacity:0;transform:translateY(28px);transition:opacity 0.65s cubic-bezier(0.16,1,0.3,1),transform 0.65s cubic-bezier(0.16,1,0.3,1);}
.reveal-ready .reveal-fade{opacity:0;transition:opacity 0.6s ease;}
.reveal-ready .reveal-left{opacity:0;transform:translateX(-28px);transition:opacity 0.65s cubic-bezier(0.16,1,0.3,1),transform 0.65s cubic-bezier(0.16,1,0.3,1);}
.reveal-ready .reveal-right{opacity:0;transform:translateX(28px);transition:opacity 0.65s cubic-bezier(0.16,1,0.3,1),transform 0.65s cubic-bezier(0.16,1,0.3,1);}
.reveal-ready .reveal-scale{opacity:0;transform:scale(0.94);transition:opacity 0.55s cubic-bezier(0.16,1,0.3,1),transform 0.55s cubic-bezier(0.34,1.2,0.64,1);}

.reveal-ready .reveal-up.visible,
.reveal-ready .reveal-fade.visible,
.reveal-ready .reveal-left.visible,
.reveal-ready .reveal-right.visible,
.reveal-ready .reveal-scale.visible{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  .reveal-up,.reveal-fade,.reveal-left,.reveal-right,.reveal-scale{opacity:1!important;transform:none!important;transition:none!important;}
}
