/* Today — shared stylesheet (extends sapplify-bold.html DNA) */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box } :root { --black: #0a0a0a; --cream: #f0ede6; --hot-pink: #ff2d6f; --electric-blue: #2d4fff; --deep-violet: #6b2dff; --grain-opacity: 0.035; } html { scroll-behavior: smooth; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--hot-pink) var(--black); } body { font-family: 'Syne', sans-serif; background: var(--black); color: var(--cream); overflow-x: hidden; cursor: none; min-height: 100vh; } /* Custom cursor */ .cursor { position: fixed; width: 20px; height: 20px; border: 2px solid var(--hot-pink); border-radius: 50%; pointer-events: none; z-index: 10000; transition: transform 0.15s ease, background 0.2s ease, width 0.2s ease, height 0.2s ease; transform: translate(-50%, -50%); mix-blend-mode: difference; } .cursor.hovering { width: 50px; height: 50px; background: var(--hot-pink) } .cursor-dot { position: fixed; width: 5px; height: 5px; background: var(--cream); border-radius: 50%; pointer-events: none; z-index: 10001; transform: translate(-50%, -50%); } /* Grain overlay — fixed-position layer, cheap to composite once promoted. */ .grain { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 9999; opacity: var(--grain-opacity); will-change: transform; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); animation: grainShift 0.5s steps(1) infinite; } @keyframes grainShift { 0% { transform: translate(0,0) } 25% { transform: translate(-5%,-5%) } 50% { transform: translate(5%,0) } 75% { transform: translate(-2%,5%) } 100% { transform: translate(0,0) } } /* Orbs — blur(80px) is expensive; promote to its own layer so transforms don't trigger composite-wide repaints. */ .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.3; pointer-events: none; z-index: 0; will-change: transform } .orb-1 { width: 400px; height: 400px; background: var(--deep-violet); top: 10%; left: -5%; animation: orbFloat1 15s ease-in-out infinite } .orb-2 { width: 300px; height: 300px; background: var(--hot-pink); top: 50%; right: -5%; animation: orbFloat2 12s ease-in-out infinite } .orb-3 { width: 250px; height: 250px; background: var(--electric-blue); bottom: 10%; left: 30%; animation: orbFloat3 18s ease-in-out infinite } @keyframes orbFloat1 { 0%,100% { transform: translate(0,0) scale(1) } 33% { transform: translate(50px,30px) scale(1.1) } 66% { transform: translate(-20px,-40px) scale(0.95) } } @keyframes orbFloat2 { 0%,100% { transform: translate(0,0) scale(1) } 50% { transform: translate(-60px,-30px) scale(1.15) } } @keyframes orbFloat3 { 0%,100% { transform: translate(0,0) } 50% { transform: translate(40px,-50px) } } /* Primary navigation — only the top-level