/* Custom Styling & Animations for BEE NETWORK Premium Light Landing Page */

/* Base overrides - Light Mode */
body {
    background-color: #ffffff;
    overflow-x: hidden;
}

/* Bulletproof fixed background image layer for all mobile & desktop viewports */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.75)),
        url('ai_background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Dotted Minimalist Light Grid - Faint & Clean */
.bg-grid-pattern {
    display: block;
    background-image: radial-gradient(rgba(15, 23, 42, 0.02) 1.2px, transparent 1.2px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at 50% 50%, black 80%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 80%, transparent 100%);
}

/* Glowing text effects optimized for light backgrounds */
.text-glow {
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.25);
}

.text-glow-cyan {
    text-shadow: 0 0 30px rgba(19, 38, 53, 0.25);
}

/* Glassmorphism elements - Light Glass */
.glass-panel {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.glass-panel:hover {
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow: 0 8px 32px 0 rgba(212, 175, 55, 0.06);
}

/* Custom Scrollbars */
.app-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.app-scrollbar::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.05);
    border-radius: 8px;
}

.app-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.25);
    border-radius: 8px;
}

.app-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.5);
}

/* Phone Mockup Screen Tabs (Maintains Premium Dark App UI contrast) */
.tab-content {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tab-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* FAQ Collapsible Content height transition */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease, opacity 0.35s ease;
    opacity: 0;
}

.faq-content.open {
    max-height: 250px; /* Safe upper bound */
    opacity: 1;
}

/* Scroll entry & exit reveals - Progressive Enhancement */
@media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
        @keyframes scroll-reveal-in {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.97);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        @keyframes scroll-reveal-out {
            to {
                opacity: 0;
                transform: translateY(-20px) scale(0.98);
            }
        }

        .scroll-reveal {
            animation: 
                scroll-reveal-in auto linear backwards,
                scroll-reveal-out auto linear forwards;
            animation-timeline: view();
            animation-range: entry 10% entry 40%, exit 80% exit 100%;
        }

        /* Moving Text Animation */
        @keyframes scroll-text-in {
            from {
                opacity: 0;
                transform: translateY(40px) skewY(2deg) scale(0.96);
                filter: blur(4px);
            }
            to {
                opacity: 1;
                transform: translateY(0) skewY(0) scale(1);
                filter: blur(0);
            }
        }
        .scroll-reveal-text {
            animation: scroll-text-in auto linear backwards;
            animation-timeline: view();
            animation-range: entry 5% entry 30%;
        }

        /* Moving Cards Animation */
        @keyframes scroll-card-in {
            from {
                opacity: 0;
                transform: translateY(60px) scale(0.96);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        .scroll-reveal-card {
            animation: scroll-card-in auto linear backwards;
            animation-timeline: view();
            animation-range: entry 5% entry 35%;
        }
    }
}

/* Helper for fallback scroll animation (non-supporting browsers) */
.reveal-visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-hidden {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
}

.reveal-text-visible {
    opacity: 1 !important;
    transform: translateY(0) skewY(0) scale(1) !important;
    filter: blur(0) !important;
    transition: 
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-text-hidden {
    opacity: 0;
    transform: translateY(30px) skewY(2deg) scale(0.96);
    filter: blur(4px);
}

.reveal-card-visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-card-hidden {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
}

/* Animated shadow/border for popular package card in light mode */
@keyframes border-pulse-light {
    0%, 100% {
        border-color: rgba(212, 175, 55, 0.6);
        box-shadow: 0 10px 30px rgba(212, 175, 55, 0.15);
    }
    50% {
        border-color: rgba(19, 38, 53, 0.6);
        box-shadow: 0 10px 40px rgba(19, 38, 53, 0.25);
    }
}

.popular-card {
    border: 2px solid rgba(212, 175, 55, 0.6);
    animation: border-pulse-light 6s infinite;
}

/* Speedometer keyframe */
@keyframes speed-glow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(19, 38, 53, 0.2);
    }
    50% {
        box-shadow: 0 0 35px rgba(19, 38, 53, 0.5);
    }
}

.speed-active {
    animation: speed-glow 1.5s infinite;
}

/* Animated Gradient Text for Premium Color Flow */
@keyframes text-gradient-loop {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animated-gradient-text {
    background-image: linear-gradient(90deg, #d4af37, #132635, #c59b27, #1e3a5f, #d4af37);
    background-size: 300% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: text-gradient-loop 8s ease infinite;
}

/* Infinite Horizontal Marquee for Testimonials */
@keyframes marquee-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

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

.animate-marquee-left {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: marquee-left 35s linear infinite;
}

.animate-marquee-right {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: marquee-right 35s linear infinite;
}

.marquee-container:hover .animate-marquee-left,
.marquee-container:hover .animate-marquee-right {
    animation-play-state: paused;
}