/* ==========================================================================
   AI Black Hole — Cinematic vortex + scatter + reassemble
   ========================================================================== */

/* --- Floating trigger button --- */
.ai-blackhole-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9990;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.12);
    background: radial-gradient(circle, #0a0a14 40%, #000 100%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.6), inset 0 0 15px rgba(100,60,255,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.ai-blackhole-btn::before {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(139,92,246,0.5);
    border-right-color: rgba(59,130,246,0.3);
    animation: ai-bh-spin 3s linear infinite;
}
.ai-blackhole-btn::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,0.8), transparent);
    box-shadow: 0 0 8px rgba(139,92,246,0.5);
}
.ai-blackhole-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 0 30px rgba(139,92,246,0.35), inset 0 0 20px rgba(100,60,255,0.25);
    border-color: rgba(139,92,246,0.3);
}
@keyframes ai-bh-spin {
    to { transform: rotate(360deg); }
}

/* --- Full-screen overlay --- */
.ai-blackhole-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.ai-blackhole-overlay.active { opacity: 1; pointer-events: all; }

/* Singularity core — grows slowly during suction */
.ai-blackhole-core {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, #000 20%, rgba(10,0,30,0.95) 50%, rgba(139,92,246,0.08) 70%, transparent 85%);
    transform: translate(-50%, -50%);
    transition: width 5s cubic-bezier(0.25,0,0.3,1), height 5s cubic-bezier(0.25,0,0.3,1),
                box-shadow 4s ease;
}
.ai-blackhole-overlay.phase-suck .ai-blackhole-core {
    width: 350vmax; height: 350vmax;
    box-shadow: 0 0 300px 120px rgba(0,0,0,0.95);
}

/* Accretion ring */
.ai-blackhole-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 120px; height: 120px;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotateX(72deg);
    border: 2px solid rgba(139,92,246,0.35);
    box-shadow: 0 0 60px 15px rgba(139,92,246,0.12), inset 0 0 60px 15px rgba(59,130,246,0.08);
    animation: ai-bh-ring 1.8s linear infinite;
    opacity: 0;
    transition: opacity 1s ease 0.5s, width 4s ease, height 4s ease;
}
.ai-blackhole-ring--2 {
    border-color: rgba(59,130,246,0.2);
    animation-duration: 2.6s;
    animation-direction: reverse;
    width: 80px; height: 80px;
}
.ai-blackhole-overlay.phase-suck .ai-blackhole-ring {
    opacity: 1; width: 600px; height: 600px;
}
.ai-blackhole-overlay.phase-suck .ai-blackhole-ring--2 {
    width: 420px; height: 420px;
}
.ai-blackhole-overlay.phase-dark .ai-blackhole-ring { opacity: 0; }
@keyframes ai-bh-ring {
    to { transform: translate(-50%, -50%) rotateX(72deg) rotate(360deg); }
}

/* Glow pulse behind singularity */
.ai-bh-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 300px; height: 300px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%);
    animation: ai-bh-pulse 2s ease-in-out infinite;
    opacity: 0;
    transition: opacity 1s ease;
}
.ai-blackhole-overlay.phase-suck .ai-bh-glow { opacity: 1; }
.ai-blackhole-overlay.phase-dark .ai-bh-glow { opacity: 0; }
@keyframes ai-bh-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
}

/* Vortex spiral arms */
.ai-bh-spiral {
    position: absolute;
    top: 50%; left: 50%;
    width: 3px;
    height: 80px;
    transform-origin: center bottom;
    opacity: 0;
    transition: opacity 0.6s ease, height 3s ease;
}
.ai-bh-spiral::after {
    content: '';
    display: block;
    width: 100%; height: 100%;
    background: linear-gradient(to top, transparent, rgba(139,92,246,0.35));
    border-radius: 2px;
}

/* Dark phase */
.ai-blackhole-overlay.phase-dark {
    background: #000;
    transition: background 0.5s ease;
}

/* Wormhole tunnel streaks */
.ai-bh-tunnel {
    position: absolute;
    top: 50%; left: 50%;
    width: 2px;
    transform-origin: center top;
    opacity: 0;
    border-radius: 1px;
}

/* --- 3D perspective on body during suction --- */
.ai-bh-sucking {
    perspective: 1200px;
    perspective-origin: 50% 50%;
}

/* --- Screen shake --- */
@keyframes ai-bh-shake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-8px, 4px); }
    20% { transform: translate(6px, -6px); }
    30% { transform: translate(-4px, 8px); }
    40% { transform: translate(8px, -2px); }
    50% { transform: translate(-6px, -4px); }
    60% { transform: translate(4px, 6px); }
    70% { transform: translate(-2px, -8px); }
    80% { transform: translate(6px, 2px); }
    90% { transform: translate(-4px, 4px); }
}
.ai-bh-shake {
    animation: ai-bh-shake 0.15s linear infinite;
}

/* --- Glitch flicker overlay --- */
.ai-bh-glitch-overlay {
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
    animation: ai-bh-glitch 0.12s step-end infinite;
    mix-blend-mode: screen;
}
@keyframes ai-bh-glitch {
    0%   { background: transparent; }
    15%  { background: rgba(139,92,246,0.04); }
    30%  { background: transparent; }
    45%  { background: rgba(59,130,246,0.03); }
    60%  { background: transparent; }
    75%  { background: rgba(255,0,80,0.02); }
    90%  { background: transparent; }
}

/* Hide button & nav during animation */
.ai-bh-sucking .ai-blackhole-btn,
.ai-bh-scattered .ai-blackhole-btn,
.ai-bh-reassembling .ai-blackhole-btn { opacity: 0; pointer-events: none; }

.ai-bh-sucking .ai-nav-dots,
.ai-bh-scattered .ai-nav-dots,
.ai-bh-reassembling .ai-nav-dots { opacity: 0; pointer-events: none; }

/* Overflow hidden on body during animation to prevent scroll */
.ai-bh-sucking, .ai-bh-scattered, .ai-bh-reassembling {
    overflow: hidden !important;
}

/* --- Fixed stage for clones (viewport-mapped) --- */
.ai-bh-stage {
    position: fixed;
    inset: 0;
    z-index: 100000;
    pointer-events: none;
    overflow: hidden;
}
.ai-bh-clone {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
    transform-origin: center center;
    overflow: hidden;
}

/* --- RTL: flip button to right side --- */
html[dir="rtl"] .ai-blackhole-btn,
.ai-rtl .ai-blackhole-btn {
    right: auto;
    left: 30px;
}

/* --- Mobile --- */
@media (max-width: 768px) {
    .ai-blackhole-btn {
        width: 40px;
        height: 40px;
        bottom: 20px;
    }
    html[dir="rtl"] .ai-blackhole-btn,
    .ai-rtl .ai-blackhole-btn {
        right: auto;
        left: 20px;
    }
    .ai-blackhole-overlay.phase-suck .ai-blackhole-ring {
        width: 300px;
        height: 300px;
    }
}