/* ============================================
   0049 - 加拿大预测网
   自定义样式文件
   ============================================ */

/* ---------- Custom Properties ---------- */
:root {
    --brand-600: #4f46e5;
    --brand-700: #4338ca;
    --brand-100: #e0e7ff;
}

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

/* ---------- Navbar Scroll Effect ---------- */
#navbar.scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ---------- Feature Card Hover Float ---------- */
.feature-card {
    transform: translateY(0);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1.2),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}
.feature-card:hover {
    transform: translateY(-8px);
}

/* ---------- Floating Animation ---------- */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* ---------- FAQ Accordion Styles ---------- */
.faq-item .faq-toggle i {
    transition: transform 0.3s ease;
}
.faq-item.active .faq-toggle i {
    transform: rotate(180deg);
    color: var(--brand-600);
}
.faq-item.active {
    background-color: #fff;
    border-color: #e0e7ff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.08);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                padding 0.3s ease;
}
.faq-item.active .faq-answer {
    max-height: 300px;
    opacity: 1;
}

/* ---------- Scroll-Reveal (Fade Up) ---------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Count Up Styling ---------- */
.count-up {
    display: inline-block;
}

/* ---------- Mobile Nav Link Animation ---------- */
.mobile-nav-link {
    transform: translateX(-8px);
    opacity: 0;
    animation: slideIn 0.3s ease forwards;
}
@keyframes slideIn {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ---------- Hero Gradient Text Animation ---------- */
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ---------- Responsive Adjustments ---------- */

/* Tablet and below */
@media (max-width: 1023px) {
    .feature-card:hover {
        transform: translateY(-4px);
    }
}

/* Mobile */
@media (max-width: 640px) {
    #hero h1 {
        font-size: 2.25rem;
        line-height: 1.2;
    }

    #hero .grid {
        gap: 2rem;
    }

    .feature-card {
        padding: 1.5rem;
    }

    /* Stack CTA buttons full-width on mobile */
    #hero .flex-col.sm\:flex-row {
        width: 100%;
    }
    #hero .flex-col.sm\:flex-row a {
        width: 100%;
        justify-content: center;
    }

    /* Stats grid appears as 2x2 on mobile (already handled by grid-cols-2) */
    #stats .text-4xl {
        font-size: 2rem;
    }

    /* FAQ padding reduction */
    .faq-toggle {
        padding: 1rem 1.25rem;
    }
    .faq-answer {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* CTA section padding */
    #cta .px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    #cta h2 {
        font-size: 1.75rem;
    }

    /* Footer grid adjustments */
    footer .grid {
        gap: 2rem;
    }
}

/* Small mobile */
@media (max-width: 380px) {
    #hero h1 {
        font-size: 1.875rem;
    }

    #hero .text-lg {
        font-size: 0.9375rem;
    }

    .faq-toggle span {
        font-size: 0.875rem;
        max-width: 85%;
    }
}