/* Zigna motion kit: the CSS half. Tokens first; override them per site in
   :root (e.g. a brisker business site shortens --dur-reveal). Everything
   that hides content is scoped to .js:not(.still), so without JavaScript or
   under prefers-reduced-motion the page is simply there. */

:root {
  /* One curve for everything that enters: a long, soft landing. */
  --ease: cubic-bezier(.2, .7, .1, 1);
  /* For things that loop (breathing, hints): symmetric, no snap. */
  --ease-loop: cubic-bezier(.45, 0, .55, 1);
  --dur-ui: .35s;        /* hover, colour, focus: answer the hand fast */
  --dur-reveal: 1.2s;    /* blocks rising into view */
  --dur-line: 1.3s;      /* headline lines from behind their mask */
  --dur-clip: 1.6s;      /* photographs uncovering */
  --stagger-line: 110ms;
  --stagger-item: 90ms;
  --stagger-letter: 60ms;
  --rise: 1.5rem;        /* how far a block travels as it fades in */
}

/* Tempo presets: set on <html> for a whole site or on one section.
   "calm" is health and therapy; "business" is enterprise, professional
   services and any moment that should feel efficient rather than tender:
   same vocabulary, shorter travel, quicker landings. */
[data-tempo="calm"] { --dur-reveal: 1.4s; --dur-line: 1.5s; --dur-clip: 1.8s; --stagger-line: 130ms; --stagger-item: 110ms; --rise: 1rem; }
[data-tempo="business"] { --dur-reveal: .9s; --dur-line: 1s; --dur-clip: 1.2s; --stagger-line: 80ms; --stagger-item: 70ms; --stagger-letter: 40ms; --rise: 1rem; }

/* Lines rising from a mask: <h2 data-lines><span>One</span><span>Two</span></h2> */
.ln { display: block; }
.js:not(.still) [data-lines] .ln { overflow: hidden; padding: .2em 0 .1em; margin: -.2em 0 -.1em; }
.js:not(.still) [data-lines] .ln > * { display: block; transform: translateY(105%); transition: transform var(--dur-line) var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger-line)); }
.js:not(.still) [data-lines].is-in .ln > * { transform: none; }

/* Blocks fading up */
.js:not(.still) [data-reveal] { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); transition-delay: var(--delay, 0s); }
.js:not(.still) [data-reveal].is-in { opacity: 1; transform: none; }

/* Children of a group arriving one after another */
.js:not(.still) [data-stagger] > * { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger-item)); }
.js:not(.still) [data-stagger].is-in > * { opacity: 1; transform: none; }

/* Photographs uncovering from the bottom edge */
.js:not(.still) [data-clip] { clip-path: inset(100% 0 0 0); transition: clip-path var(--dur-clip) var(--ease); }
.js:not(.still) [data-clip].is-in { clip-path: inset(0 0 0 0); }

/* Panels and overlays uncovering sideways. data-wipe="right" (default)
   grows from the right edge, "left" from the left edge. */
.js:not(.still) [data-wipe] { clip-path: inset(0 0 0 100%); transition: clip-path var(--dur-clip) var(--ease); transition-delay: var(--delay, 0s); }
.js:not(.still) [data-wipe="left"] { clip-path: inset(0 100% 0 0); }
.js:not(.still) [data-wipe].is-in { clip-path: inset(0 0 0 0); }

/* Letters of a wordmark rising in sequence (footer word) */
[data-letters] .wl { display: inline-block; }
.js:not(.still) [data-letters] .wl { transform: translate3d(0, 60%, 0); opacity: 0; transition: transform 1.4s var(--ease), opacity 1.4s var(--ease); transition-delay: calc(var(--i) * var(--stagger-letter)); }
.js:not(.still) [data-letters].is-in .wl { transform: none; opacity: 1; }

/* Words brightening as they scroll through */
[data-words] .w { opacity: var(--o, 1); transition: opacity .2s linear; }

/* Inset card opening to full bleed: --e goes 0 → 1 */
[data-expand] { clip-path: inset(0 calc((1 - var(--e, 1)) * 5vw) round calc((1 - var(--e, 1)) * 2.5rem)); }
[data-expand] > * { scale: calc(.95 + var(--e, 1) * .05); }

/* Marquee: <div data-marquee><div class="marquee-track">…</div></div> */
[data-marquee] { overflow: hidden; }
[data-marquee] > * { display: flex; align-items: center; width: max-content; will-change: transform; }
[data-marquee].is-still > * { width: auto; flex-wrap: wrap; justify-content: center; }

/* Floating pill: slides up from below the fold */
[data-float] { transform: translateY(calc(100% + 2rem)); transition: transform .7s var(--ease); }
[data-float].is-on { transform: none; }
.still [data-float] { transition: none; }

/* Sticky stacking cards */
[data-stack] > * { position: sticky; top: calc(5rem + var(--i, 0) * 1rem); transform-origin: 50% 0; scale: var(--s, 1); }