/*!
 * Motion Kit 1.0 styles. Pairs with motion.js and the head snippet.
 * Hidden states only exist under html.mk-on (JS ran, tier is not essential,
 * failsafe not tripped), so no-JS and essential visitors always see everything.
 * Animations use opacity, clip-path and the individual translate/scale
 * properties, so they never fight a site's own `transform` or `transition` rules.
 * Tokens sit in :where(:root) so a site's own :root overrides win in any order.
 */
:where(:root){
  --mk-ease:cubic-bezier(.16,1,.3,1);
  --mk-ease-io:cubic-bezier(.65,0,.35,1);
  --mk-dur:.9s;
  --mk-stagger:80ms;
  --mk-rise:28px;
  --mk-line-stagger:.11s;
  --mk-accent:currentColor;
  --mk-arrival-bg:#111;
}

/* ---------- reveal ---------- */
.mk-on [data-reveal]:not(.is-in):not([data-reveal="split"]){opacity:0}
.mk-on [data-reveal].is-in:not([data-reveal="split"]){
  animation:var(--mk-anim,mk-up) var(--mk-dur) var(--mk-ease) backwards;
  animation-delay:calc(var(--i,0) * var(--mk-stagger) + var(--mk-delay,0s));
}
[data-reveal="fade"]{--mk-anim:mk-fade}
[data-reveal="scale"]{--mk-anim:mk-scale}
[data-reveal="mask"]{--mk-anim:mk-mask;--mk-dur:1.1s}
[data-reveal="clip"]{--mk-anim:mk-clip;--mk-dur:1.25s}
/* balanced tier: lighter versions */
.mk-on:not(.mk-cine) [data-reveal]{--mk-anim:mk-fade-up;--mk-dur:.7s}
/* image settle inside a clip reveal */
.mk-cine [data-reveal="clip"].is-in :is(img,video),
.mk-cine :is(img,video)[data-reveal="clip"].is-in{
  animation:mk-settle 1.8s var(--mk-ease) backwards;
  animation-delay:calc(var(--i,0) * var(--mk-stagger) + var(--mk-delay,0s));
}
.mk-cine :is(img,video)[data-reveal="clip"].is-in{animation-name:mk-clip,mk-settle;animation-duration:1.25s,1.8s}

@keyframes mk-up{from{opacity:0;translate:0 var(--mk-rise)}}
@keyframes mk-fade-up{from{opacity:0;translate:0 12px}}
@keyframes mk-fade{from{opacity:0}}
@keyframes mk-scale{from{opacity:0;scale:.94;translate:0 16px}}
@keyframes mk-mask{from{clip-path:inset(0 0 100% 0);translate:0 1em}to{clip-path:inset(0 0 0 0)}}
@keyframes mk-clip{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mk-settle{from{transform:scale(1.16)}}

/* ---------- split headings ---------- */
.mk-cine [data-split]:not([data-mk-split]){opacity:0}
.mk-w{display:inline-block;vertical-align:top;clip-path:inset(-.35em -.35em -.3em -.35em)}
.mk-wi{display:inline-block}
.mk-cine [data-split]:not(.is-in) .mk-wi{translate:0 140%}
.mk-cine [data-split].is-in .mk-wi{
  animation:mk-line 1.05s var(--mk-ease) backwards;
  animation-delay:calc(var(--li,0) * var(--mk-line-stagger) + var(--i,0) * var(--mk-stagger) + var(--mk-delay,0s));
}
[data-split="words"]{--mk-line-stagger:.045s}
@keyframes mk-line{from{translate:0 140%}}
html:not(.mk-cine) .mk-w{clip-path:none}
html:not(.mk-cine) .mk-wi{translate:none!important;animation:none!important}

/* ---------- line drawing ---------- */
[data-draw]{transform-origin:0 50%}
[data-draw="v"]{transform-origin:50% 0}
.mk-on [data-draw]:not(.is-in){scale:0 1}
.mk-on [data-draw="v"]:not(.is-in){scale:1 0}
.mk-on [data-draw].is-in{animation:mk-draw 1.3s var(--mk-ease) backwards;animation-delay:calc(var(--i,0) * var(--mk-stagger) + var(--mk-delay,0s))}
.mk-on [data-draw="v"].is-in{animation-name:mk-draw-v}
@keyframes mk-draw{from{scale:0 1}}
@keyframes mk-draw-v{from{scale:1 0}}
/* SVG strokes: path/line/circle... get pathLength=1 from JS */
.mk-on :is(path,line,polyline,polygon,circle,rect,ellipse)[data-draw]{scale:none;stroke-dasharray:1}
.mk-on :is(path,line,polyline,polygon,circle,rect,ellipse)[data-draw]:not(.is-in){stroke-dashoffset:1}
.mk-on :is(path,line,polyline,polygon,circle,rect,ellipse)[data-draw].is-in{animation:mk-stroke 1.8s var(--mk-ease-io) backwards}
@keyframes mk-stroke{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ---------- parallax ---------- */
.mk-cine [data-parallax]{scale:var(--mk-px-scale,1.2);will-change:translate}

/* ---------- count ---------- */
[data-count]{font-variant-numeric:tabular-nums;display:inline-block}

/* ---------- marquee ---------- */
[data-marquee]{display:flex;overflow:hidden;--mk-mq-gap:3rem}
[data-marquee]>*{flex:none;display:flex;align-items:center;gap:var(--mk-mq-gap);padding-inline-end:var(--mk-mq-gap);min-width:max-content}
.mk-on [data-marquee]>*{animation:mk-mq var(--mk-mq-dur,40s) linear infinite}
.mk-on [data-marquee]:not(.mk-near)>*,
.mk-on [data-marquee]:hover>*,
.mk-on [data-marquee]:focus-within>*{animation-play-state:paused}
html:not(.mk-on) [data-marquee]{flex-wrap:wrap}
html:not(.mk-on) .mk-mq-clone{display:none}
@keyframes mk-mq{to{translate:-100% 0}}

/* ---------- scroll progress bar ---------- */
.mk-bar{position:fixed;left:0;right:0;top:0;height:3px;z-index:10000;background:var(--mk-accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none;view-transition-name:mk-bar}
html:not(.mk-on) .mk-bar{display:none}

/* ---------- motion toggle ---------- */
.mk-toggle{display:inline-flex;align-items:center;gap:4px;padding:3px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:999px;font-size:.78rem;line-height:1}
.mk-toggle__label{padding:0 8px 0 10px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.mk-toggle button{appearance:none;border:0;background:transparent;color:inherit;font:inherit;padding:8px 12px;min-height:32px;border-radius:999px;cursor:pointer}
.mk-toggle button[aria-pressed="true"]{background:currentColor}
.mk-toggle button[aria-pressed="true"]>span{color:var(--mk-toggle-ink,#111)}
.mk-toggle button:focus-visible{outline:2px solid var(--mk-accent);outline-offset:2px}
html:not(.mk-js) .mk-toggle{display:none}

/* ---------- arrival hero ---------- */
.mk-arrival-canvas{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none;z-index:2;background:var(--mk-arrival-bg);color:var(--mk-accent);transition:opacity .6s var(--mk-ease)}
.mk-arrive [data-arrival] .mk-arrival-canvas{display:block}
.mk-arrival-canvas.is-out{opacity:0}
.mk-arrive [data-arrival]{--mk-delay:.45s}
[data-arrival].mk-arrival-done .mk-wi,
[data-arrival].mk-arrival-done [data-reveal]{animation:none!important;translate:none!important}
/* CSS fallback when WebGL is unavailable: wipe + settle */
[data-arrival].mk-arrival-css [data-arrival-img]{animation:mk-clip 1.4s var(--mk-ease) both,mk-settle 2.2s var(--mk-ease) both}
/* hero video: slow settle once it plays */
.mk-cine [data-arrival] video.mk-arrival-video{animation:mk-settle 3.2s var(--mk-ease) both}

/* ---------- page transitions ---------- */
@view-transition{navigation:auto}
[data-mk-header]{view-transition-name:mk-header}
main{view-transition-name:mk-main}
::view-transition-group(mk-header){animation:none}
::view-transition-group(mk-main){animation:none}
::view-transition-old(mk-main){animation:mk-vt-out .3s var(--mk-ease-io) both}
::view-transition-new(mk-main){animation:mk-vt-in .6s var(--mk-ease) .08s both}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
@keyframes mk-vt-out{to{opacity:0;translate:0 -18px}}
@keyframes mk-vt-in{from{opacity:0;translate:0 28px}}
:root[data-motion-tier="essential"]::view-transition-group(*),
:root[data-motion-tier="essential"]::view-transition-old(*),
:root[data-motion-tier="essential"]::view-transition-new(*){animation:none!important}
/* JS fallback (browsers without cross-document view transitions) */
.mk-leaving main{opacity:0;translate:0 -14px;transition:opacity .22s var(--mk-ease-io),translate .22s var(--mk-ease-io)}
.mk-enter.mk-on main{animation:mk-vt-in .6s var(--mk-ease) both}

/* ---------- smooth anchors ---------- */
html.mk-on{scroll-behavior:smooth}

/* ---------- safety nets ---------- */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media print{
  .mk-on [data-reveal],.mk-on [data-draw],.mk-on .mk-wi{opacity:1!important;translate:none!important;scale:none!important;clip-path:none!important;animation:none!important}
  .mk-bar,.mk-arrival-canvas{display:none!important}
}