/* ===== SPLASH 2.0 — подключается ПОСЛЕ styles.css ===== */
#splash-screen {
    background: transparent;
    overflow: hidden;
    transition: none;
}
#splash-screen.splash-exit { transform: none; opacity: 1; pointer-events: none; }

/* шторки */
.shutter {
    position: absolute; left: 0; width: 100%; height: 50.5%;
    background: #0a0a0a; z-index: 0;
    transition: transform 1s cubic-bezier(.77,0,.18,1) .35s;
}
.shutter-top { top: 0; border-bottom: 2px solid #f801fc; box-shadow: 0 0 30px #f801fc; }
.shutter-bottom { bottom: 0; border-top: 2px solid #f801fc; box-shadow: 0 0 30px #f801fc; }
.splash-exit .shutter-top { transform: translateY(-105%); }
.splash-exit .shutter-bottom { transform: translateY(105%); }

#splash-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: .45;
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 15%, #000 85%);
            mask-image: radial-gradient(ellipse at center, transparent 15%, #000 85%); }

/* CRT: линии + виньетка */
.crt { position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%);
    animation: flicker 4s infinite; }
@keyframes flicker { 0%,100%{opacity:1} 92%{opacity:1} 93%{opacity:.8} 94%{opacity:1} 97%{opacity:.88} }

.splash-content { position: relative; z-index: 2; width: min(460px, 88vw); animation: none; text-align: center; transition: opacity .35s, filter .35s, transform .35s; }
.splash-exit .splash-content { opacity: 0; filter: blur(6px); transform: scale(1.15); }

/* глитч-заголовок */
#glitch-title { position: relative; display: inline-block; font-size: clamp(3.4rem, 13vw, 6rem); letter-spacing: 6px;
    text-shadow: 0 0 20px #f801fc, 0 0 50px #f801fc; margin-bottom: 1.4rem; }
#glitch-title::before, #glitch-title::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; }
#glitch-title::before { color: #0ff; transform: translate(-3px,0); clip-path: inset(0 0 55% 0); }
#glitch-title::after  { color: #f0f; transform: translate(3px,0);  clip-path: inset(55% 0 0 0); }
#glitch-title.ready::before, #glitch-title.ready::after { animation: glitch 3.2s infinite steps(1); }
@keyframes glitch {
    0%,86%,100% { opacity: 0; }
    87% { opacity: .9; transform: translate(-4px,1px); }
    89% { opacity: .9; transform: translate(4px,-1px); }
    91% { opacity: .9; transform: translate(-2px,0); }
    93% { opacity: 0; }
}

/* лог */
.boot-log { height: 5.6em; text-align: left; font-size: clamp(.8rem, 2.6vw, 1rem); line-height: 1.4; opacity: .85; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end; }
.boot-log .p { color: #f801fc; }
.boot-log .ok { color: #0f0; text-shadow: 0 0 8px #0f0; float: right; }
.boot-log div { animation: lineIn .25s ease-out; }
@keyframes lineIn { from { opacity: 0; transform: translateX(-10px); } }

/* сегментный прогресс-бар */
.progress-container { position: relative; width: 100%; height: 22px; margin: .8rem 0 .4rem; border-radius: 0; border: 2px solid #f801fc;
    background: rgba(248,1,252,.08); box-shadow: 0 0 25px rgba(248,1,252,.35), inset 0 0 12px rgba(248,1,252,.25); }
.progress-container::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 10px, #0a0a0a 10px 13px); }
.progress-bar { border-radius: 0; position: relative; box-shadow: 0 0 20px #f801fc; }
.progress-bar::after { content: ""; position: absolute; right: 0; top: -4px; bottom: -4px; width: 6px; background: #fff; box-shadow: 0 0 14px 4px #f801fc; }
.progress-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: clamp(.9rem, 2.6vw, 1.1rem); opacity: .9; }
.progress-text { font-size: clamp(1.6rem, 5vw, 2.2rem); margin: 0; text-shadow: 0 0 20px #f801fc; }

/* ENTER */
#enter-btn { display: block !important; position: relative; width: 100%; margin: 1.2rem 0 0; padding: .8rem 0; overflow: hidden;
    letter-spacing: 8px; opacity: 0; transform: translateY(10px); pointer-events: none; animation: none;
    transition: opacity .5s, transform .5s, background .25s, box-shadow .25s; }
#enter-btn.show { opacity: 1; transform: none; pointer-events: auto; animation: pulse 1.5s infinite; }
#enter-btn::before { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); }
#enter-btn.show::before { animation: sweep 2.2s infinite; }
@keyframes sweep { 0% { left: -80%; } 60%,100% { left: 140%; } }
#splash-screen.loaded .progress-bar { animation: shimmer 1.5s infinite linear, doneGlow 1s ease-out 1; }
@keyframes doneGlow { 0% { filter: brightness(2.2); } 100% { filter: none; } }

@media (prefers-reduced-motion: reduce) {
    .crt, #glitch-title::before, #glitch-title::after, #enter-btn::before { animation: none !important; }
}