/*
 * Alt SourceCode Motion & Animation
 * Based on BIND template — extracted via template slicer
 * Uses tokens from theme.css
 *
 * Physics-First Paradigm: Spring easings for premium feel
 */

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION TOKENS (Stagger & Timing)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Stagger delays for sequential animations */
    --stagger-base: 100ms;
    --stagger-tight: 50ms;
    --stagger-relaxed: 150ms;

    /* Named delays (multiples of stagger-base) */
    --delay-1: calc(var(--stagger-base) * 1);  /* 100ms */
    --delay-2: calc(var(--stagger-base) * 2);  /* 200ms */
    --delay-3: calc(var(--stagger-base) * 3);  /* 300ms */
    --delay-4: calc(var(--stagger-base) * 4);  /* 400ms */
    --delay-hero-badge: var(--delay-1);
    --delay-hero-buttons: var(--delay-3);
    --delay-hero-chat: var(--delay-4);

    /* Spring Physics Easings (Premium Feel) */
    --ease-spring-stiff: cubic-bezier(0.175, 0.885, 0.32, 1.1);
    --ease-spring-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-spring-bouncy: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-fluid: cubic-bezier(0.16, 1, 0.3, 1);

    /* Typing animation durations */
    --duration-typing: 2s;
    --duration-cursor-blink: 1s;
    --duration-word-reveal: 800ms;
    --duration-ticker: 20s;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE ENTRANCE ANIMATION
   Smooth fade-in when page loads
   ═══════════════════════════════════════════════════════════════════════════ */

body {
    animation: pageEnter 400ms var(--ease-fluid) 50ms both;
}

@keyframes pageEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Navigation slides down from top */
.nav,
header.nav {
    opacity: 0;
    transform: translateY(-10px);
    animation: navEnter 500ms var(--ease-fluid) 100ms forwards;
}

@keyframes navEnter {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(var(--appear-shift)) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Blinking cursor for chat input */
@keyframes blink-cursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Word reveal animation (simple fade + slide up) */
@keyframes wordReveal {
    from {
        opacity: 0;
        transform: translateY(1.25em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(100px) scale(1.2);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ELEMENT ANIMATIONS (applied via classes or data attributes)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero elements */
[data-name="Hero Section"] [data-name="Badge"] {
    animation: fadeInUp var(--duration-appear) var(--ease-fluid) var(--delay-hero-badge) both;
}

/* Word-by-word reveal — adapted from BIND's blur+slide effect */
[data-name="Headers"] .word {
    display: inline-block;
    animation: wordReveal var(--duration-word-reveal) var(--ease-spring-smooth) both;
}

[data-name="Hero Section"] [data-name="Buttons Stack"] {
    animation: fadeInUp var(--duration-appear) var(--ease-fluid) var(--delay-hero-buttons) both;
}

[data-name="Hero Section"] [data-name="Chat Outer Wrapper"] {
    animation: slideInFromBottom var(--duration-appear) var(--ease-fluid) var(--delay-hero-chat) both;
}

/* Typing animation for chat input */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

[data-name="TypeAnimation"] {
    display: flex;
    align-items: center;
}

[data-name="TypeAnimation"] .typing-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: typing var(--duration-typing) steps(30) calc(var(--delay-hero-chat) + 100ms) forwards;
}

[data-name="TypeAnimation"] .cursor {
    display: inline-block;
    animation: blink-cursor var(--duration-cursor-blink) steps(1) infinite;
    font-weight: 400;
    color: var(--color-primary, #007CFF);
}


/* Social Proof Ticker (logo carousel) */
[data-name="Social Proof Ticker"] {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

[data-name="Social Proof Ticker"] ul {
    display: flex;
    gap: 48px;
    animation: ticker-scroll var(--duration-ticker) linear infinite;
    width: max-content;
}

/* Benefits cards — scroll-triggered */
[data-name="Benefit Card 1"],
[data-name="Benefit Card 2"],
[data-name="Benefit Card 3"] {
    --stagger-index: 0;
}
[data-name="Benefit Card 1"] { --stagger-index: 1; }
[data-name="Benefit Card 2"] { --stagger-index: 2; }
[data-name="Benefit Card 3"] { --stagger-index: 3; }

[data-name^="Benefit Card"] {
    opacity: 0;
    transform: translateY(var(--appear-shift));
}

[data-name^="Benefit Card"].is-visible {
    animation: fadeInUp var(--duration-appear) var(--ease-fluid) calc(var(--stagger-base) * var(--stagger-index)) both;
}

/* Feature cards - staggered, scroll-triggered */
[data-name="Features Grid"] > * {
    --stagger-index: 0;
    opacity: 0;
    transform: translateY(var(--appear-shift));
}
[data-name="Features Grid"] > *:nth-child(1) { --stagger-index: 1; }
[data-name="Features Grid"] > *:nth-child(2) { --stagger-index: 2; }
[data-name="Features Grid"] > *:nth-child(3) { --stagger-index: 3; }
[data-name="Features Grid"] > *:nth-child(4) { --stagger-index: 4; }
[data-name="Features Grid"] > *:nth-child(5) { --stagger-index: 5; }
[data-name="Features Grid"] > *:nth-child(6) { --stagger-index: 6; }

[data-name="Features Grid"].is-visible > * {
    animation: fadeInUp var(--duration-appear) var(--ease-fluid) calc(var(--stagger-tight) * var(--stagger-index)) both;
}

/* Pricing cards — scroll-triggered */
[data-name="Pricing Cards"] > * {
    --stagger-index: 0;
    opacity: 0;
    transform: translateY(var(--appear-shift));
}
[data-name="Pricing Cards"] > *:nth-child(1) { --stagger-index: 1; }
[data-name="Pricing Cards"] > *:nth-child(2) { --stagger-index: 2; }
[data-name="Pricing Cards"] > *:nth-child(3) { --stagger-index: 3; }

[data-name="Pricing Cards"].is-visible > * {
    animation: fadeInUp var(--duration-appear) var(--ease-fluid) calc(var(--stagger-base) * var(--stagger-index)) both;
}

/* Testimonial cards — scroll-triggered */
[data-name="Testimonials Grid"] > * {
    --stagger-index: 0;
    opacity: 0;
    transform: translateY(var(--appear-shift));
}
[data-name="Testimonials Grid"] > *:nth-child(1) { --stagger-index: 1; }
[data-name="Testimonials Grid"] > *:nth-child(2) { --stagger-index: 2; }
[data-name="Testimonials Grid"] > *:nth-child(3) { --stagger-index: 3; }

[data-name="Testimonials Grid"].is-visible > * {
    animation: fadeInUp var(--duration-appear) var(--ease-fluid) calc(var(--stagger-base) * var(--stagger-index)) both;
}

/* FAQ items — scroll-triggered */
[data-name="FAQ List"] > * {
    --stagger-index: 0;
    opacity: 0;
    transform: translateY(var(--appear-shift));
}
[data-name="FAQ List"] > *:nth-child(1) { --stagger-index: 1; }
[data-name="FAQ List"] > *:nth-child(2) { --stagger-index: 2; }
[data-name="FAQ List"] > *:nth-child(3) { --stagger-index: 3; }
[data-name="FAQ List"] > *:nth-child(4) { --stagger-index: 4; }

[data-name="FAQ List"].is-visible > * {
    animation: fadeInUp var(--duration-appear) var(--ease-fluid) calc(var(--stagger-tight) * var(--stagger-index)) both;
}

/* CTA — scroll-triggered */
[data-name="CTA Card"] {
    opacity: 0;
    transform: translateY(var(--appear-shift));
}

[data-name="CTA Card"].is-visible {
    animation: fadeInUp var(--duration-appear) var(--ease-fluid) var(--delay-2) both;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOVER TRANSITIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Buttons already have transitions in components.css */

/* Cards lift on hover — spring physics for premium feel */
[data-name^="Benefit Card"],
[data-name="Features Grid"] > *,
[data-name="Pricing Cards"] > *,
[data-name="Testimonials Grid"] > *,
[data-name^="Question "] {
    transition: transform var(--duration-normal) var(--ease-spring-smooth),
                box-shadow var(--duration-normal) var(--ease-spring-smooth);
}

[data-name^="Benefit Card"]:hover,
[data-name="Features Grid"] > *:hover,
[data-name="Pricing Cards"] > *:hover,
[data-name="Testimonials Grid"] > *:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

/* Button press feedback — slight scale down for tactile feel */
.btn,
[data-name*="Button"],
button {
    transition: transform var(--duration-fast) var(--ease-spring-stiff),
                background-color var(--duration-fast) var(--ease-spring-smooth),
                box-shadow var(--duration-fast) var(--ease-spring-smooth);
}

.btn:active,
[data-name*="Button"]:active,
button:active {
    transform: scale(0.96);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL-TRIGGERED ANIMATIONS (optional enhancement)
   ═══════════════════════════════════════════════════════════════════════════ */

/* These are activated via Intersection Observer in main.js */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(var(--appear-shift));
}

.animate-on-scroll.is-visible {
    animation: fadeInUp var(--duration-appear) var(--ease-fluid) both;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATE-IN CLASS (Page Load Animations)
   Used on BI page hero and cards for entrance animations
   ═══════════════════════════════════════════════════════════════════════════ */

.animate-in {
    opacity: 0;
    animation: fadeInUp 600ms var(--ease-fluid) forwards;
}

/* Stagger hero elements — 40ms base per motion tokens */
.hero-content.animate-in { animation-delay: 0ms; }
.chat-demo.animate-in { animation-delay: 120ms; }
.social-proof .animate-in { animation-delay: 200ms; }

/* Stagger section cards */
.integration-card.animate-in,
.benefit-card.animate-in,
.feature-card.animate-in,
.pricing-card.animate-in,
.testimonial-card.animate-in {
    opacity: 0;
}

/* Section headers */
.section-header {
    opacity: 0;
}

.section-header.is-visible {
    animation: fadeInUp 500ms var(--ease-fluid) forwards;
}

/* Cards animate when section is visible */
.card-grid.is-visible .animate-in,
.feature-grid.is-visible .animate-in,
.pricing-grid.is-visible .animate-in,
.testimonial-grid.is-visible .animate-in {
    animation: fadeInUp 500ms var(--ease-fluid) forwards;
}

/* Stagger card animations — 40ms base per motion tokens */
.card-grid.is-visible .animate-in:nth-child(1),
.feature-grid.is-visible .animate-in:nth-child(1),
.pricing-grid.is-visible .animate-in:nth-child(1),
.testimonial-grid.is-visible .animate-in:nth-child(1) { animation-delay: 0ms; }

.card-grid.is-visible .animate-in:nth-child(2),
.feature-grid.is-visible .animate-in:nth-child(2),
.pricing-grid.is-visible .animate-in:nth-child(2),
.testimonial-grid.is-visible .animate-in:nth-child(2) { animation-delay: 40ms; }

.card-grid.is-visible .animate-in:nth-child(3),
.feature-grid.is-visible .animate-in:nth-child(3),
.pricing-grid.is-visible .animate-in:nth-child(3),
.testimonial-grid.is-visible .animate-in:nth-child(3) { animation-delay: 80ms; }

.card-grid.is-visible .animate-in:nth-child(4),
.feature-grid.is-visible .animate-in:nth-child(4) { animation-delay: 120ms; }

.card-grid.is-visible .animate-in:nth-child(5),
.feature-grid.is-visible .animate-in:nth-child(5) { animation-delay: 160ms; }

.card-grid.is-visible .animate-in:nth-child(6),
.feature-grid.is-visible .animate-in:nth-child(6) { animation-delay: 200ms; }

/* FAQ items stagger — 40ms base per motion tokens */
.faq-list .faq-item {
    opacity: 0;
}

.faq-list.is-visible .faq-item {
    animation: fadeInUp 500ms var(--ease-fluid) forwards;
}

.faq-list.is-visible .faq-item:nth-child(1) { animation-delay: 0ms; }
.faq-list.is-visible .faq-item:nth-child(2) { animation-delay: 40ms; }
.faq-list.is-visible .faq-item:nth-child(3) { animation-delay: 80ms; }
.faq-list.is-visible .faq-item:nth-child(4) { animation-delay: 120ms; }

/* CTA section */
.cta-card {
    opacity: 0;
}

.cta-card.is-visible {
    animation: fadeInUp 600ms var(--ease-fluid) 100ms forwards;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — Reduced Motion Support
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Some people experience dizziness, nausea, or discomfort from animations.
 * Their device has a "reduce motion" setting we MUST respect.
 * This is not optional — it's an accessibility requirement.
 */

@media (prefers-reduced-motion: reduce) {
    /* Disable all motion tokens */
    :root {
        --stagger-base: 0ms;
        --stagger-tight: 0ms;
        --stagger-relaxed: 0ms;
        --delay-1: 0ms;
        --delay-2: 0ms;
        --delay-3: 0ms;
        --delay-4: 0ms;
        --delay-hero-badge: 0ms;
        --delay-hero-buttons: 0ms;
        --delay-hero-chat: 0ms;
        --duration-typing: 0.01ms;
        --duration-cursor-blink: 0.01ms;
        --duration-word-reveal: 0.01ms;
        --duration-ticker: 0.01ms;
    }

    /* Page and nav entrance — instant visibility */
    body {
        animation: none;
        opacity: 1;
    }

    .nav,
    header.nav {
        animation: none;
        opacity: 1;
        transform: none;
    }

    /* Make all scroll-triggered elements immediately visible */
    [data-name^="Benefit Card"],
    [data-name="Features Grid"] > *,
    [data-name="Pricing Cards"] > *,
    [data-name="Testimonials Grid"] > *,
    [data-name="FAQ List"] > *,
    [data-name="CTA Card"],
    .animate-on-scroll,
    .animate-in,
    .section-header,
    .faq-list .faq-item,
    .cta-card,
    .integration-card,
    .benefit-card,
    .feature-card,
    .pricing-card,
    .testimonial-card {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    /* Disable hover lifts */
    [data-name^="Benefit Card"]:hover,
    [data-name="Features Grid"] > *:hover,
    [data-name="Pricing Cards"] > *:hover,
    [data-name="Testimonials Grid"] > *:hover {
        transform: none;
    }

    /* Keep ticker static */
    [data-name="Social Proof Ticker"] ul {
        animation: none;
    }

    /* No button press effect */
    .btn:active,
    [data-name*="Button"]:active,
    button:active {
        transform: none;
    }
}