/* ===== ANIMATIONS & TRANSITIONS ===== */

/* Fade In Up */
.animate-fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.6s ease-out forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Fade In */
.animate-fade {
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

/* Slide In Left/Right */
.animate-slide-left {
  opacity: 0;
  transform: translateX(-30px);
  animation: slideLeft 0.5s ease-out forwards;
}
@keyframes slideLeft { to { opacity: 1; transform: translateX(0); } }

.animate-slide-right {
  opacity: 0;
  transform: translateX(30px);
  animation: slideRight 0.5s ease-out forwards;
}
@keyframes slideRight { to { opacity: 1; transform: translateX(0); } }

/* Scale In */
.animate-scale {
  opacity: 0;
  transform: scale(0.95);
  animation: scaleIn 0.4s ease-out forwards;
}
@keyframes scaleIn { to { opacity: 1; transform: scale(1); } }

/* Staggered Animation Delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }

/* Hover Effects */
.hover-lift {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hover-glow {
  position: relative;
  overflow: hidden;
}
.hover-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99,102,241,0.15), transparent 40%);
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}
.hover-glow:hover::before { opacity: 1; }

/* Pulse Animation */
.animate-pulse {
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Bounce Animation */
.animate-bounce {
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Float Animation */
.animate-float {
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Spin Animation */
.animate-spin {
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Typing Effect */
.typing {
  overflow: hidden;
  border-right: 2px solid var(--primary);
  white-space: nowrap;
  animation: typing 3s steps(40, end), blink 0.7s step-end infinite;
  width: 0;
}
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink { 50% { border-color: transparent; } }

/* Scroll Reveal (JS Enhanced) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Parallax Background */
.parallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 768px) {
  .parallax { background-attachment: scroll; }
}

/* Gradient Animation */
.animate-gradient {
  background: linear-gradient(-45deg, #6366f1, #0ea5e9, #f59e0b, #6366f1);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .parallax { background-attachment: scroll; }
}

/* Loading Skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s infinite;
  border-radius: var(--radius-lg);
}
@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Counter Animation */
.counter {
  display: inline-block;
  font-weight: var(--font-extrabold);
}
.counter.animate {
  animation: countUp 1s ease-out forwards;
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Image Hover Zoom */
.img-zoom {
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.img-zoom img {
  transition: transform var(--transition-normal);
}
.img-zoom:hover img {
  transform: scale(1.05);
}

/* Button Ripple */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple::after {
  content: '';
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
  pointer-events: none;
}
.btn-ripple:active::after {
  transform: scale(3);
  opacity: 1;
  transition: 0s;
}