/* ============================================
   3D LOADER — Rotating Gear
   Only used on homepage
   ============================================ */

.loader-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: radial-gradient(circle at 50% 45%, #002a52 0%, #001a33 60%, #000d1a 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

.loader-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* -------- 3D Gear Stage -------- */
.gear-stage {
    position: relative;
    width: 160px;
    height: 160px;
    perspective: 900px;
    transform-style: preserve-3d;
}

/* Main gear — rotates in 3D */
.gear {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: gearSpin3D 3.2s linear infinite;
    will-change: transform;
}

.gear-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            #FF6B00 0%,
            #FF6B00 34%,
            transparent 34%,
            transparent 46%,
            #FF6B00 46%,
            #FF6B00 100%
        );
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(255, 107, 0, 0.5);
}

/* Teeth around the gear */
.gear-tooth {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 26px;
    background: linear-gradient(180deg, #FF8a2c, #FF6B00);
    border-radius: 4px;
    transform-origin: center -62px;
    box-shadow: 0 0 8px rgba(255, 107, 0, 0.6);
    transform: translate(-50%, -50%) rotate(var(--rot)) translateY(-62px);
}

/* Center hub */
.gear-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff, #003366 70%);
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.6);
    z-index: 2;
}

.gear-hub::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #001a33;
}

/* Secondary gear (smaller, spins opposite) */
.gear-stage::after {
    content: '';
    position: absolute;
    left: -22px;
    bottom: -22px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            #003366 0%,
            #003366 40%,
            transparent 40%,
            transparent 52%,
            #003366 52%,
            #003366 100%
        );
    box-shadow: 0 0 20px rgba(0, 51, 102, 0.7);
    animation: gearSpin3D 2s linear infinite reverse;
    transform-style: preserve-3d;
}

/* 3D rotation */
@keyframes gearSpin3D {
    0%   { transform: rotate3d(0, 1, 0.25, 0deg); }
    100% { transform: rotate3d(0, 1, 0.25, 360deg); }
}

/* -------- Text + Progress -------- */
.loader-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: #FF6B00;
    text-shadow: 0 0 12px rgba(255, 107, 0, 0.6);
    animation: textPulse 1.6s ease-in-out infinite;
}

@keyframes textPulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

.loader-bar {
    width: 220px;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.loader-bar span {
    display: block;
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, transparent, #FF6B00, transparent);
    border-radius: 4px;
    animation: loaderSlide 1.4s ease-in-out infinite;
}

@keyframes loaderSlide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(320%); }
}

/* -------- Mobile ---------- */
@media (max-width: 576px) {
    .gear-stage { width: 120px; height: 120px; }
    .gear-tooth {
        width: 14px;
        height: 20px;
        transform-origin: center -48px;
        transform: translate(-50%, -50%) rotate(var(--rot)) translateY(-48px);
    }
    .gear-hub { width: 34px; height: 34px; }
    .gear-stage::after { width: 56px; height: 56px; left: -16px; bottom: -16px; }
    .loader-text { font-size: 0.8rem; letter-spacing: 2px; }
    .loader-bar { width: 170px; }
}