/* ============================================================
   MELVIN MATHEW — Animations
   animations.css
   ============================================================ */

/* ── Floating Orb ──────────────────────────────────────────── */
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px, -20px) scale(1.05); }
  66%       { transform: translate(-20px, 15px) scale(0.97); }
}

@keyframes orbPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 0.7; }
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: orbFloat 12s ease-in-out infinite, orbPulse 8s ease-in-out infinite;
}

.orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  top: -100px;
  left: -100px;
  animation-delay: 0s;
}

.orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
  bottom: 0;
  right: -50px;
  animation-delay: -4s;
}

/* ── Gradient Border Animation ─────────────────────────────── */
@keyframes borderGlow {
  0%, 100% { border-color: var(--border); }
  50%       { border-color: rgba(255,255,255,0.2); }
}

/* ── Pulse Dot ─────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); }
  70%       { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

/* ── Scroll Indicator ──────────────────────────────────────── */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(6px); opacity: 0.5; }
}

.scroll-indicator {
  animation: scrollBounce 2s ease-in-out infinite;
}

/* ── Timeline Line Draw ────────────────────────────────────── */
@keyframes lineDraw {
  from { height: 0; }
  to   { height: 100%; }
}

/* ── Counter Number ────────────────────────────────────────── */
@keyframes countUp {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Shimmer (skeleton loader feel) ───────────────────────── */
@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}