/* ============================================================ KAFFARA MOTION SYSTEM — GLOBAL CSS Transforms + opacity only. GPU-composited. FOUC-guarded. The .kf-js class is added to by JS the instant it runs, so a JS failure can never leave content invisible. ============================================================ */ html.kf-js .kf-reveal, html.kf-js .kf-card, html.kf-js .kf-section-reveal { opacity: 0; } html.kf-js .kf-reveal, html.kf-js .kf-card { will-change: transform, opacity; } /* Initial offsets (resting "before" state) */ html.kf-js .kf-fade-up { transform: translate3d(0, 32px, 0); } html.kf-js .kf-fade-left { transform: translate3d(-40px, 0, 0); } html.kf-js .kf-fade-right { transform: translate3d(40px, 0, 0); } html.kf-js .kf-fade-scale { transform: scale(0.96); } html.kf-js .kf-card { transform: translate3d(0, 36px, 0) scale(0.985); } /* IMAGE REVEAL — wrapper clips, inner image zooms to rest */ .kf-img-reveal { overflow: hidden; position: relative; } .kf-img-reveal img, .kf-img-reveal .elementor-widget-container img { display: block; width: 100%; will-change: transform; } html.kf-js .kf-img-reveal img { transform: scale(1.12); } /* HOVER ZOOM (desktop pointer only) */ @media (hover: hover) and (pointer: fine) { .kf-img-zoom { overflow: hidden; } .kf-img-zoom img, .kf-img-zoom .elementor-widget-container img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .kf-img-zoom:hover img, .kf-img-zoom:hover .elementor-widget-container img { transform: scale(1.06); } } /* BUTTON — hover lift (CSS only, universal) */ .kf-btn-lift, .kf-btn-lift .elementor-button { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } @media (hover: hover) and (pointer: fine) { .kf-btn-lift:hover, .kf-btn-lift:hover .elementor-button { transform: translateY(-3px); box-shadow: 0 14px 30px -12px rgba(0,0,0,0.35); } } /* MAGNETIC button */ .kf-btn-magnetic { display: inline-block; will-change: transform; } .kf-btn-magnetic .elementor-button-content-wrapper { pointer-events: none; } /* HERO lines */ .kf-hero .kf-line-mask { overflow: hidden; display: block; } .kf-hero .kf-line { display: block; will-change: transform; } html.kf-js .kf-hero .kf-line { transform: translate3d(0, 110%, 0); } /* TEXT REVEAL (non-hero headings) */ .kf-text-reveal .kf-line-mask { overflow: hidden; display: block; } .kf-text-reveal .kf-line { display: block; will-change: transform; } html.kf-js .kf-text-reveal .kf-line { transform: translate3d(0, 105%, 0); } /* PRELOADER */ #kf-preloader { position: fixed; inset: 0; z-index: 99999; background: var(--kf-preloader-bg, #0f0f0f); display: flex; align-items: center; justify-content: center; } #kf-preloader .kf-pre-logo { opacity: 0; max-width: 160px; height: auto; } html.kf-loaded #kf-preloader { pointer-events: none; } /* NAV link underline grow */ @media (hover: hover) and (pointer: fine) { .elementor-nav-menu .elementor-item { position: relative; } .elementor-nav-menu .elementor-item::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .elementor-nav-menu .elementor-item:hover::after { transform: scaleX(1); transform-origin: left; } } /* Icon micro-shift on hover */ @media (hover: hover) and (pointer: fine) { .kf-icon-hover svg, .kf-icon-hover i { transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); } .kf-icon-hover:hover svg, .kf-icon-hover:hover i { transform: translateX(4px); } } /* ============================================================ REDUCED MOTION — show everything, kill continuous fx ============================================================ */ @media (prefers-reduced-motion: reduce) { html.kf-js .kf-reveal, html.kf-js .kf-card, html.kf-js .kf-section-reveal, html.kf-js .kf-fade-up, html.kf-js .kf-fade-left, html.kf-js .kf-fade-right, html.kf-js .kf-fade-scale, html.kf-js .kf-hero .kf-line, html.kf-js .kf-text-reveal .kf-line, html.kf-js .kf-img-reveal img { opacity: 1 !important; transform: none !important; } #kf-preloader { display: none !important; } }