/* =========================================
   QUANTUM FLOW UI (V6: SAFE FLOAT)
   Fitur: Neon Masking, Controlled 3D Icons
   ========================================= */

/* --- 1. SETTING RUANG 3D --- */
body.quantum-active .menu-page {
    perspective: 1000px;
}

/* --- 2. MASTER CARD (KACA GELAP) --- */
body.quantum-active .bento-item,
body.quantum-active .social-card,
body.quantum-active .glass-panel {
    position: relative;
    background: #0f172a !important; 
    border-radius: 20px;
    border: none !important;
    
    /* Shadow Tebal */
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.8),
        inset 0 0 20px rgba(0, 0, 0, 0.5);
        
    transform-style: preserve-3d;
    transition: transform 0.1s;
    z-index: 1; 
}

/* --- 3. NEON BORDER (MASKING) --- */
body.quantum-active .bento-item::before,
body.quantum-active .social-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px; 
    padding: 2px; 
    
    background: linear-gradient(
        45deg, 
        #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000
    );
    background-size: 400%;
    
    -webkit-mask: 
       linear-gradient(#fff 0 0) content-box, 
       linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    animation: neonStream 15s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes neonStream {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- 4. GLOW HALUS --- */
body.quantum-active .bento-item::after,
body.quantum-active .social-card::after {
    content: '';
    position: absolute;
    top: 5px; left: 5px; right: 5px; bottom: 5px;
    background: inherit;
    border-radius: 20px;
    z-index: -1;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
    opacity: 0.5;
}

/* --- 5. EFEK TEKAN (PRESS) --- */
body.quantum-active .bento-item:active,
body.quantum-active .social-card:active {
    transform: scale(0.96);
}

/* --- 6. IKON HIDUP (SAFE MODE) --- */
body.quantum-active .bento-icon, 
body.quantum-active .sc-icon {
    /* Bayangan Ikon */
    filter: drop-shadow(0 15px 5px rgba(0,0,0,0.5));
    
    /* Animasi Aman: Melayang Terkendali */
    animation: iconSafeFloat 4s ease-in-out infinite;
    transform: translateZ(20px); 
    
    /* PENTING: Paksa ada jarak di bawah ikon agar tidak injak teks */
    margin-bottom: 5px !important; 
    display: inline-block; 
}

@keyframes iconSafeFloat {
    0% { 
        /* Posisi Awal: Sedikit Miring Kiri */
        transform: translateZ(20px) translateY(0px) rotateY(-8deg); 
    }
    50% { 
        /* Posisi Puncak: HANYA NAIK (Minus Y), TIDAK TURUN */
        /* Miring Kanan Sedikit */
        transform: translateZ(35px) translateY(-6px) rotateY(8deg); 
    }
    100% { 
        /* Kembali ke Awal */
        transform: translateZ(20px) translateY(0px) rotateY(-8deg); 
    }
}

/* --- 7. TEXT POP-UP (SAFE) --- */
body.quantum-active .bento-text,
body.quantum-active .sc-name {
    /* Teks dimundurkan sedikit dibanding ikon biar ada depth */
    transform: translateZ(10px);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    /* Pastikan teks tidak ikut-ikutan goyang */
    display: block; 
}

/* --- 8. RIPPLE & ENTRY --- */
.quantum-btn { position: relative; overflow: hidden; }
span.q-ripple {
    position: absolute; border-radius: 50%;
    transform: scale(0);
    animation: rippleAnim 0.5s linear;
    background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, transparent 70%);
    pointer-events: none; z-index: 100;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

.quantum-fade-entry {
    animation: zoomIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes zoomIn {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

/* =========================================
   PATCH FINAL: STABILIZED FLOAT (ANTI MABUK)
   Fitur: 
   1. Live Server: Aman (Rapi)
   2. Safe Mode: Ikon Naik-Turun (Tanpa Goyang Kiri-Kanan)
   3. Teks: DIAM ditempat (Tidak ikut gerak)
   ========================================= */

/* --- 1. SETTING GLOBAL (Kecuali Live Server) --- */
/* Paksa semua konten naik ke lapisan 3D */
body.quantum-active .bento-item:not(.widget-slider) .bento-icon, 
body.quantum-active .bento-item:not(.widget-slider) .bento-text, 
body.quantum-active .bento-item:not(.widget-slider) .bento-desc,
body.quantum-active .bento-item:not(.widget-slider) div,
body.quantum-active .social-card div, 
body.quantum-active .sc-icon, 
body.quantum-active .sc-name {
    position: relative !important;
    z-index: 50 !important; 
    transform-style: preserve-3d; 
}

/* --- 2. LIVE SERVER (KUNCI TOTAL) --- */
/* Biar gambar slider tidak bocor */
body.quantum-active .widget-slider {
    overflow: hidden !important; 
    transform-style: flat !important; 
    z-index: 1 !important;
}

/* --- 3. SAFE MODE (HALAMAN 3 - STABIL) --- */
/* Izinkan 3D, tapi kontrol gerakannya */
body.quantum-active .safe-mode {
    overflow: visible !important; 
    transform-style: preserve-3d !important;
}

/* IKON DI SAFE MODE: Gerak Vertikal Saja (Naik Turun) */
body.quantum-active .safe-mode .bento-icon {
    /* Gunakan animasi baru 'stableFloat' */
    animation: stableFloat 3s ease-in-out infinite !important;
    /* Reset rotasi (Hapus miring-miringnya) */
    transform: translateZ(20px) !important; 
    margin-bottom: 0 !important;
}

/* TEKS DI SAFE MODE: DIAM TOTAL (Biar Rapi) */
body.quantum-active .safe-mode .bento-text,
body.quantum-active .safe-mode .bento-desc {
    /* Matikan animasi pada teks */
    animation: none !important;
    /* Cuma timbul sedikit (3D), tapi posisinya dikunci */
    transform: translateZ(10px) !important;
}

/* --- 4. ANIMASI BARU (NAIK TURUN DOANG) --- */
@keyframes stableFloat {
    0%, 100% { 
        /* Posisi Awal */
        transform: translateZ(20px) translateY(0); 
    }
    50% { 
        /* Naik 6px (Tanpa Rotate Y sama sekali) */
        transform: translateZ(20px) translateY(-6px); 
    }
}

/* --- 5. TOMBOL WAJIB (Buy Key/Toolbox) --- */
body.quantum-active .bento-item .fa-key,
body.quantum-active .bento-item .fa-toolbox,
body.quantum-active .bento-item i {
    position: relative !important;
    z-index: 51 !important;
}