/* ═══════════════════════════════════════════════════════════════════
SCROLL ANIMATIONS — GSAP + ScrollTrigger
RESPONSIVE TRIGGER BREAKPOINTS
────────────────────────────────
The trigger % controls how far DOWN the viewport the element's
top edge must reach before the animation fires.
Low % (e.g. 50%) = fires EARLIER — element barely on screen
High % (e.g. 90%) = fires LATER — element well into view
SCREEN SIZE TIERS
──────────────────
BREAKPOINT_DESKTOP — ≥ 1440px (wide / large desktop)
BREAKPOINT_TABLET — ≥ 768px (tablet / small desktop)
mobile — < 768px
PER-ELEMENT OVERRIDE ATTRIBUTES
─────────────────────────────────
Add any combination of these to any animation element to override
the predefined default trigger for that screen size:
data-trigger-mobile="60%" overrides trigger on < 768px
data-trigger-tablet="75%" overrides trigger on ≥ 768px
data-trigger-desktop="90%" overrides trigger on ≥ 1440px
All three are optional — omit any you don't need and the
predefined default for that tier is used instead.
Works on all four animation attributes:
data-reveal-group
data-reveal-group-nested
data-slide-group
data-slide-group-nested
Examples:
…
…
HOW TO TWEAK:
Search for "🔧 TWEAK" comments throughout the file.
═══════════════════════════════════════════════════════════════════ */