/* =============================================================================
   MENU.CSS — MENU OVERLAY (SOVEREIGN)

   Purpose:
   - Owns ONLY the fullscreen menu overlay layout + menu-specific interactions.
   - No menu rules live in style.css.

   Sections:
   01) Overlay variables
   02) Visibility + open/close motion
   03) Overlay shell (glass)
   04) Isolation (scope reset)
   05) Overlay inner + blueprint layout (wrapper → col A / col B)
   06) Column A (controls / packs / plain logo / typo + essence)
   07) Column B (preview + rail)
   08) Right rail (labels + breathing lanes)
   09) Packs (left bottom)
   10) Close button
   11) Reduced motion
   12) Mobile
============================================================================= */

:root{
  /* Default; menu overlay re-declares locally for safety */
  --menu-accent: var(--color-primary1);
}

/* =============================================================================
   01) OVERLAY VARIABLES
============================================================================= */

#menu-overlay.menu-overlay{
  --menu-bg: var(--bg-color, #000);
  --menu-fg: var(--text-color, #fff);
  --menu-fg-muted: var(--text-secondary-color, rgba(255,255,255,0.7));
  --menu-accent: var(--color-primary1);

  --menu-border: rgba(255,255,255,0.18);
  --menu-sep: rgba(255,255,255,0.12);

  --menu-glass: rgba(0,0,0,0.48);
  --menu-glass-strong: rgba(0,0,0,0.58);
  --menu-glass-wash: rgba(255,255,255,0.07);

  --menu-accent-filter: brightness(0) saturate(100%) invert(57%) sepia(11%) saturate(621%) hue-rotate(343deg) brightness(92%) contrast(88%);

  /* Hover motion (luxury micro-interaction) */
  --menu-hover-ease: cubic-bezier(0.22,1,0.36,1);
  --menu-hover-scale: 1.08;
  --menu-hover-duration: 520ms;
  --menu-hover-opacity-duration: 240ms;
  --menu-hover-pulse-duration: 760ms;

  /* Pack toggle: ensure true “edge contact” even if the SVG has internal whitespace */
  --menu-pack-toggle-nudge: -10px;

  /* Harmonic spacing token (matches your sketch G1) */
  --menu-g1: 46px;

  /* Shell gutters (match site language; no clamp) */
  --menu-gutter: var(--footer-gutter, 56px);
  --menu-vpad: 90px;

  /* Rail breathing (fixed, no clamp) */
  --menu-rail-pad: 34px;
  --menu-rail-label-pad: 34px;
  --menu-rail-font: 1.08rem;
}

@supports (color: color-mix(in srgb, #fff 50%, transparent)){
  #menu-overlay.menu-overlay{
    --menu-border: color-mix(in srgb, var(--menu-fg) 18%, transparent);
    --menu-sep: color-mix(in srgb, var(--menu-fg) 12%, transparent);

    --menu-glass: color-mix(in srgb, var(--menu-bg) 52%, transparent);
    --menu-glass-strong: color-mix(in srgb, var(--menu-bg) 64%, transparent);
    --menu-glass-wash: color-mix(in srgb, var(--menu-fg) 7%, transparent);
  }
}

/* =============================================================================
   02) VISIBILITY + OPEN/CLOSE MOTION
============================================================================= */

#menu-overlay .menu-overlay-inner{
  opacity: 0;
  transform: translateY(24px);
  transition: transform 0.8s cubic-bezier(0.22,1,0.36,1), opacity 0.6s ease;
}
#menu-overlay.active .menu-overlay-inner{ opacity: 1; transform: translateY(0); }
#menu-overlay.closing .menu-overlay-inner{
  opacity: 0;
  transform: translateY(32px);
  transition: transform 1.1s cubic-bezier(0.22,1,0.36,1), opacity 0.8s ease;
}

/* Lock scroll while menu is open */
body.menu-open,
body.menu-active{ overflow: hidden; }

/* Reveal rail items (separators + lanes) */
#menu-overlay .menu-col-b-section-b .menu-sep,
#menu-overlay .menu-col-b-section-b .menu-item{
  opacity: 0;
  transform: none !important; /* prevent baseline drift / uneven top-bottom gaps */
  transition: opacity 0.55s ease;
  will-change: opacity;
}

/* JS stagger classes (menu.js) — opacity only (no translate drift) */
#menu-overlay .menu-col-b-section-b .menu-sep.menu-animate-in,
#menu-overlay .menu-col-b-section-b .menu-item.menu-animate-in{
  opacity: 0.9;
  transform: none !important;
}

#menu-overlay .menu-col-b-section-b .menu-sep.menu-animate-out,
#menu-overlay .menu-col-b-section-b .menu-item.menu-animate-out{
  opacity: 0;
  transform: none !important;
}

/* Links: no underline inside menu */
#menu-overlay a,
#menu-overlay a:hover,
#menu-overlay .menu-link,
#menu-overlay .menu-link:hover{
  text-decoration: none !important;
}

/* Menu button */
#menu-button-container{
  width:60px;height:60px;display:flex;justify-content:center;align-items:center;position:relative;order:1;
}
#menu-button{
  position:relative;width:35px;height:35px;background:transparent;border:none;border-radius:50%;
  cursor:pointer;display:flex;justify-content:center;align-items:center;transform-origin:center;
}
#menu-button .line{
  position:absolute;top:50%;left:50%;
  width:55%;height:1.2px;background-color:var(--text-color);
  transform-origin:center;
  transition:transform 0.45s cubic-bezier(0.22,1,0.36,1),background-color 0.3s ease;
  backface-visibility:hidden;
}
#menu-button .line-top{transform:translate(-50%,calc(-50% - 4px));}
#menu-button .line-bottom{transform:translate(-50%,calc(-50% + 4px));}
#menu-button:not(.menu-open):hover{animation:menu-hover-pulse 0.35s forwards;}
@keyframes menu-hover-pulse{0%{transform:scale(1);}40%{transform:scale(0.88);}70%{transform:scale(1.06);}100%{transform:scale(1);}}

@keyframes menu-icon-breathe{
  0%{transform:scale(1);}
  45%{transform:scale(var(--menu-hover-scale));}
  100%{transform:scale(1);}
}
#menu-button.menu-open .line-top{transform:translate(-50%,-50%) rotate(45deg);}
#menu-button.menu-open .line-bottom{transform:translate(-50%,-50%) rotate(-45deg);}
#menu-button.menu-open:hover .line-top,
#menu-button.menu-open:hover .line-bottom{
  transform:translate(-50%,-50%) rotate(0deg);
  background-color:var(--color-primary7);
}

/* =============================================================================
   03) OVERLAY SHELL (GLASS)
============================================================================= */

#menu-overlay.menu-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;

  color: var(--menu-fg);
  fill: currentColor;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--menu-glass) 88%, var(--menu-glass-wash)) 0%,
      color-mix(in srgb, var(--menu-glass-strong) 90%, var(--menu-glass-wash)) 52%,
      color-mix(in srgb, var(--menu-glass) 88%, var(--menu-glass-wash)) 100%
    );

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  transition: opacity 260ms ease, visibility 260ms ease, color 260ms ease;
}

#menu-overlay.menu-overlay.is-open,
#menu-overlay.menu-overlay[aria-hidden="false"],
#menu-overlay.active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* While menu is open: hide stage circle */
body.menu-open .stage-circle,
body.menu-active .stage-circle{ opacity: 0 !important; filter: none !important; }
#menu-overlay.active ~ .stage-circle,
#menu-overlay.is-open ~ .stage-circle,
#menu-overlay[aria-hidden="false"] ~ .stage-circle{ opacity: 0 !important; filter: none !important; }

/* =============================================================================
   04) ISOLATION (SCOPE RESET)
============================================================================= */

#menu-overlay,
#menu-overlay *{ box-sizing: border-box; }

#menu-overlay img,
#menu-overlay svg{ max-width: 100%; height: auto; }

/* Screen-reader only (used to keep preview titles accessible while icons are visible) */
.sr-only,
#menu-overlay .sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#menu-overlay .menu-typo-logo,
#menu-overlay .menu-plain-logo{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* =============================================================================
   05) OVERLAY INNER + BLUEPRINT LAYOUT (WRAPPER → COL A / COL B)
============================================================================= */

#menu-overlay .menu-overlay-inner{
  width: 100vw;
  height: 100vh;

  border: none;
  border-radius: 0;
  background: transparent;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: stretch;

  position: relative;

  --menu-vline-height: 100%;
}

#menu-overlay .menu-wrapper{
  grid-column: 1 / -1;
  grid-row: 1;
  height: 100%;
  width: 100%;
  position: relative;
}

/* Wrapper-level pack toggle (must sit on the true viewport edge) */
#menu-overlay .menu-pack-toggle{
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 72px;
  height: 72px;

  margin: 0;
  padding: 0;

  border: none;
  background: transparent;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  opacity: 0.86;
  cursor: pointer;
  z-index: 100001;

  transition: opacity var(--menu-hover-opacity-duration) ease;
}

#menu-overlay .menu-pack-toggle:hover,
#menu-overlay .menu-pack-toggle:focus-visible{ opacity: 1; outline: none; }
#menu-overlay .menu-pack-toggle:active{ opacity: 0.98; }

#menu-overlay .menu-pack-toggle img{
  width: 40px;
  height: 40px;
  display: block;
  margin: 0;
  padding: 0;

  transform: translateX(var(--menu-pack-toggle-nudge)) scale(1);
  transform-origin: center;
  will-change: transform, filter;
  transition: transform var(--menu-hover-duration) var(--menu-hover-ease), filter 260ms ease;
}

@keyframes menu-pack-toggle-breathe{
  0%{transform:translateX(var(--menu-pack-toggle-nudge)) scale(1);} 45%{transform:translateX(var(--menu-pack-toggle-nudge)) scale(var(--menu-hover-scale));} 100%{transform:translateX(var(--menu-pack-toggle-nudge)) scale(1);}
}

#menu-overlay .menu-pack-toggle:hover img,
#menu-overlay .menu-pack-toggle:focus-visible img{ animation: menu-pack-toggle-breathe var(--menu-hover-pulse-duration) var(--menu-hover-ease) both; }

#menu-overlay .menu-pack-toggle:active img{ transform: translateX(var(--menu-pack-toggle-nudge)) scale(0.98); }

/* Two main columns */
#menu-overlay .menu-columns{
  height: 100%;
  width: 100%;

  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: stretch;

  column-gap: 0;

  padding: var(--menu-vpad) var(--menu-gutter);
}

/* =============================================================================
   06) COLUMN A
============================================================================= */

#menu-overlay .menu-col-a{
  height: 100%;
  display: grid;

  grid-template-columns: max-content 1px minmax(0, 1fr);
  align-items: stretch;

  column-gap: var(--menu-g1);
  justify-content: start;
}

#menu-overlay .menu-col-a-sep{
  width: 1px;
  height: var(--menu-vline-height);
  align-self: center;
  background: var(--menu-sep);
  opacity: 0.9;
}

#menu-overlay .menu-col-a-section-a{
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;

  align-items: start;
  justify-items: center;

  width: max-content;
  justify-self: start;

  padding: 0;
}

#menu-overlay .menu-controls{
  display: grid;
  gap: 14px;
  justify-items: center;
  width: max-content;
  justify-self: center;
}

#menu-overlay .menu-control-icon{
  width: 44px;
  height: 44px;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;

  display: grid;
  place-items: center;

  opacity: 0.86;
  cursor: pointer;
  transform: scale(1);

  transition:
    transform var(--menu-hover-duration) var(--menu-hover-ease),
    opacity var(--menu-hover-opacity-duration) ease,
    filter 260ms ease,
    color 260ms ease;
}

#menu-overlay .menu-control-icon:hover,
#menu-overlay .menu-control-icon:focus-visible{ opacity: 1; outline: none; }

#menu-overlay .menu-control-icon img{
  width: 22px;
  height: 22px;
  display: block;
  background: transparent !important;
}

#menu-overlay .menu-control-icon:hover,
#menu-overlay .menu-control-icon:focus-visible{ animation: menu-icon-breathe var(--menu-hover-pulse-duration) var(--menu-hover-ease) both; }

#menu-overlay .menu-control-icon:active{ transform: scale(0.98); }

/* THEME / TEAM TOGGLE */
#menu-overlay #theme-toggle.menu-control-icon,
#menu-overlay #theme-toggle,
#menu-overlay .theme-toggle,
#menu-overlay [data-theme-toggle]{
  width: 30px;
  height: 30px;
  position: relative;
  color: var(--menu-fg);
  opacity: 0.98;

  display: grid;
  place-items: center;

  justify-self: center;
  align-self: center;
  margin-inline: auto;

  transition: transform var(--menu-hover-duration) var(--menu-hover-ease), opacity var(--menu-hover-opacity-duration) ease;
  transform: scale(1);
}

#menu-overlay #theme-toggle.menu-control-icon::before,
#menu-overlay #theme-toggle::before,
#menu-overlay .theme-toggle::before,
#menu-overlay [data-theme-toggle]::before{
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.98;
  display: block;
  transition: transform var(--menu-hover-duration) var(--menu-hover-ease), opacity var(--menu-hover-opacity-duration) ease;
}

#menu-overlay #theme-toggle.menu-control-icon:hover,
#menu-overlay #theme-toggle.menu-control-icon:focus-visible,
#menu-overlay #theme-toggle:hover,
#menu-overlay #theme-toggle:focus-visible,
#menu-overlay .theme-toggle:hover,
#menu-overlay .theme-toggle:focus-visible,
#menu-overlay [data-theme-toggle]:hover,
#menu-overlay [data-theme-toggle]:focus-visible{ transform: scale(var(--menu-hover-scale)); }

#menu-overlay #theme-toggle.menu-control-icon:active,
#menu-overlay #theme-toggle:active,
#menu-overlay .theme-toggle:active,
#menu-overlay [data-theme-toggle]:active{ transform: scale(0.98); }

/* Packs split (OVERLAYED — one centered footprint, two layers) */
#menu-overlay .menu-packs-split{
  position: relative;
  display: grid;
  place-items: center;

  padding-top: 28px;
  align-self: center;
  justify-self: center;

  margin: 0;
  width: fit-content;
  min-height: 160px;

  --pack-out: 360ms;
  --pack-in: 420ms;
  --pack-gap: 220ms;
}

#menu-overlay .menu-pack-slot{
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}

#menu-overlay .menu-pack-slot .menu-pack{
  display: grid;
  gap: 14px;
  justify-items: center;
  align-items: center;
}

#menu-overlay #menu-pack-music,
#menu-overlay #menu-pack-social{
  grid-area: 1 / 1;
  display: grid;
  place-items: center;

  align-self: center;
  justify-self: center;

  will-change: opacity, transform;
  transform-origin: center;
}

#menu-overlay #menu-pack-music{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity var(--pack-in) var(--menu-hover-ease), transform 720ms var(--menu-hover-ease), visibility 0s linear;
}

#menu-overlay #menu-pack-social{
  opacity: 0;
  visibility: hidden;
  transform: translateY(0);
  pointer-events: none;
  transition: opacity var(--pack-out) var(--menu-hover-ease), transform 720ms var(--menu-hover-ease), visibility 0s linear var(--pack-out);
}

#menu-overlay.packs-social #menu-pack-music,
#menu-overlay[data-pack-state="social"] #menu-pack-music,
#menu-overlay .menu-wrapper.packs-social #menu-pack-music,
#menu-overlay .menu-wrapper[data-pack-state="social"] #menu-pack-music,
#menu-overlay .menu-pack-toggle.is-social ~ .menu-columns #menu-pack-music,
#menu-overlay .menu-pack-toggle[aria-pressed="true"] ~ .menu-columns #menu-pack-music{
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity var(--pack-out) var(--menu-hover-ease), transform 720ms var(--menu-hover-ease), visibility 0s linear var(--pack-out);
}

#menu-overlay.packs-social #menu-pack-social,
#menu-overlay[data-pack-state="social"] #menu-pack-social,
#menu-overlay .menu-wrapper.packs-social #menu-pack-social,
#menu-overlay .menu-wrapper[data-pack-state="social"] #menu-pack-social,
#menu-overlay .menu-pack-toggle.is-social ~ .menu-columns #menu-pack-social,
#menu-overlay .menu-pack-toggle[aria-pressed="true"] ~ .menu-columns #menu-pack-social{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity var(--pack-in) var(--menu-hover-ease) var(--pack-gap), transform 720ms var(--menu-hover-ease) var(--pack-gap), visibility 0s linear;
}

#menu-overlay:not(.packs-social):not([data-pack-state="social"]) #menu-pack-music{
  transition: opacity var(--pack-in) var(--menu-hover-ease) var(--pack-gap), transform 720ms var(--menu-hover-ease) var(--pack-gap), visibility 0s linear;
}

#menu-overlay .menu-plain-logo-wrap{
  display: grid;
  align-items: end;
  padding-top: 22px;
  justify-items: center;
  width: max-content;
}

#menu-overlay .menu-col-a-section-b{
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;

  align-items: start;
  justify-items: start;

  padding: 0;
  min-width: 0;
  justify-self: start;
}

#menu-overlay .menu-typo-logo{ width: 140px; height: auto; opacity: 0.92; }

#menu-overlay .menu-site-essence{
  margin: 18px 0 0;
  max-width: 40ch;
  font-size: 0.95rem;
  line-height: 1.6;

  /* Luxury breathe + slightly more visible passing sheen (theme-compatible) */
  position: relative;
  display: inline-block;

  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--menu-fg-muted) 92%, transparent) 0%,
    color-mix(in srgb, var(--menu-fg) 28%, transparent) 45%,
    color-mix(in srgb, var(--menu-fg-muted) 92%, transparent) 100%
  );
  background-size: 240% 100%;
  background-position: 0% 50%;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 0 22px color-mix(in srgb, var(--menu-fg) 10%, transparent);

  animation:
    menu-essence-breathe 5.8s var(--menu-hover-ease) infinite,
    menu-essence-sheen 3.9s var(--menu-hover-ease) infinite;
}

@keyframes menu-essence-breathe{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-1.6px); }
  100%{ transform: translateY(0); }
}

@keyframes menu-essence-sheen{
  0%{ background-position: 0% 50%; filter: brightness(1); }
  50%{ background-position: 100% 50%; filter: brightness(1.06); }
  100%{ background-position: 0% 50%; filter: brightness(1); }
}

/* =============================================================================
   07) COLUMN B (PREVIEW + RAIL)
============================================================================= */

#menu-overlay .menu-col-b{
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
  align-items: stretch;
  justify-self: end;
}

#menu-overlay .menu-col-b-section-a{
  height: 100%;
  display: grid;

  align-items: end;
  align-self: end;
  justify-items: start;

  padding-right: 46px;
  padding-bottom: 0;
  margin-bottom: 0;

  min-width: 0;
  overflow: hidden;

  transform: translateX(0);
  transition: transform 650ms var(--menu-hover-ease);
}

#menu-overlay .menu-preview-title,
#menu-overlay .menu-preview-sub{
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Preview title becomes icon-led (text remains via .sr-only in HTML) */
#menu-overlay .menu-preview-title{
  display: flex;
  align-items: center;
  gap: 14px;
}

#menu-overlay .menu-preview-title img,
#menu-overlay .menu-preview-title svg{
  width: 22px;
  height: 22px;
  display: block;
  opacity: 0.92;
  margin-bottom: 18px;
  transition: filter 260ms ease, opacity 260ms ease;
}

body.dark-mode #menu-overlay .menu-preview-title img{ filter: invert(1); }
body.light-mode #menu-overlay .menu-preview-title img{ filter: none; }

@supports selector(:has(*)){
  #menu-overlay .menu-col-b:has(.menu-col-b-section-b .menu-item:hover) .menu-col-b-section-a{ transform: translateX(-18px); }
}

/* Section B (rail) — rotated as a block; children keep their own layout */
#menu-overlay .menu-col-b-section-b{
  height: 100%;
  width: 100%;

  display: flex;
  align-items: stretch;
  justify-content: flex-end;

  align-self: stretch;
  justify-self: end;

  /* LOCKED BASELINE ROTATION — DO NOT TOUCH */
  transform: rotate(180deg);
  transform-origin: center;
}

/* =============================================================================
   08) RIGHT RAIL (LABELS + BREATHING LANES)
============================================================================= */

/* Team compatibility + smooth theme-change for MENU ITEMS only */
#menu-overlay .menu-col-b-section-b,
#menu-overlay .menu-col-b-section-b .menu-item,
#menu-overlay .menu-col-b-section-b .menu-link{
  color: var(--menu-fg);
  transition: color 260ms ease;
}

/* Hover color must be Primary 1 */
#menu-overlay .menu-col-b-section-b .menu-item:hover,
#menu-overlay .menu-col-b-section-b .menu-item:focus-within,
#menu-overlay .menu-col-b-section-b .menu-link:hover,
#menu-overlay .menu-col-b-section-b .menu-link:focus-visible{
  color: var(--color-primary1);
}

#menu-overlay .menu-col-b-section-b .menu-list{
  list-style: none;
  margin: 0;
  padding: 0;

  height: 100%;
  width: 100%;

  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

#menu-overlay .menu-col-b-section-b .menu-list .menu-sep{
  flex: 0 0 1px;
  height: 100%;
  background: var(--menu-sep);
  align-self: stretch;
  opacity: inherit;
  transition: background-color 260ms ease, opacity 260ms ease;
}

#menu-overlay .menu-col-b-section-b .menu-list .menu-item{
  position: relative;
  height: 100%;

  /* Breathing lanes: flex expansion drives separator “movement” */
  flex: 0.7 1 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: visible;
  padding-inline: var(--menu-rail-pad);

  transition: flex 420ms var(--menu-hover-ease);
}

#menu-overlay .menu-col-b-section-b .menu-list .menu-item:hover{ flex: 1.6 1 0; }
#menu-overlay .menu-col-b-section-b .menu-list:hover .menu-item{ flex: 0.55 1 0; }
#menu-overlay .menu-col-b-section-b .menu-list:hover .menu-item:hover{ flex: 1.85 1 0; }

/* Label (full-lane)
   - Rotation baseline preserved: rotate(180deg)
   - Scale only on hover (subtle)
*/
#menu-overlay .menu-col-b-section-b .menu-link{
  position: absolute;
  inset: 0;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding-left: var(--menu-rail-label-pad);
  padding-block: 18px;

  writing-mode: vertical-rl;
  text-orientation: mixed;
  direction: ltr;
  unicode-bidi: plaintext;
  text-align: start;

  font-size: var(--menu-rail-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: currentColor;
  line-height: 1;

  opacity: 0;

  /* LOCKED LABEL ORIENTATION — DO NOT TOUCH */
  transform: rotate(180deg) scale(1);
  transform-origin: center;
  will-change: transform;

  transition:
    transform 820ms var(--menu-hover-ease),
    opacity 0.55s ease,
    color 260ms ease;

  transition-delay: inherit;
  z-index: 2;
  pointer-events: auto;
}

#menu-overlay .menu-link-inner{ display: contents; }
#menu-overlay .menu-link-icon{ display: none; }

#menu-overlay .menu-col-b-section-b .menu-item.menu-animate-in .menu-link{ opacity: 0.86; }
#menu-overlay .menu-col-b-section-b .menu-item.menu-animate-out .menu-link{ opacity: 0; }

#menu-overlay .menu-col-b-section-b .menu-item:hover .menu-link,
#menu-overlay .menu-col-b-section-b .menu-link:hover,
#menu-overlay .menu-col-b-section-b .menu-link:focus-visible{
  transform: rotate(180deg) scale(1.12);
  opacity: 1;
}

/* =============================================================================
   09) PACKS (LEFT BOTTOM)
============================================================================= */

#menu-overlay .menu-packs{
  position: absolute;
  left: 22px;
  bottom: 90px;

  width: 96px;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: 22px;

  background: transparent;
  border: none;
}

#menu-overlay .menu-pack{ display: grid; gap: 14px; justify-items: center; }

#menu-overlay .menu-pack-icon{
  width: 44px;
  height: 44px;

  border: none !important;
  background: transparent !important;
  box-shadow: none !important;

  display: grid;
  place-items: center;

  opacity: 0.86;
  transform: scale(1);

  transition:
    transform var(--menu-hover-duration) var(--menu-hover-ease),
    opacity var(--menu-hover-opacity-duration) ease,
    color 260ms ease,
    filter 260ms ease;
}

#menu-overlay .menu-pack-icon:hover,
#menu-overlay .menu-pack-icon:focus-visible{ opacity: 1; outline: none; }

#menu-overlay .menu-pack-icon:hover,
#menu-overlay .menu-pack-icon:focus-visible{ animation: menu-icon-breathe var(--menu-hover-pulse-duration) var(--menu-hover-ease) both; }

#menu-overlay .menu-pack-icon:active{ transform: scale(0.98); }

#menu-overlay .menu-pack-icon{ color: var(--menu-fg); }
#menu-overlay .menu-pack-icon:hover,
#menu-overlay .menu-pack-icon:focus-visible{ color: var(--menu-accent); }

#menu-overlay .menu-pack-icon svg,
#menu-overlay .menu-pack-svg{
  width: 22px;
  height: 22px;
  display: block;
  background: transparent !important;
  fill: currentColor;
}
#menu-overlay .menu-pack-icon svg *,
#menu-overlay .menu-pack-svg *{ fill: currentColor; stroke: currentColor; }

#menu-overlay .menu-pack-glyph{
  width: 22px;
  height: 22px;
  display: block;
  background: var(--menu-icon) center / contain no-repeat;
  background-color: transparent !important;
}

#menu-overlay .menu-pack-icon img,
#menu-overlay img.menu-pack-glyph{ width: 22px; height: 22px; display: block; background: transparent !important; }

body.dark-mode #menu-overlay .menu-pack-icon img,
body.dark-mode #menu-overlay img.menu-pack-glyph,
body.dark-mode #menu-overlay .menu-pack-glyph{ filter: invert(1); }

body.light-mode #menu-overlay .menu-pack-icon img,
body.light-mode #menu-overlay img.menu-pack-glyph,
body.light-mode #menu-overlay .menu-pack-glyph{ filter: none; }

#menu-overlay .menu-pack-icon:hover img,
#menu-overlay .menu-pack-icon:focus-visible img,
#menu-overlay .menu-pack-icon:hover img.menu-pack-glyph,
#menu-overlay .menu-pack-icon:focus-visible img.menu-pack-glyph,
#menu-overlay .menu-pack-icon:hover .menu-pack-glyph,
#menu-overlay .menu-pack-icon:focus-visible .menu-pack-glyph{ filter: var(--menu-accent-filter); }

#menu-overlay .menu-pack-icon:hover svg,
#menu-overlay .menu-pack-icon:focus-visible svg,
#menu-overlay .menu-pack-icon:hover .menu-pack-svg,
#menu-overlay .menu-pack-icon:focus-visible .menu-pack-svg{ color: var(--menu-accent); }

#menu-overlay .menu-plain-logo{ width: 72px; height: auto; opacity: 0.92; }

/* =============================================================================
   10) CLOSE BUTTON
============================================================================= */

#menu-overlay .menu-close{
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);

  width: 44px;
  height: 44px;
  border-radius: 999px;

  border: 1px solid var(--menu-border);
  background: transparent;
  color: var(--menu-fg);

  display: grid;
  place-items: center;

  cursor: pointer;
  opacity: 0.85;

  transition: opacity 180ms ease, transform 180ms ease, border-color 180ms ease;
}

#menu-overlay .menu-close:hover{
  transform: translateX(-50%) scale(1.06);
  opacity: 1;
  border-color: color-mix(in srgb, var(--menu-accent) 55%, var(--menu-border));
}

/* =============================================================================
   11) REDUCED MOTION
============================================================================= */

@media (prefers-reduced-motion: reduce){
  #menu-overlay.menu-overlay,
  #menu-overlay .menu-link,
  #menu-overlay .menu-pack-icon,
  #menu-overlay #menu-pack-music,
  #menu-overlay #menu-pack-social{
    transition: none !important;
    animation: none !important;
  }
  #menu-overlay .menu-control-icon,
  #menu-overlay .menu-pack-toggle{ animation: none !important; }
}

/* =============================================================================
   12) MOBILE
============================================================================= */

@media (max-width: 640px){
  #menu-overlay .menu-columns{
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 84px 18px 28px;
  }

  #menu-overlay .menu-pack-toggle{
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    height: 72px;
    justify-content: flex-start;
  }

  #menu-overlay .menu-col-a{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #menu-overlay .menu-col-a-sep{ display: none; }
  #menu-overlay .menu-col-a-section-b{ padding-left: 0; }

  #menu-overlay .menu-packs-split{ padding-top: 18px; min-height: 150px; }

  #menu-overlay .menu-col-b{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #menu-overlay .menu-col-b-section-a{ padding-right: 0; }

  /* On mobile: rail is normal, readable, no rotation */
  #menu-overlay .menu-col-b-section-b{ transform: none; }

  #menu-overlay .menu-col-b-section-b .menu-list{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: auto;
  }

  #menu-overlay .menu-col-b-section-b .menu-list .menu-sep{
    width: 100%;
    height: 1px;
    flex: 0 0 1px;
  }

  #menu-overlay .menu-col-b-section-b .menu-list .menu-item{
    height: auto;
    flex: 0 0 auto;
    justify-content: flex-start;
    padding: 14px 0;
  }

  #menu-overlay .menu-col-b-section-b .menu-link{
    position: relative;
    inset: auto;
    height: auto;
    width: 100%;

    writing-mode: horizontal-tb;
    text-orientation: initial;

    padding: 0;

    transform: none;
    opacity: 1;

    letter-spacing: 0.10em;
    justify-content: flex-start;
  }

  #menu-overlay .menu-col-b-section-b .menu-item:hover .menu-link,
  #menu-overlay .menu-col-b-section-b .menu-link:hover,
  #menu-overlay .menu-col-b-section-b .menu-link:focus-visible{ transform: none; }

  #menu-overlay .menu-packs{ left: 18px; bottom: 18px; }
}