/* ==========================================================================
   MAIN MENU (burger) — Mobile (360px – 440px)
   Design reference: 393px wide. Same component/animation/typography as
   desktop (menu.desktop.css), just carried over vertically into one
   scrollable column instead of desktop's spread-out/pushed-apart layout —
   the whole overlay is 393x1433 (see .menu-side-panel below, which is
   what actually gives the scrollable area its real height) and scrolls
   internally while the blurred backdrop itself stays fixed to the screen.

   Section item/toggle rows are more compact than desktop (4rem toggle
   height, 3.2rem item rows vs desktop's 6/3.5) — required to fit
   Studio-open through Contact Us in the given 8rem-58.5rem span; text
   sizes themselves are unchanged from desktop throughout.
   ========================================================================== */

/* Burger trigger — same dot-grid component/animation as desktop, just
   60x60 and round instead of 46x46 with rounded-square corners. */
.main-menu-trigger-btn {
    display: block;
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 6rem;
    height: 6rem;
    padding: 0;
    appearance: none;
    outline: none;
    box-sizing: border-box;
    background-color: transparent;
    border: 0.1rem solid #000000;
    border-radius: 50%;
    cursor: pointer;
    z-index: 6001;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
}

.main-menu-trigger-btn.is-pressed {
    transform: scale(0.85);
}

/* Always-on here (unlike desktop, where this only kicks in on hover/
   open) — inverted permanently so the dots read black against the
   transparent/outlined button at rest. */
.menu-dots-invert {
    position: absolute;
    inset: 0;
    filter: invert(1);
    transition: filter 0.3s ease;
}

.menu-dots {
    position: absolute;
    inset: 0;
    isolation: isolate;
    will-change: transform, filter;
    animation: menu-dot-spin 5s linear infinite;
}

.menu-dot {
    position: absolute;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background-color: #ffffff;
    mix-blend-mode: difference;
}

/* 2x2 grid, 1.2rem dots with a 0.2rem gap (2.6rem square total),
   centered inside the button's padding box — 6rem minus the 0.1rem
   border on each side (box-sizing: border-box) = 5.8rem, not the full
   6rem: (5.8 - 2.6) / 2 = 1.6rem. */
.menu-dot-1 { left: 1.6rem; top: 1.6rem; animation: menu-dot-swap-a 6s ease-in-out infinite; }
.menu-dot-2 { left: 3rem; top: 1.6rem; animation: menu-dot-swap-b 6s ease-in-out infinite; }
.menu-dot-3 { left: 1.6rem; top: 3rem; animation: menu-dot-swap-b-rev 6s ease-in-out infinite; }
.menu-dot-4 { left: 3rem; top: 3rem; animation: menu-dot-swap-a-rev 6s ease-in-out infinite; }

.main-menu-trigger-btn:hover {
    background-color: transparent;
    border-color: #000000;
}

.main-menu-trigger-btn.is-open {
    /* Pinned while the menu is open — the overlay itself scrolls
       internally (see .main-menu-overlay), and the button shouldn't
       follow that scroll or whatever frozen page-scroll position it
       inherited from being absolute the rest of the time. */
    position: fixed;
    background-color: #ffffff;
    border-color: transparent;
}

.main-menu-trigger-btn--light {
    background-color: #ffffff;
    border-color: transparent;
}

.main-menu-trigger-btn--light .menu-dots-invert {
    filter: invert(1);
}

.main-menu-trigger-btn--light:hover {
    background-color: transparent;
    border-color: #ffffff;
}

.main-menu-trigger-btn--light:hover .menu-dots-invert {
    filter: none;
}

.main-menu-trigger-btn--light.is-open {
    background-color: #ffffff;
    border-color: transparent;
}

.main-menu-trigger-btn--light.is-open .menu-dots-invert {
    filter: invert(1);
}

@keyframes menu-dot-spin {
    0%   { transform: rotate(0deg);    filter: blur(0); }
    18%  { transform: rotate(60deg);   filter: blur(0); }
    26%  { transform: rotate(420deg);  filter: blur(0.2rem); }
    30%  { transform: rotate(440deg);  filter: blur(0); }
    42%  { transform: rotate(440deg);  filter: blur(0); }
    59%  { transform: rotate(560deg);  filter: blur(0); }
    74%  { transform: rotate(620deg);  filter: blur(0); }
    82%  { transform: rotate(1340deg); filter: blur(0.25rem); }
    86%  { transform: rotate(1360deg); filter: blur(0); }
    100% { transform: rotate(1440deg); filter: blur(0); }
}

@keyframes menu-dot-swap-a {
    0%, 70% { transform: translate(0, 0); }
    85% { transform: translate(1.4rem, 1.4rem); }
    100% { transform: translate(0, 0); }
}

@keyframes menu-dot-swap-a-rev {
    0%, 70% { transform: translate(0, 0); }
    85% { transform: translate(-1.4rem, -1.4rem); }
    100% { transform: translate(0, 0); }
}

@keyframes menu-dot-swap-b {
    0%, 70% { transform: translate(0, 0); }
    85% { transform: translate(-1.4rem, 1.4rem); }
    100% { transform: translate(0, 0); }
}

@keyframes menu-dot-swap-b-rev {
    0%, 70% { transform: translate(0, 0); }
    85% { transform: translate(1.4rem, -1.4rem); }
    100% { transform: translate(0, 0); }
}

/* Overlay — same fixed/blurred backdrop as desktop, but scrollable:
   the backdrop itself stays glued to the screen (position:fixed),
   while its content (below) is tall enough to need scrolling, so the
   overlay scrolls its own content internally. */
.main-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3rem);
    -webkit-backdrop-filter: blur(3rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
    z-index: 6000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    user-select: none;
    -webkit-user-select: none;
}

.main-menu-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

body.menu-scroll-lock {
    overflow: hidden !important;
}

/* Language switcher — cycles EN -> UK -> JA -> EN on tap (see
   js/lang-switch-mobile.js), sitting above the accordion content
   (which starts at top: 12rem). */
.menu-mobile-lang-switch {
    position: absolute;
    left: 4rem;
    top: 3rem;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 2.5rem;
    letter-spacing: -0.08em;
    color: #ffffff;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.main-menu-overlay.is-open .menu-mobile-lang-switch {
    pointer-events: auto;
}

.menu-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.main-menu-overlay.is-open .menu-section-toggle {
    pointer-events: auto;
}

.menu-section-toggle {
    position: absolute;
    left: 4rem;
    top: 0;
    width: 33rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    box-sizing: border-box;
    background: none;
    border: none;
    cursor: pointer;
    transition: top 0.4s ease;
}

/* Only one section can be open at a time (see toggleMenuSection() in
   menu.js, which closes all others before opening the clicked one), so
   each section only needs to know about ONE prior sibling being open
   at once — no need for desktop's imperfect pairwise approximation. */
.menu-section-studio .menu-section-toggle  { top: 12rem; }
.menu-section-studio .menu-section-line    { top: 17.25rem; }

.menu-section-world .menu-section-toggle   { top: 19rem; }
.menu-section-world .menu-section-line     { top: 24.25rem; }
.menu-section-studio.is-open ~ .menu-section-world .menu-section-toggle { top: 47.1rem; }
.menu-section-studio.is-open ~ .menu-section-world .menu-section-line   { top: 52.35rem; }

.menu-section-juniors .menu-section-toggle { top: 26rem; }
.menu-section-juniors .menu-section-line   { top: 31.25rem; }
.menu-section-world.is-open ~ .menu-section-juniors .menu-section-toggle  { top: 50.9rem; }
.menu-section-world.is-open ~ .menu-section-juniors .menu-section-line    { top: 56.15rem; }
.menu-section-studio.is-open ~ .menu-section-juniors .menu-section-toggle { top: 54.1rem; }
.menu-section-studio.is-open ~ .menu-section-juniors .menu-section-line   { top: 59.35rem; }

.menu-section-projects .menu-section-toggle { top: 33rem; }
.menu-section-projects .menu-section-line   { top: 38.25rem; }
.menu-section-juniors.is-open ~ .menu-section-projects .menu-section-toggle { top: 51.5rem; }
.menu-section-juniors.is-open ~ .menu-section-projects .menu-section-line   { top: 56.75rem; }
.menu-section-world.is-open ~ .menu-section-projects .menu-section-toggle   { top: 57.9rem; }
.menu-section-world.is-open ~ .menu-section-projects .menu-section-line     { top: 63.15rem; }
.menu-section-studio.is-open ~ .menu-section-projects .menu-section-toggle  { top: 61.1rem; }
.menu-section-studio.is-open ~ .menu-section-projects .menu-section-line    { top: 66.35rem; }

.menu-section-title {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 300;
    font-size: 3.5rem;
    line-height: 3.5rem;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 1;
}

.menu-section-arrow {
    width: 0.8rem;
    height: 1.4rem;
    display: block;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.menu-section.is-open .menu-section-arrow {
    transform: rotate(90deg);
}

.menu-section-line {
    position: absolute;
    left: 4rem;
    width: 33rem;
    height: 0.1rem;
    background-color: #ffffff;
    opacity: 1;
    transition: top 0.4s ease;
}

.menu-sub-item {
    position: absolute;
    left: 4rem;
    width: 33rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-0.8rem);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

/* Staggered reveal/hide, same timing as desktop: closing cascades
   from the LAST item back up to the first (this block), opening
   cascades top-to-bottom (the .is-open block below). */
.menu-section-studio .menu-section-items .menu-sub-item:nth-child(1) { transition-delay: 0.175s; }
.menu-section-studio .menu-section-items .menu-sub-item:nth-child(2) { transition-delay: 0.15s; }
.menu-section-studio .menu-section-items .menu-sub-item:nth-child(3) { transition-delay: 0.125s; }
.menu-section-studio .menu-section-items .menu-sub-item:nth-child(4) { transition-delay: 0.1s; }
.menu-section-studio .menu-section-items .menu-sub-item:nth-child(5) { transition-delay: 0.075s; }
.menu-section-studio .menu-section-items .menu-sub-item:nth-child(6) { transition-delay: 0.05s; }
.menu-section-studio .menu-section-items .menu-sub-item:nth-child(7) { transition-delay: 0.025s; }
.menu-section-studio .menu-section-items .menu-sub-item:nth-child(8) { transition-delay: 0s; }

.menu-section-world .menu-section-items .menu-sub-item:nth-child(1) { transition-delay: 0.15s; }
.menu-section-world .menu-section-items .menu-sub-item:nth-child(2) { transition-delay: 0.125s; }
.menu-section-world .menu-section-items .menu-sub-item:nth-child(3) { transition-delay: 0.1s; }
.menu-section-world .menu-section-items .menu-sub-item:nth-child(4) { transition-delay: 0.075s; }
.menu-section-world .menu-section-items .menu-sub-item:nth-child(5) { transition-delay: 0.05s; }
.menu-section-world .menu-section-items .menu-sub-item:nth-child(6) { transition-delay: 0.025s; }
.menu-section-world .menu-section-items .menu-sub-item:nth-child(7) { transition-delay: 0s; }

.menu-section-juniors .menu-section-items .menu-sub-item:nth-child(1) { transition-delay: 0.1s; }
.menu-section-juniors .menu-section-items .menu-sub-item:nth-child(2) { transition-delay: 0.075s; }
.menu-section-juniors .menu-section-items .menu-sub-item:nth-child(3) { transition-delay: 0.05s; }
.menu-section-juniors .menu-section-items .menu-sub-item:nth-child(4) { transition-delay: 0.025s; }
.menu-section-juniors .menu-section-items .menu-sub-item:nth-child(5) { transition-delay: 0s; }

.menu-section-projects .menu-section-items .menu-sub-item:nth-child(1) { transition-delay: 0s; }

.menu-section.is-open .menu-section-items .menu-sub-item:nth-child(1) { transition-delay: 0s; }
.menu-section.is-open .menu-section-items .menu-sub-item:nth-child(2) { transition-delay: 0.04s; }
.menu-section.is-open .menu-section-items .menu-sub-item:nth-child(3) { transition-delay: 0.08s; }
.menu-section.is-open .menu-section-items .menu-sub-item:nth-child(4) { transition-delay: 0.12s; }
.menu-section.is-open .menu-section-items .menu-sub-item:nth-child(5) { transition-delay: 0.16s; }
.menu-section.is-open .menu-section-items .menu-sub-item:nth-child(6) { transition-delay: 0.2s; }
.menu-section.is-open .menu-section-items .menu-sub-item:nth-child(7) { transition-delay: 0.24s; }
.menu-section.is-open .menu-section-items .menu-sub-item:nth-child(8) { transition-delay: 0.28s; }

.menu-section.is-open .menu-sub-item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.main-menu-overlay.is-open .menu-section.is-open .menu-sub-item:not(.is-disabled) {
    pointer-events: auto;
}

.menu-sub-item.is-disabled {
    cursor: default;
    pointer-events: none;
}

.menu-sub-item.is-disabled .menu-sub-num,
.menu-sub-item.is-disabled .menu-sub-label {
    opacity: 0.5;
    text-decoration: line-through;
}

/* Same highlight as desktop, just triggered by a JS-driven
   .is-pressed class instead of :hover (see js/menu.js) — touch
   devices don't hover, and relying on :active alone is unreliable on
   iOS Safari without a touch listener anyway. */
.menu-sub-bg {
    position: absolute;
    top: 0.2rem;
    left: -2rem;
    width: 35.3rem;
    height: 100%;
    z-index: -1;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
    opacity: 0;
    transition: opacity 0.15s ease;
}

.menu-sub-item.is-pressed .menu-sub-bg {
    opacity: 1;
}

.menu-sub-num,
.menu-sub-label {
    position: static;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 1;
}

.menu-section-studio .menu-section-items .menu-sub-item:nth-child(1) { top: 18.75rem; }
.menu-section-studio .menu-section-items .menu-sub-item:nth-child(2) { top: 21.95rem; }
.menu-section-studio .menu-section-items .menu-sub-item:nth-child(3) { top: 25.15rem; }
.menu-section-studio .menu-section-items .menu-sub-item:nth-child(4) { top: 28.35rem; }
.menu-section-studio .menu-section-items .menu-sub-item:nth-child(5) { top: 31.55rem; }
.menu-section-studio .menu-section-items .menu-sub-item:nth-child(6) { top: 34.75rem; }
.menu-section-studio .menu-section-items .menu-sub-item:nth-child(7) { top: 37.95rem; }
.menu-section-studio .menu-section-items .menu-sub-item:nth-child(8) { top: 41.15rem; }

.menu-section-world .menu-section-items .menu-sub-item:nth-child(1) { top: 25.75rem; }
.menu-section-world .menu-section-items .menu-sub-item:nth-child(2) { top: 28.95rem; }
.menu-section-world .menu-section-items .menu-sub-item:nth-child(3) { top: 32.15rem; }
.menu-section-world .menu-section-items .menu-sub-item:nth-child(4) { top: 35.35rem; }
.menu-section-world .menu-section-items .menu-sub-item:nth-child(5) { top: 38.55rem; }
.menu-section-world .menu-section-items .menu-sub-item:nth-child(6) { top: 41.75rem; }
.menu-section-world .menu-section-items .menu-sub-item:nth-child(7) { top: 44.95rem; }

.menu-section-juniors .menu-section-items .menu-sub-item:nth-child(1) { top: 32.75rem; }
.menu-section-juniors .menu-section-items .menu-sub-item:nth-child(2) { top: 35.95rem; }
.menu-section-juniors .menu-section-items .menu-sub-item:nth-child(3) { top: 39.15rem; }
.menu-section-juniors .menu-section-items .menu-sub-item:nth-child(4) { top: 42.35rem; }
.menu-section-juniors .menu-section-items .menu-sub-item:nth-child(5) { top: 45.55rem; }

.menu-section-projects .menu-section-items .menu-sub-item:nth-child(1) { top: 39.75rem; }

/* Side panel (Contact us + E:/T:/C.M. block) — this is the element
   that actually gives .main-menu-overlay something to scroll: it's
   explicitly 1433px (143.3rem) tall, matching the client's reference
   canvas, instead of height:100% like the sections above. */
/* Contact us + the E:/T:/C.M. block sit at a fixed position regardless
   of which accordion section is open/closed above — deliberately
   below the first screenful, so opening/closing Studio etc. never
   makes this jump around; you just scroll down to reach it. */
.menu-side-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 156rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.main-menu-overlay.is-open .menu-side-panel {
    opacity: 1;
    transition: opacity 0.4s ease 0.4s;
}

.menu-contact-btn {
    position: absolute;
    left: 4rem;
    top: 77.5rem;
    display: block;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.main-menu-overlay.is-open .menu-contact-btn {
    pointer-events: auto;
}

.menu-contact-btn:hover {
    opacity: 0.5;
}

.menu-contact-title {
    font-family: 'Atyp Display', sans-serif;
    font-weight: 300;
    font-size: 3.5rem;
    line-height: 3.5rem;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 1;
}

.menu-contact-line {
    position: absolute;
    left: 4rem;
    top: 82.5rem;
    width: 33rem;
    height: 0.1rem;
    background-color: #ffffff;
    opacity: 1;
}

.menu-contact-arrow {
    position: absolute;
    left: 36.2rem;
    top: 78.55rem;
    width: 0.8rem;
    height: 1.4rem;
    display: block;
    transform: rotate(0deg) translateX(0);
    transition: transform 0.3s ease;
}

.menu-contact-btn:hover ~ .menu-contact-arrow {
    transform: rotate(0deg) translateX(0.5rem);
}

.menu-side-label {
    position: absolute;
    left: 4rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 1;
}

.menu-side-email-title  { top: 92.7rem; }
.menu-side-phone-title  { top: 107.7rem; }
.menu-side-social-title { top: 120.2rem; }

.menu-side-link {
    position: absolute;
    left: 4rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 1;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.menu-side-link:hover {
    opacity: 0.5;
}

.main-menu-overlay.is-open .menu-side-link:not(.is-disabled) {
    pointer-events: auto;
}

.menu-side-link.is-disabled {
    text-decoration: line-through;
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.menu-side-link.is-hover-only {
    cursor: default;
}

.menu-side-email-1 { top: 96.2rem; }
.menu-side-email-2 { top: 98.7rem; }
.menu-side-email-3 { top: 101.2rem; }
.menu-side-phone-1 { top: 111.2rem; }
.menu-side-phone-2 { top: 113.7rem; }

.menu-side-social-behance   { left: 4rem;  top: 123.7rem; }
.menu-side-social-instagram { left: 13rem; top: 123.7rem; }
.menu-side-social-facebook  { left: 4rem;  top: 126.2rem; }
.menu-side-social-linkedin  { left: 13rem; top: 126.2rem; }
.menu-side-social-pinterest { left: 4rem;  top: 128.7rem; }

.menu-mobile-logo {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    width: 35.3rem;
    height: 8.2rem;
    transform: translateX(-50%);
    max-width: none;
}