.idle-screen[hidden] { display: none !important; }
.idle-screen { position: fixed; inset: 0; z-index: 10000; overflow: hidden; outline: none; isolation: isolate; cursor: none; color: var(--muted); }
.idle-veil { position: absolute; inset: 0; background: #000; opacity: .25; animation: idle-veil-pulse 12s linear infinite; }
.idle-signature { position: absolute; width: clamp(64px, 7vw, 108px); left: 38%; top: 39%; opacity: .38; display: flex; align-items: center; flex-direction: column; animation: idle-drift 101s linear infinite alternate; pointer-events: none; }
.idle-mark { position: relative; width: 100%; aspect-ratio: 1; }
.idle-mark .app-mark { position: relative; width: 100%; height: 100%; fill: none; }
.idle-author { display: block; margin-top: 10px; font-size: clamp(10px, .65vw, 12px); letter-spacing: .17em; opacity: .5; }
/* Five seconds to black, two seconds black, five seconds to 75% scene. */
@keyframes idle-veil-pulse { 0%, 100% { opacity: .25; } 41.666667%, 58.333333% { opacity: 1; } }
@keyframes idle-drift { 0% { transform: translate(-90%, -60%); } 23% { transform: translate(105%, -20%); } 51% { transform: translate(-70%, 175%); } 78% { transform: translate(95%, 135%); } 100% { transform: translate(-60%, -55%); } }
.idle-active #app *, .idle-active #app *::before, .idle-active #app *::after { animation-play-state: paused !important; }
@media (max-width: 600px) { .idle-signature { left: 30%; top: 40%; width: 18vw; min-width: 56px; max-width: 84px; } @keyframes idle-drift { 0% { transform: translate(-50%, -70%); } 100% { transform: translate(40%, 100%); } } }
@media (prefers-reduced-motion: reduce) { .idle-veil { animation: none; opacity: .94; } .idle-signature { animation: none; left: 50%; top: 50%; transform: translate(-50%, -50%); } }