/* ── Keyframe Animations ─────────────────────────────────────── */

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

@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
  50%       { box-shadow: 0 0 50px rgba(59, 130, 246, 0.7), 0 0 80px rgba(6, 182, 212, 0.4); }
}

@keyframes gradient-shift {
  0%   { transform: scale(1) rotate(0deg); opacity: 1; }
  33%  { transform: scale(1.05) rotate(1deg); opacity: 0.85; }
  66%  { transform: scale(0.97) rotate(-1deg); opacity: 0.9; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

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

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse-ring {
  0%   { transform: scale(0.8); opacity: 1; }
  80%, 100% { transform: scale(2.2); opacity: 0; }
}

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

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

@keyframes bounce-in {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.05); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes particle-float {
  0%   { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-100px) rotate(720deg); opacity: 0; }
}

@keyframes border-glow-pulse {
  0%, 100% { border-color: rgba(59, 130, 246, 0.2); }
  50%       { border-color: rgba(59, 130, 246, 0.6); }
}

@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

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

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

.animate-float-delayed {
  animation: float 4s ease-in-out 1s infinite;
}

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

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-fade-in {
  animation: fade-in 0.6s ease-out both;
}

.animate-slide-up {
  animation: slide-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-scale-in {
  animation: scale-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Delay utilities */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }

/* ── IntersectionObserver Animate-on-Scroll ──────────────────── */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll.from-left {
  transform: translateX(-30px);
}

.animate-on-scroll.from-left.animated {
  transform: translateX(0);
}

.animate-on-scroll.from-right {
  transform: translateX(30px);
}

.animate-on-scroll.from-right.animated {
  transform: translateX(0);
}

/* ── Shimmer Skeleton Loader ─────────────────────────────────── */

.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* ── Pulse Ring (for notifications / active state) ──────────── */

.pulse-ring {
  position: relative;
  display: inline-block;
}

.pulse-ring::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--accent-blue);
  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

/* ── Hover Lift Utility ──────────────────────────────────────── */

.hover-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* ── Gradient Text Animation ─────────────────────────────────── */

.gradient-text-animated {
  background: linear-gradient(270deg, #3b82f6, #06b6d4, #8b5cf6, #3b82f6);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ── Checkbox Pulse highlight ── */
@keyframes checkbox-pulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.1); filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5)); }
  50% { transform: scale(0.95); }
  75% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.animate-checkbox {
  animation: checkbox-pulse 0.8s ease-in-out;
}