/* Motion Primitives for FLIX CYCLE */

/* Keyframes */
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes pgIn {
  0% { opacity: 0; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes bottleFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
}

@keyframes ripple {
  0% { box-shadow: 0 0 0 0 rgba(168, 152, 216, 0.4); }
  100% { box-shadow: 0 0 0 20px rgba(168, 152, 216, 0); }
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Motion Utility Classes */
.fc-motion--flow {
  animation: pgIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fc-motion--viscosity {
  transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.fc-motion--ripple {
  animation: ripple 2s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

.fc-motion--float {
  animation: bottleFloat 6s ease-in-out infinite;
}

.fc-motion--cycle {
  animation: spin 10s linear infinite;
}

.fc-motion--merge {
  animation: orbFloat 12s ease-in-out infinite;
}

/* Intersection Observer Reveal Classes */
.fc-reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fc-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger Classes */
.fc-stagger-1 { transition-delay: 0.1s; animation-delay: 0.1s; }
.fc-stagger-2 { transition-delay: 0.2s; animation-delay: 0.2s; }
.fc-stagger-3 { transition-delay: 0.3s; animation-delay: 0.3s; }
.fc-stagger-4 { transition-delay: 0.4s; animation-delay: 0.4s; }
.fc-stagger-5 { transition-delay: 0.5s; animation-delay: 0.5s; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fc-reveal {
    opacity: 1;
    transform: none;
  }
}