/*
* Scroll Reveal Animations
* Lightweight, attribute-driven reveal-on-scroll system.
*
* Usage (markup):
* ...
* ...
*
* Available variants:
* fade, fade-up, fade-down, fade-left, fade-right, zoom-in, zoom-out
*
* The start state only applies under html.js-anim (set in the ), so
* content stays fully visible if JS is disabled or fails to load.
* The JS (assets/js/animations.js) adds the ".is-visible" class once the
* element scrolls into view.
*/
.js-anim [data-anim] {
opacity: 0;
/* Longer duration + gentle "soft landing" easing for a smoother, more
premium feel. transform & opacity only -> GPU-accelerated. */
transition:
opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
transition-delay: var(--anim-delay, 0ms);
will-change: opacity, transform;
backface-visibility: hidden;
}
/* Reveal state (added by JS) */
.js-anim [data-anim].is-visible {
opacity: 1;
transform: none;
}
/* Directional / scale start positions.
Smaller travel distances feel smoother and less jumpy than large jumps. */
.js-anim [data-anim="fade-up"] {
transform: translate3d(0, calc(28 * var(--vw)), 0);
}
.js-anim [data-anim="fade-down"] {
transform: translate3d(0, calc(-28 * var(--vw)), 0);
}
.js-anim [data-anim="fade-left"] {
/* fades in while moving left (enters from the right) */
transform: translate3d(calc(36 * var(--vw)), 0, 0);
}
.js-anim [data-anim="fade-right"] {
/* fades in while moving right (enters from the left) */
transform: translate3d(calc(-36 * var(--vw)), 0, 0);
}
.js-anim [data-anim="zoom-in"] {
transform: scale(0.94);
}
.js-anim [data-anim="zoom-out"] {
transform: scale(1.05);
}
.js-anim [data-anim="fade"] {
transform: none;
}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.js-anim [data-anim] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}