/* Logo INNI na starcie — tylko pierwsze wejście w sesji (klasa is-preloading z <head>, js/preloader.js ją zdejmuje).
   Kreski liter wyrastają po kolei jak spod plotera, oba N obracają się (N ↔ И) i wracają, linia pod spodem
   odmierza czas, a na koniec arkusz odjeżdża w górę. Strona wczytuje się pod spodem. Bez skryptu i przy
   „ogranicz ruch” go nie ma; gdyby skrypt nie wstał, bezpiecznik chowa go po 5 s. Sam transform i opacity. */

.preloader { display: none; }
.is-preloading .preloader,
.preloader.is-leaving {
    position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 22px;
    background: var(--paper); color: var(--ink);
}
/* Oś czasu (~2,7 s od pierwszego malowania): kreski 0–1,45 s, podpis od 1,1 s, obrót N 1,5–2,5 s,
   chwila postoju (js/preloader.js), zejście 0,8 s. Bezpiecznik dłuższy niż cała oś. */
.is-preloading .preloader { animation: preload-failsafe 0.01s linear 5s forwards; }
.is-preloading body { overflow: hidden; }
.preloader .mark { gap: 10px; }
.preloader .mark__svg { width: clamp(120px, 30vw, 180px); }
.preloader .mark__sub { font-size: clamp(9px, 1.6vw, 11px); opacity: 0; animation: preload-fade 0.6s ease 1.1s forwards; }

/* Kreski liter: I, N, N, I wyrastają z dołu po kolei. */
.preloader .mark__svg > g > rect,
.preloader .mark__n > * {
    transform-box: fill-box; transform-origin: 50% 100%;
    animation: preload-draw 0.7s cubic-bezier(0.65, 0, 0.35, 1) both;
}
.preloader .mark__svg > g > rect:first-child { animation-delay: 0s; }
.preloader .mark__n:not(.mark__n--mirrored) > * { animation-delay: 0.25s; }
.preloader .mark__n--mirrored > * { animation-delay: 0.5s; }
.preloader .mark__svg > g > rect:last-child { animation-delay: 0.75s; }
/* Oba N obracają się raz w tę i z powrotem — jak logo w nagłówku. */
.preloader .mark__n { transform-box: fill-box; transform-origin: center; animation: preload-flip 0.9s cubic-bezier(0.65, 0, 0.35, 1) 1.5s both; }
.preloader .mark__n--mirrored { animation-delay: 1.62s; }

.preloader__line {
    display: block; width: clamp(120px, 30vw, 180px); height: 1px; background: var(--ink-strong);
    transform: scaleX(0); transform-origin: left center; animation: preload-line 2.5s linear forwards;
}

/* Wyjście: arkusz odjeżdża w górę (js/preloader.js dokłada is-leaving i zdejmuje element po animacji). */
.preloader.is-leaving { animation: preload-leave 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards; }

@keyframes preload-draw { from { transform: scaleY(0); } to { transform: none; } }
@keyframes preload-flip { 0%, 100% { transform: none; } 50% { transform: scaleX(-1); } }
@keyframes preload-fade { to { opacity: 1; } }
@keyframes preload-line { to { transform: scaleX(1); } }
@keyframes preload-leave { to { transform: translateY(-100%); } }
@keyframes preload-failsafe { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
    .is-preloading .preloader { display: none; }
}