/* =====================================================
   PORTFOLIO — SPACE THEME
   animations.css — Keyframe animations

   Motion policy: motion serves attention, never loops
   aimlessly. Ambient loops are limited to the brand
   starfield, the avatar orbit ring, and the scroll cue.
   ===================================================== */

/* ===== BASIC FADE / SLIDE ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0);     }
}

/* ===== CURSOR BLINK ===== */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ===== SCROLL DOT ===== */
@keyframes scroll-anim {
  0%   { transform: translateY(0);    opacity: 1;   }
  60%  { transform: translateY(12px); opacity: 0.2; }
  100% { transform: translateY(0);    opacity: 0;   }
}

/* ===== ORBIT RING SPIN (avatar + bg rings) ===== */
@keyframes orbit-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* ===== SKILL BAR SHIMMER ===== */
@keyframes bar-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ===== COUNTER STAT POP ===== */
@keyframes stat-pop {
  0%   { transform: scale(1);    }
  50%  { transform: scale(1.2);  }
  100% { transform: scale(1);    }
}

/* ===== SEND BUTTON STATE ===== */
@keyframes send-fly {
  0%   { transform: translateX(0) rotate(0deg); opacity: 1; }
  60%  { transform: translateX(24px) rotate(-12deg); opacity: 0; }
  100% { transform: translateX(40px) rotate(-18deg); opacity: 0; }
}

/* ===== FORM SHAKE (invalid field) ===== */
@keyframes shake-x {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

/* ===== WEBGL LOADER SPINNER ===== */
@keyframes webgl-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}