/* ==============================================================
 * Micro-animations & interactions
 * ============================================================== */

/* ── Tab panel fade-in on switch ── */
@keyframes panel-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.panel-in { animation: panel-in 0.18s ease both; }

/* ── Tab switch entrance — more visible than panel-in ── */
@keyframes tab-in {
  0%   { opacity: 0;   transform: translateY(12px) scale(0.98); filter: blur(4px); }
  60%  { opacity: 1;   transform: translateY(-2px) scale(1);    filter: blur(0);   }
  100% { opacity: 1;   transform: translateY(0)    scale(1);    filter: none;      }
}
.tab-in { animation: tab-in 0.3s cubic-bezier(0.22,1,0.36,1) both; }

/* ── Modal entrance (class added by JS on open) ── */
@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.modal-enter { animation: modal-enter 0.22s cubic-bezier(0.34, 1.1, 0.64, 1) both; }

/* ── Modal backdrop fade ── */
@keyframes backdrop-in  { from { opacity: 0; } to { opacity: 1; } }
.backdrop-in { animation: backdrop-in 0.18s ease both; }

/* ── Chart expand button (overlay on chart area, hover-reveal) ── */
.chart-expand-btn {
  position: absolute; top: 6px; right: 6px; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: var(--radius-sm, 6px);
  background: var(--bg-card); color: var(--text-muted);
  border: 1px solid var(--border); cursor: pointer;
  opacity: 0; transition: opacity 0.15s, background 0.12s, color 0.12s;
}
#hist-chart-wrap:hover  .chart-expand-btn,
#alloc-chart-wrap:hover .chart-expand-btn { opacity: 1; }
.chart-expand-btn:hover { background: var(--bg-hover); color: var(--text-sub); opacity: 1; }

/* ── Expand modal close button ── */
.chart-expand-close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius-sm, 6px);
  background: transparent; color: var(--text-muted);
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.chart-expand-close:hover { background: var(--bg-hover); color: var(--text-sub); border-color: var(--border); }

/* ── Full-screen modals — use --z-modal so they layer above the overlay ── */
#symbol-modal,
#gen-modal,
#add-modal {
  z-index: var(--z-modal);
}

/* ── Expand modal backdrop ── */
#chart-expand-backdrop {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(3px);
  animation: backdrop-in 0.18s ease both;
}
[data-theme="glass"] #chart-expand-backdrop {
  background: rgba(31,38,135,0.28);
  backdrop-filter: blur(6px);
}
[data-theme="glass"] #sym-tx-backdrop {
  background: rgba(31,38,135,0.28);
  backdrop-filter: blur(6px);
}
[data-theme="glass"] #symbol-modal {
  background: rgba(31,38,135,0.28);
  backdrop-filter: blur(6px);
}

/* ── Expand modal ── */
@keyframes panel-expand-enter {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Nav tabs: hover lift ── */
.tab {
  transition: background 0.15s ease, color 0.13s ease,
              border-color 0.13s ease, box-shadow 0.15s ease,
              transform 0.12s ease !important;
}
.tab-inactive:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.14);
}

/* ── Period buttons: extend with hover lift ── */
.period-btn {
  transition: background 0.14s ease, color 0.12s ease,
              border-color 0.12s ease, transform 0.11s ease,
              box-shadow 0.14s ease !important;
}
.period-inactive:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.13);
}
/* AMOLED: no lift on tabs or period buttons */
[data-theme="amoled"] .tab-inactive:hover,
[data-theme="amoled"] .period-inactive:hover { transform: none; box-shadow: none; }

/* ── Accent button: lift + shadow ── */
.btn-accent {
  transition: opacity 0.13s, transform 0.11s ease, box-shadow 0.14s ease !important;
}
.btn-accent:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.btn-accent:active { transform: scale(0.97); box-shadow: none; }

/* ── Summary cards: cursor + transition (hover handled by per-theme .t-card:hover) ── */
#card-total-value, #card-total-pnl, #card-day-change, #card-positions, #card-movers {
  transition: box-shadow 0.2s ease, border-color 0.15s ease, transform 0.15s ease !important;
  cursor: default;
}

/* ── Theme-specific .t-card hover (panels, analysis cards, summary cards) ── */
/* Midnight: flat GitHub Dark — depth via shadow only, no lift */
[data-theme="midnight"] .t-card:hover {
  box-shadow: var(--card-shadow-hover);
}
/* Light: fintech open — gentle lift, lighter transform than dark themes */
[data-theme="light"] .t-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
}
/* Aurora: purple glow on all cards */
[data-theme="aurora"] .t-card:hover {
  background: rgba(167,139,250,0.08);
  border-color: rgba(167,139,250,0.3);
  box-shadow: 0 8px 36px rgba(0,0,0,0.45), 0 0 0 1px rgba(167,139,250,0.18);
}

/* ── Input/select focus ring animation ── */
input, select, textarea {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb, 59,130,246), 0.18);
}

/* ── Table-header sort arrows: fade on hover ── */
th { transition: color 0.12s ease; }

/* ── Value flash when portfolio refreshes — slide-up + fade ── */
@keyframes val-flash {
  0%   { opacity: 0;   transform: translateY(4px); }
  55%  { opacity: 1;   transform: translateY(0);   }
  100% { opacity: 1;   transform: none;             }
}

/* ── Card value reveal: skeleton → real number ── */
@keyframes value-in {
  0%   { opacity: 0;   transform: translateY(8px) scale(0.94); filter: blur(3px); }
  60%  { opacity: 1;   transform: translateY(0)   scale(1.02); filter: blur(0);   }
  100% { opacity: 1;   transform: translateY(0) scale(1);    filter: none;      }
}
.val-flash { animation: val-flash 0.38s ease-out both; }

/* Export dropdown menu items */

/* ==============================================================
 * Motion preferences — WCAG 2.3 / prefers-reduced-motion
 * Makes all animations imperceptible for users who request it.
 * Uses 0.01ms (not 0) so JS transition-end listeners still fire.
 * ============================================================== */
@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;
  }
  /* Keep the freshness light visible but static */
  .refresh-core { opacity: 1; }
  /* Skeleton screens: solid fill instead of shimmer */
  .skeleton  { background: var(--bg-deep); background-size: unset; }
  .chart-sk  { background: transparent; background-size: unset; }
  /* Ticker: pause the scrolling belt */
  .ticker-track { animation-play-state: paused; }
}

/* Print: hide everything except #print-area */
@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; }
  body { background: white !important; color: black !important; }
}

/* ==============================================================
 * Frontend value improvements
 * ============================================================== */