/* ============================================================
   ANIMATIONS.CSS — Keyframes & Animation Library
   ZaidAsim.com Premium Portfolio
   ============================================================ */

/* ── Keyframe Animations ────────────────────────────────── */

/* Floating animations */
@keyframes float-slow {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(3deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes float-medium {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-4deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes float-fast {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* Rotations */
@keyframes rotate-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes rotate-counter {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes rotate-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Pulse effects */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.25; transform: scale(1.05); }
}

@keyframes pulse-status {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

/* Text & Typewriter cursor */
@keyframes blink {
  50% { opacity: 0; }
}

/* Scroll Arrow Bounce */
@keyframes bounce-arrow {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  60% { transform: translateY(-4px); }
}

/* Modal opening zoom */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Toast animations */
@keyframes slide-in-right {
  from {
    transform: translateX(100%) translateY(0);
    opacity: 0;
  }
  to {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Progress bar filling animation */
@keyframes progress-fill {
  from { width: 0%; }
  to { width: 100%; }
}

/* Shimmer load (skeleton) */
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Animation Classes ──────────────────────────────────── */

.anim-float-slow {
  animation: float-slow 12s ease-in-out infinite;
}

.anim-float-med {
  animation: float-medium 8s ease-in-out infinite alternate;
}

.anim-rotate-cw {
  animation: rotate-clockwise 16s linear infinite;
}

.anim-rotate-ccw {
  animation: rotate-counter 12s linear infinite;
}

/* Transition utility classes */
.transition-smooth {
  transition: all var(--duration-normal) var(--ease-smooth);
}

.transition-bounce {
  transition: all var(--duration-normal) var(--ease-bounce);
}

/* ── Accessibility: Reduced Motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: scroll !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  
  .hero-shape,
  .about-logo-ring,
  .about-logo-glow,
  .scroll-arrow,
  .easter-egg {
    animation: none !important;
    transform: none !important;
  }
  
  .three-canvas-container {
    display: none !important;
  }
  
  .cursor-dot,
  .cursor-ring {
    display: none !important;
  }
}