/* website/static/css/base/animations.css */

/* ------------------------------------------------------------
   GLOBAL ANIMATION SYSTEM (Unified + Theme-Aware)
   website/static/css/base/animations.css
------------------------------------------------------------
   PURPOSE:
   A single, authoritative animation library for the entire
   application. All components (cards, notes, tags, navbar,
   modals, alerts, buttons, grids, timetable, checklist, etc.)
   must use these classes instead of defining new ones.

   GOALS:
   ✓ Smooth, elegant, luxury motion
   ✓ Zero duplication across components
   ✓ Theme-aware (uses global transition variables)
   ✓ Mobile-friendly (no heavy transforms)
   ✓ Consistent timing + easing across the site
------------------------------------------------------------ */


/* ============================================================
   1) FADE-IN FAMILY
   ------------------------------------------------------------
   Default animation for most UI elements.
============================================================ */

/* Fade-in (vertical rise) */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  opacity: 0;
  animation: fadeIn var(--transition-slow, 0.6s ease) forwards;
}

/* Fade-in from left */
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.fade-in-left {
  opacity: 0;
  animation: fadeInLeft var(--transition-medium, 0.5s ease) forwards;
}

/* Fade-in from right */
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.fade-in-right {
  opacity: 0;
  animation: fadeInRight var(--transition-medium, 0.5s ease) forwards;
}

/* Fade-in from bottom (for modals, dropdowns, tooltips) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  opacity: 0;
  animation: fadeInUp var(--transition-medium, 0.5s ease) forwards;
}



/* ============================================================
   2) SCALE ANIMATIONS
   ------------------------------------------------------------
   Used for modals, popovers, buttons, cards.
============================================================ */

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.scale-up {
  opacity: 0;
  animation: scaleUp var(--transition-medium, 0.4s ease) forwards;
}

@keyframes scaleDown {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.92); }
}
.scale-down {
  animation: scaleDown var(--transition-medium, 0.4s ease) forwards;
}



/* ============================================================
   3) SLIDE ANIMATIONS
   ------------------------------------------------------------
   Used for dropdowns, menus, collapsible sections.
============================================================ */

/* Slide-down (open) */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.slide-down {
  opacity: 0;
  animation: slideDown var(--transition-fast, 0.3s ease) forwards;
}

/* Slide-up (close) */
@keyframes slideUp {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}
.slide-up {
  animation: slideUp var(--transition-fast, 0.3s ease) forwards;
}



/* ============================================================
   4) GLOW & PULSE EFFECTS
   ------------------------------------------------------------
   Used for hover states, premium highlights, attention cues.
============================================================ */

@keyframes glowPulse {
  0%   { box-shadow: 0 0 0 rgba(255,215,0,0.0); }
  50%  { box-shadow: 0 0 16px rgba(255,215,0,0.6); }
  100% { box-shadow: 0 0 0 rgba(255,215,0,0.0); }
}
.glow-pulse {
  animation: glowPulse 1.5s infinite;
}

/* Soft breathing effect (for icons, badges, indicators) */
@keyframes breathe {
  0%   { transform: scale(1); opacity: 0.9; }
  50%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}
.breathe {
  animation: breathe 2.4s ease-in-out infinite;
}



/* ============================================================
   5) ROTATION / SPIN
   ------------------------------------------------------------
   Used for loaders, refresh icons, spinners.
============================================================ */

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin {
  animation: spin 1s linear infinite;
}



/* ============================================================
   6) FADE-OUT (unified)
   ------------------------------------------------------------
   Used for removing elements gracefully.
============================================================ */

@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}
.fade-out {
  animation: fadeOut var(--transition-fast, 0.3s ease) forwards;
}