/* Shared effects layer: page transitions, film grain, cursor labels, line reveals, marquees, spotlights. */

/* page-to-page transition (browsers that support cross-document view transitions) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:fx-vt-out .55s cubic-bezier(.7,0,.3,1) both}
::view-transition-new(root){animation:fx-vt-in .8s cubic-bezier(.2,.7,.1,1) both}
@keyframes fx-vt-out{to{opacity:.2;transform:scale(.94) translateY(-2%);filter:blur(3px)}}
@keyframes fx-vt-in{from{clip-path:inset(100% 0 0 0 round 40px 40px 0 0)}to{clip-path:inset(0 0 0 0 round 0)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* film grain */
.fx-grain{position:fixed;inset:-50%;pointer-events:none;z-index:95;opacity:.065;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:fx-grain 1.2s steps(6) infinite}
@keyframes fx-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.motion-off .fx-grain{animation:none}
@media (max-width:700px),(pointer:coarse){.fx-grain{display:none}}

/* scroll progress for pages without one */
.fx-progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--orange);transform-origin:left;transform:scaleX(0);z-index:101;pointer-events:none}

/* cursor ring with a word inside */
.cursor-ring .fx-cursor-txt{position:absolute;inset:0;display:grid;place-items:center;font:500 10px/1 'DM Sans',Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#000;opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s;white-space:nowrap}
body:not(.motion-off) .cursor-ring.fx-label{width:86px!important;height:86px!important;background:var(--orange)!important;border-color:var(--orange)!important;mix-blend-mode:normal!important;transition:width .35s cubic-bezier(.2,.7,.1,1),height .35s cubic-bezier(.2,.7,.1,1),background .2s}
.cursor-ring.fx-label .fx-cursor-txt{opacity:1;transform:none}
.janus-menu .cursor-ring.fx-label{background:#fff!important}

/* headings revealed line by line */
.fx-line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.fx-line>span{display:inline-block}
.js-motion .fx-split:not(.fx-in) .fx-line>span{transform:translateY(108%)}
.js-motion .fx-split.fx-in .fx-line>span{transform:none;transition:transform 1.05s cubic-bezier(.2,.7,.1,1);transition-delay:calc(var(--fx-l,0) * .085s)}

/* generic reveal */
.js .fx-rv{opacity:0;transform:translateY(30px)}
.fx-rv.in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.7,.1,1),transform .9s cubic-bezier(.2,.7,.1,1);transition-delay:calc(var(--fx-i,0) * .08s)}
.motion-off .fx-rv{opacity:1!important;transform:none!important}

/* marquee */
.fx-marquee-track{display:flex;width:max-content;animation:fx-mq var(--fx-mq,36s) linear infinite}
.fx-marquee-track[data-reverse]{animation-direction:reverse}
@keyframes fx-mq{to{transform:translateX(-50%)}}
.motion-off .fx-marquee-track{animation:none}

/* spotlight that follows the pointer */
.fx-spot{position:relative;isolation:isolate}
.fx-spot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,103,37,.17),transparent 62%);opacity:0;transition:opacity .45s}
.fx-spot:hover::after{opacity:1}

/* scramble text keeps its width while letters settle */
.fx-scramble{font-variant-numeric:tabular-nums}