/* Keyframe Definitions */
@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes floatAnimation {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 15px hsla(263, 90%, 60%, 0.25);
  }
  50% {
    box-shadow: 0 0 25px hsla(263, 90%, 60%, 0.45);
  }
  100% {
    box-shadow: 0 0 15px hsla(263, 90%, 60%, 0.25);
  }
}

/* Animation Classes */
.slide-right {
  animation: slideRight var(--transition-slow) forwards;
  opacity: 0;
}

.slide-up {
  animation: slideUp var(--transition-slow) forwards;
  opacity: 0;
}

.fade-in {
  animation: fadeIn var(--transition-fast) forwards;
}

.float {
  animation: floatAnimation 6s ease-in-out infinite;
}

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

/* Custom Animation Delays */
.delay-1 {
  animation-delay: 0.2s;
}
.delay-2 {
  animation-delay: 0.4s;
}
.delay-3 {
  animation-delay: 0.6s;
}

/* Card Hover Glows */
.hover-glow-violet:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 30px -5px hsla(263, 90%, 60%, 0.15), var(--glow-shadow);
  transform: translateY(-4px);
}

.hover-glow-cyan:hover {
  border-color: var(--secondary);
  box-shadow: 0 10px 30px -5px hsla(187, 92%, 46%, 0.15), 0 0 35px hsla(187, 92%, 46%, 0.12);
  transform: translateY(-4px);
}

/* Image Hover Zoom */
.gallery-img {
  transition: transform var(--transition-slow);
}

.photo-item:hover .gallery-img {
  transform: scale(1.05);
}

/* Micro-interaction on filter buttons */
.tab-btn {
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.tab-btn:hover {
  transform: translateY(-1px);
}
.tab-btn:active {
  transform: translateY(1px);
}