/* MotionKit 1.0 — base styles for every effect. Colours come from these tokens; override them per site. */
:root {
  --mk-bg: #0d0c0b;
  --mk-fg: #f1ece4;
  --mk-accent: #d9a35b;
  --mk-muted: #8d867c;
  --mk-light-bg: #f3efe8;
  --mk-light-fg: #191714;
  --mk-nav-h: 0px;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body { transition: background-color .8s ease, color .8s ease; }
body.mk-theme-light { --mk-bg: var(--mk-light-bg); --mk-fg: var(--mk-light-fg); }

/* progress bar */
.mk-progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 2px; background: var(--mk-accent); transform: scaleX(0); transform-origin: 0 50%; z-index: 9000; pointer-events: none; }

/* grain */
.mk-grain { position: fixed; inset: 0; z-index: 8000; pointer-events: none; opacity: .5; animation: mk-grain 1s steps(6) infinite; }
@keyframes mk-grain { 0%{background-position:0 0} 20%{background-position:-40px 30px} 40%{background-position:25px -50px} 60%{background-position:-55px -10px} 80%{background-position:35px 45px} 100%{background-position:0 0} }

/* cursor */
.mk-cursor, .mk-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9500; border-radius: 50%; translate: -50% -50%; }
.mk-cursor { width: 6px; height: 6px; background: var(--mk-fg); mix-blend-mode: difference; }
.mk-cursor-ring { width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--mk-fg) 55%, transparent); display: grid; place-items: center; transition: width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1), background-color .35s, border-color .35s; }
.mk-cursor-ring span { font: 600 10px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--mk-bg); opacity: 0; transition: opacity .2s; }
.mk-cursor-ring.is-hover { width: 64px; height: 64px; border-color: var(--mk-accent); }
.mk-cursor-ring.has-label { width: 86px; height: 86px; background: var(--mk-accent); border-color: var(--mk-accent); }
.mk-cursor-ring.has-label span { opacity: 1; }
.mk-cursor-ring.is-down { width: 30px; height: 30px; }
@media (pointer: fine) { body[data-mk-cursor] a, body[data-mk-cursor] button { cursor: none; } }

/* loader + curtain */
.mk-loader { position: fixed; inset: 0; z-index: 9800; background: var(--mk-bg); color: var(--mk-fg); display: flex; flex-direction: column; justify-content: flex-end; padding: 6vw; gap: 1rem; clip-path: inset(0 0 0 0); }
.mk-loader-count { font-size: clamp(4rem, 16vw, 13rem); line-height: .8; font-variant-numeric: tabular-nums; }
.mk-loader-bar { height: 1px; background: var(--mk-accent); transform: scaleX(0); transform-origin: 0 50%; }
.mk-curtain { position: fixed; inset: 0; z-index: 9700; background: var(--mk-accent); transform: scaleY(0); pointer-events: none; }

/* text */
.mk-line { display: block; }
.mk-char, .mk-word { display: inline-block; will-change: transform, filter, opacity; }
.mk-glow-ready { position: relative; overflow: hidden; }
.mk-glow-sweep { position: absolute; inset: -10% 0; width: 40%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255,240,215,.0) 30%, rgba(255,240,215,.55) 50%, rgba(255,240,215,0) 70%, transparent); }
.mk-phrase { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; visibility: hidden; }
.mk-phrase-in { display: block; }
[data-mk~="marquee"] { overflow: hidden; white-space: nowrap; }
[data-mk~="marquee"] > * { display: inline-flex; will-change: transform; }

/* images */
[data-mk~="reveal"], [data-mk~="arch"] { overflow: hidden; }
[data-mk~="reveal"] img, [data-mk~="arch"] img, [data-mk~="pixel"] img, .mk-zoom-media, .mk-scene-media { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-mk~="pixel"] { position: relative; overflow: hidden; }
html.mk-js [data-mk~="pixel"] img { opacity: 0; }
.mk-pixel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

[data-mk~="zoom"] { position: relative; height: 100vh; overflow: hidden; }
.mk-zoom-media { position: absolute; inset: 0; will-change: transform; }
.mk-zoom-cap { position: absolute; visibility: hidden; }

[data-mk~="zoomthrough"] { position: relative; height: 100vh; overflow: hidden; }
.mk-scene { position: absolute; inset: 0; overflow: hidden; }
.mk-scene-media { position: absolute; inset: 0; will-change: transform; }
.mk-scene-cap { position: absolute; z-index: 3; }

[data-mk~="tiles"] { position: relative; height: 100vh; display: grid; place-items: center; overflow: hidden; perspective: 1200px; }
.mk-tiles-frame { position: relative; width: min(86vw, 1100px); aspect-ratio: 16 / 10; max-width: 100%; transform-style: preserve-3d; }
.mk-tiles-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.mk-tile { position: absolute; background-repeat: no-repeat; backface-visibility: hidden; will-change: transform; }
@media (max-width: 759px) { .mk-tiles-frame { aspect-ratio: 4 / 5; width: 88vw; } }

[data-mk~="layers"] { position: relative; height: 100vh; overflow: hidden; }
.mk-layer { position: absolute; will-change: transform, filter; }
.mk-step { position: absolute; visibility: hidden; }
.mk-layers-final { position: absolute; visibility: hidden; }

[data-mk~="sandwich"] { position: relative; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.mk-sw-word { position: absolute; white-space: nowrap; perspective: 600px; }
.mk-sw-product { position: relative; z-index: 2; will-change: transform; }

[data-mk~="orbit"] { position: relative; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.mk-orbit-item { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.mk-orbit-ring { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; pointer-events: none; }

[data-mk~="stack"] .mk-card { position: sticky; transform-origin: 50% 0; will-change: transform; }

[data-mk~="hscroll"] { overflow: hidden; }
.mk-h-track { display: flex; width: max-content; will-change: transform; }
.mk-h-item { overflow: hidden; flex: none; }
.mk-h-item img { width: 124%; max-width: none; height: 100%; object-fit: cover; margin-left: -12%; }

[data-mk~="ring"] { position: relative; perspective: 1400px; touch-action: pan-y; cursor: grab; user-select: none; }
[data-mk~="ring"]:active { cursor: grabbing; }
.mk-ring-spin { position: absolute; inset: 0; transform-style: preserve-3d; }
.mk-ring-item { position: absolute; left: 50%; top: 50%; backface-visibility: hidden; }

[data-mk~="tilt"] { position: relative; transform-style: preserve-3d; }
.mk-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; border-radius: inherit; mix-blend-mode: soft-light; }

[data-mk~="liquid"] { position: relative; overflow: hidden; }
.mk-liquid { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s; pointer-events: none; }

.mk-gl, .mk-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .mk-grain { animation: none; }
  .mk-phrase, .mk-zoom-cap, .mk-step, .mk-layers-final { visibility: visible; position: relative; }
  html.mk-js [data-mk~="pixel"] img { opacity: 1; }
}