/* interactions.css — page entrance, card lift, button press, focus ring */

/* ══════════════════════════════════════════════════════════════════════════
   PAGE ENTRANCE — CSS keyframes fire on first paint, before JS runs.
   animation-fill-mode: both keeps elements invisible until their delay fires.
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes msm-enter {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Tab / section switching ────────────────────────────────────────────────
   Triggered whenever .active is added to a tab content element.
   Lighter and quicker than the page entrance — feels snappy not sluggish.
   ──────────────────────────────────────────────────────────────────────── */

@keyframes msm-tab-enter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Tab content — children flow in one after another ───────────────────
   Container has no animation (transparent wrapper).
   Each direct child gets the enter animation with an increasing delay,
   creating a top-to-bottom cascade as the tab opens.
   ─────────────────────────────────────────────────────────────────────── */

.tab-content.active > *,
#insights-tab.active > *,
#xp-tab.active > *,
#appearance-tab.active > *,
#following-tab.active > * {
    animation: msm-tab-enter 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stagger — 70ms between each child */
.tab-content.active > *:nth-child(1),
#insights-tab.active > *:nth-child(1),
#xp-tab.active > *:nth-child(1),
#appearance-tab.active > *:nth-child(1),
#following-tab.active > *:nth-child(1) { animation-delay: 40ms;  }

.tab-content.active > *:nth-child(2),
#insights-tab.active > *:nth-child(2),
#xp-tab.active > *:nth-child(2),
#appearance-tab.active > *:nth-child(2),
#following-tab.active > *:nth-child(2) { animation-delay: 110ms; }

.tab-content.active > *:nth-child(3),
#insights-tab.active > *:nth-child(3),
#xp-tab.active > *:nth-child(3),
#appearance-tab.active > *:nth-child(3),
#following-tab.active > *:nth-child(3) { animation-delay: 180ms; }

.tab-content.active > *:nth-child(4),
#insights-tab.active > *:nth-child(4),
#xp-tab.active > *:nth-child(4),
#appearance-tab.active > *:nth-child(4),
#following-tab.active > *:nth-child(4) { animation-delay: 250ms; }

.tab-content.active > *:nth-child(5),
#insights-tab.active > *:nth-child(5),
#xp-tab.active > *:nth-child(5),
#appearance-tab.active > *:nth-child(5),
#following-tab.active > *:nth-child(5) { animation-delay: 320ms; }

.tab-content.active > *:nth-child(6),
#insights-tab.active > *:nth-child(6),
#xp-tab.active > *:nth-child(6),
#appearance-tab.active > *:nth-child(6),
#following-tab.active > *:nth-child(6) { animation-delay: 380ms; }

.tab-content.active > *:nth-child(n+7),
#insights-tab.active > *:nth-child(n+7),
#xp-tab.active > *:nth-child(n+7),
#appearance-tab.active > *:nth-child(n+7),
#following-tab.active > *:nth-child(n+7) { animation-delay: 430ms; }

/* Settings sections animate as a whole unit — child stagger kept invisible too long */
.settings-section.active {
    animation: msm-tab-enter 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0ms;
}

/* Solo-modes game container swap — whole container fades in */
.msm-mode-entering {
    animation: msm-tab-enter 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Shared animation — delay is overridden per-group below */
/* NOTE: .settings-card intentionally excluded — tab content uses msm-tab-enter instead */
.home-hero,
.auth-card, .login-card,
.left-col > *,
.center-col > *,
.right-col > *,
.sentiment-container,
.profile-sidebar,
.profile-main,
.settings-sidebar,
.settings-content,
.game-mode-banner,
.mode-card,
.profile-card,
.stat-card {
    animation: msm-enter 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Stagger delays ─────────────────────────────────────────────────────── */

/* ── index.html ── */
.home-hero                    { animation-delay: 0ms;   }

/* ── login.html ── */
.auth-card, .login-card       { animation-delay: 60ms;  }

/* ── index / sentiment — three-column layout ── */
.left-col > *:nth-child(1)    { animation-delay: 80ms;  }
.left-col > *:nth-child(2)    { animation-delay: 120ms; }
.left-col > *:nth-child(3)    { animation-delay: 160ms; }
.left-col > *:nth-child(4)    { animation-delay: 200ms; }
.left-col > *:nth-child(n+5)  { animation-delay: 240ms; }

.center-col > *:nth-child(1)  { animation-delay: 100ms; }
.center-col > *:nth-child(2)  { animation-delay: 145ms; }
.center-col > *:nth-child(3)  { animation-delay: 190ms; }
.center-col > *:nth-child(n+4){ animation-delay: 230ms; }

.right-col > *:nth-child(1)   { animation-delay: 120ms; }
.right-col > *:nth-child(2)   { animation-delay: 160ms; }
.right-col > *:nth-child(3)   { animation-delay: 200ms; }
.right-col > *:nth-child(n+4) { animation-delay: 240ms; }

/* ── sentiment.html — single container with tabs ── */
.sentiment-container          { animation-delay: 60ms;  }

/* ── profile.html — delayed to let stats load before reveal ── */
.profile-sidebar              { animation-delay: 320ms; }
.profile-main                 { animation-delay: 480ms; }

/* ── settings.html — sidebar + content ── */
.settings-sidebar             { animation-delay: 60ms;  }
.settings-content             { animation-delay: 120ms; }

/* settings-card stagger (inside settings-content) */
.settings-card:nth-child(1)   { animation-delay: 140ms; }
.settings-card:nth-child(2)   { animation-delay: 185ms; }
.settings-card:nth-child(3)   { animation-delay: 230ms; }
.settings-card:nth-child(4)   { animation-delay: 275ms; }
.settings-card:nth-child(n+5) { animation-delay: 310ms; }

/* ── solo-modes.html — longer delays, game loads slower ── */
.game-mode-banner             { animation-delay: 120ms; }
.mode-card:nth-child(1)       { animation-delay: 260ms; }
.mode-card:nth-child(2)       { animation-delay: 360ms; }
.mode-card:nth-child(3)       { animation-delay: 460ms; }
.mode-card:nth-child(4)       { animation-delay: 560ms; }
.mode-card:nth-child(n+5)     { animation-delay: 620ms; }

/* ── profile cards / stat cards ── */
.profile-card:nth-child(1)    { animation-delay: 60ms;  }
.profile-card:nth-child(2)    { animation-delay: 110ms; }
.profile-card:nth-child(n+3)  { animation-delay: 160ms; }

.stat-card:nth-child(1)       { animation-delay: 100ms; }
.stat-card:nth-child(2)       { animation-delay: 140ms; }
.stat-card:nth-child(3)       { animation-delay: 180ms; }
.stat-card:nth-child(n+4)     { animation-delay: 220ms; }

/* ── Reduce motion — disable all entrance animations ───────────────────── */

@media (prefers-reduced-motion: reduce) {
    .home-hero, .auth-card, .login-card,
    .left-col > *, .center-col > *, .right-col > *,
    .sentiment-container,
    .profile-sidebar, .profile-main,
    .settings-sidebar, .settings-content,
    .game-mode-banner, .mode-card,
    .profile-card, .stat-card,
    .tab-content.active > *,
    #insights-tab.active > *, #xp-tab.active > *,
    #appearance-tab.active > *, #following-tab.active > *,
    .settings-section.active,
    .msm-mode-entering {
        animation: none !important;
    }
}

body.reduce-motion .home-hero,
body.reduce-motion .auth-card, body.reduce-motion .login-card,
body.reduce-motion .left-col > *, body.reduce-motion .center-col > *, body.reduce-motion .right-col > *,
body.reduce-motion .sentiment-container,
body.reduce-motion .profile-sidebar, body.reduce-motion .profile-main,
body.reduce-motion .settings-sidebar, body.reduce-motion .settings-content,
body.reduce-motion .game-mode-banner, body.reduce-motion .mode-card,
body.reduce-motion .profile-card, body.reduce-motion .stat-card,
body.reduce-motion .tab-content > *,
body.reduce-motion .settings-section.active,
body.reduce-motion .msm-mode-entering {
    animation: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CARD HOVER LIFT
   Only interactive/clickable cards lift. Informational panels do not.
   ══════════════════════════════════════════════════════════════════════════ */

/* Transition on all cards for smooth shadow changes */
.card,
.stat-card,
.mode-card,
.profile-card,
.settings-card,
.discussed-stocks,
.thread-item,
.xp-sidebar-card,
.xp-section,
.center-map {
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 220ms ease,
                background-color 180ms ease;
    will-change: transform;
}

/* Clickable game/navigation cards — keep the lift */
.mode-card:hover,
.center-map:hover {
    transform: translateY(-4px);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.13),
        0 3px 10px rgba(0, 0, 0, 0.07);
}

[data-theme="dark"] .mode-card:hover,
[data-theme="dark"] .center-map:hover {
    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.5),
        0 3px 12px rgba(0, 0, 0, 0.35);
}

/* General content cards — subtle depth shift only, no lift */
.card:hover,
.profile-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.1),
        0 2px 6px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .profile-card:hover {
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Informational panels — no transform, just a faint shadow shift */
.stat-card:hover,
.settings-card:hover,
.xp-sidebar-card:hover,
.discussed-stocks:hover {
    transform: none;
}

/* Thread items — accent bar on hover, no lift */
.thread-item:hover {
    transform: none;
    box-shadow: inset 2px 0 0 var(--primary-accent);
    background-color: rgba(var(--primary-accent-rgb), 0.04);
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTON PRESS
   ══════════════════════════════════════════════════════════════════════════ */

.btn-copper,
button.btn-copper {
    transition: background 150ms ease, color 150ms ease,
                border-color 150ms ease, opacity 150ms ease !important;
}

.btn-copper:hover,
button.btn-copper:hover {
    /* Ghost fills with accent — defined in style.css, no overrides needed here */
}

.btn-copper:active,
button.btn-copper:active {
    filter: brightness(0.85) !important;
    transition: filter 80ms ease-out !important;
}

button:not([class*="msm-"]):not(.logout-button):not(.vote-btn):not(.filter-btn):active {
    transform: scale(0.94) translateY(1px);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
    filter: brightness(0.9);
    transition: transform 80ms ease-out,
                box-shadow 80ms ease-out,
                filter 80ms ease-out;
}

/* ══════════════════════════════════════════════════════════════════════════
   FOCUS RING
   ══════════════════════════════════════════════════════════════════════════ */

:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--card-bg, #fff),
        0 0 0 4px rgba(var(--primary-accent-rgb), 0.45);
    border-radius: 5px;
    transition: box-shadow 120ms ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY / DATA ELEMENTS
   ══════════════════════════════════════════════════════════════════════════ */

body {
    font-variant-numeric: tabular-nums;
}

.price-pill,
.font-mono {
    font-family: var(--font-mono, 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCE MOTION — card/button overrides
   ══════════════════════════════════════════════════════════════════════════ */

body.reduce-motion .card,
body.reduce-motion .stat-card,
body.reduce-motion .mode-card,
body.reduce-motion .settings-card,
body.reduce-motion .xp-sidebar-card,
body.reduce-motion .profile-card,
body.reduce-motion .thread-item,
body.reduce-motion .center-map,
body.reduce-motion .btn-copper,
body.reduce-motion button.btn-copper,
body.reduce-motion button {
    transition: none !important;
    transform: none !important;
}

body.reduce-motion :focus-visible {
    transition: none;
}