/* ============================================ ANIMATIONS — Detailing Studio 2026 GSAP-driven + CSS transitions/micro-interactions ============================================ */ /* ---- REVEAL SYSTEM ---- */ /* IMPORTANT: Only hide elements when JS is confirmed loaded. Without .has-js on , everything is visible by default. */ .has-js [data-reveal] { opacity: 0; transform: translateY(30px); } .has-js [data-reveal="left"] { transform: translateX(-40px); } .has-js [data-reveal="right"] { transform: translateX(40px); } .has-js [data-reveal="scale"] { transform: scale(0.95); } /* Reduced motion — show everything immediately */ @media (prefers-reduced-motion: reduce) { .has-js [data-reveal] { opacity: 1 !important; transform: none !important; } } /* ---- HERO ANIMATIONS ---- */ .hero__title-line { display: block; overflow: hidden; } .has-js .hero__title-word { display: inline-block; transform: translateY(100%); opacity: 0; } .hero__title-word.is-revealed { transform: translateY(0); opacity: 1; } /* ---- STAGGER CHILDREN ---- */ .has-js [data-stagger] > * { opacity: 0; transform: translateY(20px); } /* ---- SPLIT TEXT ---- */ .split-word { display: inline-block; overflow: hidden; } .split-word__inner { display: inline-block; transform: translateY(100%); } /* ---- LINK UNDERLINE ANIMATION ---- */ .link-anim { position: relative; display: inline-block; } .link-anim::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background: var(--c-accent); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-normal) var(--ease-out); } .link-anim:hover::after { transform: scaleX(1); transform-origin: left; } /* ---- IMAGE REVEAL ---- */ .img-reveal { position: relative; overflow: hidden; } .img-reveal::after { content: ''; position: absolute; inset: 0; background: var(--c-accent); transform-origin: right; } .img-reveal.is-revealed::after { animation: imgReveal 0.8s var(--ease-out) forwards; } @keyframes imgReveal { 0% { transform: scaleX(1); transform-origin: right; } 50% { transform: scaleX(1); transform-origin: left; } 100% { transform: scaleX(0); transform-origin: left; } } /* ---- COUNTER / NUMBER ANIMATION ---- */ .counter-num { font-variant-numeric: tabular-nums; } /* ---- MARQUEE ---- */ .marquee { overflow: hidden; white-space: nowrap; position: relative; } .marquee__track { display: inline-flex; animation: marquee 30s linear infinite; } .marquee__item { display: inline-flex; align-items: center; gap: var(--sp-xl); padding-right: var(--sp-xl); font-family: var(--ff-heading); font-size: var(--fs-h1); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: var(--ls-tight); color: var(--c-charcoal); -webkit-text-stroke: 1px var(--c-steel); } .marquee__item .dot { width: 12px; height: 12px; background: var(--c-accent); border-radius: 50%; flex-shrink: 0; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } /* ---- CARD HOVER GLOW ---- */ .glow-hover { position: relative; } .glow-hover::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; opacity: 0; background: radial-gradient( 300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--c-accent-glow), transparent 60% ); transition: opacity var(--dur-normal) var(--ease-out); pointer-events: none; z-index: -1; } .glow-hover:hover::after { opacity: 1; } /* ---- CURSOR FOLLOWER ---- */ .cursor-follower { position: fixed; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--c-accent); pointer-events: none; z-index: var(--z-cursor); opacity: 0; transition: opacity var(--dur-normal) var(--ease-out); mix-blend-mode: difference; } .cursor-follower.is-visible { opacity: 1; } .cursor-follower.is-hover { width: 50px; height: 50px; border-color: var(--c-accent); background: var(--c-accent-glow); } @media (pointer: coarse) { .cursor-follower { display: none !important; } } @media (prefers-reduced-motion: reduce) { .cursor-follower { display: none !important; } } /* ---- SHIMMER LOADING PLACEHOLDER ---- */ .shimmer { background: linear-gradient( 90deg, var(--c-charcoal) 25%, var(--c-steel) 50%, var(--c-charcoal) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ---- PAGE TRANSITION (optional) ---- */ .page-transition { position: fixed; inset: 0; z-index: 10000; background: var(--c-accent); transform: scaleY(0); transform-origin: bottom; }