/*
 * InfinityDS global page-transition loader.
 * Motion and SVG geometry are adapted from the supplied 1.html loader.
 * The palette intentionally follows the active InfinityDS/Mazinoor theme.
 */
:root {
    --page-loader-bg: var(--bg-primary, var(--page-bg, #07111f));
    --page-loader-bg-raised: var(--bg-secondary, var(--page-bg-soft, #0c1828));
    --page-loader-accent: var(--brand-primary, var(--primary, #5eead4));
    --page-loader-secondary: var(--brand-secondary, #fbbf24);
    --page-loader-fade-ms: 160ms;
    --page-loader-noise-opacity: 0.085;
}

html[data-theme="light"] {
    --page-loader-bg: var(--bg-primary, var(--page-bg, #f2f6fa));
    --page-loader-bg-raised: var(--bg-secondary, var(--page-bg-soft, #ffffff));
    --page-loader-accent: var(--brand-primary, var(--primary, #0f766e));
    --page-loader-secondary: var(--brand-secondary, #9a5b00);
    --page-loader-noise-opacity: 0.045;
}

/*
 * Mazinoor's editorial page intentionally uses a warmer palette than the
 * main InfinityDS shell. The loader keeps the same motion while matching
 * that page's dark/light surfaces and cyan lighting accent.
 */
html[data-page-transition-theme="mazinoor"] {
    --page-loader-bg: #080c12;
    --page-loader-bg-raised: #0c121a;
    --page-loader-accent: #72e2d1;
    --page-loader-secondary: #ffb458;
}

html[data-page-transition-theme="mazinoor"][data-theme="light"] {
    --page-loader-bg: #f5f3ee;
    --page-loader-bg-raised: #fffdf9;
    --page-loader-accent: #076d66;
    --page-loader-secondary: #a6540e;
}

.page-transition-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 48%,
            color-mix(in srgb, var(--page-loader-accent) 10%, transparent) 0%,
            transparent 34%
        ),
        radial-gradient(
            circle at 56% 52%,
            color-mix(in srgb, var(--page-loader-secondary) 3.5%, transparent) 0%,
            transparent 42%
        ),
        linear-gradient(145deg, var(--page-loader-bg-raised), var(--page-loader-bg) 62%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    isolation: isolate;
    transition:
        opacity var(--page-loader-fade-ms) ease,
        visibility 0s linear var(--page-loader-fade-ms);
}

.page-transition-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent 0 49.94%,
            color-mix(in srgb, var(--page-loader-accent) 5%, transparent) 50%,
            transparent 50.06% 100%
        ),
        linear-gradient(
            0deg,
            transparent 0 49.94%,
            color-mix(in srgb, var(--page-loader-accent) 4%, transparent) 50%,
            transparent 50.06% 100%
        );
    background-size: 72px 72px;
    opacity: 0.34;
    mask-image: radial-gradient(circle at center, #000 0%, rgba(0, 0, 0, .42) 38%, transparent 76%);
}

html.page-transition-pending,
html.page-transition-pending body {
    overscroll-behavior: none;
}

html.page-transition-pending .page-transition-loader,
.page-transition-loader.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity var(--page-loader-fade-ms) ease,
        visibility 0s linear 0s;
}

.page-transition-loader__logo {
    position: relative;
    z-index: 2;
    width: 64px;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--page-loader-accent) 18%, transparent));
}

@keyframes page-loader-snake {
    0%, 19% {
        stroke-dashoffset: -81px;
    }

    50%, 100% {
        stroke-dashoffset: 81px;
    }
}

.page-transition-loader__logo path {
    animation: page-loader-snake 2.4s linear infinite;
    stroke: var(--page-loader-accent);
    stroke-dasharray: 81px 100px;
    stroke-dashoffset: -99px;
}

@keyframes page-loader-drop-in {
    0% {
        transform: translate3d(-20px, 20px, 0) scale(0.1);
    }

    20% {
        transform: translate3d(10px, -10px, 0) scale(1);
    }

    20.01%, 100% {
        transform: scale(0);
    }
}

@keyframes page-loader-drop-out {
    0%, 49.99% {
        transform: translate3d(20px, -20px, 0) scale(0);
    }

    50% {
        transform: translate3d(-10px, 10px, 0) scale(1);
    }

    80%, 100% {
        transform: translate3d(15px, -15px, 0) scale(0);
    }
}

@keyframes page-loader-drop-out-2 {
    0%, 49.99% {
        transform: translate3d(20px, -20px, 0) scale(0);
    }

    50% {
        transform: translate3d(-10px, 10px, 0) scale(1);
    }

    100% {
        transform: translate3d(10px, -20px, 0) scale(0);
    }
}

.page-transition-loader__logo rect {
    fill: var(--page-loader-accent);
    transform-box: fill-box;
}

.page-transition-loader__logo rect:nth-child(1) {
    animation: page-loader-drop-in 2.4s cubic-bezier(0.32, 0, 0.67, 0) infinite;
    transform-origin: -9px 24px;
}

.page-transition-loader__logo rect:nth-child(2) {
    animation: page-loader-drop-out 2.4s cubic-bezier(0.33, 1, 0.68, 1) infinite;
    transform-origin: 66px -9px;
}

.page-transition-loader__logo rect:nth-child(3) {
    animation: page-loader-drop-out-2 2.4s cubic-bezier(0.33, 1, 0.68, 1) infinite;
    transform-origin: 66px -9px;
}

@keyframes page-loader-noise {
    0% { transform: translate3d(0, 0, 0); }
    10% { transform: translate3d(-100px, -100px, 0); }
    20% { transform: translate3d(100px, -90px, 0); }
    30% { transform: translate3d(-90px, 80px, 0); }
    40% { transform: translate3d(80px, -70px, 0); }
    50% { transform: translate3d(-70px, 60px, 0); }
    60% { transform: translate3d(60px, -50px, 0); }
    70% { transform: translate3d(-50px, 40px, 0); }
    80% { transform: translate3d(40px, -30px, 0); }
    90% { transform: translate3d(-30px, 20px, 0); }
    100% { transform: translate3d(20px, -10px, 0); }
}

.page-transition-loader__noise {
    position: absolute;
    z-index: 1;
    inset: -100px;
    overflow: hidden;
    pointer-events: none;
    opacity: var(--page-loader-noise-opacity);
    will-change: transform;
    animation: page-loader-noise 0.7s steps(1) infinite;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 250 250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 250px 250px;
    mix-blend-mode: soft-light;
}

@media (prefers-reduced-motion: reduce) {
    .page-transition-loader {
        transition-duration: 0.01ms;
    }

    .page-transition-loader__logo path,
    .page-transition-loader__logo rect,
    .page-transition-loader__noise {
        animation: none !important;
    }

    .page-transition-loader__logo path {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }

    .page-transition-loader__logo rect {
        display: none;
    }
}