/* ============================================
   animations.css — All Keyframe Animations
   ============================================ */

/* ---------- Background slow shift ---------- */
@keyframes bgShift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(2%, -2%) scale(1.05); }
  66%      { transform: translate(-2%, 1%) scale(0.97); }
}

/* ---------- Page load fade-in ---------- */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: pageFadeIn 0.6s ease-out both; }

main { animation: pageFadeIn 0.8s ease-out 0.1s both; }

/* ---------- Navbar appear ---------- */
@keyframes navDrop {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
.navbar { animation: navDrop 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ---------- Fade up (generic) ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Hero entrance ---------- */
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-tag    { animation: heroFadeIn 0.8s ease 0.2s both; }
.hero-title  { animation: heroFadeIn 0.9s ease 0.35s both; }
.hero-sub    { animation: heroFadeIn 0.9s ease 0.5s both; }
.hero-ctas   { animation: heroFadeIn 0.9s ease 0.7s both; }
.hero-visual { animation: heroFadeIn 1.1s ease 0.4s both; }

/* ---------- Mascot floating / bobbing ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-18px) rotate(2deg); }
}
.mascot-float { animation: float 5s ease-in-out infinite; transform-origin: center; }

/* ---------- Orbit (badges around mascot) ---------- */
@keyframes orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.orbit-wrapper {
  position: absolute;
  inset: 0;
  animation: orbit 22s linear infinite;
}

/* Counter-rotate so badges stay upright */
@keyframes counterSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
.orbit-badge-inner {
  animation: counterSpin 22s linear infinite;
}

/* ---------- Typewriter caret blink ---------- */
@keyframes blink {
  50% { opacity: 0; }
}
.type-caret::after {
  content: '|';
  display: inline-block;
  margin-left: 4px;
  color: var(--primary);
  animation: blink 1s steps(1) infinite;
}

/* ---------- Pulse (GitHub button) ---------- */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,245,255,0.6), 0 6px 25px rgba(0,245,255,0.35); }
  50%      { box-shadow: 0 0 0 12px rgba(0,245,255,0), 0 10px 35px rgba(0,245,255,0.55); }
}
.pulse { animation: pulseGlow 2.2s ease-in-out infinite; }

/* ---------- Glow spin (used on rotating borders) ---------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Skeleton shine (loading) ---------- */
@keyframes shine {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---------- Spinner ---------- */
@keyframes spin360 {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin360 0.7s linear infinite;
  display: inline-block;
}

/* ---------- Stagger child reveal ---------- */
.stagger > * {
  opacity: 0;
  transform: translateY(30px);
}
.stagger.visible > * {
  animation: fadeUp 0.7s ease forwards;
}
.stagger.visible > *:nth-child(1) { animation-delay: 0.05s; }
.stagger.visible > *:nth-child(2) { animation-delay: 0.15s; }
.stagger.visible > *:nth-child(3) { animation-delay: 0.25s; }
.stagger.visible > *:nth-child(4) { animation-delay: 0.35s; }
.stagger.visible > *:nth-child(5) { animation-delay: 0.45s; }
.stagger.visible > *:nth-child(6) { animation-delay: 0.55s; }
.stagger.visible > *:nth-child(7) { animation-delay: 0.65s; }
.stagger.visible > *:nth-child(8) { animation-delay: 0.75s; }
.stagger.visible > *:nth-child(9) { animation-delay: 0.85s; }
.stagger.visible > *:nth-child(10) { animation-delay: 0.95s; }

/* ---------- Skill bar fill ---------- */
@keyframes barFill {
  from { width: 0; }
}
.skill-bar-fill {
  width: 0;
  transition: width 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}
.skill-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shine 2.5s linear infinite;
}
.skills-visible .skill-bar-fill { /* set by JS via inline style when in view */ }

/* ---------- Tool icon hover bounce ---------- */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.tool-icon:hover { animation: bounce 0.6s ease; }

/* ---------- Card lift on hover ---------- */
.lift {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.lift:hover {
  transform: translateY(-8px);
  border-color: var(--glass-border-hover);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 30px rgba(0,245,255,0.15);
}

/* ---------- Availability tag dot ---------- */
@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}
.status-dot { animation: statusPulse 2s ease-in-out infinite; }

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