/* Mouse interactions follow the selected reference: magnetic controls, expanding fill and springing arrows. */
:where(a,button,summary,[role=tab]){-webkit-tap-highlight-color:transparent}
:where(a,button,summary,[role=tab]):focus-visible{outline:2px solid currentColor;outline-offset:5px}
:where(button,a,summary,[role=tab]).magnetic-control{translate:var(--magnetic-x,0px) var(--magnetic-y,0px);transition:translate .65s cubic-bezier(.18,1.65,.3,1),background-color .25s,color .25s}
:where(button,a,summary,[role=tab]).magnetic-control.is-magnetized{transition:translate .25s cubic-bezier(.2,.7,.3,1),background-color .25s,color .25s}
.magnetic-control:active{scale:.98}
.button,.nav-contact{position:relative;isolation:isolate;overflow:hidden;transform:none!important}
.button::before,.nav-contact::before{content:"";position:absolute;right:5px;top:50%;width:36px;height:36px;border-radius:50%;background:var(--accent);translate:0 -50%;scale:1;transition:scale .55s cubic-bezier(.2,.7,.3,1);z-index:-1;pointer-events:none}
.button:hover,.button:focus-visible,.nav .nav-contact:hover,.nav .nav-contact:focus-visible{background:var(--ink);color:var(--ink)}
.button:hover::before,.button:focus-visible::before,.nav-contact:hover::before,.nav-contact:focus-visible::before{scale:25}
.button>span,.nav-contact>span{position:relative;flex-shrink:0;z-index:1;transition:background-color .3s,color .3s;transform-origin:50% 50%}
.button:hover>span,.button:focus-visible>span,.nav-contact:hover>span,.nav-contact:focus-visible>span{background:var(--ink);color:var(--bg);animation:button-arrow-nod .85s ease-out infinite}
.button-light::before{background:var(--ink)}
.button-light:hover,.button-light:focus-visible{color:var(--bg)}
.nav>a:not(.nav-contact){position:relative;isolation:isolate;overflow:hidden}
.nav>a:not(.nav-contact)::after{content:"";position:absolute;inset:-8px;border-radius:50%;background:var(--accent);scale:0;z-index:-1;transition:scale .45s cubic-bezier(.2,.7,.3,1);transform:rotate(-12deg)}
.nav>a:not(.nav-contact):hover::after,.nav>a:not(.nav-contact):focus-visible::after{scale:1.3}
.text-link,.finale-secondary,.pose-card>a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .45s,color .25s}
.text-link:hover,.finale-secondary:hover,.pose-card>a:hover{background-size:100% 1px}
.text-link>span{display:inline-block;transition:transform .4s cubic-bezier(.2,1.6,.4,1)}
.text-link:hover>span{transform:translate(4px,-4px) rotate(-15deg)}
.faq-list summary{cursor:pointer}
.faq-list summary>span{transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.faq-list details[open] summary>span{transform:rotate(45deg)}
.motion-paused .magnetic-control{translate:0 0!important}
.motion-paused .button::before,.motion-paused .nav-contact::before{transition:none!important}
@keyframes button-arrow-nod{0%,100%{rotate:0deg}35%{rotate:-25deg}70%{rotate:4deg}}
@media(hover:none),(pointer:coarse){.magnetic-control{translate:0 0!important}.button:hover>span,.nav-contact:hover>span{animation:none}.button:hover,.nav .nav-contact:hover{background:var(--ink);color:var(--bg)}.button:hover::before,.nav-contact:hover::before{scale:1}}
@media(prefers-reduced-motion:reduce){.magnetic-control{translate:0 0!important}.button:hover>span,.nav-contact:hover>span{animation:none!important}}
.hero.is-offscreen .sticker,.hero.is-offscreen .sofie-breath,.hero.is-offscreen .sofie-wing,.hero.is-offscreen .sofie-blink{animation-play-state:paused}
.nav>a:not(.nav-contact):hover,.nav>a:not(.nav-contact):focus-visible{color:var(--ink)}
.button>span,.nav-contact>span{translate:var(--magnetic-inner-x,0px) var(--magnetic-inner-y,0px);transition:translate .65s cubic-bezier(.18,1.65,.3,1),background-color .3s,color .3s}
.reference-controls button:hover,.reference-controls button:focus-visible{background:var(--bg);color:var(--ink)}
.back-top:hover,.back-top:focus-visible{background:var(--ink);color:var(--bg)}
.motion-toggle:hover,.menu-toggle:hover{background:var(--accent);color:var(--ink)}
.guide-questions button:hover,.data-tabs button:hover,.sofie-video-controls button:hover{background:var(--accent);color:var(--ink)}
.motion-paused .button>span,.motion-paused .nav-contact>span{translate:0 0!important}
@media(hover:none),(pointer:coarse){.button>span,.nav-contact>span{translate:0 0!important}}