/* Music affordance: animated equalizer, independent of scrolling/marquee motion. */
.katerina-site #soundButton .music-equalizer{display:flex;align-items:center;justify-content:center;gap:3px;width:22px;height:24px;margin:0}
.katerina-site #soundButton .music-equalizer>i{display:block;flex:0 0 2px;height:20px;background:currentColor;transform-origin:center;animation:pilates-equalizer .85s ease-in-out infinite alternate}
.katerina-site #soundButton .music-equalizer>i:nth-child(2){animation-duration:.63s;animation-delay:-.3s}
.katerina-site #soundButton .music-equalizer>i:nth-child(3){animation-duration:.95s;animation-delay:-.6s}
.katerina-site #soundButton .music-equalizer>i:nth-child(4){animation-duration:.72s;animation-delay:-.15s}
.katerina-site #soundButton .music-equalizer>i:nth-child(5){animation-duration:.8s;animation-delay:-.45s}
@keyframes pilates-equalizer{from{transform:scaleY(.22)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.katerina-site #soundButton .music-equalizer>i{animation:none;transform:scaleY(.65)}.katerina-site #soundButton .music-equalizer>i:nth-child(even){transform:scaleY(1)}}

/* Equalizer reports actual playback rather than a decorative always-on state. */
.katerina-site #soundButton .music-equalizer>i{animation-play-state:paused;transform:scaleY(.25)}
.katerina-site #soundButton.music-playing .music-equalizer>i{animation-play-state:running}
.music-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* The full navigation page folds from the bottom, beneath the persistent dock. */
.katerina-site .menu-scene{position:fixed;inset:0;z-index:80;perspective:1200px;perspective-origin:50% 100%;visibility:hidden;pointer-events:none;isolation:isolate}
.katerina-site .menu-scene.is-active{visibility:visible;pointer-events:auto}
.katerina-site .menu-scene .menu{position:absolute;inset:0;z-index:auto;transform-origin:50% 100%;transform:translateY(12%) rotateX(90deg);opacity:0;backface-visibility:hidden;will-change:transform,opacity;transition:transform .78s cubic-bezier(.55,0,.8,.35),opacity .45s ease-in;overflow-y:auto;overscroll-behavior:contain}
.katerina-site .menu-scene .menu.open{transform:translateY(0) rotateX(0);opacity:1;transition-timing-function:cubic-bezier(.18,.85,.22,1),ease-out}
.katerina-site .menu-inner{min-height:100%;padding-bottom:130px}
.katerina-site .dock{z-index:90}
.katerina-site #menuButton{position:relative;flex-shrink:0;height:35px}
@media(max-width:700px){.katerina-site .menu-inner{padding-top:65px;padding-bottom:125px}.katerina-site .menu-note{margin-bottom:35px}}
@media(prefers-reduced-motion:reduce){.katerina-site .menu-scene{perspective:none}.katerina-site .menu-scene .menu{transition:none;transform:none}.katerina-site .menu-scene .menu:not(.open){opacity:0}.katerina-site .menu-scene .menu.open{opacity:1}}

/* Keep the viewport gutter and dock geometry stable throughout menu motion. */
html{scrollbar-gutter:stable}
.katerina-site #menuButton .menu-icon{display:block;width:32px;height:32px;overflow:visible;margin:0 auto}
.katerina-site #menuButton .menu-icon path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;vector-effect:non-scaling-stroke}
body.katerina-site.menu-open .dock{background:#F4C64E;color:#241B05}
body.katerina-site.menu-open .dock>a>img{filter:none}
/* Paint the reserved scrollbar gutter with the open navigation surface. */
html:has(body.menu-open){background:#171716}

/* The closed burger opens vertically on hover, without shifting its button. */
.katerina-site #menuButton .menu-icon path{transition:transform .28s cubic-bezier(.2,.8,.25,1)}
@media(hover:hover) and (pointer:fine){
 .katerina-site #menuButton[aria-expanded="false"]:hover .menu-icon[data-progress="0.000"] path:first-child{transform:translateY(-3px)}
 .katerina-site #menuButton[aria-expanded="false"]:hover .menu-icon[data-progress="0.000"] path:last-child{transform:translateY(3px)}
}
.katerina-site #menuButton[aria-expanded="true"] .menu-icon path{transform:none}
@media(prefers-reduced-motion:reduce){.katerina-site #menuButton .menu-icon path{transition:none}}

.katerina-site .menu-scene .menu{background:var(--ink);color:var(--paper)}
.katerina-site .menu-inner{padding-top:70px}

.katerina-site .menu-note .menu-accent{color:var(--acid)}
.katerina-site .menu nav small{background:none;color:var(--paper);opacity:1;padding:0}