/* ------ BD-ANIMATIONS — INITIAL STATE ------ */
/*
FOUC prevention for the bd-animations scroll-reveal system (assets/js/bd-animations.js).
Elements that animate in start hidden so they don't flash before GSAP takes
over. Scoped to `.js` so that if JavaScript is disabled the content stays
fully visible (progressive enhancement).
REQUIRES: a `.js` class on the element, set as early as possible.
In Webflow, add this to the page/site head custom code, BEFORE the stylesheet:
LOAD ORDER (Webflow , only on pages that use animations):
1. ← inline, first
2. this stylesheet (bd-animations.css)
3. GSAP + ScrollTrigger + SplitText (Club GSAP CDN)
4. assets/js/bd-animations.js (self-inits on document.fonts.ready)
bd-animations.js self-initialises against document.body (no Barba required).
The `bd:intro-complete` / `studio:ready` hooks inside it are for coordinating a
loading-screen curtain — wire them to Stitchy's loading screen when that's built.
*/
.js [data-bd-animate],
.js [data-text-animate] {
opacity: 0;
}
/* Reduced-motion safety net: bd-animations.js sets opacity:1 under
prefers-reduced-motion, but if the GSAP CDN fails to load the reveals would
stay permanently invisible. Force opacity:1 in CSS under reduce so content
is never hidden when motion is suppressed. */
@media (prefers-reduced-motion: reduce) {
.js [data-bd-animate],
.js [data-text-animate] {
opacity: 1;
}
}
/* Standout reveal — scene 1 is revealed by the balls parting (stays visible).
Scene 2+ start hidden so they don't flash before homepage.js cross-fades them
in. Class-based (not data-attr) so the section rebuilds cleanly in Webflow. */
.js .standout-scene:not(:first-of-type) {
opacity: 0;
}
/* ------ HEADLINE-REVEAL — make spans transformable ------ */
/*
SplitText word/char spans inside [data-text-animate="headline-reveal"] must
be inline-block so the yPercent/xPercent/rotation animations apply. Inline
elements silently ignore CSS transforms.
.split-word and .split-char cover both animation modes (headlineMode in
bd-animations.js — set to "words" or "chars"). Both rules are always on
so flipping the mode requires no CSS change.
The .sticker-add and .sticker-swap classes are included because SplitText
treats pre-existing inline children as words — they end up in split.words
and ride along with the same rise/drift/tumble tween, so they need the
same display rule to render the transforms.
Scoped to [data-text-animate="headline-reveal"] so we don't change the layout
of any other SplitText animation (chars/words/lines/etc. animate opacity
only) or any sticker that might appear outside an animated headline.
*/
[data-text-animate="headline-reveal"] .split-word,
[data-text-animate="headline-reveal"] .split-char,
[data-text-animate="headline-reveal"] .sticker-add,
[data-text-animate="headline-reveal"] .sticker-swap {
display: inline-block;
}
/* Always show animated content when printing. */
@media print {
[data-bd-animate],
[data-text-animate],
[data-bd-leave],
.standout-scene {
opacity: 1 !important;
transform: none !important;
}
}