/* scroll-kit base styles. Everything visual is a variable: override on :root or any ancestor. */
:root {
  --sk-ease: cubic-bezier(.16, 1, .3, 1);      /* reveal + word easing (expo-ish out) */
  --sk-reveal-dur: .95s;
  --sk-reveal-y: 32px;                          /* travel of data-reveal="up" */
  --sk-word-step: 32ms;                         /* per-word stagger inside data-reveal="words" */
  --sk-cursor-size: 34px;
  --sk-cursor-color: #fff;                      /* with difference blend, white reads on any background */
  --sk-cursor-blend: difference;
  --sk-cursor-font: inherit;
  --sk-cursor-label-color: #000;
}

html.sk-smooth { scroll-behavior: auto !important; }
html.sk-locked, html.sk-locked body { overflow: hidden; }

/* ---- pins: the stage sticks, the spacer provides the scroll distance ---- */
.sk-pin { position: sticky; top: 0; }
:where(.sk-pin) { height: 100vh; height: 100svh; }
.sk-h { overflow: clip; }
.sk-h-track { display: flex; width: max-content; will-change: translate; }
.sk-h.is-native { position: relative; height: auto; }
.sk-h.is-native .sk-h-track { width: auto; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sk-h.is-native .sk-h-track::-webkit-scrollbar { display: none; }
.sk-h.is-native .sk-h-track > * { scroll-snap-align: center; flex: none; }

[data-speed] { will-change: translate; }

/* ---- reveals: hidden only once JS has run (html.sk), so no-JS pages stay readable ---- */
.sk [data-reveal] {
  transition: opacity var(--sk-reveal-dur) var(--sk-ease), transform var(--sk-reveal-dur) var(--sk-ease),
    filter var(--sk-reveal-dur) var(--sk-ease), clip-path calc(var(--sk-reveal-dur) * 1.2) var(--sk-ease);
  transition-delay: var(--sk-delay, 0ms);
}
.sk [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, var(--sk-reveal-y), 0); }
.sk [data-reveal="fade"]:not(.is-in) { transform: none; }
.sk [data-reveal="left"]:not(.is-in) { transform: translate3d(calc(var(--sk-reveal-y) * -1.5), 0, 0); }
.sk [data-reveal="right"]:not(.is-in) { transform: translate3d(calc(var(--sk-reveal-y) * 1.5), 0, 0); }
.sk [data-reveal="scale"]:not(.is-in) { transform: scale(.9); }
.sk [data-reveal="blur"]:not(.is-in) { filter: blur(14px); transform: translate3d(0, calc(var(--sk-reveal-y) * .4), 0); }
.sk [data-reveal="mask"] { clip-path: inset(0 0 0 0); }
.sk [data-reveal="mask"]:not(.is-in) { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); }
.sk [data-reveal="words"], .sk [data-reveal="words"]:not(.is-in) { opacity: 1; transform: none; }
.sk-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .12em .16em; margin: 0 -.12em -.16em; }
.sk-wi {
  display: inline-block;
  transition: transform var(--sk-reveal-dur) var(--sk-ease), opacity var(--sk-reveal-dur) var(--sk-ease);
  transition-delay: calc(var(--sk-delay, 0ms) + var(--i, 0) * var(--sk-word-step));
}
.sk [data-reveal="words"]:not(.is-in) .sk-wi { transform: translate3d(0, 112%, 0) rotate(4deg); opacity: 0; }

/* ---- marquee ---- */
.sk-marquee { overflow: hidden; white-space: nowrap; }
.sk-marquee-inner { display: flex; width: max-content; will-change: translate; }
.sk-marquee-unit { display: flex; flex: none; align-items: center; }

/* ---- cursor follower ---- */
.sk-cursor { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; opacity: 0; transition: opacity .35s; mix-blend-mode: var(--sk-cursor-blend); }
.sk-cursor.is-visible { opacity: 1; }
.sk-cursor-ring {
  position: absolute; left: 0; top: 0; width: var(--sk-cursor-size); height: var(--sk-cursor-size);
  border: 1.5px solid var(--sk-cursor-color); border-radius: 999px; box-sizing: border-box;
  display: grid; place-items: center; contain: layout style;
  transition: border-radius .4s var(--sk-ease), background-color .3s, border-color .3s, scale .25s var(--sk-ease);
}
.sk-cursor-dot { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--sk-cursor-color); transition: opacity .25s, scale .3s var(--sk-ease); }
.sk-cursor-label { font: 600 11px/1 var(--sk-cursor-font); letter-spacing: .1em; text-transform: uppercase; color: var(--sk-cursor-label-color); opacity: 0; transition: opacity .2s; white-space: nowrap; }
.sk-cursor.is-link .sk-cursor-dot, .sk-cursor.is-stuck .sk-cursor-dot { scale: 0; }
.sk-cursor.is-stuck .sk-cursor-ring { border-width: 1px; }
.sk-cursor.has-label .sk-cursor-ring { background: var(--sk-cursor-color); }
.sk-cursor.has-label .sk-cursor-label { opacity: 1; transition-delay: .08s; }
.sk-cursor.has-label .sk-cursor-dot { opacity: 0; }
.sk-cursor.is-down .sk-cursor-ring { scale: .86; }

@media (prefers-reduced-motion: reduce) {
  .sk [data-reveal], .sk-wi { transition: none !important; }
}
.sk-reduced [data-reveal], .sk-reduced .sk-wi { transition: none !important; }
