/* css/abstracts/animations.css */
/* Professional animation system — keyframes, easing curves, and utility classes */
/* Inspired by Open Props (open-props.style) — adapted for CollabPals */

:root {
  /* ── Advanced Easing Curves ─────────────────────────────────────────── */
  --ease-elastic-out: cubic-bezier(0.5, 1.25, 0.75, 1);
  --ease-squish: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-snap: cubic-bezier(0, 0.7, 0.3, 1);

  /* ── Animation Durations ────────────────────────────────────────────── */
  --duration-quick: 200ms;
  --duration-normal: 350ms;
  --duration-slow: 500ms;
  --duration-deliberate: 700ms;
}

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

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

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

@keyframes fade-in-left {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-in-right {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

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

@keyframes pop {
  0%   { transform: scale(0.9); opacity: 0; }
  70%  { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Slide Animations ─────────────────────────────────────────────────── */
@keyframes slide-in-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes slide-in-down {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@keyframes slide-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ── Attention / Emphasis ─────────────────────────────────────────────── */
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Staggered entrance utility classes ───────────────────────────────── */
.animate-fade-in-up {
  animation: fade-in-up var(--duration-normal) var(--ease-out) both;
}
.animate-stagger-1 { animation-delay: 0ms; }
.animate-stagger-2 { animation-delay: 80ms; }
.animate-stagger-3 { animation-delay: 160ms; }
.animate-stagger-4 { animation-delay: 240ms; }
.animate-stagger-5 { animation-delay: 320ms; }
.animate-stagger-6 { animation-delay: 400ms; }
.animate-stagger-7 { animation-delay: 480ms; }
.animate-stagger-8 { animation-delay: 560ms; }

/* ── Loading skeleton shimmer ─────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* ── Hover lift utility ───────────────────────────────────────────────── */
.hover-lift {
  transition: transform var(--transition-fast) var(--ease-out),
              box-shadow var(--transition-fast) var(--ease-out);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}