/* ============================================================ animations.css To disable ALL animations: remove the tag for this file from every HTML page's . ============================================================ */ /* grain overlay */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9000; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px; } /* page transition overlay */ .page-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 8000; opacity: 1; transition: opacity 0.3s ease; pointer-events: none; } .page-overlay.fade-out { opacity: 0; } /* scattered links — fade in + bounce */ @keyframes fadeInLink { from { opacity: 0; transform: translate(0, 6px) rotate(var(--rot, 0deg)); } to { opacity: 1; transform: translate(0, 0) rotate(var(--rot, 0deg)); } } @keyframes bounceLink { 0% { transform: translate(0px, 0px) rotate(var(--rot, 0deg)); } 20% { transform: translate(4px, -9px) rotate(var(--rot, 0deg)); } 40% { transform: translate(-3px, -5px) rotate(var(--rot, 0deg)); } 60% { transform: translate(5px, -11px) rotate(var(--rot, 0deg)); } 80% { transform: translate(-2px, -6px) rotate(var(--rot, 0deg)); } 100% { transform: translate(0px, 0px) rotate(var(--rot, 0deg)); } } .scattered-link { opacity: 0; transform: rotate(var(--rot, 0deg)); } .scattered-link.visible { animation: fadeInLink 0.6s ease forwards, bounceLink var(--float-dur, 5s) ease-in-out var(--float-delay, 0s) infinite; } /* glitch on hover — applied to inner span only */ @keyframes glitch { 0% { transform: translateX(0); opacity: 1; } 15% { transform: translateX(-3px); opacity: 0.7; } 30% { transform: translateX(3px); opacity: 0.85; } 50% { transform: translateX(-2px); opacity: 0.6; } 70% { transform: translateX(2px); opacity: 0.8; } 100% { transform: translateX(0); opacity: 0.35; } } .scattered-link:hover .scattered-text { display: inline-block; animation: glitch 0.35s ease forwards; } /* section pages — fade up on load */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .section-page { animation: fadeUp 0.5s ease forwards; } /* site-title hidden until typewriter runs */ .site-title { visibility: hidden; } /* theme toggle */ .theme-toggle { position: fixed; top: 30px; right: 36px; z-index: 1000; background: none; border: none; font-family: 'Courier New', Courier, monospace; font-size: 0.8rem; color: var(--muted); letter-spacing: 0.04em; padding: 0; transition: color 0.2s; } .theme-toggle:hover { color: var(--text); }