/* BASE STYLES & SCROLLBAR */
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgb(187, 1, 1); }

/* GLOBAL BACKGROUNDS */
#global-grid {
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center top;
    will-change: background-position;
}

/* NAVIGATION */
.nav-item-pill { transition: color 0.3s ease; position: relative; }
.nav-item-pill:hover { color: white; text-shadow: 0 0 12px rgba(255, 255, 255, 0.6); }
.pill-scrolled {
    background-color: rgba(0, 0, 0, 0.9) !important;
    border-color: rgba(187, 1, 1, 0.3) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}
.mobile-link { color: #fff; text-transform: uppercase; letter-spacing: 2px; transition: color 0.3s; }
.mobile-link:hover { color: rgb(187, 1, 1); }
.group:hover .group-hover\:visible { visibility: visible; }
.group:hover .group-hover\:translate-y-0 { transform: translateY(0); }

/* BUTTONS */
.btn-hero { background-color: white; color: black; border: 2px solid white; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-hero:hover {
    background-color: rgb(187, 1, 1); border-color: rgb(187, 1, 1); color: white !important;
    box-shadow: 0 0 40px rgba(187, 1, 1, 0.5); transform: translateY(-2px);
}
.btn-hero:hover span, .btn-hero:hover i { color: white !important; }

/* =========================================
   HERO SECTION ANIMATIONS (DESKTOP ONLY)
   ========================================= */
@media (min-width: 1025px) {
    .hero-title {
        opacity: 0;
        transform: translateY(-20px);
        animation: heroFadeInDown 1s ease-out forwards;
        animation-delay: 0.2s;
    }
    
    .hero-description {
        opacity: 0;
        transform: translateY(20px);
        animation: heroFadeInUp 1s ease-out forwards;
        animation-delay: 0.5s;
    }
    
    .hero-button {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
        animation: heroFadeInScale 1s ease-out forwards;
        animation-delay: 0.8s;
    }
    
    @keyframes heroFadeInDown {
        0% { opacity: 0; transform: translateY(-20px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes heroFadeInUp {
        0% { opacity: 0; transform: translateY(20px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes heroFadeInScale {
        0% { opacity: 0; transform: translateY(20px) scale(0.95); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
}

/* FEATURE WIDGETS */
.feature-widget {
    background: rgba(15, 15, 15, 0.6); border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 2rem; overflow: hidden; backdrop-filter: blur(10px); transition: all 0.4s ease-out;
}
.feature-widget:hover {
    border-color: rgba(187, 1, 1, 0.4); background: rgba(20, 20, 20, 0.95);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); transform: translateY(-5px);
}
.badge {
    background: #1f1f1f; border: 1px solid #333; color: #999; padding: 0.5rem 1rem;
    border-radius: 99px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; transition: all 0.3s; cursor: default;
}
.feature-widget:hover .badge { border-color: rgba(187, 1, 1, 0.5); color: white; background: rgba(187, 1, 1, 0.1); }

/* GAMES CAROUSEL */
.slider { height: 300px; margin: auto; overflow: hidden; position: relative; width: 100%; }
.slider::before, .slider::after {
    background: linear-gradient(to right, #000 0%, transparent 100%);
    content: ""; height: 300px; position: absolute; width: 100px; z-index: 2; pointer-events: none;
}
.slider::after { right: 0; top: 0; transform: rotateZ(180deg); }
.slider::before { left: 0; top: 0; }
.slide-track { display: flex; width: calc(200px * 24); animation: scroll 60s linear infinite; }
.slide { height: 280px; width: 200px; padding: 10px; opacity: 0.5; transition: all 0.3s; flex-shrink: 0; }
.slide:hover { opacity: 1; transform: scale(1.05) translateY(-5px); z-index: 10; }
.slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 1px solid #333; box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-200px * 12)); } }

/* COOKIE & MISC */
.cookie-visible { transform: translateY(0) !important; opacity: 1 !important; pointer-events: auto !important; }

/* SCROLL REVEAL ANIMATIONS (DESKTOP ONLY) */
@media (min-width: 1025px) {
    .reveal-on-scroll { 
        opacity: 0; 
        transform: translateY(30px); 
        transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); 
    }
    .reveal-on-scroll.is-visible { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* MOBILE OPTIMIZATION (NO ANIMATIONS) */
@media (max-width: 1024px) {
    .hero-title,
    .hero-description,
    .hero-button {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    
    .reveal-on-scroll {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: none !important;
    }
    
    #global-grid {
        will-change: auto !important;
        background-position: center top !important;
    }
    
    .feature-widget:hover {
        transform: none !important;
    }
}