/* ═══════════════════════════════════════════
   THYMOS — ANIMATIONS.CSS v2
   GPU-accelerated · Spring easing · Fluid
════════════════════════════════════════════ */

/* ─── PREFERS REDUCED MOTION ──────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── EASING TOKENS ───────────────────────── */
:root {
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:    cubic-bezier(0.45, 0, 0.15, 1);
}

/* ═══ PAGE LOAD ══════════════════════════════ */
@keyframes pageIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.dashboard-content {
  animation: pageIn 0.5s var(--ease-out-expo) both;
}

/* ═══ SCROLL REVEAL ══════════════════════════ */
.reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  will-change: opacity, transform;
  transition:
    opacity 0.6s var(--ease-out-expo),
    transform 0.6s var(--ease-out-expo);
}
.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ═══ KPI CARD STAGGER ═══════════════════════ */
@keyframes kpiIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.98); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.kpi-row .kpi-card {
  animation: kpiIn 0.55s var(--ease-out-expo) both;
}
.kpi-row .kpi-card:nth-child(1) { animation-delay: 0.04s; }
.kpi-row .kpi-card:nth-child(2) { animation-delay: 0.1s; }
.kpi-row .kpi-card:nth-child(3) { animation-delay: 0.16s; }
.kpi-row .kpi-card:nth-child(4) { animation-delay: 0.22s; }

/* ═══ SCORE BARS — GPU scaleX ════════════════ */
.mini-fill,
.bar-fill,
.readiness-fill,
.stat-mini-fill,
.wr-wins,
.wr-losses {
  transform-origin: left center;
  animation: barScale 0.9s var(--ease-out-expo) both;
  animation-delay: 0.35s;
}
@keyframes barScale {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.week-bar-fill {
  transform-origin: bottom center;
  animation: barScaleY 0.8s var(--ease-out-expo) both;
  animation-delay: 0.4s;
}
@keyframes barScaleY {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* ═══ RING SVG — smooth draw ═════════════════ */
@keyframes ringDraw {
  from { stroke-dasharray: 0 100; }
}
.ring-fill {
  animation: ringDraw 1.1s var(--ease-out-quart) both;
  animation-delay: 0.5s;
}

/* IRS risk bars */
.irs-bar {
  transform-origin: left center;
  animation: barScale 0.7s var(--ease-out-expo) both;
  animation-delay: 0.4s;
}

/* ═══ CARD HOVERS — layered shadows ══════════ */
.kpi-card {
  transition:
    background 0.2s,
    transform 0.35s var(--ease-out-expo),
    box-shadow 0.35s var(--ease-out-expo);
}
.kpi-card:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow:
    0 2px 4px rgba(0,0,0,0.12),
    0 8px 24px rgba(0,0,0,0.18);
}

.panel {
  transition:
    border-color 0.3s var(--ease-smooth),
    box-shadow 0.4s var(--ease-out-expo);
}
.panel:hover {
  border-color: rgba(255,255,255,0.07);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.08),
    0 4px 16px rgba(0,0,0,0.12);
}

.fight-card,
.sp-card {
  transition:
    transform 0.35s var(--ease-out-expo),
    box-shadow 0.35s var(--ease-out-expo),
    border-color 0.25s;
}
.fight-card:hover,
.sp-card:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.1),
    0 12px 32px rgba(0,0,0,0.18);
}

.alert-card {
  transition:
    transform 0.3s var(--ease-out-expo),
    box-shadow 0.3s var(--ease-out-expo),
    border-color 0.2s;
}
.alert-card:hover {
  transform: translate3d(4px, 0, 0);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.alert-full {
  transition:
    opacity 0.35s var(--ease-smooth),
    transform 0.35s var(--ease-out-expo),
    box-shadow 0.35s var(--ease-out-expo);
}
.alert-full:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.1),
    0 10px 28px rgba(0,0,0,0.16);
}

/* ═══ TABLE ROW HOVER ════════════════════════ */
.fighter-row {
  transition:
    background 0.2s,
    transform 0.28s var(--ease-out-expo);
}
.fighter-row:hover {
  transform: translate3d(3px, 0, 0);
}

/* ═══ BUTTONS ════════════════════════════════ */
.btn {
  position: relative;
  overflow: hidden;
  transition:
    all 0.25s var(--ease-out-expo);
}
.btn:hover {
  transform: translate3d(0, -1px, 0);
}
.btn:active {
  transform: translate3d(0, 0, 0) scale(0.97);
  transition-duration: 0.08s;
}

/* Ripple light on primary */
.btn--primary {
  position: relative;
}
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
    rgba(255,255,255,0.18) 0%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.35s var(--ease-smooth);
  pointer-events: none;
}
.btn--primary:hover::after {
  opacity: 1;
}

.btn-row {
  transition:
    all 0.25s var(--ease-out-expo);
}
.btn-row:hover {
  transform: translate3d(3px, 0, 0);
  border-color: var(--red-border);
  color: var(--red);
}

.alert-btn {
  transition: all 0.22s var(--ease-out-expo);
}
.alert-btn:hover {
  transform: translate3d(0, -1px, 0);
}
.alert-btn:active {
  transform: scale(0.96);
  transition-duration: 0.06s;
}

.sp-btn {
  transition: all 0.22s var(--ease-out-expo);
}
.sp-btn:hover {
  transform: translate3d(0, -1px, 0);
}
.sp-btn:active {
  transform: scale(0.96);
  transition-duration: 0.06s;
}

/* ═══ SIDEBAR ════════════════════════════════ */
.sidebar {
  transition: transform 0.38s var(--ease-out-expo);
}

.sidebar-overlay {
  opacity: 0;
  transition: opacity 0.35s var(--ease-smooth);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sidebar-overlay.active {
  opacity: 1;
}

.nav-item {
  transition:
    color 0.18s,
    background 0.18s,
    transform 0.25s var(--ease-out-expo);
}
.nav-item:hover {
  transform: translate3d(3px, 0, 0);
}
.nav-item.active,
.nav-item.active:hover {
  transform: none;
}

/* ═══ TAB TRANSITIONS ════════════════════════ */
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
  animation: tabIn 0.4s var(--ease-out-expo) both;
}
@keyframes tabIn {
  0%   { opacity: 0; transform: translate3d(0, 10px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

.stab-content {
  display: none;
}
.stab-content.active {
  display: block;
  animation: tabIn 0.4s var(--ease-out-expo) both;
}

.tab-btn,
.stab {
  transition:
    all 0.22s var(--ease-out-expo);
}
.tab-btn.active,
.stab.active {
  animation: btnPop 0.3s var(--ease-spring);
}
@keyframes btnPop {
  0%   { transform: scale(0.94); }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ═══ CHAT MESSAGES ══════════════════════════ */
@keyframes msgIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.ia-mini__msg,
.ia-full-msg {
  animation: msgIn 0.35s var(--ease-out-expo) both;
}

/* ═══ TOAST ANIMATIONS ═══════════════════════ */
@keyframes toastIn {
  from { transform: translate3d(110%, 0, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes toastOut {
  from { transform: translate3d(0, 0, 0); opacity: 1; }
  to   { transform: translate3d(110%, 0, 0); opacity: 0; }
}

/* ═══ MODAL ══════════════════════════════════ */
@keyframes modalBgIn {
  from { backdrop-filter: blur(0); }
  to   { backdrop-filter: blur(2px); }
}

/* ═══ COUNTDOWN PULSE ════════════════════════ */
.combat-card--urgent .cc-num,
.fight-item--urgent .fight-countdown {
  animation: countPulse 2.2s var(--ease-smooth) infinite;
}
@keyframes countPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.65; transform: scale(0.97); }
}

/* ═══ SCORE GLOW ═════════════════════════════ */
.score-num.warn { text-shadow: 0 0 10px rgba(193, 18, 31, 0.25); }
.score-num.ok   { text-shadow: 0 0 10px rgba(74, 158, 92, 0.25); }
.ring-value.warn { text-shadow: 0 0 12px rgba(212, 175, 55, 0.3); }

/* ═══ HEADER SCORE RINGS ═════════════════════ */
.header-score {
  transition: transform 0.35s var(--ease-out-expo);
}
.header-score:hover {
  transform: scale(1.08);
}

/* ═══ PSYCH ALERT SHAKE ══════════════════════ */
.psych-alert {
  animation: alertShake 0.55s var(--ease-out-expo) both;
  animation-delay: 0.7s;
}
@keyframes alertShake {
  0%   { opacity: 0; transform: translate3d(-6px, 0, 0); }
  25%  { transform: translate3d(3px, 0, 0); }
  50%  { transform: translate3d(-1px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ═══ SPARRING ACCEPTED ══════════════════════ */
.sp-card--accepted {
  animation: acceptGlow 0.5s var(--ease-out-expo);
}
@keyframes acceptGlow {
  0%   { box-shadow: 0 0 0 0 rgba(74,158,92,0.35); }
  50%  { box-shadow: 0 0 0 10px rgba(74,158,92,0); }
  100% { box-shadow: none; }
}

/* ═══ CAMP TIMELINE ══════════════════════════ */
.camp-week {
  transition:
    background 0.2s,
    transform 0.3s var(--ease-out-expo);
}
.camp-week:hover {
  transform: translate3d(4px, 0, 0);
}

/* ═══ FIGHTER HEADER ENTRANCE ════════════════ */
.fighter-header {
  animation: headerIn 0.5s var(--ease-out-expo) both;
  animation-delay: 0.08s;
}
@keyframes headerIn {
  from { opacity: 0; transform: translate3d(0, -8px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.tabs-bar {
  animation: pageIn 0.45s var(--ease-out-expo) both;
  animation-delay: 0.15s;
}

/* ═══ LOADING SHIMMER ════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.loading-shimmer {
  background: linear-gradient(90deg, var(--surface3) 25%, var(--surface) 50%, var(--surface3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s var(--ease-smooth) infinite;
  border-radius: var(--r);
}

/* ═══ SCROLLBAR ══════════════════════════════ */
.sidebar__nav::-webkit-scrollbar { width: 3px; }
.sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.sidebar__nav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
  transition: background 0.2s;
}
.sidebar__nav::-webkit-scrollbar-thumb:hover { background: var(--subtle); }

/* ═══ PAGE TRANSITION (link clicks) ══════════ */
.page-exit {
  animation: pageExit 0.2s var(--ease-smooth) forwards;
}
@keyframes pageExit {
  to { opacity: 0; transform: translate3d(0, -6px, 0); }
}

/* ═══ FOCUS RING ═════════════════════════════ */
.btn:focus-visible,
.tab-btn:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  transition: outline-offset 0.15s var(--ease-out-expo);
}

/* ═══ COMBAT CARD ENTRANCE (stagger) ═════════ */
.combat-card {
  transition:
    background 0.2s,
    transform 0.35s var(--ease-out-expo),
    box-shadow 0.35s var(--ease-out-expo);
}
.combat-card:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow:
    0 4px 8px rgba(0,0,0,0.1),
    0 12px 32px rgba(0,0,0,0.16);
}

/* ═══ HISTORY FIGHTS HOVER ═══════════════════ */
.history-fight {
  transition:
    background 0.2s,
    transform 0.28s var(--ease-out-expo);
}
.history-fight:hover {
  transform: translate3d(3px, 0, 0);
}

/* ═══ SETTINGS CARDS ═════════════════════════ */
.settings-card {
  transition:
    border-color 0.25s,
    box-shadow 0.35s var(--ease-out-expo);
}
.settings-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

/* ═══ TEAM MEMBER ROWS ═══════════════════════ */
.team-member {
  transition:
    background 0.2s,
    transform 0.28s var(--ease-out-expo);
}
.team-member:hover {
  transform: translate3d(2px, 0, 0);
}

/* ═══ TOGGLE SWITCH ══════════════════════════ */
.toggle-slider {
  transition: background 0.3s var(--ease-smooth), border-color 0.3s;
}
.toggle-slider::before {
  transition: transform 0.3s var(--ease-spring), background 0.2s;
}

/* ═══ NOTIFICATION ITEMS ═════════════════════ */
.notif-item {
  transition: background 0.2s;
}
.notif-item:hover {
  background: rgba(255,255,255,0.015);
}

/* ═══ UPLOAD ZONE ════════════════════════════ */
.upload-zone {
  transition: border-color 0.3s var(--ease-smooth), background 0.3s;
}
.upload-zone:hover {
  border-color: var(--muted);
  background: rgba(255,255,255,0.015);
}

/* ═══ SPARRING HISTORY ═══════════════════════ */
.sp-history-item {
  transition:
    background 0.2s,
    transform 0.25s var(--ease-out-expo);
}
.sp-history-item:hover {
  transform: translate3d(2px, 0, 0);
  background: rgba(255,255,255,0.02);
}