/* HOPE THIS HELPS — the transition. * * When a level is solved the display fails for about three quarters of a second, * and when it recovers the system has re-rendered itself in a completely * different visual era. The layout underneath never moves; that is the point. * * Everything here is driven by one class on . app.js swaps the theme at the * peak of the tear, so the player sees the new skin arrive inside the damage * rather than after it. */ :root { --glitch-ms: 760ms; } #glitch { position: fixed; inset: 0; z-index: 200; pointer-events: none; visibility: hidden; overflow: hidden; } body.glitching #glitch { visibility: visible; } /* displaced scan bands */ #glitch .band { position: absolute; left: -12%; width: 124%; opacity: 0; background: var(--accent-mark); mix-blend-mode: difference; } body.glitching #glitch .band { animation: hth-tear var(--glitch-ms) steps(1, end) both; } #glitch .band:nth-child(1) { top: 6%; height: 3%; animation-delay: 0ms; } #glitch .band:nth-child(2) { top: 21%; height: 7%; animation-delay: 60ms; } #glitch .band:nth-child(3) { top: 37%; height: 2%; animation-delay: 20ms; } #glitch .band:nth-child(4) { top: 48%; height: 11%; animation-delay: 110ms; } #glitch .band:nth-child(5) { top: 65%; height: 4%; animation-delay: 45ms; } #glitch .band:nth-child(6) { top: 78%; height: 6%; animation-delay: 150ms; } #glitch .band:nth-child(7) { top: 90%; height: 2%; animation-delay: 90ms; } @keyframes hth-tear { 0%, 100% { opacity: 0; transform: translateX(0); } 8% { opacity: 0.9; transform: translateX(-5%); } 16% { opacity: 0; transform: translateX(0); } 34% { opacity: 0.75; transform: translateX(4%); } 44% { opacity: 0; transform: translateX(0); } 58% { opacity: 0.85; transform: translateX(-3%) scaleY(1.6); } 68% { opacity: 0; transform: translateX(0); } 82% { opacity: 0.4; transform: translateX(2%); } 90% { opacity: 0; transform: translateX(0); } } /* signal-loss flash */ #glitch::before { content: ""; position: absolute; inset: 0; background: var(--ink); opacity: 0; } body.glitching #glitch::before { animation: hth-flash var(--glitch-ms) linear both; } @keyframes hth-flash { 0% { opacity: 0; } 5% { opacity: 0.30; } 11% { opacity: 0; } 46% { opacity: 0.55; } 53% { opacity: 0; } 74% { opacity: 0.16; } 80%, 100% { opacity: 0; } } /* rolling sweep, the way a picture rolls when it loses lock */ #glitch::after { content: ""; position: absolute; left: 0; right: 0; top: -22%; height: 18%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.3), transparent); } body.glitching #glitch::after { animation: hth-sweep var(--glitch-ms) linear both; } @keyframes hth-sweep { 0% { top: -22%; opacity: 0; } 20% { opacity: 0.9; } 85% { opacity: 0.9; } 100% { top: 104%; opacity: 0; } } /* the window itself loses its footing */ body.glitching #mainwin { animation: hth-shudder var(--glitch-ms) steps(1, end) both; } @keyframes hth-shudder { 0%, 100% { transform: none; } 7% { transform: translate(-7px, 2px) skewX(-1.6deg); } 15% { transform: translate(6px, -1px) skewX(1.1deg); } 27% { transform: translate(-3px, 0); } 41% { transform: translate(9px, 3px) skewX(-2.2deg); } 49% { transform: translate(-5px, -2px) skewX(1.6deg); } 63% { transform: translate(3px, 1px); } 76% { transform: translate(-2px, 0) skewX(0.7deg); } 88% { transform: translate(1px, 0); } } /* chromatic split — beats specificity on the per-theme glow */ body.glitching .win, body.glitching #menubar, body.glitching .desk-icon { text-shadow: 2px 0 rgba(255, 0, 80, 0.75), -2px 0 rgba(0, 225, 255, 0.75); } @media (prefers-reduced-motion: reduce) { #mainwin { transition: opacity 150ms linear; } body.glitching #glitch { visibility: hidden; } body.glitching #mainwin { animation: none; opacity: 0.2; } body.glitching .win, body.glitching #menubar, body.glitching .desk-icon { text-shadow: none; } }