/* =====================================================================
SITE-WIDE MOTION SYSTEM — matches jsw.in's animation pattern
Include on every page (after your main stylesheet):
Pair with js/site-animations.js (loaded near end of ,
after GSAP + ScrollTrigger + Lenis).
===================================================================== */
/* ---------------------------------------------------------------------
1. .anim — the JSW reveal-on-scroll class.
Put class="anim" on ANY element (heading, paragraph, card, image,
CTA button...). It starts hidden/offset and GSAP animates it to
opacity:1 / translate(0,0) the moment it scrolls into view —
exactly how jsw.in marks up its headings, paragraphs and cards.
No extra class needed for the "in view" state; GSAP drives it via
inline style, this CSS only sets the starting position.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
2. Hero / hero-style crossfade carousels (swiper-fade equivalent)
Works with Swiper's own swiper-fade effect class structure, or a
plain custom carousel using .hero__slide / .is-active.
--------------------------------------------------------------------- */
.hero {
overflow: hidden; /* keeps the zoomed slide from spilling past the banner edges */
}
.hero__slide,
.swiper-fade .swiper-slide {
transition: opacity .8s ease;
transform: scale(1);
}
.hero__slide.is-active,
.swiper-fade .swiper-slide-active {
animation: hero-zoom 5.5s ease-in-out infinite;
}
@keyframes hero-zoom {
0% { transform: scale(1); }
50% { transform: scale(1.08); }
100% { transform: scale(1); }
}
.anim {
opacity: 0;
transform: translateY(40px);
}
/* Elements meant to fade only (no rise) — add class="anim anim-fade" */
.anim-fade {
transform: none;
}
/* Elements that should scale in slightly instead of rising —
add class="anim anim-scale" (used for banner images/cards) */
.anim-scale {
transform: scale(0.94);
}
/* ---------------------------------------------------------------------
2. Hero / hero-style crossfade carousels (swiper-fade equivalent)
Works with Swiper's own swiper-fade effect class structure, or a
plain custom carousel using .hero__slide / .is-active.
--------------------------------------------------------------------- */
.hero__slide,
.swiper-fade .swiper-slide {
transition: opacity 1s ease-in-out;
}
/* ---------------------------------------------------------------------
3. Zoom-in image groups (cards, thumbnails, section photos)
Add class="zoom-in-group" to a wrapper containing an , or
"zoom-in" directly on an .
--------------------------------------------------------------------- */
.zoom-in,
.zoom-in-group img {
transform: scale(1.12);
opacity: 0;
filter: brightness(.9);
transition: transform 1.1s cubic-bezier(.16, .8, .24, 1),
opacity .9s ease-out,
filter 1.1s ease-out;
}
.zoom-in.in-view,
.zoom-in-group.in-view img {
transform: scale(1);
opacity: 1;
filter: brightness(1);
}
/* ---------------------------------------------------------------------
4. Counters — pair with
No visual state needed here; JS rewrites the text content as it
counts up. Kept for reference/extension (e.g. a subtle pulse class
you could add on completion).
--------------------------------------------------------------------- */
.counts, .counts1 { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
.anim, .zoom-in, .zoom-in-group img, .hero__slide {
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}