/* Page Transition & Preloader Styles */

.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(1200px circle at 18% 12%, rgba(98, 23, 43, 0.22), transparent 46%),
        radial-gradient(900px circle at 82% 88%, rgba(138, 37, 63, 0.14), transparent 42%),
        linear-gradient(160deg, var(--bg-secondary, #0a0a0f), var(--bg-primary, #030305));
    z-index: 99999;
    /* Super high z-index */
    pointer-events: all;
    opacity: 1;
    /* Visible by default for initial load */
    transition: opacity 0.4s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide overlay when ready */
body.is-ready .page-transition-overlay:not(.active) {
    opacity: 0;
    pointer-events: none;
}

/* Force show overlay when navigating */
body.is-loading .page-transition-overlay {
    opacity: 1 !important;
    pointer-events: all !important;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Content Fade Logic */
body:not(.is-ready) .container,
body:not(.is-ready) header,
body:not(.is-ready) footer,
body:not(.is-ready) main {
    opacity: 0;
}

body.is-ready .container,
body.is-ready header,
body.is-ready footer,
body.is-ready main {
    opacity: 1;
    transition: opacity 0.6s ease-in-out;
}

.loader {
    scale: 0.75;
    position: relative;
    width: 200px;
    height: 200px;
    translate: 10px -20px;
}

.loader svg {
    position: absolute;
    top: 0;
    left: 0;
}

.head {
    translate: 27px -30px;
    z-index: 3;
    animation: bob 1s infinite ease-in;
}

.bod {
    translate: 0 30px;
    z-index: 3;
    animation: bob 1s infinite ease-in-out;
}

.legr {
    translate: 75px 135px;
    z-index: 0;
    animation: rstep 1s infinite ease-in;
}

.legr {
    animation-delay: 0.45s;
}

.legl {
    translate: 30px 155px;
    z-index: 3;
    animation: lstep 1s infinite ease-in;
}

@keyframes bob {
    0% {
        transform: translateY(0) rotate(3deg);
    }

    5% {
        transform: translateY(0) rotate(3deg);
    }

    25% {
        transform: translateY(5px) rotate(0deg);
    }

    50% {
        transform: translateY(0px) rotate(-3deg);
    }

    70% {
        transform: translateY(5px) rotate(0deg);
    }

    100% {
        transform: translateY(0) rotate(3deg);
    }
}

@keyframes lstep {
    0% {
        transform: translateY(0) rotate(-5deg);
    }

    33% {
        transform: translateY(-15px) translate(32px) rotate(35deg);
    }

    66% {
        transform: translateY(0) translate(25px) rotate(-25deg);
    }

    100% {
        transform: translateY(0) rotate(-5deg);
    }
}

@keyframes rstep {
    0% {
        transform: translateY(0) translate(0px) rotate(-5deg);
    }

    33% {
        transform: translateY(-10px) translate(30px) rotate(35deg);
    }

    66% {
        transform: translateY(0) translate(20px) rotate(-25deg);
    }

    100% {
        transform: translateY(0) translate(0px) rotate(-5deg);
    }
}

#gnd {
    translate: -140px 0;
    rotate: 10deg;
    z-index: -1;
    filter: blur(0.5px) drop-shadow(1px 3px 5px #000000);
    opacity: 0.25;
    animation: scroll 5s infinite linear;
}

@keyframes scroll {
    0% {
        transform: translateY(25px) translate(50px);
        opacity: 0;
    }

    33% {
        opacity: 0.25;
    }

    66% {
        opacity: 0.25;
    }

    to {
        transform: translateY(-50px) translate(-100px);
        opacity: 0;
    }
}