/* ==========================================================================
   PULSELENS — INTERACTION & MOTION DESIGN (css/animations.css)
   ========================================================================== */

/* Keyframe Animations */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale3d(0.96, 0.96, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0px transparent;
  }
  50% {
    box-shadow: 0 0 15px var(--hover-color);
  }
}

/* Base Reveal Application classes */
.hero-content {
  animation: fadeInUp var(--transition-slow) forwards;
}

.tracker-form, .quick-stats, .analytics-grid, .advanced-grid {
  animation: scaleIn var(--transition-slow) forwards;
}

/* Button & Hover Effects */
button, .primary-btn, .secondary-btn, .icon-btn, .stat-card, .analytics-card, .advanced-card, .period {
  will-change: transform, box-shadow;
}

/* Neon Glow Underline animation on Navbar brand name */
.logo::after {
  box-shadow: 0 0 8px var(--accent-color);
}

/* Quick subtle micro-animations for active state */
button:active, .primary-btn:active, .secondary-btn:active {
  transform: scale(0.98);
}