:root { --bg: #0A0A0A; --bg-soft: #111111; --text: #EDEDED; --text-dim: #8A8A8A; --accent: #CCFF00; --line: rgba(255, 255, 255, 0.1); } * { -webkit-font-smoothing: antialiased; box-sizing: border-box; margin: 0; padding: 0; } /* FIX: Ensured height is auto and overflow-y is enabled for perfect mouse scrolling */ html, body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden; overflow-y: auto; min-height: 100%; cursor: none; } @media (max-width: 768px) { html, body { cursor: auto; } .nav-links { display: none !important; } } ::selection { background: var(--accent); color: var(--bg); } .display-font { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; } .mono { font-family: 'JetBrains Mono', monospace; } /* Preloader */ #preloader { position: fixed; inset: 0; background: var(--bg); z-index: 100; display: flex; align-items: center; justify-content: center; flex-direction: column; } /* Custom Cursor */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; } .cursor-dot { width: 4px; height: 4px; background: var(--accent); transform: translate(-50%, -50%); } .cursor-ring { width: 40px; height: 40px; border: 1px solid #fff; transform: translate(-50%, -50%); transition: width 0.3s cubic-bezier(0.16,1,0.3,1), height 0.3s cubic-bezier(0.16,1,0.3,1), background 0.3s ease; } .cursor-ring.hovering { width: 80px; height: 80px; background: var(--accent); mix-blend-mode: normal; border-color: var(--accent); } /* Scroll Progress */ #scroll-progress { position: fixed; top: 0; left: 0; height: 1px; background: var(--accent); z-index: 50; width: 0%; } /* Reveal Masks */ .reveal-mask { overflow: hidden; display: block; } .reveal-mask span { display: inline-block; transform: translateY(110%); } /* Hero Graph */ #hero-graph { position: absolute; inset: 0; z-index: 0; opacity: 0.3; pointer-events: none; } .node { transition: fill 0.3s ease; } /* Workflow Section */ #workflow-wrapper { height: 100vh; width: 100%; overflow: hidden; position: relative; } #workflow-track { display: flex; width: 400vw; height: 100%; } .workflow-step { width: 100vw; height: 100%; display: flex; align-items: center; padding: 0 8vw; } .data-packet { fill: var(--accent); filter: drop-shadow(0 0 8px var(--accent)); } /* Terminal */ #terminal { background: #050505; border: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; } .terminal-line { opacity: 0; transform: translateY(10px); } /* Magnetic */ .magnetic { transition: transform 0.2s cubic-bezier(0.16,1,0.3,1); display: inline-block; } /* Hairline borders */ .border-line { border-color: var(--line); } /* --- Static fallback --- ships with .no-motion and index.html removes it only when GSAP, ScrollTrigger and Lenis all loaded and the visitor accepts motion. So this block is what renders with JS disabled, with a blocked CDN, or under prefers-reduced-motion. Every state above that hides an element for an animation to reveal needs a visible counterpart here. */ /* Only the GSAP timeline removes this, and it covers the whole viewport. */ .no-motion #preloader { display: none; } /* Masked headings sit outside their clipping box until tweened back. */ .no-motion .reveal-mask span { transform: none; } .no-motion .terminal-line { opacity: 1; transform: none; } /* The workflow track is 400vw wide and scrolls sideways under ScrollTrigger's pin. With no pin, three of its four steps are unreachable — stack them. */ .no-motion #workflow-wrapper { height: auto; overflow: visible; } .no-motion #workflow-track { width: 100%; flex-direction: column; } .no-motion .workflow-step { width: 100%; height: auto; padding: 6rem 8vw; } /* The custom cursor is positioned by JS, so without it the pointer would be invisible with nothing standing in for it. */ html.no-motion, .no-motion body { cursor: auto; } .no-motion .cursor-dot, .no-motion .cursor-ring { display: none; } /* Nothing drives this without ScrollTrigger; hide it rather than leave a zero-width bar pinned to the top of the page. */ .no-motion #scroll-progress { display: none; }