/* ========================================================================== Arsh SEO — Motion Layer Add these class names in Elementor: Advanced > CSS Classes SAFETY: initial hidden states only apply when has .ax-js That class is added by an inline script ONLY when motion is allowed. If JS fails or reduced-motion is on, everything stays visible. ========================================================================== */ /* --- Reveal on scroll ----------------------------------------------------- */ html.ax-js .ax-reveal, html.ax-js .ax-reveal-left, html.ax-js .ax-reveal-right { opacity: 0; will-change: transform, opacity; } html.ax-js .ax-reveal { transform: translate3d(0, 24px, 0); } html.ax-js .ax-reveal-left { transform: translate3d(-36px, 0, 0); } html.ax-js .ax-reveal-right { transform: translate3d(36px, 0, 0); } /* --- Stagger children ----------------------------------------------------- */ html.ax-js .ax-stagger > * { opacity: 0; transform: translate3d(0, 22px, 0); will-change: transform, opacity; } /* --- 3D tilt -------------------------------------------------------------- */ .ax-tilt { transform-style: preserve-3d; transition: transform var(--ax-dur) var(--ax-ease), box-shadow var(--ax-dur) var(--ax-ease); transform: perspective(900px) rotateX(0deg) rotateY(0deg); } .ax-tilt > * { transform: translateZ(0); } .ax-tilt .ax-tilt-pop { transition: transform var(--ax-dur) var(--ax-ease); } .ax-tilt:hover .ax-tilt-pop { transform: translateZ(38px); } /* --- Lift on hover -------------------------------------------------------- */ .ax-lift { transition: transform var(--ax-dur) var(--ax-ease), box-shadow var(--ax-dur) var(--ax-ease); } .ax-lift:hover { transform: translate3d(0, -6px, 0); box-shadow: var(--ax-e3); } /* --- Cursor glow ---------------------------------------------------------- */ .ax-glow { position: relative; overflow: hidden; isolation: isolate; } .ax-glow::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity var(--ax-dur) var(--ax-ease); background: radial-gradient(240px circle at var(--ax-mx, 50%) var(--ax-my, 50%), rgba(255, 194, 75, 0.16), transparent 65%); } .ax-glow:hover::before { opacity: 1; } /* --- Magnetic button ------------------------------------------------------ */ .ax-magnetic { transition: transform var(--ax-dur) var(--ax-ease); will-change: transform; } /* --- Parallax depth ------------------------------------------------------- */ .ax-depth { perspective: 1200px; transform-style: preserve-3d; } .ax-depth [data-depth] { will-change: transform; } /* --- Marquee -------------------------------------------------------------- */ .ax-marquee { overflow: hidden; position: relative; width: 100%; } .ax-marquee > * { display: inline-flex; white-space: nowrap; animation: ax-marquee-scroll var(--ax-marquee-speed, 42s) linear infinite; } .ax-marquee:hover > * { animation-play-state: paused; } @keyframes ax-marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* --- Counter -------------------------------------------------------------- */ .ax-count { font-variant-numeric: tabular-nums; } /* --- Card flip (team) ----------------------------------------------------- */ .ax-flip { perspective: 1200px; } .ax-flip-inner { position: relative; transform-style: preserve-3d; transition: transform 620ms var(--ax-ease); } .ax-flip.is-flipped .ax-flip-inner { transform: rotateY(180deg); } .ax-flip-front, .ax-flip-back { backface-visibility: hidden; } .ax-flip-back { position: absolute; inset: 0; transform: rotateY(180deg); } /* --- Touch devices: no tilt, no magnetic ---------------------------------- */ @media (hover: none), (pointer: coarse) { .ax-tilt, .ax-magnetic { transform: none !important; } .ax-tilt:hover .ax-tilt-pop { transform: none; } .ax-glow::before { display: none; } } /* --- Reduced motion: everything off, everything visible -------------------- */ @media (prefers-reduced-motion: reduce) { html.ax-js .ax-reveal, html.ax-js .ax-reveal-left, html.ax-js .ax-reveal-right, html.ax-js .ax-stagger > * { opacity: 1 !important; transform: none !important; } .ax-tilt, .ax-lift, .ax-magnetic, .ax-flip-inner { transform: none !important; transition: none !important; } .ax-marquee > * { animation: none !important; } .ax-glow::before { display: none !important; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }