/* ==========================================================================
   PostureCo motion kit: tokens + the CSS half of kit.js.
   Everything is wrapped in :where() (zero specificity) so concept CSS wins.
   Hidden "before reveal" states only apply when html has .kit (set by kit.js
   the moment it loads), so a page whose JS fails still shows all content.
   ========================================================================== */
:root {
  /* Easing: never `linear` for UI. */
  --ease-out: cubic-bezier(.2, .7, .2, 1);        /* default entrance */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);   /* hero / large moves */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);    /* swaps, crossfades, toggles */
  --ease-in: cubic-bezier(.4, 0, 1, 1);           /* exits (keep short) */
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);  /* tiny overshoot: chips, buttons only */
  /* Durations */
  --dur-xs: 120ms;  /* hover, press */
  --dur-s: 240ms;   /* small UI: menus, tooltips */
  --dur-m: 500ms;   /* cards, chips */
  --dur-l: 900ms;   /* section reveals */
  --dur-xl: 1400ms; /* hero entrances */
  --stagger: 80ms;
}

/* ---------- Reveal: [data-reveal] (+ data-reveal-delay="ms") ------------- */
:where(html.kit) :where([data-reveal]) {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y, 32px), 0);
  transition:
    opacity var(--reveal-dur, .9s) var(--reveal-ease, cubic-bezier(.2, .7, .2, 1)) var(--reveal-delay, 0ms),
    transform var(--reveal-dur, .9s) var(--reveal-ease, cubic-bezier(.2, .7, .2, 1)) var(--reveal-delay, 0ms),
    filter var(--reveal-dur, .9s) var(--reveal-ease, cubic-bezier(.2, .7, .2, 1)) var(--reveal-delay, 0ms);
}
:where(html.kit) :where([data-reveal="fade"]) { transform: none; }
:where(html.kit) :where([data-reveal="scale"]) { transform: scale(.94); }
:where(html.kit) :where([data-reveal="blur"]) { transform: translate3d(0, 16px, 0); filter: blur(12px); }
:where(html.kit) :where([data-reveal="left"]) { transform: translate3d(-48px, 0, 0); }
:where(html.kit) :where([data-reveal="right"]) { transform: translate3d(48px, 0, 0); }
:where(html.kit) :where([data-reveal].is-in) { opacity: 1; transform: none; filter: none; }

/* ---------- Word highlight: Kit.highlightWords / [data-highlight] -------- */
:where(.kit-hw) .w {
  color: var(--hw-dim, rgba(134, 134, 139, .45));
  transition: color .45s cubic-bezier(.2, .7, .2, 1);
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :where(.kit-hw) .w { color: var(--hw-dim, color-mix(in srgb, currentColor 26%, transparent)); }
}
:where(.kit-hw) .w.on { color: var(--hw-lit, inherit); }

/* ---------- Sticky scenes ------------------------------------------------- */
:where(.kit-scene) { position: relative; height: var(--scene-h, 250vh); }
:where(.kit-sticky) {
  position: sticky;
  top: 0;
  height: 100vh;               /* fallback */
  height: 100svh;              /* never 100vh on iOS: URL bar hides content */
  overflow: hidden;            /* overflow on the STICKY element is fine; never on its ancestors */
}
@media (max-width: 734px) {
  :where(.kit-scene) { height: var(--scene-h-m, var(--scene-h, 200vh)); }
}
/* Reduced motion: unpin and show the final state in normal flow.
   Add .kit-scene--keep to keep a scene pinned (e.g. fades-only screen swaps). */
@media (prefers-reduced-motion: reduce) {
  :where(.kit-scene:not(.kit-scene--keep)) { height: auto; }
  :where(.kit-scene:not(.kit-scene--keep)) :where(.kit-sticky) { position: relative; height: auto; min-height: 100svh; }
  :where(html.kit) :where([data-reveal]) { transform: none; filter: none; transition-duration: .3s; }
}