/* ══════════════════════════════════════════
   Animations
   ══════════════════════════════════════════ */

/* ── Fade In Up ── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeInUp 0.7s var(--ease-out) forwards;
  opacity: 0;
}

/* ── Slide In Right ── */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slide-right {
  animation: slideInRight 0.7s var(--ease-out) forwards;
  opacity: 0;
}

/* ── Delays ── */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }

/* ── Typewriter ── */
@keyframes typeWriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blinkCursor {
  from, to { border-color: transparent; }
  50% { border-color: var(--accent-blue); }
}

.typewriter {
  overflow: hidden;
  border-right: 2px solid var(--accent-blue);
  white-space: nowrap;
  animation:
    typeWriter 2.5s steps(30, end),
    blinkCursor 0.8s step-end infinite;
  display: inline-block;
}

/* ── Glow Pulse ── */
@keyframes glowPulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* ── Floating ── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

/* ── Hover Effects ── */
.hover-lift {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

/* ── Skeleton Loader ── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-secondary) 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ── Border Glow on Hover ── */
@keyframes borderGlow {
  0%, 100% { border-color: var(--border-subtle); }
  50% { border-color: var(--accent-blue); }
}

/* ── Gradient Shift ── */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Orb Float (for hero background) ── */
@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
}

@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-25px, 25px) scale(0.95); }
  66% { transform: translate(20px, -15px) scale(1.05); }
}