/* Knick Studio base: reset, fluid type, and the pieces motion.js / scenes.js / ba.js rely on.
   Each site sets its own --bg --surface --ink --muted --accent --accent2 --light and --font-display --font-body.
   This file stays neutral on purpose: the look comes from each site's own CSS. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body), system-ui, sans-serif;
  font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display), sans-serif; font-weight: inherit; line-height: .92; letter-spacing: -.01em; }
p { margin: 0; }
::selection { background: var(--accent); color: var(--bg); }

/* fluid type scale: step-0 is body; step-6+ are for the hero */
:root {
  --step--1: clamp(.8rem, .78rem + .1vw, .88rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.13rem);
  --step-1: clamp(1.25rem, 1.15rem + .5vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.4rem);
  --step-3: clamp(2.1rem, 1.7rem + 2vw, 3.6rem);
  --step-4: clamp(2.8rem, 2rem + 4vw, 5.6rem);
  --step-5: clamp(3.6rem, 2.2rem + 7vw, 8.5rem);
  --step-6: clamp(4.4rem, 2rem + 12vw, 14rem);
  --gutter: clamp(20px, 4vw, 64px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
.wrap { width: min(1440px, 100% - var(--gutter) * 2); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 3D hero canvas + a gradient fallback when WebGL isn't available */
canvas[data-scene] { width: 100%; height: 100%; display: block; }
canvas[data-scene].no-webgl, canvas[data-scene]:not(.is-live) {
  background: radial-gradient(60% 60% at 70% 40%, var(--accent2), transparent 70%), radial-gradient(50% 50% at 30% 70%, var(--accent), transparent 70%), var(--bg); }

/* film grain overlay: add <div class="grain"></div> once per page */
.grain { pointer-events: none; position: fixed; inset: 0; z-index: 90; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px; contain: strict; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

/* split text masks (motion.js) */
.split-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.split-word, .split-char { display: inline-block; will-change: transform; }

/* marquee (motion.js) */
[data-marquee] { overflow: hidden; white-space: nowrap; }
.marquee__inner { display: inline-flex; gap: inherit; animation: marquee 40s linear infinite; }
.marquee__inner > * { flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* horizontal scroller: on phones it's a swipeable row */
[data-hscroll] { overflow: hidden; }
[data-track] { display: flex; gap: clamp(14px, 2vw, 28px); will-change: transform; }
@media (max-width: 899px) { [data-track] { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; } [data-track] > * { scroll-snap-align: start; } }

/* header hide/show (motion.js) */
[data-hide-on-scroll] { transition: transform .5s var(--ease-out), background .4s, backdrop-filter .4s; }
[data-hide-on-scroll].is-hidden { transform: translateY(-110%); }

/* custom cursor (motion.js) */
.cursor { position: fixed; left: 0; top: 0; z-index: 100; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--accent); pointer-events: none; mix-blend-mode: difference; transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out); display: none; }
.has-cursor .cursor { display: block; }
.cursor.is-big { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
.cursor[data-label]::after { content: attr(data-label); position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 10px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--bg); mix-blend-mode: normal; }

/* before / after (ba.js) */
[data-ba] { position: relative; overflow: hidden; user-select: none; touch-action: pan-y; cursor: ew-resize; }
[data-ba] img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-ba] img:last-of-type { clip-path: inset(0 0 0 var(--pos, 50%)); }
[data-ba] .ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--light); transform: translateX(-50%); pointer-events: none; }
[data-ba] .ba-knob { position: absolute; top: 50%; left: var(--pos, 50%); width: 64px; height: 64px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--accent); color: var(--bg); display: grid; place-items: center; font: 700 12px var(--font-body); letter-spacing: .1em; pointer-events: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }

/* reduced motion: make sure nothing stays hidden */
.motion-off [data-reveal], .motion-off [data-split], .motion-off [data-stagger] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
@media (prefers-reduced-motion: reduce) { .grain, .marquee__inner { animation: none; } }

/* photo slideshow hero (slides.js) */
.slides { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.slides .slide { position: absolute; inset: 0; overflow: hidden; }
.slides .slide img { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; transform: scale(1.12) translate(var(--from), 0); }
.slides .slide.on img { animation: kenburns var(--dur, 7.5s) linear forwards; }
.slides .slide.off img { transform: scale(1) translate(var(--to), -1%); }
@keyframes kenburns { from { transform: scale(1.12) translate(var(--from), 0); } to { transform: scale(1) translate(var(--to), -1%); } }
.slides--slide .slide { transform: translateX(100%); transition: transform 1.6s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.slides--slide .slide.on { transform: none; z-index: 2; }
.slides--slide .slide.off { transform: translateX(-30%); z-index: 1; }
.slides--fade .slide { opacity: 0; transition: opacity 1.6s ease; }
.slides--fade .slide.on { opacity: 1; z-index: 2; }
.slides--fade .slide.off { opacity: 1; z-index: 1; }
.slides--wipe .slide { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); transition: clip-path 1.6s cubic-bezier(.65, 0, .35, 1); }
.slides--wipe .slide.on { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); z-index: 2; }
.slides--wipe .slide.off { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); z-index: 1; }
[data-slides-dots] { display: flex; gap: 8px; }
[data-slides-dots] button { width: 34px; height: 3px; padding: 0; border: 0; border-radius: 3px; background: color-mix(in srgb, var(--light) 30%, transparent); cursor: pointer; position: relative; overflow: hidden; }
[data-slides-dots] button i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
[data-slides-dots] button.on i { animation: dotfill var(--dur, 6s) linear forwards; }
[data-slides-dots] button.done i { transform: scaleX(1); }
@keyframes dotfill { to { transform: scaleX(1); } }
[data-slides-caption] { transition: opacity .4s; }

/* video hero: <video class="hero-video" autoplay muted loop playsinline poster="images/x.jpg" src="media/x.mp4"></video> */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 3D object viewer (scenes.js mountModel) */
canvas[data-model] { width: 100%; height: 100%; display: block; cursor: grab; outline: none; }
canvas[data-model]:active { cursor: grabbing; }
canvas[data-model].no-webgl { display: none; }
@media (prefers-reduced-motion: reduce) { .slides .slide.on img { animation: none; } .slides .slide { transition: none !important; } }