
/* (motion2) One motion language for the whole site: the same three curves everywhere, quick, never in the way.
   Everything here is an extra: with this block gone, or with "reduce motion" on, every page looks and works as before.
   motion2 adds the visible pieces: a spotlight and edge glow on cards, magnetic buttons, sparks on click, headlines that blur in
   word by word, cards that rise in as you scroll, a theme toggle that spins. Pages opt in by selector below or with data-tl-* attributes. */
:root{--tl-ease:cubic-bezier(.23,1,.32,1);--tl-ease-back:cubic-bezier(.34,1.56,.64,1);--tl-ease-io:cubic-bezier(.77,0,.175,1)}
.tl-glide{position:absolute;left:0;top:0;width:1px;height:1px;background:#00ff88;transform-origin:0 0;pointer-events:none;opacity:0}
.tl-glide.tl-glide-on{opacity:1}
[data-tl-glide]{position:relative}
/* a spotlight that follows the pointer, and a glow on the edge nearest to it */
.tl-spot,.tl-edge{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s}
.tl-spot{background:radial-gradient(260px circle at var(--tl-mx,50%) var(--tl-my,50%),rgba(0,255,136,.17),transparent 62%)}
.tl-edge{inset:-1px;padding:1px;background:radial-gradient(220px circle at var(--tl-mx,50%) var(--tl-my,50%),rgba(0,255,136,.75),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.tl-spot-host:hover>.tl-spot,.tl-spot-host:hover>.tl-edge{opacity:1}
.tl-spark{position:fixed;left:0;top:0;width:3px;height:12px;border-radius:2px;background:#00ff88;pointer-events:none;z-index:2147483002;transform-origin:50% 0}
.tl-w{display:inline-block}
@media (prefers-reduced-motion:no-preference){
/* switches: the thumb stretches under your finger and lands with a small overshoot */
html .tlset-sw::after{transition:transform .38s var(--tl-ease-back),width .2s var(--tl-ease)}
html .tlset-sw:not(:disabled):active::after{width:25px}
html .tlset-sw[aria-checked="true"]:not(:disabled):active::after{transform:translateX(13px)}
html .tl-switch i{transition:left .36s var(--tl-ease-back),width .18s var(--tl-ease),background .15s}
html .tl-switch:active i{width:15px}
html .tl-switch.on:active i{left:11px}
html .lf-switch i::after{transition:transform .36s var(--tl-ease-back),width .18s var(--tl-ease)}
html .lf-switch:active i::after{width:21px}
html .lf-switch:active input:checked + i::after{transform:translateX(9px)}
/* a toast lands with a small settle; it leaves the way it always did */
html .tlk-toast.on{transition:opacity .2s ease,transform .44s var(--tl-ease-back)}
/* headlines on the company pages: held back before the first paint, then the words arrive one after another
   (if the script never splits one, it shows after 1.2 s anyway) */
html.tl-splitting :is(.doc h1:not(.h3-h1),.hero h1,main > .wrap h1):not(.tl-split){opacity:0;animation:tlSafe .01s 1.2s forwards}
html.tl-js .tl-split{animation:none}
html.tl-js .tl-split .tl-w{opacity:0;filter:blur(9px);transform:translateY(12px);transition:opacity .7s var(--tl-ease),filter .7s var(--tl-ease),transform .7s var(--tl-ease);transition-delay:calc(var(--tl-i,0) * 75ms + 60ms)}
html.tl-js .tl-split.tl-in .tl-w{opacity:1;filter:blur(0);transform:none}
/* cards rise into view as you scroll, staggered along the row (if the script never gets to them, they show after 2.4 s) */
html.tl-rising :is(.doc .card,.doc .stat,.wrap .card,.wrap .stat,.plans .plan,[data-tl-rise]){transition:opacity .65s var(--tl-ease),translate .75s var(--tl-ease);transition-delay:calc(var(--tl-i,0) * 70ms)}
html.tl-rising :is(.doc .card,.doc .stat,.wrap .card,.wrap .stat,.plans .plan,[data-tl-rise]):not(.tl-in){opacity:0;translate:0 20px;animation:tlSafe .01s 2.4s forwards}
html.tl-rising :is(.doc .card,.doc .stat,.wrap .card,.wrap .stat,.plans .plan,[data-tl-rise]).tl-in{opacity:1;translate:none;animation:none;transition-delay:calc(var(--tl-i,0) * 70ms)}
/* a plan card lifts under the pointer (the separate translate property, so its own transform is untouched) */
html.tl-rising :is(.doc .card,.doc .stat,.wrap .card,.wrap .stat,.plans .plan,[data-tl-rise]).tl-in.tl-lift{transition:opacity .65s var(--tl-ease),translate .4s var(--tl-ease-back),box-shadow .35s;transition-delay:0s}
html.tl-rising :is(.doc .card,.doc .stat,.wrap .card,.wrap .stat,.plans .plan,[data-tl-rise]).tl-in.tl-lift:hover{translate:0 -4px}
}
@keyframes tlSafe{to{opacity:1;translate:none}}
