/* ==========================================================================
   Transitions & Animations - Wholesum Design System
   Standardized transition utilities, shared keyframes, and hover effects.
   Version: 1.0 | Phase 9 of CSS Unification
   ========================================================================== */

/* ===== TRANSITION UTILITIES ===== */
/* Apply these as classes; or reference tokens directly in component CSS. */

.transition-fast {
  transition: all var(--transition-fast);
}

.transition-normal {
  transition: all var(--transition-normal);
}

.transition-slow {
  transition: all var(--transition-slow);
}

/* Property-specific transitions */
.transition-colors {
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
}

.transition-opacity {
  transition: opacity var(--transition-fast);
}

.transition-transform {
  transition: transform var(--transition-fast);
}

.transition-shadow {
  transition: box-shadow var(--transition-fast);
}

.transition-none {
  transition: none;
}


/* ===== SHARED KEYFRAMES ===== */

/* ── Fade ── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* ── Slide + Fade ── */
@keyframes slide-up-fade {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

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

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

/* ── Scale ── */
@keyframes scale-in {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes scale-out {
  from { transform: scale(1);    opacity: 1; }
  to   { transform: scale(0.95); opacity: 0; }
}

/* ── Spin ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Pulse ── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ── Bounce ── */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}


/* ===== ANIMATION UTILITY CLASSES ===== */
.animate-fade-in       { animation: fade-in var(--transition-normal) ease-out forwards; }
.animate-fade-out      { animation: fade-out var(--transition-normal) ease-out forwards; }
.animate-slide-up      { animation: slide-up-fade var(--transition-normal) ease-out forwards; }
.animate-slide-down    { animation: slide-down-fade var(--transition-normal) ease-out forwards; }
.animate-slide-up-lg   { animation: slide-up-large var(--transition-normal) ease-out forwards; }
.animate-scale-in      { animation: scale-in var(--transition-normal) ease-out forwards; }
.animate-scale-out     { animation: scale-out var(--transition-normal) ease-out forwards; }
.animate-spin          { animation: spin 2s linear infinite; }
.animate-pulse         { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bounce        { animation: bounce 1s cubic-bezier(0.4, 0, 0.6, 1) infinite; }


/* ===== HOVER EFFECTS ===== */
.hover-scale {
  transition: transform var(--transition-fast);
}
.hover-scale:hover {
  transform: scale(1.05);
}

.hover-lift {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.hover-darken {
  transition: filter var(--transition-fast);
}
.hover-darken:hover {
  filter: brightness(0.95);
}


/* ===== DELAY UTILITIES ===== */
.delay-75  { animation-delay: 75ms; }
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }