/* ============================================================
   SoundSphere — StaggeredMenu (Vanilla port of the React-Bits
   component). Theme: SoundSphere dark + #FFFFFF accent.
   The toggle button is rendered inline in the navbar (see
   .sm-toggle-external) — the wrapper itself only owns the
   prelayers + panel.
   ============================================================ */

.staggered-menu-wrapper {
    --sm-accent: #FFFFFF;
    --sm-panel-bg: #050508;
    --sm-panel-color: #ffffff;

    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.staggered-menu-wrapper[data-open='true'] { pointer-events: auto; }

/* ── External toggle button (lives inside the navbar) ───────── */
.sm-toggle-external {
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 6px 4px;
    line-height: 0;
}
.sm-toggle-external:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 4px;
    border-radius: 4px;
}
.sm-ext-line {
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    transform-origin: 50% 50%;
    transition: transform .35s cubic-bezier(.65,.05,.36,1),
                opacity .25s ease;
}
.sm-toggle-external.is-open .sm-ext-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.sm-toggle-external.is-open .sm-ext-line:nth-child(2) { opacity: 0; }
.sm-toggle-external.is-open .sm-ext-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Prelayers ──────────────────────────────────────────────── */
.sm-prelayers {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(260px, 38vw, 420px);
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}
.staggered-menu-wrapper[data-position='right'] .sm-prelayers { right: 0; }
.staggered-menu-wrapper[data-position='left']  .sm-prelayers { left: 0; }

.sm-prelayer {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    will-change: transform;
}
.staggered-menu-wrapper[data-position='right'] .sm-prelayer { right: 0; }
.staggered-menu-wrapper[data-position='left']  .sm-prelayer { left: 0; }

/* ── Main panel ─────────────────────────────────────────────── */
.staggered-menu-panel {
    position: absolute;
    top: 0;
    width: clamp(260px, 38vw, 420px);
    height: 100%;
    background: var(--sm-panel-bg);
    padding: 6em 2em 2em;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    z-index: 10;
    will-change: transform;
}
.staggered-menu-wrapper[data-position='right'] .staggered-menu-panel { right: 0; }
.staggered-menu-wrapper[data-position='left']  .staggered-menu-panel { left: 0; }

@media (max-width: 1024px) {
    .staggered-menu-panel { width: 100%; padding: 6em 1.6em 2em; }
    .sm-prelayers         { width: 100%; }
}

.sm-panel-close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background .2s ease, color .2s ease;
}
.sm-panel-close:hover { color: var(--sm-accent); background: rgba(255,255,255,.06); }
.sm-panel-close:focus-visible { outline: 2px solid var(--sm-accent); outline-offset: 2px; }

.sm-username {
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .03em;
    margin-bottom: 1.2em;
}

/* Item list */
.sm-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35em;
}
.sm-panel-list li { overflow: hidden; line-height: 1; }

/* ── Studio/agency menu items — Barlow Condensed, single line, left-numbered ── */
.sm-panel-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(255,255,255,0.85);
    font-weight: 800;
    font-size: 22px !important; /* compact studio size; labels wrap to 2 lines if needed */
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: uppercase;
    text-decoration: none;
    /* Let long localized labels wrap onto a second line rather than be clipped. */
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: keep-all;
    hyphens: none;
    padding: 8px 0;
    border-bottom: 1px solid rgba(139,0,0,0.14);
    transition: color .2s ease, padding-left .2s ease !important;
}
/* Win over site.css's [class*="menu"] a { font-family: Barlow !important } —
   needs the extra panel class to outrank that attribute+type selector. */
.staggered-menu-panel .sm-panel-item {
    font-family: 'Barlow Condensed', 'Barlow', sans-serif !important;
}

/* Red accent bar slides in from the left on hover; text goes full white.
   Only the pseudo-element + padding move — never the item's own transform
   (GSAP owns the panel/label transforms for the reveal animation). */
.sm-panel-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
    width: 3px;
    height: 64%;
    background: #8B0000;
    border-radius: 2px;
    transition: transform .2s ease;
}
.sm-panel-item:hover,
.staggered-menu a:hover,
.menu-item a:hover {
    color: #fff !important;
}
.sm-panel-item:hover { padding-left: 12px !important; }
.sm-panel-item:hover::before { transform: translateY(-50%) scaleY(1); }

.sm-panel-itemLabel {
    display: inline-block;
    min-width: 0;
    flex: 0 1 auto;
    overflow: visible;
    white-space: normal;
    text-overflow: unset;
    word-break: keep-all;
    will-change: transform;
}

/* Numbers move to the left of the label ("01." "02."), muted grey, fixed gutter. */
.sm-panel-list-itemNumber {
    order: -1;
    flex: 0 0 auto;
    min-width: 30px;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255,255,255,0.3);
    letter-spacing: 1px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* Very narrow phones — drop the item font a notch further. */
@media (max-width: 380px) {
    .sm-panel-item { font-size: 19px !important; }
}

/* Utility items (Settings / Logout) sit visually below the primary nav */
.sm-panel-item--utility {
    font-size: 0.9rem !important;
    font-weight: 500;
    text-transform: none;
    letter-spacing: -.005em;
    opacity: .85;
}
.sm-panel-item--utility:hover { opacity: 1; }

.sm-panel-divider {
    list-style: none;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, .1);
    margin: .8em 0 .4em;
    overflow: visible;
}

/* Socials */
.sm-socials {
    margin-top: auto;
    padding-top: 2.5em;
    display: flex;
    flex-direction: column;
    gap: .4em;
}
.sm-socials-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: rgba(255, 255, 255, .45);
    margin: 0 0 .55em;
    font-weight: 600;
}
.sm-socials-list {
    list-style: none; margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: .25em;
}
.sm-socials-link {
    color: #ffffff;
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    transition: color .2s ease;
    will-change: opacity, transform;
}
.sm-socials-link:hover { color: var(--sm-accent); }