/* footer3d: styles for js/fx/footer3d.js */

/* The mark: a small three.js icosahedron beside the logo dot. JS adds the slot only with WebGL. */
.f3d-brand{display:inline-flex;align-items:center;gap:2px}
.f3d-mark{flex:none;width:96px;height:96px;margin:-12px 0 -12px -10px;pointer-events:none}
.f3d-mark canvas{display:block;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.f3d-mark.on canvas{opacity:1}
.f3d-still .f3d-mark,.f3d-off .f3d-mark{display:none}
.f3d-brand:not(.f3d-still):not(.f3d-off) .logo>span{text-shadow:0 0 var(--f3d-glow,0px) #85e0edb0}
@media(max-width:700px){.f3d-mark{width:72px;height:72px;margin:-10px 0 -10px -8px}}

/* "Get in touch": the arrow leaves to the top right and comes back from the bottom left; the circle draws around. */
.fbig a svg circle{stroke-dasharray:69.2;transform:rotate(-90deg);transform-origin:12px 12px}
/* The line box keeps its 1.55em height (1.1em + padding), so the row does not move; the underline sits under the words. */
.fbig a .f3d-t{line-height:1.1;padding:.225em 0;background:linear-gradient(currentColor,currentColor) 100% 100%/0 2px no-repeat content-box;transition:background-size .55s cubic-bezier(.2,.7,.2,1)}
.fbig a:hover .f3d-t,.fbig a:focus-visible .f3d-t{background-position:0 100%;background-size:100% 2px}
@media(prefers-reduced-motion:no-preference){
.fbig a:hover svg path,.fbig a:focus-visible svg path{animation:f3d-arrow .75s cubic-bezier(.6,0,.2,1)}
.fbig a:hover svg circle,.fbig a:focus-visible svg circle{animation:f3d-ring .9s cubic-bezier(.5,0,.2,1)}
}
@keyframes f3d-arrow{45%{transform:translate(15px,-15px);opacity:0}46%{transform:translate(-15px,15px);opacity:0}100%{transform:none;opacity:1}}
@keyframes f3d-ring{from{stroke-dashoffset:69.2}to{stroke-dashoffset:0}}

/* The .fcols links: a short underline slide, in from the left and out to the right. */
.fcols a{background:linear-gradient(currentColor,currentColor) 100% 100%/0 1px no-repeat;transition:background-size .35s cubic-bezier(.2,.7,.2,1),color .2s}
.fcols a:hover,.fcols a:focus-visible{background-position:0 100%;background-size:100% 1px}

@media(prefers-reduced-motion:reduce){.fbig a .f3d-t,.fcols a,.f3d-mark canvas{transition:none}}