:root {
  --ns-reveal-dur: .7s;
  --ns-reveal-ease: cubic-bezier(.16, 1, .3, 1);   /* expo.out */
  --ns-reveal-shift: 28px;
  --ns-stagger: 80ms;
  --ns-marquee-dur: 40s;
}

/* reveal: початковий стан ЛИШЕ коли є JS і рух дозволено */
html.has-js:not(.is-static) [data-reveal]:not(.is-in) { opacity: 0; }
html.has-js:not(.is-static) [data-reveal="up"]:not(.is-in),
html.has-js:not(.is-static) [data-reveal=""]:not(.is-in),
html.has-js:not(.is-static) [data-reveal="true"]:not(.is-in) { transform: translateY(var(--ns-reveal-shift)); }
html.has-js:not(.is-static) [data-reveal="left"]:not(.is-in) { transform: translateX(calc(-1 * var(--ns-reveal-shift))); }
html.has-js:not(.is-static) [data-reveal="right"]:not(.is-in) { transform: translateX(var(--ns-reveal-shift)); }
html.has-js:not(.is-static) [data-reveal="scale"]:not(.is-in) { transform: scale(.96); }
html.has-js:not(.is-static) [data-reveal="clip"]:not(.is-in) { clip-path: inset(0 0 100% 0); opacity: 1; }
html.has-js:not(.is-static) [data-reveal] {
  transition: opacity var(--ns-reveal-dur) var(--ns-reveal-ease),
              transform var(--ns-reveal-dur) var(--ns-reveal-ease),
              clip-path calc(var(--ns-reveal-dur) * 1.2) var(--ns-reveal-ease);
  transition-delay: calc(var(--i, 0) * var(--ns-stagger));
  will-change: opacity, transform;
}
html.has-js:not(.is-static) [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0); }
/* інтерактив НІКОЛИ не ховаємо (правило reveal-анімацій) */
[data-reveal] button, [data-reveal] a, [data-reveal] input, [data-reveal] select, [data-reveal] textarea { opacity: 1; }

/* SplitText рядками: маска дає сам плагін (mask: "lines"); fail-safe без нього */
[data-lines] { opacity: 1; }
.ns-line { display: block; }

/* marquee */
.ns-marquee { display: flex; overflow: clip; white-space: nowrap; gap: var(--ns-marquee-gap, 3rem); }
.ns-marquee__track { display: inline-flex; flex: none; gap: var(--ns-marquee-gap, 3rem); align-items: center;
  animation: ns-marquee var(--ns-marquee-dur) linear infinite; }
.ns-marquee:hover .ns-marquee__track, .ns-marquee:focus-within .ns-marquee__track { animation-play-state: paused; }
@keyframes ns-marquee { to { transform: translateX(calc(-100% - var(--ns-marquee-gap, 3rem))); } }

/* паралакс із запасом руху: рамка клипає, шар масштабований ≥ амплітуди */
.ns-parallax { overflow: clip; position: relative; }
.ns-parallax > img, .ns-parallax > video, .ns-parallax > picture, .ns-parallax > .ns-parallax__layer {
  display: block; width: 100%; height: 100%; object-fit: cover; scale: var(--ns-bleed, 1.22); transform-origin: center;
}

/* горизонтальна сцена: desktop — pin + translateX (JS), <900px — вертикальний стек */
.ns-hscene { position: relative; overflow: clip; }
.ns-hscene__track { display: flex; width: max-content; will-change: transform; }
.ns-hscene__track > * { flex: none; }
@media (max-width: 899px) {
  .ns-hscene__track, .ns-hscene.is-stacked .ns-hscene__track { display: block; width: auto; transform: none !important; }
  .ns-hscene__track > * { width: auto; }
}
.ns-hscene.is-stacked .ns-hscene__track { display: block; width: auto; transform: none !important; }

/* reduced-motion / no-js: усе видно, нічого не рухається */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-lines] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .ns-marquee__track { animation: none !important; }
  .ns-parallax > * { transform: none !important; scale: 1 !important; }
  .ns-hscene__track { display: block; width: auto; transform: none !important; }
}
html.no-js [data-reveal], html.no-js [data-lines] { opacity: 1; transform: none; clip-path: none; }