/* landing-kit.css - the styles behind landing-kit.js (global LK), ght-landing-motion. MIT, Product Factory.
 * Tokens mirror contracts/ui/motion.json (override them on :root from the product's own tokens). Every pre-state
 * applies only under html.lk (set by LK.init), so nothing is hidden when JavaScript fails. */
:root {
  --lk-dur-press: 100ms; --lk-dur-hover: 150ms; --lk-dur-popover: 200ms; --lk-dur-modal: 300ms;
  --lk-dur-sheet: 400ms; --lk-dur-reveal: 600ms; --lk-stagger: 40ms;
  --lk-ease-out: cubic-bezier(.23, 1, .32, 1);
  --lk-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --lk-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --lk-ease-emphasized-out: cubic-bezier(.05, .7, .1, 1);
  --lk-ease-exit: cubic-bezier(.3, 0, .8, .15);
  --lk-cursor-size: 14px; --lk-cursor-on: 72px;
  --lk-cursor-bg: currentColor; --lk-cursor-fg: Canvas;
}

/* visually hidden copy for split text and counters */
.lk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* split text */
.lk-split { display: inline; }
.lk-word, .lk-char { display: inline-block; }
.lk-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; } /* room for descenders */
.lk-line-in { display: inline-block; will-change: transform; }

/* reveal pre-states (only once JS is running; .lk-in is set when it plays) */
html.lk [data-lk-reveal="rise"]:not(.lk-in),
html.lk [data-lk-reveal="fade"]:not(.lk-in),
html.lk [data-lk-reveal="scale"]:not(.lk-in) { opacity: 0; }
html.lk [data-lk-reveal="clip"]:not(.lk-in) { clip-path: inset(0 0 100% 0); }
html.lk [data-lk-reveal="wipe"]:not(.lk-in) { clip-path: inset(0 100% 0 0); }
html.lk [data-lk-reveal="mask"]:not(.lk-in) .lk-line-in { transform: translate3d(0, 105%, 0); }
/* "settle" has no hidden pre-state: it stays painted so a hero headline can be the LCP element */

/* parallax by CSS scroll-driven animations (LK.parallax adds the class only where supported) */
@supports (animation-timeline: view()) {
  .lk-parallax { animation: lk-par linear both; animation-timeline: view(); animation-range: cover; }
  @keyframes lk-par { from { transform: translate3d(0, calc(var(--lk-par, .15) * 50vh), 0); }
                      to   { transform: translate3d(0, calc(var(--lk-par, .15) * -50vh), 0); } }
}

/* sticky scroll scene: <section class="lk-sticky" style="--lk-length:250vh"><div class="lk-frame">...</div></section> */
.lk-sticky { position: relative; height: var(--lk-length, 200vh); }
.lk-sticky > .lk-frame { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }

/* canvas over its poster: both fill the frame; the canvas fades in on its first frame */
.lk-stage { position: relative; }
.lk-stage > img, .lk-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-stage > canvas { opacity: 0; transition: opacity var(--lk-dur-reveal) var(--lk-ease-out); }
.lk-stage > canvas.lk-gl-ready { opacity: 1; }

/* marquee */
.lk-marquee { display: flex; overflow: hidden; white-space: nowrap; }
.lk-marquee > * { flex: none; display: flex; animation: lk-marquee var(--lk-marquee-dur, 30s) linear infinite; }
.lk-marquee-rev > * { animation-direction: reverse; }
.lk-marquee:hover > *, .lk-marquee:focus-within > *, .lk-marquee-paused > * { animation-play-state: paused; }
@keyframes lk-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }

/* follower cursor (decorative; the native cursor stays unless .lk-cursor-hide) */
.lk-cursor { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; display: grid; place-items: center;
  width: var(--lk-cursor-size); height: var(--lk-cursor-size); margin: calc(var(--lk-cursor-size) / -2) 0 0 calc(var(--lk-cursor-size) / -2);
  border-radius: 50%; background: var(--lk-cursor-bg); color: var(--lk-cursor-fg); mix-blend-mode: difference;
  transition: width var(--lk-dur-modal) var(--lk-ease-out), height var(--lk-dur-modal) var(--lk-ease-out), margin var(--lk-dur-modal) var(--lk-ease-out), opacity var(--lk-dur-hover) linear; }
.lk-cursor > span { font: 600 12px/1 system-ui, sans-serif; letter-spacing: .02em; opacity: 0; transition: opacity var(--lk-dur-hover) linear; }
.lk-cursor.lk-cursor-on { width: var(--lk-cursor-on); height: var(--lk-cursor-on); margin: calc(var(--lk-cursor-on) / -2) 0 0 calc(var(--lk-cursor-on) / -2); mix-blend-mode: normal; }
.lk-cursor.lk-cursor-on > span { opacity: 1; }
.lk-cursor.lk-cursor-out { opacity: 0; }
html.lk-cursor-hide, html.lk-cursor-hide a, html.lk-cursor-hide button { cursor: none; }

/* hover media preview */
.lk-hover-media { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; width: min(28vw, 360px); aspect-ratio: 4 / 5;
  margin: -12% 0 0 -14%; opacity: 0; transform-origin: 50% 50%; transition: opacity var(--lk-dur-modal) var(--lk-ease-out); }
.lk-hover-media.lk-on { opacity: 1; }
.lk-hover-media > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* intro curtain: sits over painted content, never replaces it */
.lk-intro { position: fixed; inset: 0; z-index: 2147483001; display: grid; place-items: center; }

/* page pause control (WCAG 2.2.2) */
html.lk-paused *, html.lk-paused *::before, html.lk-paused *::after { animation-play-state: paused !important; }

/* View Transitions defaults */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--lk-dur-modal); animation-timing-function: var(--lk-ease-standard); }

/* reduced motion: replace, never remove the meaning */
@media (prefers-reduced-motion: reduce) {
  .lk-marquee { overflow-x: auto; }
  .lk-marquee > * { animation: none; }
  .lk-marquee > [aria-hidden="true"] { display: none; }
  .lk-parallax { animation: none !important; }
  .lk-stage > canvas { transition: none; }
  .lk-cursor, .lk-hover-media { display: none; }
  @view-transition { navigation: none; }
}