/* 
  VULCAN DESIGN SYSTEM - ANIMATIONS
  Cinematic Motion System
*/

/* Keyframes */

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

@keyframes v-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes v-slide-down {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes v-reveal-left {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes v-pulse-glow {
  0% { box-shadow: 0 0 10px rgba(0, 238, 129, 0.2); }
  50% { box-shadow: 0 0 30px rgba(0, 238, 129, 0.4); }
  100% { box-shadow: 0 0 10px rgba(0, 238, 129, 0.2); }
}

@keyframes v-rotation {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes v-bounce-x {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* Base Animation Classes */

.v-animate-fade {
  animation: v-fade-in var(--s-motion-duration-medium) var(--s-ease-expo-out) forwards;
}

.v-animate-slide-up {
  animation: v-slide-up var(--s-motion-duration-medium) var(--s-ease-expo-out) forwards;
}

.v-animate-pulse {
  animation: v-pulse-glow 2s infinite ease-in-out;
}

.v-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--s-ease-expo-out), transform 0.8s var(--s-ease-expo-out);
}

.v-reveal--active {
  opacity: 1;
  transform: translateY(0);
}

/* Hover Effects */

.v-hover-lift {
  transition: transform var(--s-motion-duration-fast) var(--s-ease-standard);
}

.v-hover-lift:hover {
  transform: translateY(-4px);
}

.v-hover-glow:hover {
  box-shadow: var(--s-glow-primary);
}

/* Magnetic Effect (CSS Part) */
.v-magnetic {
  display: inline-block;
  transition: transform 0.3s var(--s-ease-expo-out);
}
/* Interaction classes will be added via JS */