/* Theme Custom Static Styles */

/* Animations */
@keyframes shimmer {
    100% { transform: translateX(100%); }
}

@keyframes slideFade {
    0%, 100% { opacity: 0; transform: scale(1.05); }
    5%, 20% { opacity: 1; transform: scale(1); }
    25% { opacity: 0; transform: scale(1.05); }
}

@keyframes scrollPercentLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scrollPercentRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

@keyframes posterCycle { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(calc(-1 * (100% / 3) )); } 
}

@keyframes bg-pan-x {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Global and Base */
html, body { 
    max-width: 100%; 
    overflow-x: hidden; 
    position: relative; 
    touch-action: pan-y; 
    overscroll-behavior-x: none; 
}
body { 
    background-color: #080a10; 
    color: #f1f5f9; 
    font-family: 'Inter', sans-serif; 
}

/* Components */
.glass-card {
    background: #121622;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
}

.vip-gradient-text {
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vip-gradient-border {
    position: relative;
    background: #121622;
    border-radius: 12px;
}
.vip-gradient-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 13px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    z-index: -1;
    opacity: 0.5;
}

/* Utility Mapping */
.bg-neonGreen { background-color: var(--primary) !important; }
.text-neonGreen { color: var(--primary) !important; }
.border-neonGreen { border-color: var(--primary) !important; }
.from-neonGreen { --tw-gradient-from: var(--primary) !important; --tw-gradient-to: rgb(0 255 102 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-neonGreen { --tw-gradient-to: var(--primary) !important; }
.to-cyan-400 { --tw-gradient-to: var(--accent-secondary) !important; }

.hover\:bg-neonGreen:hover { background-color: var(--accent-secondary) !important; }
.hover\:text-neonGreen:hover { color: var(--accent-secondary) !important; }
.hover\:border-neonGreen:hover { border-color: var(--accent-secondary) !important; }

.hover\:bg-green-400:hover { background-color: var(--accent-secondary) !important; }

.selection\:bg-neonGreen *::selection { background-color: var(--primary) !important; }
.selection\:text-black *::selection { color: #000 !important; }

.bg-neonGreen\/10 { background-color: rgba(var(--primary-rgb), 0.1) !important; }
.bg-neonGreen\/20 { background-color: rgba(var(--primary-rgb), 0.2) !important; }
.border-neonGreen\/20 { border-color: rgba(var(--primary-rgb), 0.2) !important; }
.border-neonGreen\/30 { border-color: rgba(var(--primary-rgb), 0.3) !important; }
.text-neonGreen\/70 { color: rgba(var(--primary-rgb), 0.7) !important; }

.pricing-card:hover {
    border-color: var(--primary) !important;
}

/* Carousels */
.carousel-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
}
.carousel-track {
    display: inline-flex;
    animation: scrollPercentLeft 40s linear infinite;
    gap: 1rem;
}
.reviews-track { 
    display: inline-flex; 
    width: max-content; 
    gap: 1.5rem; 
}

/* Hero Elements */
.hero-slide { animation: slideFade 24s infinite linear; opacity: 0; }
.hero-slide-1 { animation-delay: 0s; }
.hero-slide-2 { animation-delay: 6s; }
.hero-slide-3 { animation-delay: 12s; }
.hero-slide-4 { animation-delay: 18s; }

.animate-bg-pan-x {
    animation: bg-pan-x 4s linear infinite;
    background-size: 200% auto;
}

/* Popup */
#scroll-popup.is-active { display: flex; opacity: 1; pointer-events: auto; }
#scroll-popup.is-active > div { transform: translateY(0) scale(1); }