/* ============================================================
   motion-kit · base styles
   Pair with the JS modules. Brand-neutral; override --mk-* as needed.
   ============================================================ */

:root { --mk-ease: cubic-bezier(0.16, 1, 0.3, 1); --mk-cursor: #ffffff; }

/* ---- reveals ---- */
[data-reveal] {
  opacity: 0;
  transition: opacity .9s var(--mk-ease), transform .9s var(--mk-ease), clip-path 1s var(--mk-ease);
  will-change: opacity, transform;
}
[data-reveal=""], [data-reveal="up"] { transform: translateY(34px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="clip"]  { opacity: 1; clip-path: inset(0 0 100% 0); }
[data-reveal].is-in   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* ---- custom cursor ---- */
.mk-cursor {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--mk-cursor); pointer-events: none;
  transform: translate(-50%, -50%); mix-blend-mode: difference;
  transition: width .35s var(--mk-ease), height .35s var(--mk-ease);
}
.mk-cursor__label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 10px/1 ui-monospace, "JetBrains Mono", monospace;
  text-transform: uppercase; letter-spacing: .1em; color: #000;
  opacity: 0; transition: opacity .3s;
}
.mk-cursor.is-active { width: 84px; height: 84px; }
.mk-cursor.is-active .mk-cursor__label { opacity: 1; }

/* ---- horizontal track (pinned scroll-jack) ---- */
.mk-track__view {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; overflow: hidden;
}
[data-track-row] { display: flex; flex-wrap: nowrap; will-change: transform; }

/* ---- drag-scroll carousel (no scroll hijack) ---- */
.mk-drag {
  display: flex; flex-wrap: nowrap; overflow-x: auto; cursor: grab;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.mk-drag::-webkit-scrollbar { display: none; }
.mk-drag.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.mk-drag > * { scroll-snap-align: start; flex: 0 0 auto; }
.mk-drag img { -webkit-user-drag: none; user-select: none; }

/* ---- webgl image fx ---- */
.mk-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}