/* ═══════════════════════════════════════════════════════════════════════════
   FLAIR UI 1.0 — Micro-Interactions & Animations
   Requires: flair-v9.css + flair-ui.css
   Adds: keyframes, hover effects, page transitions, loading states,
         entrance animations, stagger delays, smooth reveals.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════ */

@keyframes fadeIn    { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeOut   { from { opacity: 1 } to { opacity: 0 } }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px) }
  to   { opacity: 1; transform: translateY(0)    }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px) }
  to   { opacity: 1; transform: translateY(0)     }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(20px) }
  to   { opacity: 1; transform: translateX(0)    }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-20px) }
  to   { opacity: 1; transform: translateX(0)     }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.88) }
  to   { opacity: 1; transform: scale(1)   }
}
@keyframes scaleOut {
  from { opacity: 1; transform: scale(1)    }
  to   { opacity: 0; transform: scale(.88)  }
}

@keyframes slideInBottom {
  from { transform: translateY(100%); opacity: 0 }
  to   { transform: translateY(0);    opacity: 1 }
}
@keyframes slideOutBottom {
  from { transform: translateY(0);    opacity: 1 }
  to   { transform: translateY(100%); opacity: 0 }
}

@keyframes spin {
  to { transform: rotate(360deg) }
}

@keyframes pulse {
  0%, 100% { opacity: 1 }
  50%       { opacity: .5 }
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5) }
  50%       { box-shadow: 0 0 0 5px transparent }
}
@keyframes pulse-ring {
  0%   { transform: scale(.9); opacity: .7 }
  50%  { transform: scale(1.1); opacity: 0 }
  100% { transform: scale(.9); opacity: 0  }
}

@keyframes shimmer {
  0%   { background-position: -200% center }
  100% { background-position:  200% center }
}

@keyframes bounce-dot {
  0%, 80%, 100% { transform: scale(0) }
  40%           { transform: scale(1) }
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(100%) scale(.9) }
  to   { opacity: 1; transform: translateX(0)    scale(1)  }
}
@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0)    scale(1)  }
  to   { opacity: 0; transform: translateX(120%) scale(.9) }
}

@keyframes ai-border-pulse {
  0%, 100% { opacity: 0 }
  50%       { opacity: .55 }
}

@keyframes glow-breathe {
  0%, 100% { box-shadow: 0 0 12px rgba(124,58,237,.3) }
  50%       { box-shadow: 0 0 28px rgba(124,58,237,.6) }
}

@keyframes float {
  0%, 100% { transform: translateY(0) }
  50%       { transform: translateY(-8px) }
}

@keyframes shake {
  0%, 100% { transform: translateX(0) }
  20%       { transform: translateX(-6px) }
  40%       { transform: translateX(6px) }
  60%       { transform: translateX(-4px) }
  80%       { transform: translateX(4px) }
}

@keyframes count-up {
  from { opacity: 0; transform: translateY(12px) }
  to   { opacity: 1; transform: translateY(0)    }
}

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

@keyframes notification-badge {
  0%   { transform: scale(1) }
  15%  { transform: scale(1.4) }
  30%  { transform: scale(.9) }
  45%  { transform: scale(1.1) }
  100% { transform: scale(1) }
}

@keyframes border-rotate {
  from { background-position: 0% 50% }
  to   { background-position: 100% 50% }
}

/* ══════════════════════════════════════════════════════════
   ENTRANCE ANIMATION CLASSES
   ══════════════════════════════════════════════════════════ */

.anim-fade-up    { animation: fadeUp    .4s cubic-bezier(.4,0,.2,1) both; }
.anim-fade-down  { animation: fadeDown  .4s cubic-bezier(.4,0,.2,1) both; }
.anim-fade-left  { animation: fadeLeft  .4s cubic-bezier(.4,0,.2,1) both; }
.anim-fade-right { animation: fadeRight .4s cubic-bezier(.4,0,.2,1) both; }
.anim-scale-in   { animation: scaleIn   .35s cubic-bezier(.34,1.56,.64,1) both; }
.anim-fade-in    { animation: fadeIn    .3s ease both; }
.anim-float      { animation: float 3s ease-in-out infinite; }
.anim-pulse      { animation: pulse 2s ease-in-out infinite; }
.anim-spin       { animation: spin .7s linear infinite; }
.anim-shake      { animation: shake .4s ease; }
.anim-glow       { animation: glow-breathe 2.5s ease-in-out infinite; }

/* Stagger delays — apply to children */
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }
.stagger > *:nth-child(7) { animation-delay: 360ms; }
.stagger > *:nth-child(8) { animation-delay: 420ms; }

/* ══════════════════════════════════════════════════════════
   PAGE TRANSITIONS
   ══════════════════════════════════════════════════════════ */

.page-content {
  animation: page-enter .35s cubic-bezier(.4,0,.2,1) both;
}

/* Section entrance — apply to .main sections */
.section-animate {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1);
}
.section-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════
   HOVER MICRO-INTERACTIONS
   ══════════════════════════════════════════════════════════ */

/* Lift on hover */
.hover-lift {
  transition: transform var(--trans-base), box-shadow var(--trans-base);
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--elev-3);
}

/* Scale on hover */
.hover-scale { transition: transform var(--trans-fast); }
.hover-scale:hover { transform: scale(1.03); }

/* Glow on hover */
.hover-glow-violet { transition: box-shadow var(--trans-base); }
.hover-glow-violet:hover { box-shadow: var(--glow-violet); }
.hover-glow-cyan   { transition: box-shadow var(--trans-base); }
.hover-glow-cyan:hover   { box-shadow: var(--glow-cyan); }
.hover-glow-green  { transition: box-shadow var(--trans-base); }
.hover-glow-green:hover  { box-shadow: var(--glow-green); }

/* Slide icon on hover */
.hover-icon-right { overflow: hidden; }
.hover-icon-right .icon {
  display: inline-block;
  transition: transform var(--trans-base);
}
.hover-icon-right:hover .icon { transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════
   INTERACTIVE FEEDBACK
   ══════════════════════════════════════════════════════════ */

/* Click ripple on interactive elements */
.ripple-target { position: relative; overflow: hidden; }
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  transform: scale(0);
  animation: ripple-expand .5s ease-out;
  pointer-events: none;
}
@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}

/* Number counter animation */
.count-animate { animation: count-up .5s ease both; }

/* Success flash */
.flash-success {
  animation: flash-green .5s ease;
}
@keyframes flash-green {
  0%   { background: transparent }
  30%  { background: rgba(16,185,129,.2) }
  100% { background: transparent }
}

/* Error flash */
.flash-error {
  animation: flash-red .5s ease, shake .4s ease;
}
@keyframes flash-red {
  0%   { background: transparent }
  30%  { background: rgba(239,68,68,.18) }
  100% { background: transparent }
}

/* ══════════════════════════════════════════════════════════
   KPI CARD HOVER (enhanced version)
   ══════════════════════════════════════════════════════════ */

.kpi, .stat-card {
  transition: transform .22s cubic-bezier(.4,0,.2,1),
              box-shadow .22s cubic-bezier(.4,0,.2,1),
              border-color .22s ease;
}
.kpi:hover, .stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.4), var(--glow-violet);
  border-color: rgba(124,58,237,.4);
}

/* ══════════════════════════════════════════════════════════
   NAV LINK TRANSITIONS
   ══════════════════════════════════════════════════════════ */

.nav-link {
  transition: color var(--trans-fast),
              background var(--trans-fast),
              border-color var(--trans-fast),
              transform var(--trans-fast);
}
.nav-link:active { transform: scale(.97); }

/* ══════════════════════════════════════════════════════════
   NOTIFICATION BADGE BOUNCE
   ══════════════════════════════════════════════════════════ */

.nbadge.new { animation: notification-badge .5s ease; }

/* ══════════════════════════════════════════════════════════
   TABLE ROW HOVER (enhanced)
   ══════════════════════════════════════════════════════════ */

.table-wrap tbody tr {
  transition: background var(--trans-fast), transform var(--trans-fast);
}
.table-wrap tbody tr:hover { background: rgba(124,58,237,.06); }

/* ══════════════════════════════════════════════════════════
   SCROLL REVEAL OBSERVER
   Used by layout.js IntersectionObserver
   ══════════════════════════════════════════════════════════ */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
}
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}
[data-reveal="left"] {
  transform: translateX(-20px);
}
[data-reveal="left"].revealed {
  transform: none;
}
[data-reveal="right"] {
  transform: translateX(20px);
}
[data-reveal="right"].revealed {
  transform: none;
}
[data-reveal="scale"] {
  transform: scale(.93);
}
[data-reveal="scale"].revealed {
  transform: none;
}

/* ══════════════════════════════════════════════════════════
   SIDEBAR TOGGLE ANIMATION
   ══════════════════════════════════════════════════════════ */

.sidebar {
  transition: width var(--trans-base), transform var(--trans-base);
}
.page {
  transition: margin-left var(--trans-base);
}

/* ══════════════════════════════════════════════════════════
   MODAL TRANSITIONS (handled via .modal-overlay.open)
   ══════════════════════════════════════════════════════════ */

.modal {
  transition: transform var(--trans-spring), opacity var(--trans-base);
}

/* ══════════════════════════════════════════════════════════
   PROGRESS BAR SHIMMER
   ══════════════════════════════════════════════════════════ */

.progress-bar-fill::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.22) 40%,
    rgba(255,255,255,.22) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* ══════════════════════════════════════════════════════════
   AI BLOCK GRADIENT BORDER ANIMATION
   ══════════════════════════════════════════════════════════ */

.ai-block::before {
  background: linear-gradient(90deg, transparent, var(--violet), var(--cyan), var(--pink), transparent);
  background-size: 200% 100%;
  animation: border-rotate 3s linear infinite;
}

/* ══════════════════════════════════════════════════════════
   REDUCE MOTION
   ══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}