/* An upward unfolding capsule, inspired by GSAP's orchestrated easeReverse demo.
   Each moving layer is controlled by site.js, including interrupted reversals. */
/* Arrival belongs to the outer wrapper; menu width and brand hover retain
   their independent transforms. No hidden baseline or JavaScript is required. */
.floating-nav:not([data-entry-settled]){animation:nav-arrive 480ms cubic-bezier(.22,1,.36,1) 100ms both}
.floating-nav:not([data-entry-settled]) .nav-monogram{animation:nav-brand-arrive 360ms cubic-bezier(.22,1,.36,1) 180ms both}
@keyframes nav-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes nav-brand-arrive{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:translateX(0)}}
.floating-nav{--nav-open-width:min(349px,calc(100vw - 76px))}
.nav-capsule{--nav-closed-width:213px;box-sizing:border-box;overflow:hidden;flex-wrap:nowrap;min-width:var(--nav-closed-width);transition:min-width 500ms cubic-bezier(.2,.8,.2,1)}
.nav-capsule .nav-monogram{position:relative;flex:0 0 54px;min-height:44px;padding:0;transform:none;overflow:hidden;transition:flex-basis 500ms cubic-bezier(.2,.8,.2,1)}
.nav-brand-short,.nav-brand-name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;transition:opacity 180ms,transform 450ms cubic-bezier(.2,.8,.2,1)}
.nav-brand-short{padding-right:5px;transform:rotate(-10deg)}
.nav-brand-name{font:700 18px/1.3 var(--font-body);letter-spacing:-.045em;opacity:0;transform:translateX(12px)}
.nav-capsule button{flex:1 0 auto;min-width:135px}
.nav-capsule #nav-current{white-space:nowrap}
.nav-plus{display:block;flex:none;transform-origin:50% 50%;will-change:transform}
.nav-panel{width:var(--nav-open-width);transform-origin:0 100%;border-radius:16px;will-change:clip-path,transform,opacity}
.nav-panel[hidden]{display:none}
.nav-panel[inert]{pointer-events:none}
.nav-panel a{position:relative;overflow:visible}
.nav-panel .nav-label-clip{display:block;overflow:clip;padding:4px 0;margin:-4px 0}
.nav-panel .nav-label-text{display:block;font:inherit;letter-spacing:inherit;text-transform:inherit;white-space:nowrap;will-change:transform}
.nav-panel a>small{position:relative;white-space:nowrap}
.nav-panel .nav-wall-link{flex-wrap:wrap;gap:6px 12px}
.nav-panel .nav-wall-link>span{max-width:100%;font-size:25px}
.nav-panel .nav-wall-link>small{white-space:normal}
.nav-panel{max-height:calc(100svh - 140px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.nav-highlight{left:12px;right:12px;border-radius:8px;will-change:transform,opacity}
.nav-panel a:focus-visible{outline:1px solid var(--wine);outline-offset:4px;border-radius:3px}
@media(min-width:701px){
  .nav-capsule:is(:hover,:focus-within){min-width:var(--nav-open-width)}
  .nav-capsule:is(:hover,:focus-within) .nav-monogram,.floating-nav[data-open=true] .nav-monogram{flex:1 1 190px}
  .nav-capsule:is(:hover,:focus-within) .nav-brand-short,.floating-nav[data-open=true] .nav-brand-short{opacity:0;transform:translateX(-8px) rotate(-10deg)}
  .nav-capsule:is(:hover,:focus-within) .nav-brand-name,.floating-nav[data-open=true] .nav-brand-name{opacity:1;transform:translateX(0)}
}
@media(max-width:700px){
  .floating-nav{--nav-open-width:min(285px,calc(100vw - 65px))}
  .nav-capsule{--nav-closed-width:178px}
  .nav-capsule .nav-monogram{flex-basis:43px}
  .nav-capsule button{min-width:119px}
  .nav-panel a{gap:10px}
  .nav-panel a>small{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .floating-nav:not([data-entry-settled]),.floating-nav:not([data-entry-settled]) .nav-monogram{animation:none}
  .nav-capsule,.nav-panel,.nav-label-text,.nav-plus,.nav-highlight{will-change:auto}
  .nav-capsule,.nav-capsule .nav-monogram,.nav-brand-short,.nav-brand-name{transition:none}
}