/* Custom CSS styles for 500 Sesiones de Voleibol */

/* Configure root variables for smooth look and feel */
:root {
    --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
}

/* Base custom classes to match the react prototype */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.font-display {
    font-family: var(--font-heading);
}

.bg-radial-gradient {
    background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
}

.bg-radial-pricing {
    background: radial-gradient(circle at center, #f8fafc 0%, #f1f5f9 100%);
}

/* Animations matching motion */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-down {
    animation: slideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Accordion CSS Helpers */
.faq-content {
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Overlay & modal behaviors */
#upgrade-modal {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#upgrade-modal.hidden {
    display: none;
    opacity: 0;
    pointer-events: none;
}

#upgrade-modal.show {
    display: flex;
}

/* custom scrollbars */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #020617;
}

::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}