/* ============================================
   Aether Studio — Animations
   ============================================ */

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

@keyframes float {
  from { transform: translateY(0px); }
  to { transform: translateY(-14px); }
}

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

@keyframes pulse-width {
  0% { width: 0%; opacity: 0.5; }
  100% { width: 100%; opacity: 0; }
}

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

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

@keyframes slide-in-bottom {
  from { opacity: 0; transform: translateY(3rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 0 20px 4px var(--accent-glow); }
}

/* === Loader === */
.loader {
  width: 18px;
  height: 18px;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}

/* === Shimmer Skeleton === */
.shimmer {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* === Animate-In Utilities === */
.animate-in {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-timing-function: var(--ease-out-expo);
}

.fade-in { animation-name: fade-in; }
.zoom-in { animation-name: zoom-in; }
.slide-in-bottom { animation-name: slide-in-bottom; }