.background-stars-layer{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;

    transition:
        transform 8s ease-out;
}

.background-star{

    position:absolute;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.95) 0%,
            rgba(120,160,255,0.35) 45%,
            rgba(120,160,255,0) 100%
        );

    animation:
        starFloat linear infinite,
        starPulse ease-in-out infinite;
}

.orbital-particles-layer{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:1;
}

.orbital-particle{

    position:absolute;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(140,180,255,1) 0%,
            rgba(140,120,255,0.35) 55%,
            rgba(140,120,255,0) 100%
        );

    box-shadow:
        0 0 12px rgba(90,140,255,0.25),
        0 0 22px rgba(140,80,255,0.12);

    animation:
        orbitalDrift ease-in-out infinite;
}

@keyframes orbitalDrift{

    0%{
        transform:
            translateY(0px)
            translateX(0px)
            scale(1);
    }

    25%{
        transform:
            translateY(-25px)
            translateX(10px)
            scale(1.1);
    }

    50%{
        transform:
            translateY(-50px)
            translateX(-12px)
            scale(0.92);
    }

    75%{
        transform:
            translateY(-20px)
            translateX(18px)
            scale(1.04);
    }

    100%{
        transform:
            translateY(0px)
            translateX(0px)
            scale(1);
    }
}

@keyframes starFloat{

    0%{
        transform:
            translateY(0px);
    }

    50%{
        transform:
            translateY(-18px);
    }

    100%{
        transform:
            translateY(0px);
    }
}

@keyframes starPulse{

    0%{
        opacity:0.15;
    }

    50%{
        opacity:0.8;
    }

    100%{
        opacity:0.15;
    }
}

/* =========================================
   ENTER TRANSITION
========================================= */

body{
    transition:
        background 1.8s ease,
        opacity 1.8s ease;
}

body.transitioning{
    background:black;
}

.content{
    transition:
        transform 1.8s ease,
        opacity 1.8s ease,
        filter 1.8s ease;
}

.content-exit{
    transform:
        scale(1.08);
    opacity:0;
    filter:
        blur(10px);
}

.video-layer{
    transition:
        transform 2.2s ease,
        opacity 2.2s ease,
        filter 2.2s ease;
}

.video-zoom{
    transform:
        scale(1.18);
    filter:
        blur(4px)
        brightness(0.25);
}