/**
 * ============================================================
 *  animations.css — Micro-Animations & Transitions
 * ============================================================
 *  Provides subtle but polished animations for page load,
 *  result cards, and interactive elements.
 * ============================================================
 */

/* ── Keyframes ────────────────────────────────────────────── */

/* Fade in from transparent */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slide up with fade */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Gentle float (for decorative elements) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Subtle pulse glow effect */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(13, 148, 136, 0.15); }
  50%      { box-shadow: 0 0 35px rgba(13, 148, 136, 0.30); }
}

/* Scale pop for button feedback */
@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Shimmer effect for loading states */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Animation Utility Classes ────────────────────────────── */

.animate-fade-in {
  animation: fadeIn var(--transition-slow) ease both;
}

.animate-slide-up {
  animation: slideUp 0.6s ease both;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 2.5s ease-in-out infinite;
}

/* ── Staggered Delays for Result Cards ────────────────────── */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.15s; }
.stagger-3 { animation-delay: 0.25s; }
.stagger-4 { animation-delay: 0.35s; }

/* ── Page Load Animations ─────────────────────────────────── */
#header-container {
  animation: fadeIn 0.8s ease both;
}

#form-container {
  animation: slideUp 0.7s ease 0.2s both;
}

/* ── Interactive Feedback ─────────────────────────────────── */
.btn-primary:active {
  animation: pop 0.25s ease;
}

/* ── Hero Staggered Entrance ──────────────────────────────── */
.header__icon {
  animation: slideUp 0.6s ease 0.1s both, float 3s ease-in-out 1s infinite;
}

.header__title {
  animation: slideUp 0.6s ease 0.2s both;
}

.header__tagline {
  animation: slideUp 0.6s ease 0.35s both;
}

.header__badge {
  animation: fadeIn 0.5s ease 0.5s both;
}

/* ── CTA Button Glow Pulse ────────────────────────────────── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(13, 148, 136, 0.35); }
  50%      { box-shadow: 0 4px 30px rgba(13, 148, 136, 0.55), 0 0 50px rgba(13, 148, 136, 0.15); }
}

.btn-primary {
  animation: glowPulse 2.5s ease-in-out infinite;
}

.btn-primary:hover {
  animation: none;
}

/* ── Dock Entrance ────────────────────────────────────────── */
@keyframes dockSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.dock {
  animation: dockSlideUp 0.6s ease 0.8s both;
}

/* ── Try New Section Entrance ─────────────────────────────── */
#trynew-section {
  animation: slideUp 0.6s ease 0.2s both;
}

/* ── Prefers-reduced-motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}