/* The same ivory navigation, lit by each scene. No layout shifts. */
.header{--menu-ink:.27;--menu-blur:4px;--menu-angle:-3deg;--menu-depth:#3027182c}
.header[data-menu-scene=collections]{--menu-ink:.16;--menu-blur:7px;--menu-angle:2deg;--menu-depth:#574d3620}
.header[data-menu-scene=character]{--menu-ink:.25;--menu-blur:4px;--menu-angle:-5deg;--menu-depth:#493b2930}
.header[data-menu-scene=gallery]{--menu-ink:.12;--menu-blur:9px;--menu-angle:4deg;--menu-depth:#64573a18}
.header[data-menu-scene=details]{--menu-ink:.21;--menu-blur:5px;--menu-angle:-2deg;--menu-depth:#51432b28}
.header[data-menu-scene=team]{--menu-ink:.13;--menu-blur:8px;--menu-angle:1deg;--menu-depth:#635b4320}
.header[data-menu-scene=contact]{--menu-ink:.19;--menu-blur:6px;--menu-angle:-4deg;--menu-depth:#343b3228}
.header .menu-light-panel,.header.is-scrolled .menu-light-wide{opacity:var(--menu-ink);transition:opacity .8s ease}
.header.is-scrolled .menu-light-panel,.header:not(.is-scrolled) .menu-light-wide{opacity:0}
.header .menu-light:before{filter:blur(var(--menu-blur));rotate:var(--menu-angle);transition:filter 1s ease,rotate 1s ease}
.header:before,.header.is-scrolling:before{box-shadow:0 12px 32px var(--menu-depth),0 2px 6px #302b1710;transition:opacity .25s,box-shadow .8s ease}
@media(min-width:761px) and (prefers-reduced-motion:no-preference){
 .header.is-scrolled>.wordmark{translate:calc(var(--menu-drift,0)*18px) 0;transition:translate .7s ease,color .25s}
 .header nav>a:nth-child(-n+3){translate:calc(var(--menu-drift,0)*clamp(32px,7vw,90px)) 0;transition:translate .7s ease}
 .header.hero-menu-exit:not(:hover):not(:focus-within) nav .nav-dealer,
 .header.hero-menu-exit:not(:hover):not(:focus-within) nav a[href="#contact"]{opacity:0;translate:18px 0;pointer-events:none}
 .header:hover nav>a:nth-child(-n+3),.header:focus-within nav>a:nth-child(-n+3),.header:hover>.wordmark,.header:focus-within>.wordmark{translate:0 0}
 .header nav .nav-dealer,.header nav a[href="#contact"]{transition:opacity .28s ease,translate .35s ease}
 .header.between-scenes.is-scrolling:not(:hover):not(:focus-within) nav .nav-dealer,
 .header.between-scenes.is-scrolling:not(:hover):not(:focus-within) nav a[href="#contact"]{opacity:0;translate:0 -4px;pointer-events:none}
}
@media(max-width:760px){
 .header .menu-light-panel,.header.is-scrolled .menu-light-wide{opacity:calc(var(--menu-ink)*.75)}
 .header.is-scrolled .menu-light-panel,.header:not(.is-scrolled) .menu-light-wide{opacity:0}
}
@media(prefers-reduced-motion:reduce){
 .header .menu-light,.header .menu-light:before,.header:before{transition:none}
 .header .menu-light:before{rotate:0deg}
}