/* ============================================
   BITTU SONOWAL — Catchy & Engaging Animations
   Brand Theme: Electric Indigo & Violet (#6c63ff)
   ============================================ */

/* --- 01. Dynamic Ambient Glow Drift --- */
@keyframes ambient-glow {
  0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  33% { transform: translate(30px, -25px) scale(1.12); opacity: 1; }
  66% { transform: translate(-25px, 20px) scale(0.92); opacity: 0.8; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
}

/* --- 02. Text Shimmer & Gradient Flow --- */
@keyframes text-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.text-gradient {
  background-size: 200% auto;
  animation: text-shimmer 6s linear infinite;
}

/* --- 03. Smooth Sinusoidal Floating Badges --- */
@keyframes float-smooth-1 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(1deg); }
}

@keyframes float-smooth-2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(-1.5deg); }
}

@keyframes float-smooth-3 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(0.8deg); }
}

.badge-1 { animation: float-smooth-1 5s ease-in-out infinite; }
.badge-2 { animation: float-smooth-2 6.5s ease-in-out infinite 1s; }
.badge-3 { animation: float-smooth-3 5.8s ease-in-out infinite 2s; }

/* --- 04. Pulse & Glow Ring Animation --- */
@keyframes pulse-ring {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(108, 99, 255, 0.6); }
  70% { transform: scale(1); box-shadow: 0 0 0 12px rgba(108, 99, 255, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(108, 99, 255, 0); }
}

.badge-dot {
  animation: pulse-ring 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.dash-ticker-pulse {
  animation: pulse-green 2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 201, 63, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(39, 201, 63, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 201, 63, 0); }
}

/* --- 05. Chart Bars Animated Growth --- */
@keyframes grow-bar {
  from { transform: scaleY(0.2); }
  to { transform: scaleY(1); }
}

.dash-chart-bars .chart-col {
  transform-origin: bottom;
  animation: grow-bar 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.chart-col:nth-child(1) { animation-delay: 0.1s; }
.chart-col:nth-child(2) { animation-delay: 0.2s; }
.chart-col:nth-child(3) { animation-delay: 0.3s; }
.chart-col:nth-child(4) { animation-delay: 0.4s; }
.chart-col:nth-child(5) { animation-delay: 0.5s; }
.chart-col:nth-child(6) { animation-delay: 0.6s; }

/* --- 06. Card & Button Micro-Interactions --- */
.card:hover .card-icon svg {
  animation: icon-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes icon-bounce {
  0% { transform: scale(1); }
  45% { transform: scale(1.22) rotate(-6deg); }
  100% { transform: scale(1); }
}

.btn-primary:hover .btn-arrow {
  animation: arrow-slide 0.7s ease infinite;
}

@keyframes arrow-slide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

/* --- 07. Scroll-Reveal Stagger Transitions --- */
.stagger-group.visible .stagger-child {
  opacity: 1;
  transform: translateY(0);
}
.stagger-child {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-child:nth-child(1) { transition-delay: 0.05s; }
.stagger-child:nth-child(2) { transition-delay: 0.12s; }
.stagger-child:nth-child(3) { transition-delay: 0.19s; }
.stagger-child:nth-child(4) { transition-delay: 0.26s; }
.stagger-child:nth-child(5) { transition-delay: 0.33s; }
.stagger-child:nth-child(6) { transition-delay: 0.40s; }

/* Page load initial entrance - Instant paint for maximum speed */
body.loaded {
  opacity: 1;
}

/* --- 08. Accessibility: Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .stagger-child {
    opacity: 1 !important;
    transform: none !important;
  }
}