/* Premium Font Rendering & Base Typography */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-family: 'Inter', system-ui, sans-serif; font-weight: 400; line-height: 1.6; }
.font-display, h1, h2, h3, h4 { font-family: 'Poppins', system-ui, sans-serif; line-height: 1.2; letter-spacing: 0.02em; }
button, .btn-text { font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; letter-spacing: 0.03em; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #39FF14; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #2bd110; }

/* Glassmorphism Cards */
.glass-card {
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(57, 255, 20, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
    border-color: rgba(57, 255, 20, 0.6);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.3);
    transform: translateY(-5px);
}

/* Rating Circle */
.rating-circle {
    width: 40px; height: 40px; border-radius: 50%;
    background: conic-gradient(#39FF14 calc(var(--rating) * 1%), #1a1a1a calc(var(--rating) * 1%));
    display: flex; align-items: center; justify-content: center; position: relative;
}
.rating-circle::after {
    content: ''; position: absolute; width: 30px; height: 30px;
    background: #0a0a0a; border-radius: 50%;
}
.rating-circle span { position: relative; z-index: 1; font-size: 0.7rem; font-weight: bold; color: #fff; }

/* Shimmer Loading Effect */
.shimmer {
    background: linear-gradient(90deg, #111 25%, #222 50%, #111 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Custom Cursor */
#cursor { pointer-events: none; transition: transform 0.1s ease, border-color 0.2s ease, background 0.2s ease; }
#cursor.hover { transform: scale(2.5); border-color: #fff; background: rgba(57,255,20,0.1); }

/* Neon Glow Utilities */
.neon-border { box-shadow: 0 0 10px rgba(57,255,20,0.4), inset 0 0 10px rgba(57,255,20,0.1); }
.glow-btn { box-shadow: 0 0 15px rgba(57,255,20,0.5); transition: all 0.3s ease; }
.glow-btn:hover { box-shadow: 0 0 25px rgba(57,255,20,0.8); transform: scale(1.05); }

/* 🌟 RESPONSIVE SWIPER FIXES */
.swiper { width: 100%; padding-bottom: 3rem !important; }
.trending-swiper { 
    overflow: visible !important; 
    padding: 0 2px 4rem 2px; 
}
.trending-swiper .swiper-wrapper { align-items: stretch; }
.trending-swiper .swiper-slide { 
    height: auto !important; 
    display: flex; 
}
.trending-swiper .glass-card { 
    width: 100% !important; 
    min-width: 0 !important; 
    margin: 0 auto; 
}

/* Mobile-specific Swiper adjustments */
@media (max-width: 480px) {
    .trending-swiper { padding: 0 1px 4rem 1px; }
    .trending-swiper .glass-card .aspect-\[2\/3\] { min-height: 220px; }
    .trending-swiper .glass-card h3 { font-size: 0.9rem; }
    .trending-swiper .glass-card .p-4 { padding: 0.6rem; }
}

/* Fade In Animation for Cards */
.fade-in-up { opacity: 0; transform: translateY(30px); animation: fadeInUp 0.6s ease forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* Light Mode Overrides */
:root:not(.dark) .bg-dark-bg { background-color: #f8fafc !important; }
:root:not(.dark) .bg-dark-card { background-color: #ffffff !important; }
:root:not(.dark) .text-white { color: #0f172a !important; }
:root:not(.dark) .text-gray-300 { color: #475569 !important; }
:root:not(.dark) .text-gray-400 { color: #64748b !important; }
:root:not(.dark) .bg-black\/40 { background-color: rgba(255,255,255,0.7) !important; }
:root:not(.dark) .glass-card {
    background: rgba(255,255,255,0.7); border-color: rgba(57,255,20,0.4); box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
:root:not(.dark) .rating-circle { background: #e2e8f0; }
:root:not(.dark) .rating-circle::after { background: #fff; }

@media (max-width: 768px) {
    #hero-content h1 { font-size: 2.5rem !important; }
    .glass-card { backdrop-filter: blur(8px); }
        }