/* Shared VCI loader for public, admin, and student pages. */
.vci-page-loader {
    align-items: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(40, 166, 196, .2), transparent 28rem),
        linear-gradient(135deg, #071c3d 0%, #0d3260 52%, #071a35 100%);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    position: fixed;
    transition: opacity .35s ease-out, visibility 0s linear .35s;
    visibility: hidden;
    z-index: 2147483647;
}

.vci-page-loader.show {
    opacity: 1;
    transition: opacity .35s ease-out;
    visibility: visible;
}

.vci-page-loader .vci-loader {
    align-items: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.vci-page-loader .vci-loader__orbital-stage { height: 190px; position: relative; width: 190px; }

.vci-page-loader .vci-loader__logo-wrap {
    align-items: center;
    animation: vci-float 2.8s ease-in-out infinite;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 215, 105, .75);
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(255, 208, 72, .8), 0 0 48px rgba(43, 186, 229, .55);
    display: flex;
    height: 104px;
    justify-content: center;
    left: 43px;
    overflow: hidden;
    position: absolute;
    top: 43px;
    width: 104px;
    z-index: 2;
}

.vci-page-loader .vci-loader__logo { height: 78px; object-fit: contain; width: 78px; }
.vci-page-loader .vci-loader__orbit { border: 1px solid rgba(137, 224, 255, .68); border-radius: 50%; inset: 8px; position: absolute; }
.vci-page-loader .vci-loader__orbit--outer { animation: vci-orbit-clockwise 5.5s linear infinite; border-right-color: #f6c54f; border-top-color: #fff1b4; }
.vci-page-loader .vci-loader__orbit--inner { animation: vci-orbit-counterclockwise 4.1s linear infinite; border-bottom-color: #f6c54f; border-left-color: rgba(255, 255, 255, .92); inset: 26px; }

.vci-page-loader .vci-loader__particle {
    background: #ffd35e;
    border-radius: 50%;
    box-shadow: 0 0 8px 3px rgba(255, 197, 56, .72);
    height: 9px;
    left: 91px;
    position: absolute;
    top: 3px;
    transform-origin: 4px 92px;
    width: 9px;
    z-index: 3;
}

.vci-page-loader .vci-loader__particle--one { animation: vci-particle-one 3.4s linear infinite; }
.vci-page-loader .vci-loader__particle--two { animation: vci-particle-two 4.6s linear infinite; height: 7px; width: 7px; }
.vci-page-loader .vci-loader__particle--three { animation: vci-particle-three 5.3s linear infinite; height: 6px; width: 6px; }
.vci-page-loader .vci-loader__label { font-family: 'Nunito', sans-serif; font-size: clamp(.9rem, 2.6vw, 1.05rem); font-weight: 700; letter-spacing: .08em; margin: 18px 0 13px; text-transform: uppercase; }
.vci-page-loader .vci-loader__progress { background: rgba(255, 255, 255, .2); border-radius: 999px; height: 4px; overflow: hidden; width: min(240px, 64vw); }
.vci-page-loader .vci-loader__progress span { animation: vci-progress 2.1s ease-in-out infinite; background: linear-gradient(90deg, #00c2e8, #f8cc59, #fff5bc, #00c2e8); background-size: 200% 100%; border-radius: inherit; display: block; height: 100%; }

@keyframes vci-float { 50% { transform: translateY(-9px); } }
@keyframes vci-orbit-clockwise { to { transform: rotate(360deg); } }
@keyframes vci-orbit-counterclockwise { to { transform: rotate(-360deg); } }
@keyframes vci-particle-one { to { transform: rotate(360deg); } }
@keyframes vci-particle-two { from { transform: rotate(120deg); } to { transform: rotate(480deg); } }
@keyframes vci-particle-three { from { transform: rotate(240deg); } to { transform: rotate(600deg); } }
@keyframes vci-progress { 0% { background-position: 100% 0; transform: translateX(-65%); width: 65%; } 50% { transform: translateX(55%); width: 75%; } 100% { background-position: 0 0; transform: translateX(170%); width: 65%; } }

@media (prefers-reduced-motion: reduce) {
    .vci-page-loader *, .vci-page-loader *::before, .vci-page-loader *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .vci-page-loader .vci-loader__progress span { transform: none; width: 100%; }
}