/* Text flip inspired by Eduard Bodak's navigation, using portfolio tokens. */
.language:active{transform:none}
.language{padding:0}
.nav-hover-label{display:grid;position:relative;min-width:0;perspective:400px;transform-style:preserve-3d;pointer-events:none}
.nav-hover-original,.nav-hover-copy{grid-area:1/1;min-width:0;backface-visibility:hidden}
.nav-hover-copy{position:relative;isolation:isolate;justify-self:start;max-width:100%;opacity:0;transform:translate3d(0,100%,-60px) rotateX(-100deg);color:var(--text)}
.nav-hover-copy::before{content:'';position:absolute;inset:-4px -6px;z-index:-1;background:var(--surface);border-radius:4px}
.segmented .nav-hover-label{width:max-content;max-width:100%;margin-inline:auto}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .nav-hover-original,.nav-hover-copy{transition:transform 220ms var(--ease-out),opacity 160ms ease}
 .nav-hover-original{transform-origin:center bottom}
 .nav-hover:hover .nav-hover-original{transform:translate3d(0,-35%,-24px) rotateX(-54deg);opacity:0}
 .nav-hover:hover .nav-hover-copy{transform:translate3d(0,0,0) rotateX(0);opacity:1}
}
@media(prefers-reduced-motion:reduce){
 .nav-hover-copy{display:none}
}