/* SAGERANK HYPERFRAMES PRELOADER STYLES */

#sagerank-preloader {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #030712;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s;
    opacity: 1;
    visibility: visible;
}

#sagerank-preloader.preloader-dismissed {
    opacity: 0;
    transform: scale(1.04);
    pointer-events: none;
    visibility: hidden;
}

.sr-stage-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, #081528 0%, #030712 70%, #010409 100%);
}

.sr-cyber-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(to right, rgba(14, 165, 233, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(14, 165, 233, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 30%, transparent 80%);
}

.sr-ambient-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(14, 165, 233, 0.25) 0%, rgba(29, 209, 100, 0.12) 40%, transparent 70%);
    filter: blur(50px);
    pointer-events: none;
    transition: transform 0.8s ease, opacity 0.8s ease;
}

.sr-hud-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(85vw, 480px);
    height: min(85vw, 480px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.sr-radar-ring {
    position: absolute;
    border-radius: 50%;
}

.sr-ring-1 {
    width: 60%;
    height: 60%;
    border: 1px solid rgba(14, 165, 233, 0.35);
}

.sr-ring-2 {
    width: 85%;
    height: 85%;
    border: 1px dashed rgba(29, 209, 100, 0.25);
    animation: srRotateCw 20s linear infinite;
}

.sr-ring-3 {
    width: 105%;
    height: 105%;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sr-radar-sweep {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    margin-top: -25%;
    margin-left: -25%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(14, 165, 233, 0.3) 0deg, rgba(29, 209, 100, 0.15) 45deg, transparent 90deg, transparent 360deg);
    animation: srRotateCw 2.5s linear infinite;
    transform-origin: center center;
}

@keyframes srRotateCw {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sr-hud-bracket {
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: rgba(14, 165, 233, 0.6);
}
.sr-bracket-tl { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
.sr-bracket-tr { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; }
.sr-bracket-bl { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }
.sr-bracket-br { bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; }

/* Center Logo Container */
.sr-logo-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(50vw, 220px);
    height: min(50vw, 220px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.sr-logo-backdrop-plate {
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15, 23, 42, 0.96) 0%, rgba(3, 7, 18, 0.85) 70%, transparent 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 35px rgba(29, 112, 209, 0.25), inset 0 0 20px rgba(255, 255, 255, 0.05);
    z-index: -1;
}

.sr-svg-logo {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.85));
}

.sr-scan-beam {
    position: absolute;
    left: -30px;
    right: -30px;
    height: 3px;
    top: 0%;
    background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0.9) 20%, #ffffff 50%, rgba(29, 209, 100, 0.9) 80%, transparent 100%);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.9), 0 0 28px rgba(29, 209, 100, 0.6);
    pointer-events: none;
    z-index: 30;
    opacity: 0;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .sr-hud-container {
        width: 320px;
        height: 320px;
    }
}