/* =========================================================
   RTP WORLD — FULLSCREEN LOADER
   ========================================================= */

#rtp-world-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    background: #020814;

    overflow: hidden;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.65s ease,
        visibility 0.65s ease;
}

    overflow: hidden;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.65s ease,
        visibility 0.65s ease;
}

/* Ambient glow */

#rtp-world-loader::before {
    content: "";

    position: absolute;
    width: 420px;
    height: 420px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    background: rgba(30, 170, 255, 0.10);

    filter: blur(90px);

    border-radius: 50%;

    pointer-events: none;
}

/* Content */

.rtp-loader-content {
    position: relative;
    z-index: 2;

    width: min(90%, 500px);

    text-align: center;
}

/* Logo */

.rtp-loader-logo {
    display: block;

    width: min(280px, 70vw);
    max-height: 180px;

    object-fit: contain;

    margin: 0 auto 28px;

    filter:
        drop-shadow(0 0 12px rgba(40, 190, 255, 0.25))
        drop-shadow(0 0 35px rgba(40, 140, 255, 0.12));

    animation:
        rtpLogoFloat 2.8s ease-in-out infinite;
}

/* Tagline */

.rtp-loader-title {
    margin: 0;

    color: #f2f8ff;

    font-size: clamp(16px, 2vw, 22px);

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    text-shadow:
        0 0 12px rgba(40, 190, 255, 0.18);
}

.rtp-loader-subtitle {
    margin: 10px 0 25px;

    color: #7ea0bc;

    font-size: 12px;

    letter-spacing: 2px;

    text-transform: uppercase;
}

/* Loading bar */

.rtp-loader-bar {
    position: relative;

    width: min(300px, 70vw);
    height: 4px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.08);

    box-shadow:
        0 0 12px rgba(30, 170, 255, 0.08);
}

.rtp-loader-progress {
    position: absolute;

    left: 0;
    top: 0;

    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #168cff,
            #37d8ff,
            #168cff
        );

    box-shadow:
        0 0 10px rgba(40, 190, 255, 0.65),
        0 0 25px rgba(40, 150, 255, 0.25);

    animation:
        rtpLoadingProgress 2.2s ease-in-out forwards;
}

/* Loading text */

.rtp-loader-loading {
    margin-top: 15px;

    color: #66849f;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;
}

/* Hide state */

#rtp-world-loader.rtp-loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Logo animation */

@keyframes rtpLogoFloat {

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

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

/* Progress animation */

@keyframes rtpLoadingProgress {

    0% {
        width: 0%;
    }

    25% {
        width: 28%;
    }

    55% {
        width: 57%;
    }

    80% {
        width: 82%;
    }

    100% {
        width: 100%;
    }
}

/* Mobile */

@media (max-width: 600px) {

    .rtp-loader-content {
        width: 88%;
    }

    .rtp-loader-logo {
        width: min(240px, 72vw);
        margin-bottom: 22px;
    }

    .rtp-loader-title {
        font-size: 15px;
        letter-spacing: 1px;
    }

    .rtp-loader-subtitle {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .rtp-loader-bar {
        width: 240px;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .rtp-loader-logo {
        animation: none;
    }

    .rtp-loader-progress {
        animation: none;
        width: 100%;
    }

    #rtp-world-loader {
        transition: none;
    }
}