* {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

/* ── NATIVE PREMIUM MODAL ANIMATIONS SYSTEM ── */

.animate__animated {
    animation-duration: 0.6s;
    animation-fill-mode: both;
}

/* 1. Cyber Glitch & Scale */
@keyframes cyberGlitchIn {
    0%, 100% {
        transform: scale(1);
        filter: hue-rotate(0deg) saturate(1);
    }
    20% {
        transform: scale(1.02) skewX(1deg);
        filter: hue-rotate(45deg) saturate(1.2);
    }
    40% {
        transform: scale(0.98) skewX(-1deg);
        filter: hue-rotate(90deg) saturate(1.5);
    }
    60% {
        transform: scale(1.01) skewX(2deg);
        filter: hue-rotate(180deg) saturate(1.2);
    }
    80% {
        transform: scale(0.99) skewX(-2deg);
        filter: hue-rotate(270deg) saturate(1.3);
    }
}
.animate__cyberGlitch {
    animation: cyberGlitchIn 6s infinite ease-in-out !important;
}

/* 2. Luxury Gold Glow */
@keyframes goldGlowIn {
    0%, 100% {
        transform: scale(1) rotateY(0deg) translateY(0px);
    }
    50% {
        transform: scale(1.015) rotateY(3deg) translateY(-4px);
    }
}
.animate__goldGlow {
    animation: goldGlowIn 4.5s infinite ease-in-out !important;
}

/* 3. 3D Flip & Float */
@keyframes flip3DIn {
    0%, 100% {
        transform: perspective(600px) rotateX(0deg) translateY(0px);
    }
    50% {
        transform: perspective(600px) rotateX(2deg) translateY(-8px);
    }
}
.animate__flip3D {
    animation: flip3DIn 4s infinite ease-in-out !important;
}

/* 4. Neon Pulsation (Bouncy Looping Pulse) */
@keyframes neonPulseIn {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}
.animate__neonPulse {
    animation: neonPulseIn 3s infinite ease-in-out !important;
}

/* 5. Cosmic Vortex */
@keyframes cosmicVortexIn {
    0% {
        transform: scale(1) rotate(0deg);
    }
    100% {
        transform: scale(1) rotate(360deg);
    }
}
.animate__cosmicVortex {
    animation: cosmicVortexIn 25s infinite linear !important;
}

/* 6. Luxury Slide & Blur */
@keyframes slideBlurIn {
    0%, 100% {
        transform: translateY(0px) scale(1);
        filter: blur(0px);
    }
    50% {
        transform: translateY(-5px) scale(1.01);
        filter: blur(1px);
    }
}
.animate__slideBlur {
    animation: slideBlurIn 5s infinite ease-in-out !important;
}

/* 7. Luxury Diamond Shine */
@keyframes diamondShineIn {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.015) rotate(0.3deg);
        filter: brightness(1.08);
    }
}
.animate__diamondShine {
    animation: diamondShineIn 5s infinite ease-in-out !important;
    position: relative;
    overflow: hidden;
}
.animate__diamondShine::after {
    content: '';
    position: absolute;
    top: -150%;
    left: -150%;
    width: 300%;
    height: 300%;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: diamondShineSweep 5s infinite ease-in-out;
    pointer-events: none;
}
@keyframes diamondShineSweep {
    0% {
        transform: translate(-30%, -30%);
    }
    100% {
        transform: translate(30%, 30%);
    }
}

/* 8. Mystic Aurora Bloom */
@keyframes auroraBloomIn {
    0%, 100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 8px 24px rgba(168, 85, 247, 0.15);
    }
    50% {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 16px 32px rgba(168, 85, 247, 0.3);
    }
}
.animate__auroraBloom {
    animation: auroraBloomIn 6s infinite ease-in-out !important;
}

/* Infinite loop rules for profile wraps */
.profile_wrap.animate__animated,
.preview_anim_box.animate__animated {
    animation-iteration-count: infinite !important;
}

/* Ensure standard animations loop smoothly and slowly on the profile */
.profile_wrap.animate__bounceIn, .preview_anim_box.animate__bounceIn { animation-duration: 3s !important; }
.profile_wrap.animate__fadeIn, .preview_anim_box.animate__fadeIn { animation-duration: 4s !important; }
.profile_wrap.animate__zoomIn, .preview_anim_box.animate__zoomIn { animation-duration: 4s !important; }
.profile_wrap.animate__rollIn, .preview_anim_box.animate__rollIn { animation-duration: 5s !important; }

/* Preview element helper classes */
.anim_box_item {
    padding: 10px 14px;
    margin: 6px 0;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.anim_box_item:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.1);
}
.anim_box_item.selected {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.4);
}
.preview_anim_box {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    margin: 15px auto;
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.3);
}

/* ── INTELLIGENT GLOWING SIDEBAR ICONS SYSTEM ── */

/* 1. Muted default state for all icons */
.left_menu_icon i.leftmenui {
    color: rgba(255, 255, 255, 0.65) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    filter: drop-shadow(0 0 0px transparent) !important;
}

/* 2. Hover states with premium glowing colors */

/* Room List - Electric Blue */
.left_menu_item:hover .fa-house-user {
    color: #00d2d3 !important;
    filter: drop-shadow(0 0 8px rgba(0, 210, 211, 0.8)) !important;
}

/* Wall - Coral/Orange-Red */
.left_menu_item:hover .fa-rss {
    color: #ff6b6b !important;
    filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.8)) !important;
}

/* News - Neon Green */
.left_menu_item:hover .fa-newspaper {
    color: #1dd1a1 !important;
    filter: drop-shadow(0 0 8px rgba(29, 209, 161, 0.8)) !important;
}

/* Birthday Wall - Soft Candy Red */
.left_menu_item:hover .fa-birthday-cake {
    color: #ff4757 !important;
    filter: drop-shadow(0 0 8px rgba(255, 71, 87, 0.8)) !important;
}

/* Games - Deep Amber */
.left_menu_item:hover .fa-dice {
    color: #ff9f43 !important;
    filter: drop-shadow(0 0 8px rgba(255, 159, 67, 0.8)) !important;
}

/* Apps - Purple/Violet */
.left_menu_item:hover .fa-tablet-screen-button {
    color: #9b59b6 !important;
    filter: drop-shadow(0 0 8px rgba(155, 89, 182, 0.8)) !important;
}

/* Tools - Platinum/White */
.left_menu_item:hover .fa-toolbox {
    color: #ffffff !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) !important;
}

/* Store - Gold */
.left_menu_item:hover .fa-store {
    color: #f1c40f !important;
    filter: drop-shadow(0 0 8px rgba(241, 196, 15, 0.8)) !important;
}

/* Leaderboard - Sky Blue/Silver */
.left_menu_item:hover .fa-medal {
    color: #3498db !important;
    filter: drop-shadow(0 0 8px rgba(52, 152, 219, 0.8)) !important;
}

/* Help - Emerald Green */
.left_menu_item:hover .fa-life-ring {
    color: #2ecc71 !important;
    filter: drop-shadow(0 0 8px rgba(46, 204, 113, 0.8)) !important;
}

/* Secret Messages - Neon Cyan */
.left_menu_item:hover .fa-user-secret {
    color: #00e5ff !important;
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.8)) !important;
}

/* 3. Smooth Scale Micro-interaction on Hover */
.left_menu_item {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.left_menu_item:hover {
    transform: scale(1.1) !important;
}