/** * IBK Motion Engine — Initial States for Animation Classes * * These rules set the BEFORE state of each animation so that elements are * invisible (or transformed) before GSAP takes over. GSAP handles the * animated transition; CSS handles the hidden starting position. * * JavaScript adds `.ibk-ready` to once GSAP has initialised. * Rules are scoped to `.ibk-ready` to prevent FOUC during load. */ /* ── Shared initial hidden state ─────────────────────────────────────────── */ .ibk-ready .fade-up, .ibk-ready .fade-down, .ibk-ready .fade-left, .ibk-ready .fade-right, .ibk-ready .scale-up, .ibk-ready .scale-down, .ibk-ready .zoom-in, .ibk-ready .zoom-out, .ibk-ready .rotate-in, .ibk-ready .rotate-out, .ibk-ready .blur-in, .ibk-ready .reveal, .ibk-ready .slide-up, .ibk-ready .slide-down, .ibk-ready .slide-left, .ibk-ready .slide-right, .ibk-ready .flip, .ibk-ready .skew { visibility: hidden; } /* Stagger containers show; children hide. */ .ibk-ready .stagger > * { visibility: hidden; } /* ── Specific pre-animation transforms ───────────────────────────────────── */ .ibk-ready .fade-up { transform: translateY( var(--ibk-distance-y, 40px) ); opacity: 0; } .ibk-ready .fade-down { transform: translateY( calc(var(--ibk-distance-y, 40px) * -1) ); opacity: 0; } .ibk-ready .fade-left { transform: translateX( var(--ibk-distance-x, 40px) ); opacity: 0; } .ibk-ready .fade-right { transform: translateX( calc(var(--ibk-distance-x, 40px) * -1) ); opacity: 0; } .ibk-ready .scale-up { transform: scale( 0.8 ); opacity: 0; } .ibk-ready .scale-down { transform: scale( 1.2 ); opacity: 0; } .ibk-ready .zoom-in { transform: scale( var(--ibk-scale, 0.95) ); opacity: 0; } .ibk-ready .zoom-out { transform: scale( 1.05 ); opacity: 0; } .ibk-ready .rotate-in { transform: rotate( -10deg ); opacity: 0; } .ibk-ready .rotate-out { transform: rotate( 10deg ); opacity: 0; } .ibk-ready .blur-in { filter: blur( 12px ); opacity: 0; } .ibk-ready .flip { transform: perspective(800px) rotateX(90deg); opacity: 0; } .ibk-ready .skew { transform: skewY( 6deg ); opacity: 0; } .ibk-ready .slide-up { transform: translateY( 100% ); } .ibk-ready .slide-down { transform: translateY( -100% ); } .ibk-ready .slide-left { transform: translateX( 100% ); } .ibk-ready .slide-right { transform: translateX( -100% ); } /* ── Reveal (clip-path curtain) ──────────────────────────────────────────── */ .ibk-ready .reveal { clip-path: inset( 100% 0 0 0 ); opacity: 1; } /* ── Parallax ────────────────────────────────────────────────────────────── */ .parallax, .parallax-10, .parallax-20, .parallax-40, .parallax-80 { will-change: transform; } /* ── Pin helpers ─────────────────────────────────────────────────────────── */ .pin-parent { overflow: hidden; } /* ── Horizontal scroll ───────────────────────────────────────────────────── */ .horizontal-scroll { overflow: hidden; } .horizontal-scroll__track { display: flex; flex-wrap: nowrap; width: max-content; will-change: transform; } /* ── Marquee ─────────────────────────────────────────────────────────────── */ .marquee { overflow: hidden; white-space: nowrap; } .marquee__track { display: flex; width: max-content; } .marquee__content { display: flex; align-items: center; gap: 2rem; padding-right: 2rem; } /* ── Counter ─────────────────────────────────────────────────────────────── */ .counter { display: inline-block; font-variant-numeric: tabular-nums; } /* ── Float ───────────────────────────────────────────────────────────────── */ .float { will-change: transform; } /* ── Scroll indicator ────────────────────────────────────────────────────── */ .ibk-scroll-indicator { position: fixed; left: 0; width: 0%; z-index: 9999; pointer-events: none; transform-origin: left center; transition: none; } .ibk-scroll-indicator--top { top: 0; } .ibk-scroll-indicator--bottom { bottom: 0; top: auto; } /* ── Reduced motion overrides ────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .ibk-ready .fade-up, .ibk-ready .fade-down, .ibk-ready .fade-left, .ibk-ready .fade-right, .ibk-ready .scale-up, .ibk-ready .scale-down, .ibk-ready .zoom-in, .ibk-ready .zoom-out, .ibk-ready .rotate-in, .ibk-ready .rotate-out, .ibk-ready .blur-in, .ibk-ready .reveal, .ibk-ready .slide-up, .ibk-ready .slide-down, .ibk-ready .slide-left, .ibk-ready .slide-right, .ibk-ready .flip, .ibk-ready .skew, .ibk-ready .stagger > * { visibility: visible !important; transform: none !important; opacity: 1 !important; filter: none !important; clip-path: none !important; } .float { animation: none !important; } .parallax, .parallax-10, .parallax-20, .parallax-40, .parallax-80 { transform: none !important; } }