:root {
    --page-transition-color: var(--bg-page, #07111d);
    --page-transition-duration: 420ms;
    --page-transition-cyan: #0ad1a9;
    --page-transition-magenta: #d946ef;
}

html {
    background: var(--page-transition-color);
}

html::before,
html::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    contain: strict;
}

/* Мягкая тёмная вуаль без движущихся полос и резких границ. */
html::before {
    z-index: 2147483644;
    opacity: 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(10, 209, 169, .18), transparent 34%),
        radial-gradient(circle at 88% 76%, rgba(217, 70, 239, .16), transparent 38%),
        linear-gradient(135deg, #050812, var(--page-transition-color) 58%, #090b18);
    transform: scale3d(1, 1, 1);
    animation: skilltag-veil-reveal 480ms cubic-bezier(.22, .72, .22, 1) both;
}

/* Почти незаметная цифровая фактура сохраняет атмосферу киберпанка. */
html::after {
    z-index: 2147483646;
    opacity: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, .018) 0,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px,
            transparent 5px
        ),
        linear-gradient(90deg, rgba(10, 209, 169, .045), transparent 35%, transparent 65%, rgba(217, 70, 239, .045));
    animation: skilltag-texture-reveal 520ms ease-out both;
}

body {
    animation: skilltag-content-reveal 600ms cubic-bezier(.22, .72, .22, 1) both;
}

.page-transition-matrix {
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    contain: strict;
}

html.is-page-entering .page-transition-matrix {
    animation: skilltag-matrix-reveal 620ms ease-out both;
}

html.is-page-leaving .page-transition-matrix {
    opacity: .64;
    transition: opacity 180ms ease-in;
}

html.is-page-leaving::before {
    animation: skilltag-veil-cover var(--page-transition-duration) cubic-bezier(.4, 0, .2, 1) both;
}

html.is-page-leaving::after {
    animation: skilltag-texture-cover var(--page-transition-duration) ease-out both;
}

html.is-page-leaving body {
    opacity: .34;
    transition: opacity var(--page-transition-duration) ease-in-out;
}

@keyframes skilltag-veil-reveal {
    from { opacity: 1; transform: scale3d(1.018, 1.018, 1); }
    to { opacity: 0; transform: scale3d(1, 1, 1); }
}

@keyframes skilltag-texture-reveal {
    from { opacity: .42; }
    to { opacity: 0; }
}

@keyframes skilltag-content-reveal {
    from { opacity: .46; }
    to { opacity: 1; }
}

@keyframes skilltag-matrix-reveal {
    0% { opacity: .60; }
    38% { opacity: .48; }
    100% { opacity: 0; }
}

@keyframes skilltag-veil-cover {
    from { opacity: 0; transform: scale3d(1, 1, 1); }
    to { opacity: 1; transform: scale3d(1.012, 1.012, 1); }
}

@keyframes skilltag-texture-cover {
    from { opacity: 0; }
    to { opacity: .34; }
}

/* На слабых устройствах остаётся короткое обычное затемнение. */
html.page-transition-lite::before {
    background: var(--page-transition-color);
    transform: none;
    animation-duration: 180ms;
}

html.page-transition-lite::after {
    display: none;
}

html.page-transition-lite .page-transition-matrix {
    display: none;
}

html.page-transition-lite body {
    animation-duration: 200ms;
}

html.page-transition-lite.is-page-leaving::before {
    animation: skilltag-lite-cover 120ms ease-in both;
}

html.page-transition-lite.is-page-leaving body {
    opacity: 0;
    transition-duration: 120ms;
}

@keyframes skilltag-lite-cover {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 720px) {
    html::before {
        background: var(--page-transition-color);
        transform: none;
        animation-duration: 180ms;
    }

    html::after { display: none; }
    .page-transition-matrix { display: none; }
    body { animation-duration: 200ms; }

    html.is-page-leaving::before {
        animation: skilltag-lite-cover 120ms ease-in both;
    }

    html.is-page-leaving body {
        opacity: 0;
        transition-duration: 120ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    html::before,
    html::after,
    html.is-page-leaving::before,
    html.is-page-leaving::after,
    .page-transition-matrix,
    body,
    html.is-page-leaving body {
        animation: none;
        transition: none;
        opacity: 1;
        transform: none;
    }

    html::before,
    html::after,
    html.is-page-leaving::before,
    html.is-page-leaving::after {
        opacity: 0;
    }
}

/* Ручной «Лёгкий режим» полностью отключает и вуаль, и Matrix-canvas. */
html.page-transitions-off::before,
html.page-transitions-off::after {
    content: none;
    animation: none;
    transition: none;
    opacity: 0;
}

html.page-transitions-off body,
html.page-transitions-off.is-page-leaving body {
    animation: none;
    transition: none;
    opacity: 1;
}

html.page-transitions-off .page-transition-matrix {
    display: none;
}