/* ---- GSAP-READY CLASSES ---- */
.anim-up { opacity: 0; transform: translateY(20px); }
.anim-fade { opacity: 0; }
.anim-scale { opacity: 0; transform: scale(0.96); }

/* ---- CSS TRANSITIONS ---- */
.fade-enter { animation: fadeIn 0.35s ease forwards; }
.slide-up { animation: slideUp 0.4s cubic-bezier(0.4,0,0.2,1) forwards; }

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

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* ---- ACCORDION ---- */
.accordion-body {
  overflow: hidden;
  height: 0;
  opacity: 0;
}

.accordion-body.open {
  opacity: 1;
}

/* ---- TYPING INDICATOR ---- */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
}

.typing-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: typingBounce 1.2s infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ---- PROGRESS BAR ---- */
.progress-bar-wrap {
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}

/* ---- SHIMMER SKELETON ---- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface2) 25%,
    var(--surface3) 50%,
    var(--surface2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ---- HOVER GLOW EFFECT ---- */
.glow-on-hover {
  position: relative;
  overflow: hidden;
}

.glow-on-hover::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.glow-on-hover:hover::before { opacity: 0.15; }

/* ---- CARD GRADIENT OVERLAY ---- */
.card-gradient-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to top, var(--surface), transparent);
  pointer-events: none;
}

/* ---- PULSE ANIMATION ---- */
.pulse {
  animation: pulseAnim 2s cubic-bezier(0.4,0,0.6,1) infinite;
}

@keyframes pulseAnim {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ---- FLOAT ANIMATION ---- */
.float {
  animation: floatAnim 3s ease-in-out infinite;
}

@keyframes floatAnim {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ---- NUMBER COUNTER ---- */
.counting { display: inline-block; }

/* ---- CHART FADE IN ---- */
.chart-container {
  animation: fadeIn 0.5s 0.3s both;
}