/* ============================================================
   FAST IT SOLUTION — ANIMATIONS
   ============================================================ */

/* Letter reveal */
@keyframes letterReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Preloader fill */
@keyframes preloaderFill {
  to { width: 100%; }
}

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

/* Glitch */
@keyframes glitch1 {
  0%, 90%, 100% { transform: translate(0); opacity: 1; }
  91% { transform: translate(-3px, -2px); opacity: .8; }
  93% { transform: translate(3px, 2px); opacity: .8; }
  95% { transform: translate(-2px, 1px); opacity: .9; }
  97% { transform: translate(2px, -1px); opacity: .8; }
}
@keyframes glitch2 {
  0%, 88%, 100% { transform: translate(0); opacity: 1; }
  89% { transform: translate(3px, 2px); opacity: .8; }
  91% { transform: translate(-3px, -2px); opacity: .8; }
  93% { transform: translate(2px, -1px); opacity: .9; }
  95% { transform: translate(-2px, 1px); opacity: .8; }
}

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

/* Pulse glow (blue) */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(71,178,228,0); }
  50% { box-shadow: 0 0 20px 4px rgba(71,178,228,.4); }
}

/* Pulse glow (white) */
@keyframes pulse-glow-white {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50% { box-shadow: 0 0 24px 6px rgba(255,255,255,.2); }
}

/* Marquee scroll */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Scroll bounce */
@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translate(0,0); opacity: 1; }
  50% { transform: rotate(45deg) translate(4px,4px); opacity: .5; }
}

/* Ripple button */
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* Draw line */
@keyframes drawLine {
  from { width: 0; }
  to { width: 100%; }
}

/* Spin 360 (on hover via class) */
@keyframes spin360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* FadeInUp */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Page enter */
@keyframes pageEnter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-enter { animation: pageEnter .4s ease forwards; }