/*
 * animations.css — Branded Loading Animations + Micro-Interactions
 * Batch 60: LF loader, skeleton loading, page transitions, button micro-interactions,
 *           card value flash, modal enter animations, toast enter/exit,
 *           scenario step transitions, focus rings, and smooth color transitions.
 *
 * Zero hardcoded colors except:
 *   Brand gold:  #FDA929  (loader ring, pulse, focus outline)
 *   Brand navy:  #134160  (loader ring)
 * All other values use CSS vars from base.css / theme-light.css.
 *
 * prefers-reduced-motion: single block at bottom disables all animations.
 */

/* ============================================================
   ANIMATION DURATION TOKENS — override to tune globally
   ============================================================ */
:root {
    --anim-fast:        0.08s;
    --anim-quick:       0.15s;
    --anim-normal:      0.2s;
    --anim-medium:      0.25s;
    --anim-slow:        0.3s;
    --anim-loader-outer: 0.9s;
    --anim-loader-inner: 0.6s;
    --anim-loader-dot:   1s;
    --anim-skeleton:     1.4s;
    --anim-page:         0.3s;
    --anim-gold-pulse:   2s;
    --anim-value-flash:  0.4s;
    --anim-tab-activate: 0.2s;
    --anim-modal:        0.25s;
    --anim-ring-fill:    0.8s;
    --anim-step-out:     0.15s;
    --anim-step-in:      0.2s;
    --anim-toast-in:     0.2s;
    --anim-toast-out:    0.15s;
}

/* ============================================================
   PART 1 — BRANDED LOADING STATES
   ============================================================ */

/* ----------------------------------------------------------
   LF Loader — two concentric spinning rings + center dot
   Usage: <div class="lf-loader"></div>
   ---------------------------------------------------------- */
.lf-loader {
    position: relative;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Outer ring — navy, 32px, spins CW */
.lf-loader::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #134160;      /* brand navy — intentional */
    border-right-color: #134160;
    animation: lfLoaderOuter var(--anim-loader-outer) linear infinite;
}

/* Inner ring — gold, 20px, spins CCW */
.lf-loader::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #FDA929;      /* brand gold — intentional */
    border-left-color: #FDA929;
    animation: lfLoaderInner var(--anim-loader-inner) linear infinite reverse;
}

/* Center dot — 6px gold, pulses */
.lf-loader__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FDA929;            /* brand gold — intentional */
    position: relative;
    z-index: 1;
    animation: lfLoaderDot var(--anim-loader-dot) ease-in-out infinite;
}

@keyframes lfLoaderOuter {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes lfLoaderInner {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes lfLoaderDot {
    0%, 100% { transform: scale(0.8); opacity: 0.7; }
    50%       { transform: scale(1.2); opacity: 1; }
}

/* ----------------------------------------------------------
   Skeleton Loading
   ---------------------------------------------------------- */
.lf-skeleton {
    background: linear-gradient(
        90deg,
        var(--surface-dark-2, rgba(3,14,26,0.90)) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        var(--surface-dark-2, rgba(3,14,26,0.90)) 100%
    );
    background-size: 200% 100%;
    animation: lfSkeleton var(--anim-skeleton) ease-in-out infinite;
    border-radius: var(--radius-xs, 4px);
}

/* Light theme override */
:root .lf-skeleton,
.lf-skeleton {
    background: linear-gradient(
        90deg,
        var(--surface-dark-2, #f0f2f4) 0%,
        rgba(255, 255, 255, 0.80) 50%,
        var(--surface-dark-2, #f0f2f4) 100%
    );
    background-size: 200% 100%;
}

.lf-skeleton--text {
    height: 12px;
    border-radius: 6px;
    display: block;
}

.lf-skeleton--card {
    height: 80px;
    border-radius: 10px;
    display: block;
}

.lf-skeleton--circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

@keyframes lfSkeleton {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ----------------------------------------------------------
   Page / Tab Enter Transition
   ---------------------------------------------------------- */
.lf-page-enter {
    animation: lfPageEnter var(--anim-page) ease-out both;
}

@keyframes lfPageEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply to main tab panels on activation */
#lf-tab-intel.lf-tab-panel--active,
#lf-tab-comps.lf-tab-panel--active {
    animation: lfPageEnter var(--anim-page) ease-out both;
}

/* ============================================================
   PART 2 — BUTTON MICRO-INTERACTIONS
   ============================================================ */

/* Primary button press — scale down slightly */
/* from base.css: .btn-primary */
.btn-primary:active {
    transform: scale(0.97) translateY(0);
    box-shadow: var(--glow-gold-sm);
    transition: transform var(--anim-fast) ease,
                box-shadow var(--anim-fast) ease;
    animation: none;
}

/* Gold pulse on specific primary CTAs only */
/* IDs confirmed from index.html: #lf-new-analysis (new property), #pi-run-scenario-btn */
#lf-new-analysis,
#pi-run-scenario-btn {
    animation: lfGoldPulse var(--anim-gold-pulse) ease-in-out infinite;
}

@keyframes lfGoldPulse {
    0%   { box-shadow: 0 0 0 0 rgba(253, 169, 41, 0.4); }
    70%  { box-shadow: 0 0 0 8px rgba(253, 169, 41, 0); }
    100% { box-shadow: 0 0 0 0 rgba(253, 169, 41, 0); }
}

/* Icon / ghost button hover + active */
/* from pi-layout.css: .pi-reports-btn, from sidebar.css: .lf-sb-btn-ghost */
.lf-sb-btn-ghost:hover,
.pi-reports-btn:hover,
.np-card__close:hover,
.sm-card .sm-btn-back:hover,
.lf-modal-close:hover {
    background: rgba(19, 65, 96, 0.08);
    border-radius: 8px;
    transition: background var(--anim-quick) ease,
                border-radius var(--anim-quick) ease;
}

.lf-sb-btn-ghost:active,
.pi-reports-btn:active,
.np-card__close:active,
.lf-modal-close:active {
    transform: scale(0.94);
    transition: transform var(--anim-fast) ease;
}

/* ============================================================
   PART 3 — CARD AND PANEL INTERACTIONS
   ============================================================ */

/* KPI card value update flash */
/* Triggered by JS: add/remove .lf-value-updated on value change */
/* Targets from pi-dashboards.css, property-intelligence.css */
.dash-metric-card.lf-value-updated,
.pi-kpi-card.lf-value-updated {
    animation: lfValueFlash var(--anim-value-flash) ease-out both;
}

@keyframes lfValueFlash {
    0%   { background: transparent; }
    30%  { background: rgba(253, 169, 41, 0.12); }
    100% { background: transparent; }
}

/* Strategy subtab activation — gold underline slides in */
/* from pi-layout.css: .pi-strategy-tab.pi-strategy-tab--active */
.pi-strategy-tab.pi-strategy-tab--active {
    position: relative;
}

.pi-strategy-tab.pi-strategy-tab--active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 2px;
    background: #FDA929;            /* brand gold — intentional */
    border-radius: 999px;
    animation: lfTabActivate var(--anim-tab-activate) ease-out both;
}

@keyframes lfTabActivate {
    from { width: 0%; }
    to   { width: 80%; }
}

/* Sidebar property item — left border reveal on hover */
/* from css/sidebar.css: .lf-property-item */
.lf-property-item {
    position: relative;
    overflow: hidden;
}

.lf-property-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: #FDA929;            /* brand gold — intentional */
    border-radius: 0 2px 2px 0;
    transition: width var(--anim-quick) ease;
}

.lf-property-item:hover::before {
    width: 3px;
}

.lf-property-item:hover {
    background: var(--glass-bg-hover);
    transition: background var(--anim-quick) ease;
}

/* Already-active item — border locked in */
.lf-property-item.lf-prop-active::before {
    width: 3px;
}

/* Deal score ring fill animation */
/* from deal-score.css: .deal-score__ring uses conic-gradient with --score-pct */
/* Triggered by adding .lf-ring-animate to .deal-score__ring */
.deal-score__ring.lf-ring-animate {
    animation: lfRingFill var(--anim-ring-fill) ease-out both;
}

@keyframes lfRingFill {
    from {
        background: conic-gradient(
            var(--score-color, var(--text-muted)) 0%,
            var(--surface-dark, rgba(5,22,34,0.80)) 0%
        );
    }
    to {
        background: conic-gradient(
            var(--score-color, var(--text-muted)) calc(var(--score-pct, 0) * 1%),
            var(--surface-dark, rgba(5,22,34,0.80)) calc(var(--score-pct, 0) * 1%)
        );
    }
}

/* ============================================================
   PART 3B — MODAL ENTER ANIMATIONS
   ============================================================ */

/* --- Generic overlay backdrop fade-in --- */
/* Applies to all overlay elements on open */
/* from new-property.css: #lf-new-property-modal.np-open */
/* from scenario-modal.css: .sm-overlay.sm-open */
/* from investor-profile.css: #lf-settings-modal.lf-modal-open */
#lf-new-property-modal.np-open,
.sm-overlay.sm-open,
#lf-settings-modal.lf-modal-open,
#lf-lender-modal.lf-modal-open,
#lf-share-modal-overlay {
    animation: lfModalOverlay var(--anim-normal) ease-out both;
}

@keyframes lfModalOverlay {
    from { background-color: rgba(0, 0, 0, 0); }
    to   { background-color: rgba(0, 0, 0, 0.30); }
}

/* --- Modal card slide-up + scale in --- */
/* Targets: np-card, sm-card, lf-modal-panel, share-modal-card */
#lf-new-property-modal.np-open .np-card,
.sm-overlay.sm-open .sm-card,
#lf-settings-modal.lf-modal-open .lf-modal-panel,
#lf-lender-modal.lf-modal-open .lf-modal-panel,
#lf-share-modal-overlay .share-modal-card {
    animation: lfModalCard var(--anim-medium) ease-out both;
}

@keyframes lfModalCard {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================================
   PART 4 — SCENARIO MODAL STEP TRANSITIONS
   ============================================================ */

/* Outgoing step — slide left + fade out */
/* Applied by scenario-modal.js when navigating steps */
.sm-step-exit {
    animation: lfStepExit var(--anim-step-out) ease-in both;
    pointer-events: none;
}

@keyframes lfStepExit {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-16px);
    }
}

/* Incoming step — slide in from right + fade in */
.sm-step-enter {
    animation: lfStepEnter var(--anim-step-in) ease-out var(--anim-step-out) both;
}

@keyframes lfStepEnter {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================================
   PART 5 — TOAST NOTIFICATIONS
   ============================================================ */

/* Toast enter — slide up from bottom */
/* from comps-connection.css: .fdcc-toast, .fdcc-toast--entering */
.fdcc-toast--entering {
    animation: lfToastEnter var(--anim-toast-in) ease-out both;
}

@keyframes lfToastEnter {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Toast exit — slide up and fade */
/* from comps-connection.css: .fdcc-toast--leaving */
.fdcc-toast--leaving {
    animation: lfToastExit var(--anim-toast-out) ease-in both;
}

@keyframes lfToastExit {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px);
    }
}

/* ============================================================
   PART 6 — QUICK WINS
   ============================================================ */

/* Focus ring — gold outline for accessibility */
:focus-visible {
    outline: 2px solid #FDA929;         /* brand gold — intentional */
    outline-offset: 2px;
    border-radius: 4px;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Global color transition — performance-safe (excludes transform) */
/* Broad but limited to color-related properties only */
*,
*::before,
*::after {
    transition:
        background-color var(--anim-quick) ease,
        border-color     var(--anim-quick) ease,
        color            0.1s ease,
        box-shadow       var(--anim-quick) ease;
}

/* Exceptions: elements with explicit transform transitions must not be overridden */
/* Restore transform-bearing selectors to their own values */
.btn-primary,
.btn-secondary,
.glass-card,
.dash-metric-card,
.pi-kpi-card,
.pi-strategy-tab,
.lf-property-item,
.comp-card,
.lf-sb-btn-ghost {
    transition:
        background-color var(--anim-quick) ease,
        border-color     var(--anim-quick) ease,
        color            0.1s ease,
        box-shadow       var(--anim-quick) ease,
        transform        var(--anim-quick) ease;
}

/* ============================================================
   PREFERS-REDUCED-MOTION — single block, disables everything
   Users with vestibular disorders / motion sensitivity
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

    /* Disable all keyframe animations */
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay:           0ms !important;
        transition-duration:       0.01ms !important;
        transition-delay:          0ms !important;
    }

    /* Kill scroll behavior */
    html {
        scroll-behavior: auto !important;
    }

    /* Kill named animations explicitly */
    .lf-loader::before,
    .lf-loader::after,
    .lf-loader__dot,
    .lf-skeleton,
    .lf-page-enter,
    #lf-tab-intel.lf-tab-panel--active,
    #lf-tab-comps.lf-tab-panel--active,
    #lf-new-analysis,
    #pi-run-scenario-btn,
    .dash-metric-card.lf-value-updated,
    .pi-kpi-card.lf-value-updated,
    .pi-strategy-tab.pi-strategy-tab--active::after,
    .deal-score__ring.lf-ring-animate,
    #lf-new-property-modal.np-open,
    .sm-overlay.sm-open,
    #lf-settings-modal.lf-modal-open,
    #lf-lender-modal.lf-modal-open,
    #lf-share-modal-overlay,
    #lf-new-property-modal.np-open .np-card,
    .sm-overlay.sm-open .sm-card,
    #lf-settings-modal.lf-modal-open .lf-modal-panel,
    #lf-lender-modal.lf-modal-open .lf-modal-panel,
    #lf-share-modal-overlay .share-modal-card,
    .sm-step-exit,
    .sm-step-enter,
    .fdcc-toast--entering,
    .fdcc-toast--leaving {
        animation: none !important;
        transition: none !important;
    }
}