/* ============================================================
   TYPEFORGE — ANIMATIONS (Refactored)
   Functional & Muted Motion
   ============================================================ */

/* ── Fade & Scale ── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scale-up {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Shimmer (Skeleton) ── */
@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

/* ── Typing Caret ── */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Shake (Error Feedback) ── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-4px); }
  40%       { transform: translateX(4px); }
  60%       { transform: translateX(-2px); }
  80%       { transform: translateX(2px); }
}

/* ── Page Enter ── */
@keyframes page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ANIMATION UTILITY CLASSES
   ============================================================ */

.animate-fade-in    { animation: fade-in var(--duration-base) var(--ease-out) both; }
.animate-fade-up    { animation: fade-up var(--duration-slow) var(--ease-out) both; }
.animate-fade-down  { animation: fade-down var(--duration-slow) var(--ease-out) both; }
.animate-scale-up   { animation: scale-up var(--duration-slow) var(--ease-out) both; }
.animate-shake      { animation: shake 0.35s var(--ease-inout); }
.animate-page-enter { animation: page-enter var(--duration-slow) var(--ease-out) both; }

/* ── Disabled/Flattened Motions ── */
.animate-float,
.animate-float-sm,
.animate-float-rotate,
.animate-pulse,
.animate-pulse-scale,
.animate-glow-pulse,
.animate-spin-slow,
.animate-bounce,
.animate-bounce-in,
.animate-morph,
.animate-heartbeat,
.animate-gradient {
  animation: none !important;
}

/* ── Skeleton Loader ── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-elevated) 25%,
    rgba(255, 255, 255, 0.04) 50%,
    var(--bg-elevated) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-sm);
}

/* ── Intersection Observer — Muted Reveal On Scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(12px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}