/*
 * GALAPPXY — Animations
 * Reusable animation classes
 */

/* ─── ENTRY ANIMATIONS ───────────────────────────────────── */
.gx-fade-in {
  animation: gx-fade-in var(--gx-duration-base) var(--gx-ease-default) forwards;
}

.gx-fade-in-up {
  animation: gx-fade-in-up var(--gx-duration-medium) var(--gx-ease-out) forwards;
}

.gx-fade-in-down {
  animation: gx-fade-in-down var(--gx-duration-medium) var(--gx-ease-out) forwards;
}

.gx-slide-in-right {
  animation: gx-slide-in-right var(--gx-duration-medium) var(--gx-ease-out) forwards;
}

.gx-slide-in-left {
  animation: gx-slide-in-left var(--gx-duration-medium) var(--gx-ease-out) forwards;
}

.gx-scale-in {
  animation: gx-scale-in var(--gx-duration-medium) var(--gx-ease-bounce) forwards;
}

/* Staggered delays for lists */
.gx-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.gx-stagger > *:nth-child(2)  { animation-delay: 50ms; }
.gx-stagger > *:nth-child(3)  { animation-delay: 100ms; }
.gx-stagger > *:nth-child(4)  { animation-delay: 150ms; }
.gx-stagger > *:nth-child(5)  { animation-delay: 200ms; }
.gx-stagger > *:nth-child(6)  { animation-delay: 250ms; }
.gx-stagger > *:nth-child(7)  { animation-delay: 300ms; }
.gx-stagger > *:nth-child(8)  { animation-delay: 350ms; }
.gx-stagger > *:nth-child(9)  { animation-delay: 400ms; }
.gx-stagger > *:nth-child(10) { animation-delay: 450ms; }

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

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

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

@keyframes gx-slide-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes gx-slide-in-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes gx-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── MICRO-INTERACTIONS ─────────────────────────────────── */

/* Gelatine bounce (para notification dot) */
.gx-gelatine {
  animation: gx-gelatine 0.6s ease-out;
}

@keyframes gx-gelatine {
  0%, 100% { transform: scale(1); }
  25%  { transform: scale(0.8, 1.2); }
  50%  { transform: scale(1.15, 0.85); }
  75%  { transform: scale(0.95, 1.05); }
}

/* Shake (para errores) */
.gx-shake {
  animation: gx-shake 0.5s ease-out;
}

@keyframes gx-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

@keyframes gx-spin {
  to { transform: rotate(360deg); }
}