/* =========================================================
   UCB FUTURISTIC PRELOADER
   ========================================================= */

   #ucb-preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(230, 20, 35, 0.08) 0%,
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f7f8 50%,
            #eeeeef 100%
        );

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

#ucb-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =========================================================
   FUTURISTIC GRID
   ========================================================= */

.ucb-grid {
    position: absolute;
    inset: -50%;

    opacity: 0.16;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.07) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    transform:
        perspective(500px)
        rotateX(65deg)
        translateY(120px);

    animation: gridMove 8s linear infinite;
}

@keyframes gridMove {

    0% {
        transform:
            perspective(500px)
            rotateX(65deg)
            translateY(0);
    }

    100% {
        transform:
            perspective(500px)
            rotateX(65deg)
            translateY(50px);
    }
}


/* =========================================================
   CENTER CONTENT
   ========================================================= */

.ucb-loader-content {
    position: relative;

    width: 420px;

    display: flex;
    flex-direction: column;
    align-items: center;

    z-index: 5;
}


/* =========================================================
   LOGO
   ========================================================= */

.ucb-logo-wrapper {
    position: relative;

    width: 210px;
    height: 210px;

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


.ucb-logo {
    position: relative;

    width: 150px;
    height: auto;

    object-fit: contain;

    z-index: 5;

    filter:
        drop-shadow(0 12px 25px rgba(0, 0, 0, 0.18));

    animation:
        logoFloat 3s ease-in-out infinite,
        logoReveal 1.2s cubic-bezier(.16,1,.3,1) forwards;
}


@keyframes logoReveal {

    0% {
        opacity: 0;
        transform: scale(0.55);
        filter:
            blur(10px)
            drop-shadow(0 0 0 transparent);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter:
            blur(0)
            drop-shadow(0 12px 25px rgba(0, 0, 0, 0.18));
    }
}


@keyframes logoFloat {

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

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


/* =========================================================
   LOGO GLOW
   ========================================================= */

.ucb-logo-glow {
    position: absolute;

    width: 135px;
    height: 135px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(220, 20, 35, 0.25),
            transparent 70%
        );

    filter: blur(12px);

    animation: glowPulse 2.5s ease-in-out infinite;
}

@keyframes glowPulse {

    0%,
    100% {
        transform: scale(0.85);
        opacity: 0.45;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.85;
    }
}


/* =========================================================
   SCANNING EFFECT
   ========================================================= */

.ucb-scanner {
    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    border: 1px solid rgba(220, 20, 35, 0.18);

    box-shadow:
        0 0 25px rgba(220, 20, 35, 0.08),
        inset 0 0 25px rgba(220, 20, 35, 0.05);

    animation: scannerRotate 4s linear infinite;
}


.ucb-scanner::before {

    content: "";

    position: absolute;

    top: -2px;
    left: 50%;

    width: 5px;
    height: 5px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #e21c2a;

    box-shadow:
        0 0 8px #e21c2a,
        0 0 20px rgba(226, 28, 42, 0.8);
}


.ucb-scanner::after {

    content: "";

    position: absolute;

    inset: 20px;

    border-radius: 50%;

    border:
        1px dashed
        rgba(0, 0, 0, 0.12);

    animation: scannerInner 3s linear infinite reverse;
}


@keyframes scannerRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes scannerInner {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   ORBITS
   ========================================================= */

.ucb-orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    border: 1px solid rgba(0, 0, 0, 0.06);

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


.orbit-one {

    width: 320px;
    height: 320px;

    animation:
        orbitRotate 12s linear infinite;
}


.orbit-two {

    width: 460px;
    height: 460px;

    border-style: dashed;

    opacity: 0.5;

    animation:
        orbitRotate 20s linear infinite reverse;
}


.orbit-three {

    width: 650px;
    height: 650px;

    opacity: 0.25;

    animation:
        orbitRotate 35s linear infinite;
}


@keyframes orbitRotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}


/* =========================================================
   BRAND
   ========================================================= */

.ucb-brand-line {

    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 8px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


.ucb-brand-line span {

    font-size: 27px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #111;
}


.ucb-brand-line i {

    width: 1px;
    height: 20px;

    background: #d4d4d4;
}


.ucb-brand-line small {

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

    color: #777;
}


/* =========================================================
   LOADING TEXT
   ========================================================= */

.ucb-loading-text {

    margin-top: 35px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #555;
}


.ucb-loading-text #ucb-status {

    color: #222;
}


.ucb-dots b {

    animation: dotPulse 1.4s infinite;
}


.ucb-dots b:nth-child(2) {
    animation-delay: 0.2s;
}


.ucb-dots b:nth-child(3) {
    animation-delay: 0.4s;
}


@keyframes dotPulse {

    0%,
    100% {
        opacity: 0.15;
    }

    50% {
        opacity: 1;
    }
}


/* =========================================================
   PROGRESS BAR
   ========================================================= */

.ucb-progress {

    position: relative;

    width: 260px;
    height: 3px;

    margin-top: 18px;

    overflow: hidden;

    border-radius: 10px;

    background: rgba(0, 0, 0, 0.08);
}


.ucb-progress-bar {

    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #b50012,
            #e21c2a,
            #ff5965
        );

    box-shadow:
        0 0 12px rgba(226, 28, 42, 0.5);

    transition: width 0.15s ease;
}


.ucb-loading-percent {

    margin-top: 9px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #999;
}


/* =========================================================
   SECURITY STATUS
   ========================================================= */

.ucb-security {

    position: absolute;

    bottom: 28px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 8px;

    white-space: nowrap;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: #777;
}


.security-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #1ca44c;

    box-shadow:
        0 0 8px rgba(28, 164, 76, 0.7);

    animation: securityPulse 1.5s infinite;
}


@keyframes securityPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}


/* =========================================================
   CORNER HUD ELEMENTS
   ========================================================= */

.ucb-corner {

    position: absolute;

    width: 45px;
    height: 45px;

    opacity: 0.45;
}


.ucb-corner::before,
.ucb-corner::after {

    content: "";

    position: absolute;

    background: #d7192a;
}


.corner-tl {

    top: 30px;
    left: 30px;

    border-top: 1px solid rgba(0,0,0,.2);
    border-left: 1px solid rgba(0,0,0,.2);
}


.corner-tr {

    top: 30px;
    right: 30px;

    border-top: 1px solid rgba(0,0,0,.2);
    border-right: 1px solid rgba(0,0,0,.2);
}


.corner-bl {

    bottom: 30px;
    left: 30px;

    border-bottom: 1px solid rgba(0,0,0,.2);
    border-left: 1px solid rgba(0,0,0,.2);
}


.corner-br {

    bottom: 30px;
    right: 30px;

    border-bottom: 1px solid rgba(0,0,0,.2);
    border-right: 1px solid rgba(0,0,0,.2);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .ucb-loader-content {
        width: 90%;
    }

    .ucb-logo-wrapper {
        width: 180px;
        height: 180px;
    }

    .ucb-logo {
        width: 125px;
    }

    .ucb-scanner {
        width: 155px;
        height: 155px;
    }

    .orbit-one {
        width: 270px;
        height: 270px;
    }

    .orbit-two {
        width: 380px;
        height: 380px;
    }

    .orbit-three {
        width: 520px;
        height: 520px;
    }

    .ucb-brand-line span {
        font-size: 22px;
    }

    .ucb-progress {
        width: 220px;
    }

    .ucb-security {
        bottom: 20px;
        font-size: 8px;
    }
}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

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

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}