/* =====================================================================
   UniMate Component — Animation System v1.0
   Easing tokens, staggered animations, skeleton loading, page transitions,
   scroll-triggered animations, celebratory effects
   ===================================================================== */

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

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

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

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

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

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

@keyframes um-scale-bounce {
  0%   { transform: scale(0.5); opacity: 0; }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes um-pop {
  0%   { transform: scale(0); }
  50%  { transform: scale(1.15); }
  75%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

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

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

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

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

/* ── Skeleton Shimmer (enhanced) ─────────────────────────────────────── */
@keyframes um-skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.um-skeleton {
  background: linear-gradient(
    90deg,
    var(--um-surface-sunken) 25%,
    var(--um-border) 37%,
    var(--um-surface-sunken) 63%
  );
  background-size: 200% 100%;
  animation: um-skeleton-shimmer 1.5s var(--um-ease-in-out) infinite;
  border-radius: var(--um-radius-md);
  pointer-events: none;
}

.um-skeleton--text {
  height: 14px;
  margin-bottom: var(--um-space-2);
  border-radius: var(--um-radius-xs);
}

.um-skeleton--text-short  { width: 40%; }
.um-skeleton--text-medium { width: 70%; }
.um-skeleton--text-long   { width: 90%; }

.um-skeleton--title {
  height: 22px;
  width: 60%;
  margin-bottom: var(--um-space-3);
  border-radius: var(--um-radius-sm);
}

.um-skeleton--avatar {
  border-radius: 50%;
}

.um-skeleton--avatar-sm { width: 32px; height: 32px; }
.um-skeleton--avatar-md { width: 40px; height: 40px; }
.um-skeleton--avatar-lg { width: 52px; height: 52px; }

.um-skeleton--card {
  height: 120px;
  border-radius: var(--um-radius-xl);
}

.um-skeleton--btn {
  height: 40px;
  width: 120px;
  border-radius: var(--um-radius-lg);
}

/* ── Dark Skeleton ───────────────────────────────────────────────────── */
.theme-dark .um-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.08) 37%,
    rgba(255, 255, 255, 0.04) 63%
  );
  background-size: 200% 100%;
}

/* ── Staggered Animations ────────────────────────────────────────────── */
.um-stagger > * {
  opacity: 0;
  animation: um-fade-in-up var(--um-duration-slow) var(--um-ease-smooth) forwards;
}

.um-stagger > *:nth-child(1)  { animation-delay: 0ms; }
.um-stagger > *:nth-child(2)  { animation-delay: 50ms; }
.um-stagger > *:nth-child(3)  { animation-delay: 100ms; }
.um-stagger > *:nth-child(4)  { animation-delay: 150ms; }
.um-stagger > *:nth-child(5)  { animation-delay: 200ms; }
.um-stagger > *:nth-child(6)  { animation-delay: 250ms; }
.um-stagger > *:nth-child(7)  { animation-delay: 300ms; }
.um-stagger > *:nth-child(8)  { animation-delay: 350ms; }
.um-stagger > *:nth-child(9)  { animation-delay: 400ms; }
.um-stagger > *:nth-child(10) { animation-delay: 450ms; }
.um-stagger > *:nth-child(11) { animation-delay: 500ms; }
.um-stagger > *:nth-child(12) { animation-delay: 550ms; }

/* Faster stagger */
.um-stagger--fast > *:nth-child(1)  { animation-delay: 0ms; }
.um-stagger--fast > *:nth-child(2)  { animation-delay: 30ms; }
.um-stagger--fast > *:nth-child(3)  { animation-delay: 60ms; }
.um-stagger--fast > *:nth-child(4)  { animation-delay: 90ms; }
.um-stagger--fast > *:nth-child(5)  { animation-delay: 120ms; }
.um-stagger--fast > *:nth-child(6)  { animation-delay: 150ms; }
.um-stagger--fast > *:nth-child(7)  { animation-delay: 180ms; }
.um-stagger--fast > *:nth-child(8)  { animation-delay: 210ms; }

/* ── Scroll-Triggered Animations ─────────────────────────────────────── */
.um-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--um-duration-slower) var(--um-ease-smooth),
    transform var(--um-duration-slower) var(--um-ease-smooth);
}

.um-reveal--left {
  transform: translateX(-20px);
}

.um-reveal--right {
  transform: translateX(20px);
}

.um-reveal--scale {
  transform: scale(0.95);
}

.um-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ── Celebratory Animations ──────────────────────────────────────────── */
@keyframes um-confetti-fall {
  0%   { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes um-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
}

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

@keyframes um-streak-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.um-anim-pulse-glow {
  animation: um-pulse-glow 2s var(--um-ease-in-out) infinite;
}

.um-anim-shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: um-shimmer-premium 2s linear infinite;
}

.um-anim-streak-pulse {
  animation: um-streak-pulse 1.5s var(--um-ease-in-out) infinite;
}

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

.um-spinner {
  display: inline-block;
  border: 3px solid var(--um-border);
  border-top-color: var(--um-primary);
  border-radius: 50%;
  animation: um-spin 0.7s linear infinite;
}

.um-spinner--sm { width: 18px; height: 18px; border-width: 2px; }
.um-spinner--md { width: 28px; height: 28px; border-width: 3px; }
.um-spinner--lg { width: 40px; height: 40px; border-width: 3px; }

/* ── Utility Animation Classes ───────────────────────────────────────── */
.um-anim-fade-in     { animation: um-fade-in var(--um-duration-slow) var(--um-ease-smooth) both; }
.um-anim-fade-in-up  { animation: um-fade-in-up var(--um-duration-slow) var(--um-ease-smooth) both; }
.um-anim-scale-in    { animation: um-scale-in var(--um-duration-slow) var(--um-ease-smooth) both; }
.um-anim-pop         { animation: um-pop var(--um-duration-slower) var(--um-ease-spring) both; }

/* ── Page Transitions via View Transitions API ───────────────────────── */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: um-fade-in 200ms var(--um-ease-default) reverse;
}

::view-transition-new(root) {
  animation: um-fade-in 200ms var(--um-ease-default);
}

/* ── Reduced Motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .um-stagger > *,
  .um-reveal,
  .um-anim-fade-in,
  .um-anim-fade-in-up,
  .um-anim-scale-in,
  .um-anim-pop {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .um-skeleton {
    animation: none;
  }

  .um-anim-pulse-glow,
  .um-anim-shimmer,
  .um-anim-streak-pulse {
    animation: none !important;
  }
}