/* ========================================================================== KNAMY — animations.css Pre-animation states, keyframes and the no-JS / no-GSAP / reduced-motion fallbacks. Progressive-enhancement contract: html → no class yet, nothing is hidden (works without JS) html.js → set synchronously in , reveal targets start hidden html.no-motion → set by animations.js when GSAP is unavailable or the visitor prefers reduced motion; everything snaps visible and the loops fall back to CSS keyframes ========================================================================== */ /* -------------------------------------------------------------------------- 1. Pre-animation states -------------------------------------------------------------------------- */ .js [data-reveal] { opacity: 0; will-change: opacity, transform; } .js [data-reveal="fade"] { transform: translateY(18px); } .js [data-reveal="up"] { transform: translateY(42px); } .js [data-reveal="card"] { transform: translateY(34px) scale(0.98); } .js [data-reveal="left"] { transform: translateX(-36px); } .js [data-reveal="right"] { transform: translateX(36px); } .js [data-reveal="scale"] { transform: scale(0.94); } /* Word-by-word headline reveal. The inner span is what GSAP moves; the outer span clips it, so the words rise out of an invisible line box. */ .js [data-reveal="words"] { opacity: 1; } .reveal-word { display: inline-block; overflow: hidden; vertical-align: top; } .reveal-word__inner { display: inline-block; will-change: transform; } .js [data-reveal="words"] .reveal-word__inner { transform: translateY(105%); } /* Counters hold at their start value until ScrollTrigger fires. */ .js [data-count] { font-variant-numeric: tabular-nums; } /* Once GSAP has taken over, `will-change` is no longer worth the memory. */ .is-revealed { will-change: auto; } /* -------------------------------------------------------------------------- 2. Ambient keyframes (always on — cheap, compositor-only) -------------------------------------------------------------------------- */ @keyframes knamy-glow-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-3%, 2%, 0) scale(1.08); } } @keyframes knamy-particles { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 -520px, 0 -420px, 0 -620px, 0 -480px, 0 -560px, 0 -380px; } } @keyframes knamy-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.75); } } @keyframes knamy-cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } .hero__glow { animation: knamy-glow-drift 18s ease-in-out infinite; } .hero__particles { animation: knamy-particles 60s linear infinite; } .response-badge__dot { animation: knamy-pulse 2.2s ease-in-out infinite; } .scroll-cue__line { animation: knamy-cue 2.6s ease-in-out infinite; } /* -------------------------------------------------------------------------- 3. Loop fallbacks — used when GSAP never arrives -------------------------------------------------------------------------- */ @keyframes knamy-marquee { from { transform: translate3d(0, 0, 0); } to { /* The track holds two identical copies, so -50% is one full cycle. */ transform: translate3d(-50%, 0, 0); } } @keyframes knamy-strip { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } } .no-gsap .marquee__track { animation: knamy-marquee 32s linear infinite; } .no-gsap .hero__strip-track { animation: knamy-strip 38s linear infinite; } /* -------------------------------------------------------------------------- 4. Hover micro-interactions -------------------------------------------------------------------------- */ /* Gold sheen that sweeps across a primary button on hover. */ .btn--gold { position: relative; overflow: hidden; isolation: isolate; } .btn--gold::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%); transform: translateX(-120%); transition: transform 0.7s var(--ease); } .btn--gold:hover::before, .btn--gold:focus-visible::before { transform: translateX(120%); } /* Service icons tilt toward the cursor's side of the card. */ .stack-card__icon .knamy-icon, .service-block__icon .knamy-icon { transition: transform var(--dur-slow) var(--ease); } .stack-card:hover .stack-card__icon .knamy-icon { transform: rotate(-6deg) scale(1.08); } .service-block:hover .service-block__icon .knamy-icon { transform: rotate(6deg) scale(1.1); } /* -------------------------------------------------------------------------- 5. Reduced motion / no GSAP — snap everything to its final state -------------------------------------------------------------------------- */ .no-motion [data-reveal], .no-motion [data-reveal="words"] .reveal-word__inner { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-reveal], [data-reveal="words"] .reveal-word__inner { opacity: 1 !important; transform: none !important; } .hero__glow, .hero__particles, .scroll-cue__line, .response-badge__dot, .marquee__track, .hero__strip-track { animation: none !important; } /* Sticky stacking is motion-free and still communicates the grouping, so it stays; only the GSAP scale/fade on top of it is dropped. */ .project-card:hover, .price-card:hover, .process__step:hover, .testimonial:hover, .social-list__link:hover { transform: none !important; } }