/* ===== 18arts Studio – Animations ===== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from {opacity:0} to {opacity:1} }
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes glow {
  0%,100% { box-shadow: 0 0 10px rgba(231,36,36,.4); }
  50%     { box-shadow: 0 0 30px rgba(231,36,36,.9); }
}

.anim-fade-up   { animation: fadeUp .9s var(--ease) both; }
.anim-fade-in   { animation: fadeIn 1s var(--ease) both; }
.anim-scale-in  { animation: scaleIn .8s var(--ease) both; }
.anim-slide-rt  { animation: slideRight .8s var(--ease) both; }
.anim-glow      { animation: glow 2.4s ease-in-out infinite; }
.anim-spin-slow { animation: spinSlow 18s linear infinite; }

.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }
.delay-5 { animation-delay: .5s; }

/* Marquee */
.marquee {
  overflow: hidden; white-space: nowrap; position: relative;
  border-block: 1px solid rgba(255,255,255,.06);
  padding: 28px 0; background: #060606;
}
.marquee-track {
  display: inline-flex; gap: 60px; animation: marquee 30s linear infinite;
  font-family: var(--font-h); font-weight: 800; font-size: 1.6rem;
  color: rgba(255,255,255,.08); text-transform: uppercase; letter-spacing: .25em;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 60px; }
.marquee-track .dot { color: var(--red); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, #181818 0%, #222 50%, #181818 100%);
  background-size: 200% 100%; animation: shimmer 1.8s linear infinite;
}

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