/* ===========================================
   ALTIBIX WAITLIST - Premium Styles
   Ultra-modern, high-end, vibrant aesthetic
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* CSS Variables */
:root {
    /* Primary Palette - Aurora Gradients (VIBRANT) */
    --gradient-primary: linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #db2777 100%);
    --gradient-aurora: linear-gradient(135deg, #2563eb 0%, #7c3aed 25%, #db2777 50%, #e11d48 75%, #f97316 100%);

    /* Accent Colors (VIBRANT) */
    --color-purple: #9333ea;
    --color-pink: #db2777;
    --color-blue: #4f46e5;
    --color-cyan: #0891b2;

    /* Neutral Colors */
    --color-white: #ffffff;
    --color-off-white: #f8fafc;
    --color-gray-50: #f1f5f9;
    --color-gray-100: #e2e8f0;
    --color-gray-200: #cbd5e1;
    --color-gray-300: #94a3b8;
    --color-gray-400: #64748b;
    --color-gray-500: #475569;
    --color-gray-600: #334155;
    --color-gray-700: #1e293b;
    --color-gray-800: #0f172a;
    --color-gray-900: #020617;

    /* Glass Effect */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Dark Theme Overrides */
.dark {
    --color-white: #020617;
    --color-off-white: #0f172a;
    --color-gray-50: #1e293b;
    --color-gray-100: #334155;
    --color-gray-200: #475569;
    --color-gray-300: #64748b;
    --color-gray-400: #94a3b8;
    --color-gray-500: #cbd5e1;
    --color-gray-600: #e2e8f0;
    --color-gray-700: #f8fafc;
    --color-gray-800: #ffffff;
    --color-gray-900: #ffffff;

    --glass-bg: rgba(15, 23, 42, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Aurora Background Animations */
@keyframes aurora-float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(30px, -20px) scale(1.05);
    }

    50% {
        transform: translate(-20px, 30px) scale(0.95);
    }

    75% {
        transform: translate(-30px, -10px) scale(1.02);
    }
}

/* Screen Transitions */
@keyframes screen-enter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Step Transitions */
@keyframes step-enter {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Logo Pulse */
@keyframes logo-pulse {

    0%,
    100% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Success Rings Animation */
@keyframes ring-expand {
    0% {
        transform: scale(0);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Glass Card Utility */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--glass-shadow);
}

/* Gradient Text Utility */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Screen Animation */
.screen-animate {
    animation: screen-enter 0.5s ease forwards;
}

/* Step Animation */
.step-animate {
    animation: step-enter 0.4s ease forwards;
}