/* motion-kit 1.0 — базовые стили эффектов. Оформление (цвета, отступы) задаёт сайт. */

/* Прячем анимируемое только при работающем JS (класс .js ставит скрипт в <head>).
   Без JS или при сбое загрузки GSAP контент виден сразу — это важно и для SEO. */
.js [data-anim],
.js [data-split]:not([data-split="fill"]),
.js [data-reveal-img],
.js [data-intro] {
  visibility: hidden;
}

/* Элементы, которые двигает GSAP, не должны иметь CSS-переход на transform/opacity/clip-path:
   переход сглаживает каждый кадр GSAP и движение «плывёт». Цвета и тени по-прежнему переходят плавно. */
[data-anim],
[data-magnetic],
[data-tilt],
[data-parallax],
[data-skew],
[data-reveal-img],
[data-pin-track],
[data-drag-track],
[data-marquee] > *,
[data-stack-card] > *,
[data-flip-item] {
  transition-property: color, background-color, border-color, box-shadow, fill, stroke !important;
}

.is-loading {
  overflow: hidden;
}

[data-preloader] {
  position: fixed;
  inset: 0;
  z-index: 10000;
}

/* Бегущая строка: прямой потомок — дорожка, внутри неё элементы */
[data-marquee] {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}

[data-marquee] > * {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--marquee-gap, 3rem);
  padding-right: var(--marquee-gap, 3rem);
}

/* Горизонтальная галерея: на десктопе едет при скролле, на телефоне листается пальцем */
[data-pin-track] {
  display: flex;
  width: max-content;
}

@media (min-width: 768px) {
  [data-pin-horizontal] {
    overflow: hidden;
  }
}

@media (max-width: 767px) {
  [data-pin-horizontal] {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  [data-pin-track] > * {
    scroll-snap-align: start;
  }
}

[data-reveal-img] {
  overflow: hidden;
}

[data-reveal-img] > img,
[data-reveal-img] > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Параллакс картинки внутри рамки: картинка выше рамки, чтобы не было пустых краёв */
[data-parallax-frame] {
  position: relative;
  overflow: hidden;
}

[data-parallax-frame] > [data-parallax] {
  position: absolute;
  left: 0;
  top: -15%;
  width: 100%;
  height: 130%;
  object-fit: cover;
}

[data-counter] {
  font-variant-numeric: tabular-nums;
}

[data-progress] {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Курсор-спутник: системный курсор остаётся, кружок следует за ним */
[data-cursor] {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  display: none;
  width: 14px;
  height: 14px;
  pointer-events: none;
  mix-blend-mode: difference;
}

[data-cursor]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-cursor].is-hover::after {
  transform: scale(3.2);
}

.has-cursor [data-cursor] {
  display: block;
}

[data-drag-slider] {
  overflow: hidden;
  cursor: grab;
}

[data-drag-slider].is-dragging {
  cursor: grabbing;
}

[data-drag-track] {
  position: relative;
  display: flex;
  width: max-content;
}

[data-stack-card] > * {
  will-change: transform;
}

[data-flip-filter][aria-pressed="true"] {
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-anim],
  .js [data-split],
  .js [data-reveal-img],
  .js [data-intro] {
    visibility: visible;
  }

  [data-preloader] {
    display: none;
  }
}