/* motion.css — токены и состояния. Zero dependencies. */

:root {
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-swift: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: linear(
    0, 0.402 7.4%, 0.834 15.4%, 1.013 20%, 1.096 24.4%, 1.117 27.3%,
    1.113 30.4%, 1.047 39%, 1.007 47.7%, 0.998 60%, 1
  );
  --dur-fast: 180ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;
}

/* --- reveal --- */

[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo),
    filter var(--dur-slow) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal="up"],
[data-reveal=""] { transform: translate3d(0, 24px, 0); }
[data-reveal="down"]  { transform: translate3d(0, -24px, 0); }
[data-reveal="left"]  { transform: translate3d(-28px, 0, 0); }
[data-reveal="right"] { transform: translate3d(28px, 0, 0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="blur"]  { transform: translate3d(0, 12px, 0); filter: blur(8px); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

[data-reveal].is-settled { will-change: auto; }

/* --- числа --- */

[data-count],
.tabular { font-variant-numeric: tabular-nums; }

/* --- магнитные элементы --- */

[data-magnetic] {
  transition: transform var(--dur-base) var(--ease-spring);
  will-change: transform;
}
[data-magnetic].is-pulled { transition: transform 80ms linear; }

/* --- marquee --- */

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--marquee-gap, 48px);
  animation: marquee var(--marquee-duration, 32s) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* --- view transitions --- */

@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-out 200ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vt-in 320ms cubic-bezier(0, 0, 0.2, 1) both;
}
@keyframes vt-out { to { opacity: 0; transform: translate3d(0, -8px, 0); } }
@keyframes vt-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } }

/* --- контент виден без JS --- */

html.no-js [data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --- reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  [data-magnetic] { transform: none !important; transition: none; }
  .marquee__track { animation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}