/* Theme toggle: icon swap + glitch/shatter transition overlay. Shared verbatim across every page — contains no page palette colors, so it's safe regardless of which :root variable scheme a page uses. */ .theme-toggle-icon { display: none; } html:not([data-theme="light"]) .theme-toggle-icon--moon { display: inline; } html[data-theme="light"] .theme-toggle-icon--sun { display: inline; } /* ── Glitch/shatter overlay ── Appended to once by theme.js. Always non-interactive so it can never swallow a click mid-animation. */ .theme-glitch { position: fixed; inset: 0; z-index: 99999; pointer-events: none; opacity: 0; overflow: hidden; } .theme-glitch-shard { position: absolute; inset: -10% -10%; mix-blend-mode: screen; opacity: 0; } .theme-glitch-shard--1 { background: rgba(255, 0, 60, 0.45); clip-path: polygon(0 12%, 100% 2%, 100% 38%, 0 48%); } .theme-glitch-shard--2 { background: rgba(0, 220, 120, 0.4); clip-path: polygon(0 55%, 100% 45%, 100% 78%, 0 88%); } .theme-glitch-shard--3 { background: rgba(0, 180, 255, 0.4); clip-path: polygon(0 70%, 100% 62%, 100% 100%, 0 100%); } .theme-glitch-scanlines { position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 1px, transparent 1px, transparent 3px ); opacity: 0; } .theme-glitch--active { opacity: 1; animation: theme-glitch-flash 0.38s steps(2) 1; } .theme-glitch--active .theme-glitch-shard--1 { animation: theme-glitch-shard-1 0.38s steps(3, jump-end) 1; } .theme-glitch--active .theme-glitch-shard--2 { animation: theme-glitch-shard-2 0.38s steps(4, jump-end) 1; } .theme-glitch--active .theme-glitch-shard--3 { animation: theme-glitch-shard-3 0.38s steps(3, jump-end) 1; } .theme-glitch--active .theme-glitch-scanlines { animation: theme-glitch-scan 0.38s steps(6, jump-end) 1; } @keyframes theme-glitch-flash { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } @keyframes theme-glitch-shard-1 { 0% { opacity: 0; transform: translateX(0) skewX(0deg); } 20% { opacity: 1; transform: translateX(-3%) skewX(-4deg); } 45% { opacity: 1; transform: translateX(2%) skewX(3deg); } 70% { opacity: 0.7; transform: translateX(-1%) skewX(-1deg); } 100% { opacity: 0; transform: translateX(0) skewX(0deg); } } @keyframes theme-glitch-shard-2 { 0% { opacity: 0; transform: translateX(0) skewX(0deg); } 25% { opacity: 1; transform: translateX(4%) skewX(5deg); } 50% { opacity: 0.8; transform: translateX(-3%) skewX(-3deg); } 75% { opacity: 1; transform: translateX(1%) skewX(2deg); } 100% { opacity: 0; transform: translateX(0) skewX(0deg); } } @keyframes theme-glitch-shard-3 { 0% { opacity: 0; transform: translateX(0) skewX(0deg); } 30% { opacity: 1; transform: translateX(-2%) skewX(-3deg); } 60% { opacity: 1; transform: translateX(3%) skewX(4deg); } 100% { opacity: 0; transform: translateX(0) skewX(0deg); } } @keyframes theme-glitch-scan { 0% { opacity: 0; background-position: 0 0; } 10% { opacity: 0.9; } 90% { opacity: 0.9; background-position: 0 40px; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .theme-glitch, .theme-glitch * { animation: none !important; transition: none !important; display: none !important; } }