/* ═══════════════════════════════════════════════════════════════════════════
 * Hotel Intelligence Platform — Motion utilities & page-transition styles
 *
 * Companion CSS for /static/animation.js. Also carries the View
 * Transitions API rules so the browser-native page morphing kicks in
 * on Chrome/Edge/Safari ≥18 (older browsers ignore these rules).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reveal utility ──────────────────────────────────────────────────────
   Elements start hidden; animation.js un-hides them on scroll. If JS is
   disabled or blocked, fall back to visible-by-default via the `no-js`
   escape hatch. */
html.no-js .reveal,
html.no-js .reveal.stagger > * {
    opacity: 1 !important;
    transform: none !important;
}

/* ── Lenis smooth-scroll helpers ──────────────────────────────────────── */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ── Tilt card base (for [data-tilt] elements) ────────────────────────── */
[data-tilt] {
    transform-style: preserve-3d;
    will-change: transform;
    transition: box-shadow 0.25s ease;
}
[data-tilt]:hover {
    box-shadow: 0 20px 60px -15px rgba(99, 102, 241, 0.25);
}
[data-theme="dark"] [data-tilt]:hover {
    box-shadow: 0 20px 60px -15px rgba(99, 102, 241, 0.5);
}

/* ── View Transitions API (browser-native page morphing) ─────────────────
   Firing on any same-origin nav. The root transition cross-fades the
   document; named views further below give the topbar + sidebar their
   own choreographies so they feel continuous. */
@view-transition {
    navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(root) {
    animation-name: vt-fade-out;
}
::view-transition-new(root) {
    animation-name: vt-fade-in;
}
@keyframes vt-fade-out {
    to { opacity: 0; transform: translateY(-6px); }
}
@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(10px); }
}

/* Keep the sidebar in-place across transitions — it feels broken when a
   persistent chrome element cross-fades. */
.sidebar { view-transition-name: app-sidebar; }
.topbar  { view-transition-name: app-topbar;  }
::view-transition-old(app-sidebar),
::view-transition-new(app-sidebar),
::view-transition-old(app-topbar),
::view-transition-new(app-topbar) {
    animation: none;
    mix-blend-mode: normal;
}

/* ── Micro-interactions: magnetic hover on key buttons ──────────────────
   Applies to .magnetic as well as the common CTA classes across the
   platform (getting-started CTA, empty-state CTA, onboarding submit,
   wizard "Continue" buttons) so they all feel alive without touching
   every template. */
.magnetic,
.empty-cta,
.btn.btn-primary,
.btn-primary,
a.btn,
button.btn-primary {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s ease,
                background-color 0.2s ease;
    will-change: transform;
}
.magnetic:hover,
.empty-cta:hover,
.btn.btn-primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
a.btn:hover,
button.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -10px rgba(99, 102, 241, 0.45);
}
.magnetic:active,
.empty-cta:active,
.btn-primary:active,
a.btn:active {
    transform: translateY(0);
    transition-duration: 0.05s;
}

/* ── KPI number reveal: tabular-nums + slight bolding while counting ──── */
[data-countup] {
    font-variant-numeric: tabular-nums;
    display: inline-block;
}

/* ── Theme transition: smooth color-scheme flip instead of hard flash ─── */
:root {
    color-scheme: light dark;
}
html,
body,
.card,
.glass-card,
.chart-box,
.dash-section,
.nav-item,
.sidebar,
.topbar,
.btn-primary {
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.2s ease;
}

/* ── Respect user preference — turn EVERYTHING off when asked ─────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal,
    .reveal.stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
    @view-transition { navigation: none; }
}