/* ============================================================
FITBOARD — SITE-WIDE MOTION & TYPE EFFECTS LIBRARY
Opt-in via the fx-* classes below. Purely additive — link this
after fitboard-tokens.css on any page and use these classes;
nothing here is wired into a page until you apply the classes.
Requires js/effects.js for reveal-on-scroll, count-up, magnetic
buttons, and progress rails (marquee + gradient text are CSS-only).
============================================================ */
/* Bricolage Grotesque must be linked on the page (see index.html's Google
Fonts ) — this only sets which face to use once it's loaded. */
.fx-display {
font-family: 'Bricolage Grotesque', var(--font), system-ui, sans-serif;
font-weight: 500;
}
/* ---------- scroll reveal (needs js/effects.js) ----------
Visible by default so content never gets stuck invisible if the
script fails to load — js/effects.js arms the hidden starting
state itself (via .fx-armed on ) once it's actually running. */
.fx-reveal { opacity: 1; }
.fx-armed .fx-reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.fx-reveal.fx-in { opacity: 1; transform: translateY(0); }
/* ---------- kinetic word-mask reveal ----------
Markup: word
Repeat per word, incrementing --d for stagger. Needs js/effects.js
only if you want it to (re)play on scroll-into-view; otherwise it
plays once on page load. */
.fx-wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.fx-wm .fx-wi {
display: inline-block;
font-family: 'Bricolage Grotesque', var(--font), system-ui, sans-serif;
transform: translateY(112%);
animation: fx-word-up 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: calc(var(--d, 0) * 55ms + 160ms);
}
@keyframes fx-word-up { to { transform: translateY(0); } }
.fx-fade-in {
opacity: 0;
animation: fx-rise 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fx-rise {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- gradient-clip accent text (terracotta family only) ---------- */
.fx-grad-text {
background: linear-gradient(100deg, var(--terra-600) 10%, var(--terra-300) 45%, var(--terra-600) 85%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.fx-num, .fx-ghost {
font-family: 'Bricolage Grotesque', var(--font), system-ui, sans-serif;
font-weight: 600;
background: linear-gradient(160deg, var(--terra-600) 0%, var(--terra-300) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---------- ambient glow + grain ----------
Markup: a positioned ancestor (position:relative;overflow:clip) holding
*/
.fx-atmo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fx-atmo .fx-orb { position: absolute; border-radius: 50%; filter: blur(64px); }
.fx-atmo .fx-orb-a {
width: 480px; height: 480px; left: -160px; top: -220px;
background: radial-gradient(circle at 35% 35%, var(--terra-500) 0%, rgba(194, 101, 42, 0) 70%);
opacity: 0.3;
animation: fx-drift-a 16s ease-in-out infinite alternate;
}
.fx-atmo .fx-orb-b {
width: 380px; height: 380px; right: -120px; top: 40px;
background: radial-gradient(circle at 40% 40%, var(--terra-300) 0%, rgba(238, 143, 88, 0) 70%);
opacity: 0.28;
animation: fx-drift-b 20s ease-in-out infinite alternate;
}
.fx-atmo.on-dark .fx-orb-a { opacity: 0.18; }
.fx-atmo.on-dark .fx-orb-b { opacity: 0.14; }
@keyframes fx-drift-a { from { transform: translate(0, 0); } to { transform: translate(50px, 40px); } }
@keyframes fx-drift-b { from { transform: translate(0, 0); } to { transform: translate(-40px, -30px); } }
.fx-grain {
position: absolute; inset: 0; pointer-events: none; z-index: 0;
opacity: 0.05; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- marquee ticker (CSS-only, no JS needed) ----------
Markup:
...items...
...same items again...