/* =========================================================================
   Cosmo Customer Account — animations.css
   Keyframes, scroll-reveal system, stagger, and motion utilities.
   This is the single stylesheet each page links; it pulls in the rest.
   ========================================================================= */

@import './components.css';

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

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: none; }
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: none; }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: none; }
}

/* ===================== SCROLL REVEAL ===================== */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate="fade-up"] { transform: translateY(24px); }
[data-animate="fade-left"] { transform: translateX(-24px); }
[data-animate="fade-right"] { transform: translateX(24px); }
[data-animate="scale-in"] { transform: scale(0.95); }

[data-animate].animated {
  opacity: 1;
  transform: none;
}

/* ===================== STAGGER CHILDREN ===================== */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-stagger] > *.visible {
  opacity: 1;
  transform: none;
}

/* ===================== MOTION UTILITIES ===================== */
.anim-float {
  animation: float 4s ease-in-out infinite;
}

.anim-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.anim-gradient {
  background-size: 200% 200%;
  animation: gradientShift 4s ease infinite;
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  *,
  [data-animate],
  [data-animate].animated,
  [data-stagger] > *,
  [data-stagger] > *.visible {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}