/*!
 * Revian — animations.css
 * Phase 1: Hero canvas, scroll progress bar, gradient text, global scroll-animate scaffolding
 * Subsequent phases append new rules to this file only.
 */

/* ================================================================
   SCROLL PROGRESS BAR
   A 2px gradient line that tracks scroll depth, fixed to the top.
================================================================ */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 9999;
    pointer-events: none;
    background: transparent;
}

.scroll-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #2563EB 0%, #818CF8 100%);
    will-change: width;
}

/* ================================================================
   HERO CANVAS — NETWORK GRAPH
   Canvas injected as the first child of .hero by animations.js.
   Hero already has position: relative — content sits on top via z-index.
================================================================ */
#hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
}

#hero-canvas.ready {
    opacity: 1;
}

/* Ensure hero children above canvas */
.hero > .container {
    position: relative;
    z-index: 1;
}

/* ================================================================
   HERO TEXT GRADIENT — "AI layer"
   Option A: blue → indigo gradient on the key phrase.
   Dark mode uses lighter values (readable on near-black bg).
   Light mode uses deeper values (readable on white bg).
================================================================ */
.text-gradient-hero {
    background: linear-gradient(135deg, #93C5FD 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline;
}

[data-theme="light"] .text-gradient-hero {
    background: linear-gradient(135deg, #1D4ED8 0%, #4F46E5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ================================================================
   SCROLL-ANIMATE SYSTEM — Global [data-anim] scaffolding
   Applied to elements in later phases via HTML data attributes.
   Intersection Observer (or GSAP ScrollTrigger) flips .anim-done.

   Usage:
     data-anim="fade-up"       — fade + translate Y
     data-anim="fade-in"       — opacity only
     data-anim="fade-left"     — fade + slide from left
     data-anim="fade-right"    — fade + slide from right
     data-anim="scale-in"      — fade + slight scale up
     data-anim-delay="1"–"8"   — stagger timing
================================================================ */

/* Base hidden state — only when JS is active (.js-loaded added by animations.js).
   This prevents invisible page content if the script fails to load. */
.js-loaded [data-anim] {
    opacity: 0;
    will-change: opacity, transform;
}

.js-loaded [data-anim="fade-up"]    { transform: translateY(28px); }
.js-loaded [data-anim="fade-left"]  { transform: translateX(-28px); }
.js-loaded [data-anim="fade-right"] { transform: translateX(28px); }
.js-loaded [data-anim="scale-in"]   { transform: scale(0.94); }
/* fade-in: opacity only — no transform needed */

/* Revealed state — added by JS when element enters viewport.
   Bug fix: include border-color + box-shadow so card hover effects
   still transition after the entry animation. Use 0.3s transform for
   hover responsiveness (was 0.65s, which felt sluggish on hover). */
[data-anim].anim-done {
    opacity: 1;
    transform: none;
    transition:
        opacity      0.65s cubic-bezier(0.16, 1, 0.3, 1),
        transform    0.3s  ease,
        border-color 0.25s ease,
        box-shadow   0.25s ease;
}

/* Stagger delays — applied via data-anim-delay="N" */
[data-anim-delay="1"].anim-done { transition-delay: 0.08s; }
[data-anim-delay="2"].anim-done { transition-delay: 0.16s; }
[data-anim-delay="3"].anim-done { transition-delay: 0.24s; }
[data-anim-delay="4"].anim-done { transition-delay: 0.32s; }
[data-anim-delay="5"].anim-done { transition-delay: 0.40s; }
[data-anim-delay="6"].anim-done { transition-delay: 0.48s; }
[data-anim-delay="7"].anim-done { transition-delay: 0.56s; }
[data-anim-delay="8"].anim-done { transition-delay: 0.64s; }

/* Bug fix: reset stagger delay on hover so cards respond immediately
   after their entry animation — not with a 0.32s+ dead zone. */
[data-anim-delay].anim-done:hover {
    transition-delay: 0s !important;
}

/* ================================================================
   PHASE 2 — SCROLL SECTIONS
================================================================ */

/* Core Capabilities card hover — lift + blue border glow.
   Uses !important because border-color is set via inline style. */
.capability-card {
    transition:
        border-color 0.25s ease,
        transform    0.25s ease,
        box-shadow   0.25s ease;
    cursor: default;
}

.capability-card:hover {
    border-color: rgba(37, 99, 235, 0.5) !important;
    transform: translateY(-5px);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(37, 99, 235, 0.12);
}

/* Stat tile hover (Designed to Embed section) */
.stat-tile {
    transition:
        border-color 0.2s ease,
        transform    0.2s ease;
    cursor: default;
}

.stat-tile:hover {
    border-color: rgba(37, 99, 235, 0.35) !important;
    transform: translateY(-3px);
}

/* Problem card (Market Landscape) — subtle right-border accent on hover */
.problem-card {
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.problem-card:hover {
    border-color: var(--dark-600);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

/* ================================================================
   BUTTON HOVER ENHANCEMENTS
   Subtle lift + shadow on primary CTAs.
   Supplements existing base styles without overriding them.
================================================================ */
.btn-primary {
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-primary:hover {
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35) !important;
}

.btn-secondary {
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-secondary:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* ================================================================
   PHASE 3 — LOWER SECTIONS
================================================================ */

/* How It Works — step card hover */
.how-it-works [data-anim] {
    /* Step cards handled by data-anim; no extra hover needed */
}

/* Example cards (AI Assistant demo) — lift + blue border on hover */
.example-card {
    transition:
        border-color 0.22s ease,
        transform    0.22s ease,
        box-shadow   0.22s ease !important;
}

.example-card:hover {
    border-color: rgba(37, 99, 235, 0.45) !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28) !important;
}

/* Platform cards (Web / Mobile / Voice) — float animation */
.platform-card {
    transition:
        border-color 0.25s ease,
        transform    0.25s ease,
        box-shadow   0.25s ease;
}

.platform-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    border-color: rgba(37, 99, 235, 0.3) !important;
}

/* What Sets Us Apart — feature cards hover */
.apart-card {
    transition:
        border-color 0.25s ease,
        transform    0.25s ease,
        box-shadow   0.25s ease;
    cursor: default;
}

.apart-card:hover {
    border-color: rgba(37, 99, 235, 0.4) !important;
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

/* Built For persona cards hover */
.persona-card {
    transition:
        border-color 0.25s ease,
        transform    0.25s ease;
    cursor: default;
}

.persona-card:hover {
    border-color: rgba(37, 99, 235, 0.3) !important;
    transform: translateY(-3px);
}

/* AI Baked In demo card glow */
.ai-demo-card {
    transition: box-shadow 0.3s ease;
}

.ai-demo-card:hover {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(37, 99, 235, 0.1);
}

/* ================================================================
   REDUCED MOTION — Override everything
   If the user has requested reduced motion, kill all animations.
   This is a hard override — no exceptions.
================================================================ */
@media (prefers-reduced-motion: reduce) {
    #hero-canvas,
    .scroll-progress {
        display: none !important;
    }

    /* Reveal everything immediately — no animation, no delay */
    .js-loaded [data-anim] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    [data-anim].anim-done {
        transition: none !important;
        transition-delay: 0s !important;
    }
}

/* ================================================================
   MOBILE — Simplify
   No canvas on mobile (performance). Shorter translate distances.
================================================================ */
@media (max-width: 768px) {
    #hero-canvas {
        display: none !important;
    }

    .js-loaded [data-anim="fade-up"]    { transform: translateY(16px); }

    /* Collapse horizontal slides to vertical on mobile */
    .js-loaded [data-anim="fade-left"],
    .js-loaded [data-anim="fade-right"] { transform: translateY(16px); }

    .js-loaded [data-anim="scale-in"]   { transform: scale(0.97); }
}