/* ==============================================================================
   SMASTIC CYBER GUARD - COSMIC LOADERS: BLACK HOLE & WHITE HOLE
   High-performance, GPU-accelerated Sci-Fi Visual Loading System
   ============================================================================== */

.cosmic-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(3, 7, 18, 0.94) 0%, rgba(1, 2, 6, 0.98) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    color: #ffffff;
    user-select: none;
    overflow: hidden;
}

.cosmic-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Background Stars Grid */
.cosmic-stars-bg {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(1px 1px at 25px 35px, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 120px 80px, rgba(0, 240, 255, 0.9), rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 220px 180px, rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0)),
        radial-gradient(2px 2px at 340px 290px, rgba(16, 185, 129, 0.8), rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 480px 140px, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0)),
        radial-gradient(1.5px 1.5px at 590px 380px, rgba(245, 158, 11, 0.7), rgba(0, 0, 0, 0));
    background-repeat: repeat;
    background-size: 600px 450px;
    opacity: 0.4;
    pointer-events: none;
    animation: cosmicStarsDrift 120s linear infinite;
}

@keyframes cosmicStarsDrift {
    from { transform: translate(0, 0); }
    to { transform: translate(-300px, -225px); }
}

/* Canvas Wrapper */
.cosmic-canvas-box {
    position: relative;
    width: 380px;
    height: 380px;
    max-width: 85vw;
    max-height: 85vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cosmic-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Outer Holographic Reticle Ring */
.cosmic-hud-ring {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px dashed rgba(0, 240, 255, 0.25);
    pointer-events: none;
    animation: cosmicHudSpin 45s linear infinite;
}

.cosmic-hud-ring-inner {
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    border: 1px dotted rgba(255, 255, 255, 0.15);
    pointer-events: none;
    animation: cosmicHudSpinRev 30s linear infinite;
}

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

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

/* Status Cards & Text */
.cosmic-info-card {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 18px;
    max-width: 600px;
    padding: 0 20px;
}

.cosmic-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 9999px;
    margin-bottom: 12px;
    backdrop-filter: blur(8px);
}

.cosmic-badge-blackhole {
    background: rgba(0, 240, 255, 0.1);
    color: #00f0ff;
    border: 1px solid rgba(0, 240, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
}

.cosmic-badge-whitehole {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
}

.cosmic-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
    line-height: 1.25;
}

.cosmic-title-blackhole {
    background: linear-gradient(135deg, #ffffff 30%, #00f0ff 80%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(0, 240, 255, 0.35);
}

.cosmic-title-whitehole {
    background: linear-gradient(135deg, #ffffff 40%, #6ee7b7 80%, #00f0ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(16, 185, 129, 0.4);
}

.cosmic-subtitle {
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.5;
    margin-bottom: 16px;
    max-width: 480px;
}

/* Progress Bar Container */
.cosmic-progress-container {
    width: 320px;
    max-width: 80vw;
    height: 7px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.12);
    margin-bottom: 12px;
}

.cosmic-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 9999px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.cosmic-progress-blackhole {
    background: linear-gradient(90deg, #f59e0b 0%, #00f0ff 70%, #ffffff 100%);
    box-shadow: 0 0 16px #00f0ff;
}

.cosmic-progress-whitehole {
    background: linear-gradient(90deg, #00f0ff 0%, #10b981 70%, #ffffff 100%);
    box-shadow: 0 0 16px #10b981;
}

/* Telemetry Step Ticker */
.cosmic-step-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cosmic-step-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00f0ff;
    box-shadow: 0 0 8px #00f0ff;
    animation: cosmicDotPulse 1.2s ease-in-out infinite alternate;
}

.cosmic-step-dot.whitehole-dot {
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

@keyframes cosmicDotPulse {
    from { transform: scale(0.8); opacity: 0.6; }
    to { transform: scale(1.3); opacity: 1; }
}

/* Sound / Mute Toggle Button */
.cosmic-mute-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #94a3b8;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.cosmic-mute-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

/* ==============================================================================
   SHATTER BURST, SCREEN SHAKE & SUDDEN VANISH EFFECTS
   ============================================================================== */

/* Screen Shake on Shatter */
.cosmic-overlay.cosmic-shattering {
    animation: cosmicScreenShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes cosmicScreenShake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    12% { transform: translate3d(-10px, -6px, 0); }
    24% { transform: translate3d(9px, 7px, 0); }
    36% { transform: translate3d(-7px, 5px, 0); }
    48% { transform: translate3d(6px, -4px, 0); }
    60% { transform: translate3d(-4px, 3px, 0); }
    72% { transform: translate3d(3px, -2px, 0); }
    84% { transform: translate3d(-2px, 1px, 0); }
}

/* Unclip Canvas so shards burst outwards freely */
.cosmic-overlay.cosmic-shattering .cosmic-canvas {
    border-radius: 0;
}

.cosmic-overlay.cosmic-shattering .cosmic-canvas-box {
    transform: scale(1.15);
    transition: transform 0.5s cubic-bezier(0.1, 0.9, 0.2, 1);
}

/* Exploding Outer & Inner HUD Rings */
.cosmic-overlay.cosmic-shattering .cosmic-hud-ring {
    animation: cosmicRingExplode 0.55s cubic-bezier(0.1, 0.9, 0.2, 1) forwards !important;
}

.cosmic-overlay.cosmic-shattering .cosmic-hud-ring-inner {
    animation: cosmicRingExplodeInner 0.45s cubic-bezier(0.1, 0.9, 0.2, 1) forwards !important;
}

@keyframes cosmicRingExplode {
    0% { transform: scale(1) rotate(0deg); opacity: 0.8; }
    40% { opacity: 1; border-color: #ffffff; filter: drop-shadow(0 0 20px #00f0ff); }
    100% { transform: scale(2.6) rotate(90deg); opacity: 0; }
}

@keyframes cosmicRingExplodeInner {
    0% { transform: scale(1) rotate(0deg); opacity: 0.8; }
    40% { opacity: 1; border-color: #ffffff; filter: drop-shadow(0 0 20px #6ee7b7); }
    100% { transform: scale(3.0) rotate(-90deg); opacity: 0; }
}

/* Info Card & UI Elements Rapid Dissolve */
.cosmic-overlay.cosmic-shattering .cosmic-info-card {
    transition: all 0.35s cubic-bezier(0.2, 0, 0, 1);
    transform: scale(0.92) translateY(18px);
    opacity: 0;
    filter: blur(6px);
}

.cosmic-overlay.cosmic-shattering .cosmic-mute-btn {
    transition: all 0.25s ease;
    opacity: 0;
    transform: translateY(-12px);
}