/* FixrBuddy — subtle motion system */

:root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --motion-fast: 0.35s;
    --motion-normal: 0.55s;
    --motion-slow: 0.7s;
    --motion-distance: 20px;
}

@keyframes motion-fade-up {
    from {
        opacity: 0;
        transform: translateY(var(--motion-distance));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes motion-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Hero — page load only */
.js .hero-text,
.js .hero-visual {
    opacity: 0;
}

html.is-ready .hero-text {
    animation: motion-fade-up var(--motion-normal) var(--ease-out) forwards;
}

html.is-ready .hero-visual {
    animation: motion-fade-up var(--motion-slow) var(--ease-out) 0.1s forwards;
}

/* Shared scroll-reveal base */
.js .section-title,
.js .section-subtitle,
.js .problem-card,
.js .feature-item,
.js .resource-card,
.js .faq-item,
.js .subscription-card,
.js .app-download-banner,
.js .how-it-works-step,
.js .related-feature-card,
.js .feature-page-hero-content,
.js .contact-form {
    opacity: 0;
    transform: translateY(var(--motion-distance));
    transition:
        opacity var(--motion-normal) var(--ease-out),
        transform var(--motion-normal) var(--ease-out);
    will-change: opacity, transform;
}

.js .section-title.animate-in,
.js .section-subtitle.animate-in,
.js .problem-card.animate-in,
.js .feature-item.animate-in,
.js .resource-card.animate-in,
.js .faq-item.animate-in,
.js .subscription-card.animate-in,
.js .app-download-banner.animate-in,
.js .how-it-works-step.animate-in,
.js .related-feature-card.animate-in,
.js .feature-page-hero-content.animate-in,
.js .contact-form.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.js .section-subtitle {
    transition-delay: 0.06s;
}

/* Stagger children inside grids */
.js .problems-grid .problem-card:nth-child(1) { transition-delay: 0s; }
.js .problems-grid .problem-card:nth-child(2) { transition-delay: 0.06s; }
.js .problems-grid .problem-card:nth-child(3) { transition-delay: 0.12s; }
.js .problems-grid .problem-card:nth-child(4) { transition-delay: 0.18s; }

.js .resources-grid .resource-card:nth-child(1) { transition-delay: 0s; }
.js .resources-grid .resource-card:nth-child(2) { transition-delay: 0.06s; }
.js .resources-grid .resource-card:nth-child(3) { transition-delay: 0.12s; }
.js .resources-grid .resource-card:nth-child(4) { transition-delay: 0.18s; }

.js .faq-container .faq-item:nth-child(1) { transition-delay: 0s; }
.js .faq-container .faq-item:nth-child(2) { transition-delay: 0.04s; }
.js .faq-container .faq-item:nth-child(3) { transition-delay: 0.08s; }
.js .faq-container .faq-item:nth-child(4) { transition-delay: 0.12s; }
.js .faq-container .faq-item:nth-child(5) { transition-delay: 0.16s; }
.js .faq-container .faq-item:nth-child(6) { transition-delay: 0.2s; }
.js .faq-container .faq-item:nth-child(7) { transition-delay: 0.24s; }

.js .related-features-grid .related-feature-card:nth-child(1) { transition-delay: 0s; }
.js .related-features-grid .related-feature-card:nth-child(2) { transition-delay: 0.05s; }
.js .related-features-grid .related-feature-card:nth-child(3) { transition-delay: 0.1s; }
.js .related-features-grid .related-feature-card:nth-child(4) { transition-delay: 0.15s; }

/* Testimonials — gentle crossfade */
.testimonial-card {
    transition: opacity var(--motion-normal) var(--ease-out);
}

.testimonial-card:not(.active) {
    transform: none;
}

/* Buttons — subtle press feedback */
.btn {
    transition:
        background-color var(--motion-fast) var(--ease-in-out),
        border-color var(--motion-fast) var(--ease-in-out),
        color var(--motion-fast) var(--ease-in-out),
        transform var(--motion-fast) var(--ease-in-out),
        box-shadow var(--motion-fast) var(--ease-in-out);
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

/* Cards — soft hover lift (desktop only) */
@media (hover: hover) and (pointer: fine) {
    .resource-card,
    .related-feature-card,
    .subscription-card {
        transition:
            opacity var(--motion-normal) var(--ease-out),
            transform var(--motion-normal) var(--ease-out),
            border-color var(--motion-fast) var(--ease-in-out),
            box-shadow var(--motion-fast) var(--ease-in-out);
    }

    .resource-card.animate-in:hover,
    .related-feature-card.animate-in:hover {
        transform: translateY(-4px);
    }
}

/* Form focus */
.form-group label {
    transition: color var(--motion-fast) var(--ease-in-out);
}

.form-group input,
.form-group textarea {
    transition:
        border-color var(--motion-fast) var(--ease-in-out),
        box-shadow var(--motion-fast) var(--ease-in-out);
}

/* Navbar */
.navbar {
    transition:
        background-color var(--motion-fast) var(--ease-in-out),
        border-color var(--motion-fast) var(--ease-in-out),
        box-shadow var(--motion-fast) var(--ease-in-out);
}

.navbar.scrolled {
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
}

/* No-JS & reduced motion */
.no-js .hero-text,
.no-js .hero-visual,
.no-js .section-title,
.no-js .section-subtitle,
.no-js .feature-item,
.no-js .resource-card,
.no-js .faq-item,
.no-js .subscription-card,
.no-js .app-download-banner,
.no-js .how-it-works-step,
.no-js .related-feature-card,
.no-js .feature-page-hero-content,
.no-js .contact-form,
.no-js .contact-info {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .hero-text,
    .hero-visual,
    .section-title,
    .section-subtitle,
    .feature-item,
    .resource-card,
    .faq-item,
    .subscription-card,
    .app-download-banner,
    .how-it-works-step,
    .related-feature-card,
    .feature-page-hero-content,
    .contact-form,
    .contact-info {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}