/* =========================================
   Side Menu — Fixed overlay navigation
   Bottom-right tab with slide-in panel
   ========================================= */

/* Tab button — fixed bottom-right corner */
.side-menu-tab {
    position: fixed;
    bottom: 0;
    right: var(--frame-offset);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    padding: 1.75em 0.85em 1.9em;
    background: var(--color-brand-red);
    border: none;
    border-radius: 0;
    cursor: pointer;
    z-index: 1002;
    transition: right 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.3s ease;
}

.side-menu-tab::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -0.5em;
    width: 0.75em;
    background-color: var(--color-brand-red);
}

.side-menu-tab:hover {
    transform: translateX(-0.25em);
}

/* Arrow circle — matches product accordion tab-arrow style */
.side-menu-tab-arrow {
    width: 2em;
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.side-menu-tab-arrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: rotate(180deg);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Vertical "MENU" text — matches accordion tab-text style */
.side-menu-tab-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--color-brand-white);
    font-family: var(--font-family-primary);
    font-weight: 600;
    font-size: calc(0.015 * var(--frame-w));
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* =========================================
   Backdrop overlay
   ========================================= */
.side-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 1000;
}

/* =========================================
   Panel — slides in from right
   ========================================= */
.side-menu-panel {
    position: fixed;
    top: 0;
    right: var(--frame-offset);
    width: calc(0.4 * var(--frame-w));
    height: 100vh;
    height: 100dvh;
    background: var(--color-brand-dark-teal);
    transform: translateX(100%);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4em 5em;
    z-index: 1001;
    border-left: calc(0.01 * var(--frame-w)) solid var(--color-brand-red);
}

/* Extra coverage on the right so the spring bounce doesn't reveal the page */
.side-menu-panel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 6em;
    background: var(--color-brand-dark-teal);
}

/* =========================================
   Nav links
   ========================================= */
.side-menu-nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
    gap: 1.4em;
}

.side-menu-nav a {
    color: var(--color-menu-muted, #B4B4B4);
    text-decoration: none;
    font-family: var(--font-family-primary);
    font-weight: 200;
    font-size: calc(0.016 * var(--frame-w));
    text-transform: uppercase;
    line-height: 1.4;
    transition: font-size 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                font-weight 0.15s ease,
                color 0.3s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: left center;
    /* TASK-014: initial hidden state for stagger */
    opacity: 0;
    transform: translateX(1em);
}

.side-menu-nav a.active {
    font-weight: 500;
    color: var(--color-brand-white);
    font-size: calc(0.024 * var(--frame-w));
}

.side-menu-nav a:hover:not(.active) {
    color: var(--color-brand-white);
    font-weight: 500;
    font-size: calc(0.022 * var(--frame-w));
    transform: translateX(0) scale(1.05);
}

/* =========================================
   Logo — bottom-right of panel
   ========================================= */
.side-menu-logo {
    position: absolute;
    bottom: 2.5em;
    right: 3em;
}

.side-menu-logo img {
    width: calc(0.07 * var(--frame-w));
    height: auto;
}

/* =========================================
   Footer link — bottom-left of panel
   ========================================= */
.side-menu-footer {
    position: absolute;
    bottom: 3em;
    left: 5em;
    display: flex;
    align-items: center;
    gap: 1.5em;
}

.side-menu-footer a {
    color: var(--color-menu-muted, #B4B4B4);
    text-decoration: none;
    font-family: var(--font-family-primary);
    font-weight: 200;
    font-size: calc(0.012 * var(--frame-w));
    transition: color 0.3s ease;
}

.side-menu-footer a:hover {
    color: var(--color-brand-white);
}

/* =========================================
   Open state
   ========================================= */
.side-menu.open .side-menu-overlay {
    opacity: 1;
    pointer-events: auto;
}

.side-menu.open .side-menu-panel {
    transform: translateX(0);
}

/* After GSAP stagger completes, this class enables CSS hover transitions */
.side-menu.open.items-visible .side-menu-nav a {
    opacity: 1;
    transform: translateX(0);
}

.side-menu.open .side-menu-tab {
    right: calc(var(--frame-offset) + 0.4 * var(--frame-w));
}

.side-menu.open .side-menu-tab-arrow img {
    transform: rotate(0deg);
}