/* TENQI SPORT - CUSTOM STYLES
    Path: assets/css/index.css
*/

/* =========================================
   1. VARIABLES & THEME SETUP
   ========================================= */
:root {
    /* Light Mode Default */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-blur: 12px;
    --grid-color: rgba(0, 0, 0, 0.04);
}

.dark {
    /* Dark Mode Overrides */
    --glass-bg: rgba(15, 23, 42, 0.6); /* Slate-900 with opacity */
    --glass-border: rgba(255, 255, 255, 0.08);
    --grid-color: rgba(255, 255, 255, 0.03);
}

/* =========================================
   2. GLASSMORPHISM UTILITIES
   ========================================= */

/* Navbar Glass Effect */
.glass-nav {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--glass-border);
}

/* Card Glass Effect */
.glass-card {
    background: rgba(255, 255, 255, 0.02); /* Base transparency */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Di Light Mode, card perlu lebih solid */
html:not(.dark) .glass-card {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05);
}

/* =========================================
   3. BACKGROUND PATTERNS
   ========================================= */

/* Pola Grid Teknis (Kotak-kotak halus) */
.bg-grid-pattern {
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

/* =========================================
   4. CUSTOM ANIMATIONS
   ========================================= */

/* Animasi Denyut Lambat (Untuk Orb Background) */
@keyframes pulse-slow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

.animate-pulse-slow {
    animation: pulse-slow 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Animasi Floating (Melayang) */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

.animate-float {
    animation: float 5s ease-in-out infinite;
}

/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Scrollbar Customization (Webkit) */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}