/* ═══════════════════════════════════════════════════════════════
   FACTURAME — ANIMATIONS & MICRO-INTERACTIONS
═══════════════════════════════════════════════════════════════ */

/* ── PAGE TRANSITIONS ─────────────────────────────────────────── */
@keyframes pageFadeSlide {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.page.active {
  animation: pageFadeSlide 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── BUTTON RIPPLE ────────────────────────────────────────────── */
.btn { position: relative; overflow: hidden; }
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  transform: scale(0);
  animation: rippleExpand 0.65s linear;
  pointer-events: none;
  z-index: 10;
}
[data-store="idealo"] .btn-ghost .ripple-wave,
[data-store="idealo"] .btn-accent .ripple-wave {
  background: rgba(26, 26, 78, 0.10);
}
@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* ── MODAL ENTRANCE ───────────────────────────────────────────── */
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.93) translateY(14px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
.modal { animation: modalPop 0.26s cubic-bezier(0.34, 1.4, 0.64, 1); }

/* ── STAT CARD ENTRANCE ───────────────────────────────────────── */
@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.stat-card-anim {
  animation: cardFadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.stat-card-anim:nth-child(1) { animation-delay: 0.00s; }
.stat-card-anim:nth-child(2) { animation-delay: 0.07s; }
.stat-card-anim:nth-child(3) { animation-delay: 0.14s; }
.stat-card-anim:nth-child(4) { animation-delay: 0.21s; }

/* ── SIDEBAR TRANSITION (width + mobile transform) ────────────── */
.sidebar {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-content { transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* ── TOAST ────────────────────────────────────────────────────── */
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(50px) scale(0.95); }
  to   { opacity: 1; transform: translateX(0)    scale(1);    }
}
.toast { animation: toastSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1); }

/* ── PRIMARY GRADIENT CARD ────────────────────────────────────── */
.card-gradient-primary {
  position: relative;
  overflow: hidden;
}
.card-gradient-primary::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
[data-store="idealo"] .card-gradient-primary {
  background: linear-gradient(140deg, #1A1A4E 0%, #2d2d80 100%);
  border-color: transparent;
  box-shadow: 0 8px 32px rgba(26, 26, 78, 0.38);
}
[data-store="idealo"] .card-gradient-primary .card-title  { color: rgba(255,255,255,0.60); }
[data-store="idealo"] .card-gradient-primary .card-value  { color: #fff; }
[data-store="idealo"] .card-gradient-primary .card-sub    { color: rgba(255,255,255,0.50); }
[data-store="idealo"] .card-gradient-primary .stat-icon   { background: rgba(255,255,255,0.12); color: #F5C518; }

[data-store="mit"] .card-gradient-primary {
  background: linear-gradient(140deg, #003a18 0%, #006e35 100%);
  border-color: rgba(0, 198, 94, 0.20);
  box-shadow: 0 8px 32px rgba(0, 198, 94, 0.22);
}
[data-store="mit"] .card-gradient-primary .card-title  { color: rgba(255,255,255,0.65); }
[data-store="mit"] .card-gradient-primary .card-value  { color: #fff; }
[data-store="mit"] .card-gradient-primary .card-sub    { color: rgba(255,255,255,0.55); }
[data-store="mit"] .card-gradient-primary .stat-icon   { background: rgba(255,255,255,0.10); color: #7effa6; }

/* ── CHART BAR ANIMATED ENTRANCE ─────────────────────────────── */
@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.chart-bar { transform-origin: bottom; }
.chart-bar-col:nth-child(1) .chart-bar { animation: barGrow 0.5s 0.05s cubic-bezier(0.22,1,0.36,1) both; }
.chart-bar-col:nth-child(2) .chart-bar { animation: barGrow 0.5s 0.10s cubic-bezier(0.22,1,0.36,1) both; }
.chart-bar-col:nth-child(3) .chart-bar { animation: barGrow 0.5s 0.15s cubic-bezier(0.22,1,0.36,1) both; }
.chart-bar-col:nth-child(4) .chart-bar { animation: barGrow 0.5s 0.20s cubic-bezier(0.22,1,0.36,1) both; }
.chart-bar-col:nth-child(5) .chart-bar { animation: barGrow 0.5s 0.25s cubic-bezier(0.22,1,0.36,1) both; }
.chart-bar-col:nth-child(6) .chart-bar { animation: barGrow 0.5s 0.30s cubic-bezier(0.22,1,0.36,1) both; }

/* ── DARK MODE BADGE ADJUSTMENTS ──────────────────────────────── */
[data-store="mit"] .badge-success { background: rgba(0, 198, 94, 0.15);   color: #3dffa0; }
[data-store="mit"] .badge-danger  { background: rgba(255, 80, 80, 0.15);  color: #ff7070; }
[data-store="mit"] .badge-warning { background: rgba(255,165, 30, 0.15);  color: #ffb030; }
[data-store="mit"] .badge-info    { background: rgba(100,160,255, 0.15);  color: #80b8ff; }
[data-store="mit"] .badge-accent  { background: rgba(0, 198, 94, 0.12);   color: #00c65e; }

/* ── SPIN (login button loading) ──────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── LOADING PULSE ────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.4; }
}
.loading-pulse { animation: pulse 1.5s ease-in-out infinite; }

/* ── EMPTY STATE FLOAT ────────────────────────────────────────── */
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-8px);}
}
.empty-icon-float {
  display: inline-block;
  animation: floatUpDown 3s ease-in-out infinite;
  font-size: 48px;
  line-height: 1;
  margin-bottom: 12px;
}

/* ── 3D CARD HOVER ────────────────────────────────────────────── */
.stat-grid .card {
  will-change: transform;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}