/* =========================================================
   loader.css — nakładka startowa (loader #4 "cold_boot")
   Tylko style .kkl-* + keyframes; zmienne (--accent itd.) i font
   'JetBrains Mono' pochodzą ze style.css. Nakładka #kk-loader
   przykrywa stronę do czasu fade-outu (assets/js/loader.js).
   ========================================================= */

#kk-loader {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: var(--bg);
    overflow: hidden;
    container-type: size;
}
#kk-loader::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background: repeating-linear-gradient(to bottom,
        rgba(255, 255, 255, .035) 0, rgba(255, 255, 255, .035) 1px,
        transparent 1px, transparent 3px);
    mix-blend-mode: overlay;
}

/* ---- BOOT ---- */
.kkl-boot { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 7cqmin; }
.kkl-boot__scr { width: 100%; max-width: 70cqmin; }
.kkl-boot__log { margin: 0 0 3.5cqmin; white-space: pre; font: 500 4cqmin/1.65 var(--ff); color: var(--accent); text-shadow: 0 0 .8cqmin var(--accent-glow); }
.kkl-boot__log .ok { color: var(--cyan); }
.kkl-boot__bar { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 4cqmin; padding: 0 1.6cqmin; border: 1px solid var(--line-2); overflow: hidden; }
.kkl-boot__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--accent-d), var(--accent)); box-shadow: 0 0 3cqmin var(--accent-glow); }
.kkl-boot__pct { position: relative; z-index: 1; font-size: 2.5cqmin; color: var(--fg); }

/* ---- GLITCH ---- */
.kkl-glitch { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5cqmin; }
.kkl-glitch__word { position: relative; font: 700 13cqmin/1 var(--ff); letter-spacing: .01em; color: var(--fg); text-shadow: 0 0 2.5cqmin var(--accent-glow); }
.kkl-glitch__word i { font-style: normal; color: var(--accent); }
.kkl-glitch__word::before, .kkl-glitch__word::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.kkl-glitch__word::before { color: var(--cyan); }
.kkl-glitch__word::after { color: var(--pink); }
.kkl-glitch.is-glitch .kkl-glitch__word::before { opacity: .85; animation: kkl-g-a .85s steps(2, end) infinite; }
.kkl-glitch.is-glitch .kkl-glitch__word::after { opacity: .85; animation: kkl-g-b .85s steps(2, end) infinite; }
.kkl-glitch.is-glitch .kkl-glitch__word { animation: kkl-g-main .18s steps(2, end) infinite; }
.kkl-glitch.is-settle .kkl-glitch__word { animation: kkl-settle .6s ease-out; }
.kkl-glitch__tag { font: 500 3cqmin/1 var(--ff); color: var(--muted); min-height: 3cqmin; }
.kkl-glitch__tag .kkl-cursor { color: var(--accent); }
.kkl-cursor { animation: kkl-blink 1.05s steps(1) infinite; }

/* ---- COMBO ---- */
.kkl-combo { position: absolute; inset: 0; }
.kkl-combo__reveal[hidden] { display: none; }
.kkl-combo__boot.is-out { animation: kkl-glitch-out .28s steps(2, end) forwards; }

/* ---- KEYFRAMES ---- */
@keyframes kkl-blink { 50% { opacity: 0; } }
@keyframes kkl-flash { 0% { text-shadow: 0 0 0 var(--accent); } 35% { text-shadow: 0 0 5cqmin #fff, 0 0 8cqmin var(--accent); } 100% { text-shadow: 0 0 2.5cqmin var(--accent-glow); } }
@keyframes kkl-g-main { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(.4cqmin, -.3cqmin); } }
@keyframes kkl-g-a { 0% { clip-path: inset(0 0 72% 0); transform: translate(-2.2cqmin, 0); } 25% { clip-path: inset(38% 0 30% 0); transform: translate(2cqmin, 0); } 50% { clip-path: inset(68% 0 8% 0); transform: translate(-1.4cqmin, 0); } 75% { clip-path: inset(18% 0 58% 0); transform: translate(1.8cqmin, 0); } 100% { clip-path: inset(0 0 82% 0); transform: translate(-2.2cqmin, 0); } }
@keyframes kkl-g-b { 0% { clip-path: inset(75% 0 0 0); transform: translate(2.2cqmin, 0); } 25% { clip-path: inset(30% 0 40% 0); transform: translate(-2cqmin, 0); } 50% { clip-path: inset(8% 0 70% 0); transform: translate(1.4cqmin, 0); } 75% { clip-path: inset(55% 0 18% 0); transform: translate(-1.8cqmin, 0); } 100% { clip-path: inset(82% 0 0 0); transform: translate(2.2cqmin, 0); } }
@keyframes kkl-settle { 0% { transform: scale(1.04); text-shadow: 0 0 6cqmin #fff; } 100% { transform: scale(1); text-shadow: 0 0 2.5cqmin var(--accent-glow); } }
@keyframes kkl-glitch-out { 0% { clip-path: inset(0 0 0 0); transform: translate(0, 0); opacity: 1; } 20% { clip-path: inset(0 0 62% 0); transform: translate(-2.4cqmin, 0); } 45% { clip-path: inset(52% 0 20% 0); transform: translate(2.4cqmin, 0); } 70% { clip-path: inset(22% 0 58% 0); transform: translate(-1.4cqmin, 0); opacity: .75; } 100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); opacity: 0; } }

/* ---- WYJŚCIA (.kkl-exit--<kind>) ---- */
.kkl-exit { animation-duration: var(--kkl-xd, 600ms); animation-timing-function: ease; animation-fill-mode: forwards; pointer-events: none; }
.kkl-exit--fade { animation-name: kkl-x-fade; }
.kkl-exit--slideup { animation-name: kkl-x-slideup; animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
.kkl-exit--crt { animation-name: kkl-x-crt; transform-origin: center; animation-timing-function: cubic-bezier(.6, 0, .35, 1); }
.kkl-exit--flash { animation-name: kkl-x-flash; }
.kkl-exit--glitchout { animation-name: kkl-x-glitch; animation-timing-function: steps(2, end); }
.kkl-exit--iris { animation-name: kkl-x-iris; }
.kkl-exit--scanwipe { animation-name: kkl-x-scan; filter: drop-shadow(0 4px 12px var(--accent-glow)); }
@keyframes kkl-x-fade { to { opacity: 0; } }
@keyframes kkl-x-slideup { to { transform: translateY(-100%); } }
@keyframes kkl-x-crt {
    0% { transform: scaleY(1); filter: brightness(1); opacity: 1; }
    55% { transform: scaleY(.03); filter: brightness(2.6); opacity: 1; }
    100% { transform: scaleY(.004) scaleX(1.18); filter: brightness(3); opacity: 0; }
}
@keyframes kkl-x-flash {
    0% { filter: brightness(1); opacity: 1; }
    18% { filter: brightness(4.6); }
    34% { filter: brightness(4.6); opacity: 1; }
    100% { filter: brightness(1); opacity: 0; }
}
@keyframes kkl-x-glitch {
    0% { clip-path: inset(0 0 0 0); transform: translate(0, 0); filter: hue-rotate(0deg); }
    18% { clip-path: inset(18% 0 42% 0); transform: translate(-7px, 0); filter: hue-rotate(40deg) saturate(1.7); }
    36% { clip-path: inset(58% 0 12% 0); transform: translate(7px, 0); opacity: .85; }
    54% { clip-path: inset(8% 0 68% 0); transform: translate(-5px, 0); }
    72% { clip-path: inset(40% 0 30% 0); transform: translate(9px, 0); opacity: .5; filter: hue-rotate(-30deg); }
    100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); opacity: 0; }
}
@keyframes kkl-x-iris { 0% { clip-path: circle(140% at 50% 44%); } 100% { clip-path: circle(0% at 50% 44%); } }
@keyframes kkl-x-scan { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); } }

@media (prefers-reduced-motion: reduce) { .kkl-cursor { animation: none; } .kkl-exit { animation-duration: 220ms !important; } }