/*
 * polish.css — FDCC Micro-Interaction & Animation Polish
 * Created: Batch 14 — Mobile + Polish
 *
 * Subtle enhancements — not decorative noise.
 * All values from CSS vars. Zero hardcoded colors.
 *
 * Covers:
 *   - Scroll reveal (.lf-reveal)
 *   - Button hover lift + intensified glow
 *   - Card hover subtle lift
 *   - Strategy tab sliding underline
 *   - Panel expand/collapse timing standardization
 *   - Input focus states (consistent cyan ring)
 *   - Loading skeletons (.lf-skeleton)
 *   - Scrollbar polish
 */

/* ============================================================
   SCROLL REVEAL
   Apply .lf-reveal to any card/section for entrance animation.
   Use inline --delay CSS var for staggering.
   ============================================================ */
.lf-reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: scrollReveal 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--delay, 0ms);
}

/* Auto-apply to major structural cards on STATE B/C entry */
body.lf-state-intel .glass-card,
body.lf-state-intel .glass-dark,
body.lf-state-workspace .glass-card,
body.lf-state-workspace .glass-dark {
    /* Entrance handled by property-intel.js pi-reveal — don't double-animate */
    /* Only apply to freshly added elements via .lf-reveal class */
}

/* ============================================================
   BUTTON HOVER LIFT
   All .btn-primary and .btn-secondary get a stronger lift + glow.
   Overrides base.css values with more intentional feel.
   ============================================================ */
.btn-primary:hover,
.btn-primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--glow-gold-md);
    animation: none; /* stop pulse on hover */
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--glow-gold-sm);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--glow-cyan-md);
}

.btn-secondary:active {
    transform: translateY(0);
    box-shadow: var(--glow-cyan-sm);
}

/* pi-search-btn (landing-style search button) — same treatment */
.pi-search-btn:hover,
.lf-landing__search-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-gold-md);
}

/* ============================================================
   CARD HOVER SUBTLE LIFT
   Glass cards respond to hover with 1px lift + border brighten.
   ============================================================ */
.glass-card {
    transition: transform 0.22s ease,
                border-color 0.22s ease,
                box-shadow 0.22s ease,
                background 0.22s ease;
}

.glass-card:hover {
    transform: translateY(-1px);
    border-color: var(--glass-border-hover);
    box-shadow: var(--glass-shadow), 0 4px 16px rgba(0, 0, 0, 0.30);
}

.glass-dark {
    transition: transform 0.22s ease,
                border-color 0.22s ease,
                box-shadow 0.22s ease;
}

.glass-dark:hover {
    transform: translateY(-1px);
    border-color: var(--cyan-alpha-20);
}

/* Suppress lift on interactive cards (tabs, tiles, buttons) */
.lf-kpi-tile:hover,
.lf-strategy-tab:hover,
.lf-panel-card__header:hover,
.lf-property-card:hover {
    transform: none;
}

/* ============================================================
   STRATEGY TAB — SLIDING GOLD UNDERLINE
   Replace static border-bottom with pseudo-element that animates
   width from 0 to 100% on activation.
   ============================================================ */
.lf-strategy-tab {
    position: relative;
    border-bottom: none !important; /* handled by pseudo-element */
    overflow: visible;
}

/* Remove the direct border; use ::after instead */
.lf-strategy-tab::after {
    content: '';
    position: absolute;
    bottom: -1px; /* sits on the nav border */
    left: 50%;
    width: 0;
    height: 3px;
    background: var(--gold-500);
    border-radius: var(--radius-full) var(--radius-full) 0 0;
    transform: translateX(-50%);
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--glow-gold-sm);
}

.lf-strategy-tab.lf-strategy-tab--active::after,
.lf-strategy-tab[aria-selected="true"]::after {
    width: 80%;
}

/* Keep text color + weight from strategy.css */

/* ============================================================
   PANEL EXPAND / COLLAPSE TIMING STANDARDIZATION
   right-panel.css uses 0.28s — standardize to 0.25s here
   ============================================================ */
.lf-panel-card__body {
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity    0.20s ease;
}

.lf-panel-card__caret {
    transition: transform 0.20s ease;
}

/* ============================================================
   INPUT FOCUS STATES — CONSISTENT CYAN RING
   Applies to ALL input/select/textarea across the app.
   Overrides individual component definitions with a single rule.
   ============================================================ */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--cyan-500) !important;
    box-shadow: 0 0 0 2px var(--cyan-alpha-20) !important;
}

/* Slider thumb: gold glow on focus */
input[type="range"]:focus {
    outline: none;
}

input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: var(--glow-gold-md);
    transform: scale(1.15);
}

input[type="range"]:focus::-moz-range-thumb {
    box-shadow: var(--glow-gold-md);
    transform: scale(1.15);
}

/* ============================================================
   LOADING SKELETONS
   .lf-skeleton — use on placeholder elements in sidebar + comps
   ============================================================ */
.lf-skeleton {
    background: var(--glass-bg);
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
}

.lf-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--cyan-alpha-10) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: sheen 1.6s ease-in-out infinite;
}

/* Skeleton size helpers */
.lf-skeleton--text {
    height: 12px;
    margin-bottom: 6px;
}

.lf-skeleton--text-sm {
    height: 9px;
    margin-bottom: 5px;
    width: 60%;
}

.lf-skeleton--card {
    height: 64px;
    margin-bottom: 4px;
}

.lf-skeleton--avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
}

/* ============================================================
   SCROLLBAR CONSISTENCY
   Force dark track + cyan thumb inside all scroll containers.
   ============================================================ */
#lf-panel-left,
#lf-panel-right,
#lf-panel-center,
#lf-sidebar,
.lf-sidebar-list,
.pi-loaded,
.lf-strategy-surface,
.lf-calc-stack {
    scrollbar-width: thin;
    scrollbar-color: var(--cyan-700) rgba(2, 11, 18, 0.80);
}

#lf-panel-left::-webkit-scrollbar,
#lf-panel-right::-webkit-scrollbar,
#lf-panel-center::-webkit-scrollbar,
#lf-sidebar::-webkit-scrollbar,
.lf-sidebar-list::-webkit-scrollbar,
.pi-loaded::-webkit-scrollbar,
.lf-strategy-surface::-webkit-scrollbar,
.lf-calc-stack::-webkit-scrollbar {
    width: 4px;
}

#lf-panel-left::-webkit-scrollbar-track,
#lf-panel-right::-webkit-scrollbar-track,
#lf-panel-center::-webkit-scrollbar-track,
#lf-sidebar::-webkit-scrollbar-track,
.lf-sidebar-list::-webkit-scrollbar-track,
.pi-loaded::-webkit-scrollbar-track,
.lf-strategy-surface::-webkit-scrollbar-track,
.lf-calc-stack::-webkit-scrollbar-track {
    background: rgba(2, 11, 18, 0.80);
    border-radius: var(--radius-full);
}

#lf-panel-left::-webkit-scrollbar-thumb,
#lf-panel-right::-webkit-scrollbar-thumb,
#lf-panel-center::-webkit-scrollbar-thumb,
#lf-sidebar::-webkit-scrollbar-thumb,
.lf-sidebar-list::-webkit-scrollbar-thumb,
.pi-loaded::-webkit-scrollbar-thumb,
.lf-strategy-surface::-webkit-scrollbar-thumb,
.lf-calc-stack::-webkit-scrollbar-thumb {
    background: var(--cyan-700);
    border-radius: var(--radius-full);
    border: 1px solid rgba(2, 11, 18, 0.80);
}

#lf-panel-left::-webkit-scrollbar-thumb:hover,
#lf-panel-right::-webkit-scrollbar-thumb:hover,
#lf-panel-center::-webkit-scrollbar-thumb:hover,
#lf-sidebar::-webkit-scrollbar-thumb:hover,
.lf-sidebar-list::-webkit-scrollbar-thumb:hover,
.pi-loaded::-webkit-scrollbar-thumb:hover,
.lf-strategy-surface::-webkit-scrollbar-thumb:hover,
.lf-calc-stack::-webkit-scrollbar-thumb:hover {
    background: var(--cyan-500);
}

/* ============================================================
   FOCUS VISIBLE — keyboard nav ring
   Replaces default browser outline with brand ring.
   ============================================================ */
:focus-visible {
    outline: 2px solid var(--cyan-500);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Suppress on mouse click (handled by :focus-visible) */
:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================================
   INTEL BAR SLIDE DOWN — smooth on open
   ============================================================ */
#lf-intel-bar {
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity    0.25s ease,
                border-color 0.25s ease;
}

/* ============================================================
   TOPBAR FADE IN — smoother entrance in STATE B/C
   ============================================================ */
body.lf-state-intel #lf-topbar,
body.lf-state-workspace #lf-topbar {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ============================================================
   PROPERTY CARD HOVER (sidebar)
   ============================================================ */
.lf-property-card {
    transition: background 0.18s ease,
                border-color 0.18s ease,
                box-shadow 0.18s ease,
                transform 0.18s ease;
}

.lf-property-card:hover {
    transform: translateX(2px);
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
}

.lf-property-card.lf-prop-active:hover {
    transform: translateX(2px);
}

/* ============================================================
   SNAPSHOT TILE — VALUE CHANGE HIGHLIGHT
   Matches existing tileCyanFlash keyframe in shell.css
   ============================================================ */
.lf-kpi-tile {
    transition: background 0.18s ease,
                border-color 0.18s ease;
}

/* ============================================================
   AI SHIMMER ELEMENTS — faster for perceived performance
   ============================================================ */
.lf-ai-shimmer {
    height: 48px;
    border-radius: var(--radius-sm);
    background: linear-gradient(
        90deg,
        var(--surface-glass) 0%,
        var(--cyan-alpha-10) 50%,
        var(--surface-glass) 100%
    );
    background-size: 200% 100%;
    animation: sheen 1.2s ease-in-out infinite;
}

/* ============================================================
   BOTTOM TAB BAR — only visible at ≤ 768px (default hidden)
   ============================================================ */
#lf-bottom-tabs {
    display: none; /* shown via responsive.css @media */
}

/* ============================================================
   RIGHT PANEL TOGGLE — only visible at ≤ 1100px (default hidden)
   ============================================================ */
#lf-right-panel-toggle {
    display: none; /* shown via responsive.css @media */
}

/* ============================================================
   MOBILE OVERLAY — default hidden
   ============================================================ */
#lf-mobile-overlay {
    display: none; /* shown via responsive.css + JS */
}