/* ──────────────────────────────────────────────────────────────────────
   Motion layer — premium, subtle, SaaS-quality.
   Honors prefers-reduced-motion. Designed to be additive over app.css.
   ──────────────────────────────────────────────────────────────────── */

:root {
    --th-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --th-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --th-dur-fast: 180ms;
    --th-dur: 360ms;
    --th-dur-slow: 540ms;
}

/* ── Page-load fade-in ──────────────────────────────────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Body NOT hidden on first paint — the previous opacity:0 → fade caused
   a 360ms "blank page" flash on every navigation. Content is rendered
   immediately; only individual sections opt in via [data-reveal] below. */

/* ── Navbar shadow / elevation on scroll ───────────────────────── */
.th-navbar { transition: box-shadow var(--th-dur-fast) ease, background var(--th-dur-fast) ease; }
.th-navbar.is-scrolled {
    box-shadow: 0 8px 24px rgba(90, 30, 22, 0.18);
}

/* ── Scroll reveal primitive ───────────────────────────────────── */
/* Faster transition + smaller offset + tighter stagger so mobile scroll
   doesn't feel like content "appears late". JS uses a generous
   rootMargin (400px) to start the reveal *before* the user reaches the
   section, and a 1.2s safety net unconditionally reveals anything still
   hidden (slow JS / observer glitch / older browsers). */
[data-reveal] {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 240ms var(--th-ease-out),
                transform 240ms var(--th-ease-out);
    transition-delay: calc(var(--th-stagger, 0) * 40ms);
    will-change: opacity, transform;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Variant — fade only (used for section labels / eyebrows) */
[data-reveal="fade"] { transform: none; }
[data-reveal="fade"].is-visible { opacity: 1; }

/* Variant — slide left (hero text) */
[data-reveal="left"] { transform: translateX(-18px); }
[data-reveal="left"].is-visible { transform: none; }

/* Variant — scale up subtly (cards) */
[data-reveal="scale"] {
    transform: translateY(14px) scale(0.985);
}
[data-reveal="scale"].is-visible {
    transform: none;
}

/* ── Image lazy fade-in (blur-up) ──────────────────────────────── */
img[loading="lazy"] {
    transition: opacity var(--th-dur) ease, filter var(--th-dur) ease;
}
img[loading="lazy"]:not(.is-loaded) {
    opacity: 0;
    filter: blur(6px);
}
img[loading="lazy"].is-loaded {
    opacity: 1;
    filter: none;
}

/* ── Card hover micro-interaction (subtle lift) ────────────────── */
.th-company-card,
.th-camp-mini,
.th-industry-card,
.crm-card {
    transition: transform var(--th-dur-fast) var(--th-ease-out),
                box-shadow var(--th-dur-fast) var(--th-ease-out),
                border-color var(--th-dur-fast) var(--th-ease-out);
}

/* Make any anchor with .th-anchor-pulse signal hover affordance */
.th-anchor-pulse i { transition: transform var(--th-dur-fast) var(--th-ease-out); }
.th-anchor-pulse:hover i { transform: translateX(3px); }

/* ── Button press feel (subtle, not overdone) ─────────────────── */
.btn,
.btn-th-primary,
.btn-signin,
.crm-quick-add {
    transition:
        transform var(--th-dur-fast) var(--th-ease-out),
        box-shadow var(--th-dur-fast) var(--th-ease-out),
        background var(--th-dur-fast) var(--th-ease-out),
        opacity var(--th-dur-fast) var(--th-ease-out);
}
.btn:active,
.btn-th-primary:active,
.btn-signin:active { transform: translateY(1px) scale(0.985); }

/* ── Carousel indicators — smoother transition ─────────────────── */
.th-hero-carousel .carousel-indicators [data-bs-target] {
    transition: width var(--th-dur) var(--th-ease-out),
                background var(--th-dur) var(--th-ease-out),
                box-shadow var(--th-dur) var(--th-ease-out);
}

/* ── KPI value pulse on first reveal ───────────────────────────── */
.th-kpi-card.is-visible .th-kpi-icon {
    animation: th-icon-pop var(--th-dur-slow) var(--th-ease-out) both;
}
@keyframes th-icon-pop {
    0%   { transform: scale(0.85) rotate(-4deg); opacity: 0.7; }
    65%  { transform: scale(1.06); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Reduced motion override ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    body { animation: none; opacity: 1; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
}