/* ============================================================
   Balshoi — Custom Styles
   ============================================================ */

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb { background: #24243e; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a855f7; }

/* ---------- Selection ---------- */
::selection { background: rgba(0, 212, 255, 0.3); color: #fff; }

/* ---------- Navbar ---------- */
nav {
    transition: all 0.3s ease;
}
nav.scrolled {
    @apply bg-dark-900/95 shadow-lg;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
nav .nav-border {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,0.3), rgba(168,85,247,0.3), transparent);
    opacity: 0.4;
    transition: opacity 0.3s ease;
}
nav.scrolled .nav-border {
    opacity: 1;
}

/* ---------- Nav Links (desktop) ---------- */
.nav-link {
    @apply relative px-5 py-2.5 text-sm font-medium text-gray-400 transition-all duration-300;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #00d4ff, #a855f7);
    border-radius: 1px;
    transform: translateX(-50%);
    transition: width 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}
.nav-link:hover {
    @apply text-white;
}
.nav-link:hover::after {
    width: 60%;
    opacity: 1;
}
.nav-link.active {
    @apply text-neon-blue;
}
.nav-link.active::after {
    width: 60%;
    opacity: 1;
}

/* ---------- Logo hover glow ---------- */
nav .logo-icon {
    transition: all 0.4s ease;
}
nav .logo-icon:hover {
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.4), 0 0 50px rgba(168, 85, 247, 0.2);
    transform: scale(1.05) rotate(-3deg);
}
nav .logo-text {
    transition: all 0.3s ease;
}
nav .logo-text:hover {
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

/* ---------- Mobile Nav ---------- */
#mobileMenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(-10px);
}
#mobileMenu.open {
    max-height: 400px;
    opacity: 1;
    transform: translateY(0);
}

/* Staggered entrance for mobile menu items */
#mobileMenu .mobile-nav-link {
    opacity: 0;
    transform: translateX(-15px);
    transition: all 0.3s ease;
}
#mobileMenu.open .mobile-nav-link {
    opacity: 1;
    transform: translateX(0);
}
#mobileMenu.open .mobile-nav-link:nth-child(1) { transition-delay: 0.05s; }
#mobileMenu.open .mobile-nav-link:nth-child(2) { transition-delay: 0.10s; }
#mobileMenu.open .mobile-nav-link:nth-child(3) { transition-delay: 0.15s; }
#mobileMenu.open .mobile-nav-link:nth-child(4) { transition-delay: 0.20s; }
#mobileMenu.open .mobile-nav-link:nth-child(5) { transition-delay: 0.25s; }

.mobile-nav-link {
    @apply relative block px-5 py-3.5 rounded-lg text-sm font-medium text-gray-400 transition-all duration-300 overflow-hidden;
}
.mobile-nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #00d4ff, #a855f7);
    transform: scaleY(0);
    transition: transform 0.3s ease;
    border-radius: 0 2px 2px 0;
}
.mobile-nav-link:hover {
    @apply text-white bg-white/5 pl-7;
}
.mobile-nav-link:hover::before {
    transform: scaleY(1);
}
.mobile-nav-link.active {
    @apply text-neon-blue bg-neon-blue/10 pl-7;
}
.mobile-nav-link.active::before {
    transform: scaleY(1);
}

/* ---------- Mobile menu button animation ---------- */
#mobileMenuBtn {
    transition: all 0.3s ease;
}
#mobileMenuBtn:hover {
    @apply text-white;
    transform: scale(1.1);
}

@media (min-width: 768px) {
    #mobileMenu {
        max-height: 0 !important;
        opacity: 0 !important;
        transform: none !important;
    }
}

/* ---------- Hero ---------- */
.hero-gradient {
    background: radial-gradient(ellipse at 30% 50%, rgba(0,212,255,0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 50%, rgba(168,85,247,0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 50% 100%, rgba(16,185,129,0.05) 0%, transparent 50%);
}

/* ---------- Glow effects ---------- */
.glow-blue {
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.15), 0 0 60px rgba(0, 212, 255, 0.05);
}
.glow-purple {
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.15), 0 0 60px rgba(168, 85, 247, 0.05);
}
.glow-cyan {
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.15), 0 0 60px rgba(34, 211, 238, 0.05);
}

/* ---------- Service Cards ---------- */
.service-card {
    @apply relative p-6 rounded-2xl bg-dark-800 border border-white/5 transition-all duration-500;
}
.service-card:hover {
    @apply border-neon-blue/30 -translate-y-2;
    box-shadow: 0 20px 60px rgba(0, 212, 255, 0.1);
}
.service-card .icon-wrap {
    @apply w-14 h-14 rounded-xl flex items-center justify-center text-2xl transition-all duration-500;
}
.service-card:hover .icon-wrap {
    @apply scale-110;
}
.service-card:hover .icon-wrap i {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* ---------- Team Cards ---------- */
.team-card {
    @apply relative p-6 rounded-2xl bg-dark-800 border border-white/5 transition-all duration-500 text-center;
}
.team-card:hover {
    @apply border-neon-purple/30 -translate-y-2;
    box-shadow: 0 20px 60px rgba(168, 85, 247, 0.1);
}
.team-card .avatar {
    @apply w-24 h-24 rounded-full mx-auto bg-gradient-to-br from-neon-blue to-neon-purple p-1;
}
.team-card .avatar img {
    @apply w-full h-full rounded-full object-cover border-2 border-dark-900;
}

/* ---------- Blog Cards ---------- */
.blog-card {
    @apply rounded-2xl bg-dark-800 border border-white/5 overflow-hidden transition-all duration-500;
}
.blog-card:hover {
    @apply border-neon-cyan/30 -translate-y-2;
    box-shadow: 0 20px 60px rgba(34, 211, 238, 0.1);
}

/* ---------- Glowing Button ---------- */
.btn-glow {
    @apply relative inline-flex items-center justify-center px-8 py-3 rounded-xl font-semibold text-white 
           bg-gradient-to-r from-neon-blue to-neon-purple transition-all duration-300 overflow-hidden;
}
.btn-glow:hover {
    @apply opacity-90;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
    transform: translateY(-2px);
}

/* ---------- Section heading ---------- */
.section-heading {
    @apply text-3xl md:text-4xl font-display font-bold text-white;
}
.section-sub {
    @apply text-gray-400 max-w-2xl mx-auto mt-4;
}

/* ---------- Grid background (abstract) ---------- */
.grid-bg {
    background-image:
        linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* ---------- Particle / floating dots ---------- */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.3);
    animation: float 6s ease-in-out infinite;
}

/* ---------- Typing cursor ---------- */
.typing-cursor::after {
    content: '|';
    animation: blink 1s step-end infinite;
    color: #00d4ff;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ---------- Form inputs ---------- */
.form-input {
    @apply w-full px-4 py-3 rounded-xl bg-dark-700 border border-white/10 text-gray-200 
           placeholder-gray-500 focus:outline-none focus:border-neon-blue focus:ring-1 focus:ring-neon-blue/50 
           transition-all duration-300;
}

/* ---------- Admin sidebar ---------- */
.sidebar-link {
    @apply flex items-center space-x-3 px-4 py-3 rounded-lg text-sm font-medium text-gray-400 transition-all duration-300;
}
.sidebar-link:hover {
    @apply text-white bg-white/5;
}
.sidebar-link.active {
    @apply text-neon-blue bg-neon-blue/10;
}

/* ---------- Admin stat card ---------- */
.stat-card {
    @apply p-6 rounded-2xl bg-dark-800 border border-white/5 transition-all duration-300;
}
.stat-card:hover {
    @apply border-neon-blue/20;
}

/* ---------- Responsive table ---------- */
.table-wrap {
    @apply w-full overflow-x-auto rounded-xl border border-white/5;
}
.table-wrap table {
    @apply w-full text-sm;
}
.table-wrap th {
    @apply px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-400 bg-dark-700;
}
.table-wrap td {
    @apply px-4 py-3 border-t border-white/5 text-gray-300;
}
.table-wrap tr:hover td {
    @apply bg-white/[0.02];
}

/* ---------- Toast notification ---------- */
.toast {
    @apply fixed bottom-6 right-6 z-50 px-6 py-3 rounded-xl shadow-2xl text-sm font-medium 
           transition-all duration-500 translate-y-4 opacity-0 pointer-events-none;
}
.toast.show {
    @apply translate-y-0 opacity-100 pointer-events-auto;
}
.toast.success { @apply bg-green-600 text-white; }
.toast.error   { @apply bg-red-600 text-white; }

/* ---------- Mobile responsiveness fixes ---------- */
@media (max-width: 640px) {
    .hero-title { font-size: 2.25rem; line-height: 1.2; }
    .section-heading { font-size: 1.875rem; }
}