/**
 * TTDS §11 — Motion system
 */

@media (prefers-reduced-motion: reduce) {
  body.tt-premium *,
  body.tt-premium *::before,
  body.tt-premium *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body.tt-premium .tt-animate-fade-in {
  animation: tt-fade-in var(--tt-dur-base) var(--tt-ease-em) forwards;
}

body.tt-premium .tt-animate-slide-up {
  animation: tt-slide-up var(--tt-dur-base) var(--tt-ease-em) forwards;
}

@keyframes tt-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes tt-slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.tt-premium .tt-skeleton {
  background: linear-gradient(
    90deg,
    var(--tt-canvas-muted) 25%,
    var(--tt-line) 50%,
    var(--tt-canvas-muted) 75%
  );
  background-size: 200% 100%;
  animation: tt-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--tt-radius-md);
}

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

@media (prefers-reduced-motion: reduce) {
  body.tt-premium .tt-skeleton {
    animation: none;
    background: var(--tt-canvas-muted);
  }
}