/* ============================================================ DudeFactory — motion layer (GSAP/Lenis enhancements) Only active when animations.js adds .gsap-on to . ============================================================ */ /* GSAP owns entrances now — neutralize the base reveal system */ .gsap-on { scroll-behavior: auto; } .gsap-on .reveal { opacity: 1; transform: none; transition: none; } .gsap-on .mock { transition: none; } .gsap-on .marquee-track { will-change: transform; } /* Scroll progress bar */ .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-hot)); transform: scaleX(0); transform-origin: 0 50%; z-index: 200; pointer-events: none; } /* Word-mask splitting */ .w { display: inline-block; overflow: hidden; vertical-align: top; } .wi { display: inline-block; will-change: transform; } /* Nav hide-on-scroll */ .gsap-on .nav { transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.45s var(--ease); } .gsap-on .nav.nav-hidden { transform: translateY(-100%); } /* CTA glow follows the mouse */ .gsap-on .cta-bg { background: radial-gradient(ellipse 55% 60% at var(--mx, 50%) var(--my, 108%), rgba(255, 194, 51, 0.16), transparent 70%); } /* Custom cursor (desktop only) */ @media (pointer: fine) { .gsap-on body, .gsap-on a, .gsap-on button, .gsap-on summary { cursor: none; } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; } .cursor-dot { z-index: 301; width: 8px; height: 8px; background: var(--accent); } .cursor-ring { z-index: 300; width: 38px; height: 38px; border: 1.5px solid rgba(255, 194, 51, 0.55); transition: width 0.25s var(--ease), height 0.25s var(--ease), border-color 0.25s, background 0.25s; } .cursor-ring.is-hover { width: 58px; height: 58px; border-color: var(--accent); background: rgba(255, 194, 51, 0.09); } } @media (prefers-reduced-motion: reduce) { .scroll-progress, .cursor-dot, .cursor-ring { display: none; } } /* ---------- cross-document view transitions ---------- Pages morph into each other on navigation (Chromium/Safari; other browsers simply navigate normally). */ @view-transition { navigation: auto; } .nav { view-transition-name: site-nav; } ::view-transition-old(root) { animation: vt-out 0.3s ease both; } ::view-transition-new(root) { animation: vt-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(22px); } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-image-pair(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }