/*
 * Portfolio - Animations
 * Floating effects, spring physics, and micro-interactions
 */

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

@keyframes float-gentle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-4px) rotate(0.5deg); }
  75% { transform: translateY(-2px) rotate(-0.5deg); }
}

@keyframes float-delayed {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.float { animation: float 6s ease-in-out infinite; }
.float-gentle { animation: float-gentle 8s ease-in-out infinite; }
.float-delayed { animation: float-delayed 7s ease-in-out infinite; animation-delay: 0.5s; }

.float-delay-1 { animation-delay: 0s; }
.float-delay-2 { animation-delay: 1s; }
.float-delay-3 { animation-delay: 2s; }
.float-delay-4 { animation-delay: 0.5s; }
.float-delay-5 { animation-delay: 1.5s; }

/* Glow Pulse */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(203, 166, 247, 0.2), 0 0 40px rgba(203, 166, 247, 0.1); }
  50% { box-shadow: 0 0 30px rgba(203, 166, 247, 0.3), 0 0 60px rgba(203, 166, 247, 0.15); }
}

.glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }

/* Fade In */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-left { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fade-in-right { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fade-in-scale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.fade-in { animation: fade-in 0.5s ease-out forwards; }
.fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }
.fade-in-down { animation: fade-in-down 0.6s ease-out forwards; }
.fade-in-left { animation: fade-in-left 0.6s ease-out forwards; }
.fade-in-right { animation: fade-in-right 0.6s ease-out forwards; }
.fade-in-scale { animation: fade-in-scale 0.5s ease-out forwards; }

/* Stagger delays */
.stagger-1 { animation-delay: 0.1s; opacity: 0; }
.stagger-2 { animation-delay: 0.2s; opacity: 0; }
.stagger-3 { animation-delay: 0.3s; opacity: 0; }
.stagger-4 { animation-delay: 0.4s; opacity: 0; }
.stagger-5 { animation-delay: 0.5s; opacity: 0; }
.stagger-6 { animation-delay: 0.6s; opacity: 0; }
.stagger-7 { animation-delay: 0.7s; opacity: 0; }
.stagger-8 { animation-delay: 0.8s; opacity: 0; }

/* Spring */
@keyframes spring-bounce {
  0% { transform: scale(0.8); }
  40% { transform: scale(1.08); }
  60% { transform: scale(0.98); }
  80% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes spring-pop {
  0% { transform: scale(0) rotate(-10deg); opacity: 0; }
  50% { transform: scale(1.1) rotate(3deg); }
  70% { transform: scale(0.95) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.spring-bounce { animation: spring-bounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.spring-pop { animation: spring-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }

/* Shimmer */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(203, 166, 247, 0.1) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

/* Hover effects */
.hover-lift { transition: transform var(--transition-spring); }
.hover-lift:hover { transform: translateY(-4px); }
.hover-scale { transition: transform var(--transition-spring); }
.hover-scale:hover { transform: scale(1.02); }
.hover-glow { transition: box-shadow var(--transition-base); }
.hover-glow:hover { box-shadow: 0 0 30px rgba(203, 166, 247, 0.3); }

/* Parallax */
.parallax-slow { will-change: transform; transition: transform 0.1s linear; }
.parallax-medium { will-change: transform; transition: transform 0.08s linear; }
.parallax-fast { will-change: transform; transition: transform 0.05s linear; }

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