/* ====================================================================
   transitions.css — sześć stylów przejścia Gansa (§3.1 + §8.1)
   --------------------------------------------------------------------
   Wszystkie welony CZARNE z backdrop-filter blur (strona pod welonem
   pozostaje widoczna ale rozmyta). Różnicowanie tylko przez:
   - czas trwania (425-950ms)
   - kierunek (z góry / z boku / paski)
   - intensywność blur (4-22px)
   - krzywa czasowa
   - rytm pojawiania się (single / multi-stripe / pulse / fade)

   Bez akcentów kolorystycznych, bez sepii, bez złota, bez czerwieni.
   Czarne welony z różnym charakterem ruchu.
   ==================================================================== */

/* ============== Wspólne ============== */
.page-veil,
.silk-veil,
.fog-veil,
.static-veil,
.catacomb-veil,
.burn-veil {
    position: fixed;
    inset: 0;
    z-index: 9500;
    pointer-events: none;
    overflow: hidden;
}

/* ============================================================
   rust-cut (425ms) — czarna kurtyna z góry, blur 6px
   ============================================================ */
.page-veil.veil-rust-cut {
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    transform: translateY(-100%);
    transition: transform 380ms cubic-bezier(0.55, 0, 0.35, 1);
}
.page-veil.veil-rust-cut.veil-active {
    transform: translateY(0);
    pointer-events: auto;
}

/* ============================================================
   descent (950ms) — głęboka czerń, wolna, blur 14px
   ============================================================ */
.page-veil.veil-descent {
    background: rgba(0, 0, 0, 0.92);
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    transform: translateY(-100%);
    transition: transform 880ms cubic-bezier(0.7, 0, 0.4, 1),
                backdrop-filter 880ms ease,
                -webkit-backdrop-filter 880ms ease;
}
.page-veil.veil-descent.veil-active {
    transform: translateY(0);
    pointer-events: auto;
}

/* ============================================================
   veil (650ms) — dwie czarne półzasłony z lewej i prawej
   ============================================================ */
.silk-veil .silk-left,
.silk-veil .silk-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 51%;
    background: rgba(0, 0, 0, 0.88);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    transition: transform 620ms cubic-bezier(0.65, 0, 0.35, 1);
}
.silk-veil .silk-left {
    left: 0;
    transform: translateX(-100%);
}
.silk-veil .silk-right {
    right: 0;
    transform: translateX(100%);
}
.silk-veil.silk-closing .silk-left  { transform: translateX(0); pointer-events: auto; }
.silk-veil.silk-closing .silk-right { transform: translateX(0); pointer-events: auto; }

/* ============================================================
   fog-peel (750ms) — czarna mgła z ekstremalnym rozmyciem
   ============================================================ */
.fog-veil {
    background: rgba(0, 0, 0, 0.70);
    -webkit-backdrop-filter: blur(22px);
            backdrop-filter: blur(22px);
    opacity: 0;
    transition: opacity 700ms ease,
                backdrop-filter 700ms ease,
                -webkit-backdrop-filter 700ms ease;
}
.fog-veil.fog-rising {
    opacity: 1;
    pointer-events: auto;
}
/* Dodatkowy blur strony pod mgłą — efekt głębi */
.fog-blurring {
    transition: filter 700ms ease, transform 700ms ease !important;
    filter: blur(6px) !important;
    transform: scale(1.02) !important;
}

/* ============================================================
   static-burn (550ms) — krótki ciemny flash + szum CRT
   ============================================================ */
.static-veil {
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 200ms ease;
}
.static-veil.static-burning { opacity: 1; pointer-events: auto; }

.static-veil .static-flash {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    opacity: 0;
}
.static-veil.static-burning .static-flash {
    animation: static-flash-anim 550ms steps(8) forwards;
}
@keyframes static-flash-anim {
    0%   { opacity: 0; background: rgba(0, 0, 0, 0); }
    8%   { opacity: 1; background: rgba(255, 255, 255, 0.2); }
    16%  { opacity: 0; background: rgba(0, 0, 0, 0); }
    24%  { opacity: 0.6; background: rgba(255, 255, 255, 0.1); }
    100% { opacity: 0; background: rgba(0, 0, 0, 0); }
}
.static-veil .static-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='1.6' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='1'/></svg>");
    mix-blend-mode: screen;
    opacity: 0;
}
.static-veil.static-burning .static-noise {
    animation: static-noise-anim 550ms steps(10) forwards;
}
@keyframes static-noise-anim {
    0%   { opacity: 0; transform: translate(0, 0); }
    12%  { opacity: 0.5; transform: translate(-2%, 1.5%); }
    35%  { opacity: 0.35; transform: translate(1.5%, -1.8%); }
    60%  { opacity: 0.25; transform: translate(-1%, 2%); }
    100% { opacity: 0; transform: translate(0, 0); }
}

/* ============================================================
   catacomb (850ms) — 7 czarnych pasków schodzących osobno
   ============================================================ */
.catacomb-veil { background: transparent; }
.catacomb-stripe {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.90);
    -webkit-backdrop-filter: blur(7px);
            backdrop-filter: blur(7px);
    transform: translateY(-100%);
    animation: catacomb-fall 700ms cubic-bezier(0.6, 0, 0.3, 1) forwards;
    pointer-events: auto;
}
@keyframes catacomb-fall {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}

/* ============================================================
   paper-burn (600ms) — GLITCH na całej stronie, potem nawigacja
   ============================================================ */
.burn-veil {
    background: transparent;
    pointer-events: auto;
}

/* GLITCH overlay — przez 500ms */
.burn-veil .burn-glitch {
    position: absolute; inset: 0;
    background: transparent;
    mix-blend-mode: difference;
    opacity: 0;
}
.burn-veil.burn-active .burn-glitch {
    animation: burn-glitch-anim 500ms steps(8) forwards;
}
@keyframes burn-glitch-anim {
    0%   { opacity: 0; transform: translate(0,0);
           background: transparent; }
    12%  { opacity: 1; transform: translate(10px,-5px);
           background: linear-gradient(90deg, rgba(255,30,30,0.6) 0%, transparent 30%, transparent 70%, rgba(0,220,255,0.6) 100%); }
    25%  { opacity: 1; transform: translate(-8px,4px);
           background: linear-gradient(90deg, rgba(0,220,255,0.6) 0%, transparent 50%, rgba(255,30,30,0.6) 100%); }
    38%  { opacity: 0.9; transform: translate(5px,-3px);
           background: linear-gradient(0deg, rgba(255,255,255,0.3) 0%, transparent 100%); }
    50%  { opacity: 1; transform: translate(-6px,2px);
           background: linear-gradient(90deg, rgba(255,30,30,0.45) 0%, transparent 60%, rgba(0,220,255,0.45) 100%); }
    62%  { opacity: 0.8; transform: translate(4px,-2px);
           background: linear-gradient(180deg, transparent 40%, rgba(255,255,255,0.2) 100%); }
    75%  { opacity: 0.5; transform: translate(-3px,1px); background: transparent; }
    100% { opacity: 0; transform: translate(0,0); background: transparent; }
}

/* Glitch na body — drżenie + RGB shift */
body.burn-glitching {
    animation: body-burn-glitch 500ms steps(8) forwards;
    will-change: transform, filter;
}
@keyframes body-burn-glitch {
    0%, 100% { transform: translate(0); filter: none; }
    12% { transform: translate(-5px, 2px); filter: hue-rotate(40deg) contrast(1.4) saturate(1.5); }
    25% { transform: translate(5px, -3px); filter: hue-rotate(-40deg) contrast(1.4) saturate(1.5); }
    38% { transform: translate(-2px, 1px); filter: contrast(1.8) brightness(1.2); }
    50% { transform: translate(4px, -2px); filter: hue-rotate(60deg) contrast(1.3); }
    62% { transform: translate(-4px, 2px); filter: hue-rotate(-60deg) contrast(1.5) saturate(1.4); }
    75% { transform: translate(2px, -1px); filter: hue-rotate(20deg) brightness(0.95); }
}

/* ============================================================
   Uniwersalne veil-lifting (po załadowaniu nowej strony)
   ============================================================ */
.veil-lifting,
.veil-lifting.silk-closing,
.veil-lifting .silk-left,
.veil-lifting .silk-right,
.veil-lifting .catacomb-stripe {
    transition: transform 700ms cubic-bezier(0.4, 0, 0.6, 1),
                opacity 700ms ease,
                backdrop-filter 700ms ease,
                -webkit-backdrop-filter 700ms ease !important;
    opacity: 0 !important;
    pointer-events: none !important;
    -webkit-backdrop-filter: blur(0) !important;
            backdrop-filter: blur(0) !important;
}
.page-veil.veil-lifting { transform: translateY(100%) !important; }
.silk-veil.veil-lifting .silk-left  { transform: translateX(-100%) !important; }
.silk-veil.veil-lifting .silk-right { transform: translateX(100%) !important; }
.fog-veil.veil-lifting { opacity: 0 !important; }
.static-veil.veil-lifting { opacity: 0 !important; }
.catacomb-veil.veil-lifting .catacomb-stripe { transform: translateY(100%) !important; animation: none !important; }

/* ============================================================
   prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .page-veil, .silk-veil, .fog-veil, .static-veil, .catacomb-veil, .burn-veil,
    .silk-veil .silk-left, .silk-veil .silk-right,
    .catacomb-stripe, .fog-blurring,
    .static-veil .static-flash, .static-veil .static-noise,
    .burn-veil .burn-glitch {
        transition: none !important;
        animation: none !important;
        -webkit-backdrop-filter: blur(2px) !important;
                backdrop-filter: blur(2px) !important;
    }
    body.burn-glitching {
        animation: none !important;
        filter: brightness(0.7) !important;
    }
}