/* SHIFT home orb navigation component
   Left-side orbital navigation for the redesigned home page.
   This file owns the full visual system of the menu component.
*/

.home-menu-zone {
    position: relative;
    z-index: 20;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
}

 .orb-menu {
    --orb-core-shift-x: -40px;
    position: relative;
    z-index: 6;
    width: 170px;
    height: 170px;
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: visible;
}

.orb-menu__sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* === Core menu orb === */

.orb-menu::before {
    content: none;
    display: none;
}

.orb-menu::after {
    content: none;
    display: none;
}

.orb-menu__toggle {
    position: relative;
    z-index: 6;
    width: 98px;
    height: 98px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    padding: 0;
    border: 1px solid rgba(228, 221, 255, 0.76);
    border-radius: 50%;
    color: #fff;
    background:
        radial-gradient(
            circle at 50% 52%,
            rgba(7, 9, 33, 0.99) 0%,
            rgba(11, 14, 46, 0.98) 34%,
            rgba(20, 22, 72, 0.96) 58%,
            rgba(46, 37, 126, 0.90) 77%,
            rgba(84, 64, 194, 0.58) 90%,
            rgba(170, 149, 255, 0.18) 100%
        ),
        radial-gradient(
            circle at 78% 50%,
            rgba(255, 250, 255, 0.18) 0%,
            rgba(223, 210, 255, 0.10) 18%,
            transparent 52%
        );
    box-shadow:
        0 0 16px rgba(123, 97, 255, 0.26),
        0 0 34px rgba(158, 136, 255, 0.18),
        inset 0 0 22px rgba(229, 223, 255, 0.08),
        inset 0 -10px 18px rgba(5, 8, 28, 0.34);
    cursor: pointer;
    transform: translateX(var(--orb-core-shift-x));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.orb-menu__toggle::before,
.orb-menu__toggle::after,
.orb-menu__pulse {
    content: "";
    position: absolute;
    inset: -21px;
    border-radius: 50%;
    pointer-events: none;
    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(236, 230, 255, 0) 0deg 12deg,
            rgba(236, 230, 255, 0.18) 12deg 13.2deg,
            rgba(236, 230, 255, 0) 13.2deg 24deg
        );
    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 1.8px),
            #000 calc(100% - 1.2px),
            #000 100%
        );
    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 1.8px),
            #000 calc(100% - 1.2px),
            #000 100%
        );
    opacity: 0.72;
    filter: drop-shadow(0 0 8px rgba(179, 156, 255, 0.18));
}

.orb-menu__toggle::before {
    content: "";
    position: absolute;
    inset: -8px;
    border: 1.5px solid rgba(222, 213, 255, 0.78);
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        0 0 7px rgba(247, 242, 255, 0.34),
        0 0 16px rgba(172, 149, 255, 0.20);
}

.orb-menu__toggle::after {
    content: "";
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 82% 50%,
            rgba(255, 255, 255, 1) 0%,
            rgba(248, 243, 255, 0.96) 8%,
            rgba(232, 219, 255, 0.84) 17%,
            rgba(193, 167, 255, 0.58) 30%,
            rgba(136, 107, 242, 0.28) 43%,
            rgba(114, 88, 220, 0.08) 56%,
            transparent 68%
        ),
        conic-gradient(
            from 270deg,
            rgba(255, 255, 255, 0) 0deg 112deg,
            rgba(255, 255, 255, 0.08) 132deg,
            rgba(245, 239, 255, 0.52) 154deg,
            rgba(255, 255, 255, 0.98) 182deg,
            rgba(240, 230, 255, 0.80) 208deg,
            rgba(182, 155, 255, 0.34) 236deg,
            rgba(255, 255, 255, 0) 274deg 360deg
        );
    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 5px),
            #000 calc(100% - 4px),
            #000 calc(100% - 1px),
            transparent 100%
        );
    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 5px),
            #000 calc(100% - 4px),
            #000 calc(100% - 1px),
            transparent 100%
        );
    filter:
        blur(0.35px)
        drop-shadow(0 0 7px rgba(255, 247, 255, 0.28))
        drop-shadow(0 0 16px rgba(164, 139, 255, 0.20));
    opacity: 1;
}

.orb-menu__pulse {
    inset: -34px;
    border: 1px solid rgba(202, 192, 255, 0.20);
    box-shadow:
        0 0 18px rgba(176, 160, 255, 0.16),
        inset 0 0 18px rgba(176, 160, 255, 0.05);
}

.orb-menu__toggle:hover,
.orb-menu__toggle:focus-visible,
.orb-menu.is-open .orb-menu__toggle {
    transform: translateX(var(--orb-core-shift-x)) scale(1.03);
    border-color: rgba(247, 245, 255, 0.92);
    box-shadow:
        0 0 24px rgba(245, 242, 255, 0.56),
        0 0 46px rgba(174, 157, 255, 0.60),
        0 0 84px rgba(112, 88, 255, 0.28),
        inset 0 0 36px rgba(226, 221, 255, 0.18);
    outline: none;
}

.orb-menu__icon {
    position: relative;
    z-index: 1;
    color: #f4efff;
    font-size: 31px;
    line-height: 0.92;
    transform: rotate(-14deg);
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.74),
        0 0 14px rgba(208, 193, 255, 0.66),
        0 0 24px rgba(137, 104, 255, 0.34);
}

.orb-menu__label {
    position: relative;
    z-index: 1;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-shadow:
        0 0 8px rgba(219, 212, 255, 0.28);
}

/* === Orbital branch and items === */

.orb-menu__panel {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 94px;
    width: 282px;
    display: grid;
    gap: 8px;
    padding: 18px 0 18px 62px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-18px, -50%) scale(0.985);
    transform-origin: left center;
    transition:
        opacity 190ms ease,
        transform 240ms cubic-bezier(.2, .72, .25, 1),
        visibility 190ms ease;
}

/* Open orbital branch inspired by the visual reference. */

.orb-menu__branch {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: -70px;
    width: 330px;
    height: min(700px, 80vh);
    overflow: visible;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity 260ms ease;
}

.orb-menu__branch-glow {
    fill: none !important;
    stroke: rgba(170, 151, 255, 0.26);
    stroke-width: 9;
    filter: blur(8px);
}

.orb-menu__branch-line {
    stroke: rgba(230, 226, 255, 0.72);
    stroke-width: 1.25;
    filter: drop-shadow(0 0 4px rgba(174, 158, 255, 0.62));
}

.orb-menu:hover .orb-menu__branch,
.orb-menu:focus-within .orb-menu__branch,
.orb-menu.is-open .orb-menu__branch {
    opacity: 1;
}

.orb-menu:hover .orb-menu__panel,
.orb-menu:focus-within .orb-menu__panel,
.orb-menu.is-open .orb-menu__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(0, -50%) scale(1);
}

/* SVG branch nodes: their coordinates come directly from the curve. */

.orb-menu__branch-node {
    pointer-events: none;
    opacity: 0.92;
    animation: orb-menu-node-glow 4.6s ease-in-out infinite;
    animation-delay: calc(var(--node-index) * -0.37s);
}

.orb-menu__branch-node-core {
    fill: #ffffff;
    filter:
        drop-shadow(0 0 3px rgba(255, 255, 255, 1))
        drop-shadow(0 0 7px rgba(239, 233, 255, 0.88))
        drop-shadow(0 0 14px rgba(165, 144, 255, 0.58));
}

.orb-menu__branch-node-ray {
    stroke: rgba(255, 255, 255, 0.90);
    stroke-width: 0.8;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    filter:
        drop-shadow(0 0 2px rgba(255, 255, 255, 0.76))
        drop-shadow(0 0 5px rgba(199, 184, 255, 0.54));
}

.orb-menu.is-syncing .orb-menu__item {
    transition: none !important;
}

.orb-menu__item {
    position: relative;
    min-width: 0;
    width: 242px;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f2f2ff;
    text-decoration: none;
    opacity: 0;
    transform: translateX(calc(var(--menu-shift) - 10px));
    transition:
        opacity 180ms ease,
        transform 210ms cubic-bezier(.2, .72, .25, 1);
    transition-delay: calc(var(--menu-index) * 42ms);
}

.orb-menu:hover .orb-menu__item,
.orb-menu:focus-within .orb-menu__item,
.orb-menu.is-open .orb-menu__item {
    opacity: 1;
    transform: translateX(var(--menu-shift));
}

/* connector line from arc to item */
.orb-menu__item::before {
    content: none;
    display: none;
}

/* bright node on the main branch */
.orb-menu__item-icon {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(225, 221, 255, 0.64);
    border-radius: 50%;
    color: rgba(246, 244, 255, 0.96);
    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(226, 220, 255, 0.24),
            rgba(95, 78, 191, 0.62) 46%,
            rgba(25, 26, 66, 0.92) 100%
        );
    box-shadow:
        0 0 12px rgba(197, 188, 255, 0.26),
        0 0 30px rgba(117, 95, 255, 0.14),
        inset 0 0 14px rgba(225, 220, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.orb-menu__item-icon svg {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.orb-menu__item-body {
    min-width: 0;
    flex: 1 1 auto;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 16px;
    border: 1px solid rgba(189, 186, 242, 0.30);
    border-radius: 999px;
    color: #eef0ff;
    background:
        linear-gradient(
            90deg,
            rgba(84, 72, 167, 0.54),
            rgba(31, 32, 79, 0.54)
        );
    box-shadow:
        inset 0 0 16px rgba(192, 184, 255, 0.05),
        0 5px 16px rgba(1, 4, 22, 0.12);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms cubic-bezier(.2, .72, .25, 1);
}

.orb-menu__text {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.15;
    white-space: nowrap;
}

.orb-menu__chevron {
    flex: 0 0 auto;
    color: rgba(224, 220, 255, 0.80);
    font-size: 19px;
    font-weight: 300;
    line-height: 1;
    transform: translateY(-1px);
    transition:
        color 180ms ease,
        transform 180ms ease;
}

.orb-menu__item:hover,
.orb-menu__item:focus-visible {
    transform: translateX(var(--menu-shift)) !important;
    outline: none;
}

.orb-menu__item:hover .orb-menu__item-icon,
.orb-menu__item:focus-visible .orb-menu__item-icon {
    border-color: rgba(238, 235, 255, 0.86);
    box-shadow:
        0 0 16px rgba(214, 206, 255, 0.42),
        0 0 34px rgba(124, 104, 255, 0.18),
        inset 0 0 14px rgba(225, 220, 255, 0.10);
    transform: translateX(5px) scale(1.04);
}

.orb-menu__item:hover .orb-menu__item-body,
.orb-menu__item:focus-visible .orb-menu__item-body {
    border-color: rgba(215, 208, 255, 0.52);
    background:
        linear-gradient(
            90deg,
            rgba(110, 92, 204, 0.70),
            rgba(47, 44, 110, 0.64)
        );
    box-shadow:
        inset 0 0 20px rgba(196, 186, 255, 0.07),
        0 7px 20px rgba(1, 3, 18, 0.16);
    transform: translateX(5px);
}

.orb-menu__item:hover .orb-menu__chevron,
.orb-menu__item:focus-visible .orb-menu__chevron {
    color: #fff;
    transform: translate(2px, -1px);
}

/* === Tablet === */


@keyframes orb-menu-node-glow {
    0%,
    100% {
        opacity: 0.62;
        filter: brightness(0.92);
    }

    37% {
        opacity: 1;
        filter: brightness(1.18);
    }

    71% {
        opacity: 0.76;
        filter: brightness(1);
    }
}

@media (max-width: 1199px) {
    .orb-menu {
        width: 152px;
        height: 152px;
    }

    .orb-menu__toggle {
        width: 118px;
        height: 118px;
    }

    .orb-menu__panel {
        left: 84px;
        width: 270px;
        padding-left: 56px;
    }

    .orb-menu__item {
        width: 232px;
    }

    .orb-menu__text {
        font-size: 11.5px;
    }
}

/* === Compact tablet / touch === */

@media (max-width: 960px) {
    .orb-menu {
        --orb-core-shift-x: 0px;
    }

    .home-menu-zone {
        position: fixed;
        z-index: 70;
        left: 18px;
        bottom: 20px;
    }

    .orb-menu {
        width: 100px;
        height: 100px;
    }

    .orb-menu::before {
        inset: -14px;
    }

    .orb-menu::after {
        inset: -2px;
    }

    .orb-menu__toggle {
        width: 86px;
        height: 86px;
    }

    .orb-menu__toggle::before {
        inset: -8px;
        border-width: 1px;
    }

    .orb-menu__toggle::after {
        inset: -15px;
        border-width: 1px;
    }

    .orb-menu__pulse {
        inset: -23px;
    }

    .orb-menu__icon {
        font-size: 28px;
    }

    .orb-menu__label {
        font-size: 11px;
    }

    .orb-menu__panel {
        top: auto;
        bottom: 8px;
        left: 72px;
        width: min(282px, calc(100vw - 90px));
        max-height: min(72vh, 560px);
        gap: 6px;
        padding: 12px 8px 12px 28px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translate(-12px, 0) scale(0.985);
        scrollbar-width: thin;
    }

    .orb-menu__branch,
    .orb-menu__item::before,
    .orb-menu__item::after {
        display: none;
    }

    .orb-menu:hover .orb-menu__panel,
    .orb-menu:focus-within .orb-menu__panel,
    .orb-menu.is-open .orb-menu__panel {
        transform: translate(0, 0) scale(1);
    }

    .orb-menu__item,
    .orb-menu:hover .orb-menu__item,
    .orb-menu:focus-within .orb-menu__item,
    .orb-menu.is-open .orb-menu__item {
        width: 100%;
        min-height: 44px;
        transform: none;
    }

    .orb-menu__item:hover,
    .orb-menu__item:focus-visible {
        transform: translateX(4px) !important;
    }

    .orb-menu__item-icon {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
    }

    .orb-menu__item-body {
        min-height: 40px;
    }
}

/* === Mobile === */

@media (max-width: 767px) {
    .orb-menu {
        width: 50px;
        height: 50px;
    }

    .orb-menu::before {
        inset: -4px;
    }

    .orb-menu::after {
        inset: 0;
    }

    .orb-menu__pulse {
        inset: -7px;
    }

    .orb-menu__toggle {
        width: 42px;
        height: 42px;
    }

    .orb-menu__toggle::before {
        inset: -3px;
    }

    .orb-menu__toggle::after {
        inset: -5px;
    }

    .orb-menu__icon {
        font-size: 15px;
    }

    .orb-menu__label {
        font-size: 8px;
    }

    .home-menu-zone {
        top: 76px;
        right: auto;
        bottom: auto;
        left: 8px;
    }

    .orb-menu__panel {
        top: 0;
        right: auto;
        bottom: auto;
        left: 60px;
        width: min(272px, calc(100vw - 82px));
        max-height: 68vh;
        overflow-x: hidden;
        overflow-y: auto;
        transform-origin: top left;
    }

    .orb-menu__text {
        font-size: 11px;
    }

    .orb-menu__panel,
    .orb-menu:hover .orb-menu__panel,
    .orb-menu:focus-within .orb-menu__panel {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-10px, 0) scale(0.985);
    }

    .orb-menu.is-open .orb-menu__panel,
    .orb-menu.is-open:hover .orb-menu__panel,
    .orb-menu.is-open:focus-within .orb-menu__panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(0, 0) scale(1);
    }

    .orb-menu__item,
    .orb-menu:hover .orb-menu__item,
    .orb-menu:focus-within .orb-menu__item {
        opacity: 0;
    }

    .orb-menu.is-open .orb-menu__item {
        opacity: 1;
        transform: none;
    }
}


/* === Fallbacks === */

@supports not (backdrop-filter: blur(1px)) {
    .orb-menu__toggle,
    .orb-menu__item-icon,
    .orb-menu__item-body {
        background-color: rgba(18, 22, 58, 0.96);
    }
}

@media (prefers-reduced-motion: reduce) {
    .orb-menu__toggle,
    .orb-menu__item,
    .orb-menu__item-icon,
    .orb-menu__item-body,
    .orb-menu__chevron,
    .orb-menu__panel {
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}

/* === SHIFT UNIVERSAL TOUCH TABLET MENU === */

@media (min-width: 768px) and (max-width: 1400px) and (pointer: coarse) {
    .orb-menu {
        --orb-core-shift-x: 0px;
        width: clamp(64px, 7.5vw, 78px);
        height: clamp(64px, 7.5vw, 78px);
    }

    .orb-menu::before {
        inset: -5px;
    }

    .orb-menu::after {
        inset: 0;
    }

    .orb-menu__pulse {
        inset: -8px;
    }

    .orb-menu__toggle {
        width: clamp(54px, 6.5vw, 66px);
        height: clamp(54px, 6.5vw, 66px);
    }

    .orb-menu__toggle::before {
        inset: -4px;
    }

    .orb-menu__toggle::after {
        inset: -6px;
    }

    .orb-menu__icon {
        font-size: clamp(18px, 2.2vw, 22px);
    }

    .orb-menu__label {
        font-size: clamp(9px, 1.1vw, 10px);
    }

    .home-menu-zone {
        position: fixed;
        z-index: 70;

        top: clamp(76px, 8vw, 94px);
        right: auto;
        bottom: auto;
        left: clamp(8px, 1.8vw, 18px);

        margin: 0;
        transform: none;
    }

    .orb-menu__panel {
        position: fixed;
        top: 50%;
        right: auto;
        bottom: auto;
        left: clamp(88px, 11vw, 118px);

        width: min(390px, calc(100vw - 130px));
        max-height: min(82dvh, 680px);

        gap: 6px;
        padding: 10px 8px 10px 12px;

        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;

        transform-origin: top left;
        scrollbar-width: thin;
    }

    .orb-menu__branch,
    .orb-menu__item::before,
    .orb-menu__item::after {
        display: none;
    }

    .orb-menu__panel,
    .orb-menu:hover .orb-menu__panel,
    .orb-menu:focus-within .orb-menu__panel {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-10px, -50%) scale(0.985);
    }

    .orb-menu.is-open .orb-menu__panel,
    .orb-menu.is-open:hover .orb-menu__panel,
    .orb-menu.is-open:focus-within .orb-menu__panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(0, -50%) scale(1);
    }

    .orb-menu__item,
    .orb-menu:hover .orb-menu__item,
    .orb-menu:focus-within .orb-menu__item {
        width: 100%;
        min-height: clamp(48px, 5.8vw, 54px);
        opacity: 0;
        transform: none;
    }

    .orb-menu.is-open .orb-menu__item {
        opacity: 1;
        transform: none;
    }

    .orb-menu__item-icon {
        flex-basis: clamp(42px, 5.2vw, 48px);
        width: clamp(42px, 5.2vw, 48px);
        height: clamp(42px, 5.2vw, 48px);
    }

    .orb-menu__item-body {
        min-height: clamp(40px, 5vw, 46px);
    }

    .orb-menu__text {
        font-size: clamp(12px, 1.55vw, 14px);
    }
}

/* === SHIFT TABLET ORBITAL ARC EXPERIMENT === */

@media (min-width: 768px) and (max-width: 1400px) and (pointer: coarse) {
    .home-menu-zone {
        position: fixed;
        z-index: 70;
        top: 50%;
        right: auto;
        bottom: auto;
        left: 18px;
        margin: 0;
        transform: translateY(-50%);
    }

    .orb-menu {
        --orb-core-shift-x: -28px;
        width: 150px;
        height: 150px;
    }

    .orb-menu__toggle {
        width: 108px;
        height: 108px;
    }

    .orb-menu__toggle::before {
        inset: -8px;
    }

    .orb-menu__toggle::after {
        inset: -16px;
    }

    .orb-menu__pulse {
        inset: -30px;
    }

    .orb-menu__icon {
        font-size: 30px;
    }

    .orb-menu__label {
        font-size: 14px;
    }

    .orb-menu__panel {
        position: absolute;
        top: 50%;
        right: auto;
        bottom: auto;
        left: 92px;

        width: 310px;
        max-height: none;

        display: grid;
        gap: 8px;
        padding: 18px 0 18px 62px;

        overflow: visible;

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

        transform: translate(-18px, -50%) scale(0.985);
        transform-origin: left center;

        transition:
            opacity 190ms ease,
            transform 240ms cubic-bezier(.2, .72, .25, 1),
            visibility 190ms ease;
    }

    .orb-menu__branch {
        display: block;
        position: absolute;
        z-index: 2;
        top: 50%;
        left: -70px;
        width: 330px;
        height: min(700px, 82dvh);
        overflow: visible;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%);
        transition: opacity 260ms ease;
    }

    .orb-menu__panel,
    .orb-menu:hover .orb-menu__panel,
    .orb-menu:focus-within .orb-menu__panel {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-18px, -50%) scale(0.985);
    }

    .orb-menu.is-open .orb-menu__panel,
    .orb-menu.is-open:hover .orb-menu__panel,
    .orb-menu.is-open:focus-within .orb-menu__panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(0, -50%) scale(1);
    }

    .orb-menu__branch,
    .orb-menu:hover .orb-menu__branch,
    .orb-menu:focus-within .orb-menu__branch {
        opacity: 0;
    }

    .orb-menu.is-open .orb-menu__branch {
        opacity: 1;
    }

    .orb-menu__item,
    .orb-menu:hover .orb-menu__item,
    .orb-menu:focus-within .orb-menu__item {
        width: 242px;
        min-height: 40px;
        opacity: 0;

        transform: translateX(calc(var(--menu-shift) - 12px));

        transition:
            opacity 190ms ease,
            transform 230ms cubic-bezier(.2, .72, .25, 1);

        transition-delay: calc(var(--menu-index) * 55ms);
    }

    .orb-menu.is-open .orb-menu__item {
        opacity: 1;
        transform: translateX(var(--menu-shift));
    }

    .orb-menu__item-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
    }

    .orb-menu__item-body {
        min-height: 40px;
    }

    .orb-menu__text {
        font-size: 12px;
    }
}

/* === SHIFT TABLET MENU POSITION TUNE === */

@media (min-width: 768px) and (max-width: 1400px) and (pointer: coarse) {
    /* Closed state: smaller and higher, clear of the lunar card. */
    .home-menu-zone {
        top: 36%;
        transition: top 320ms cubic-bezier(.2, .72, .25, 1);
    }

    .orb-menu {
        width: 136px;
        height: 136px;
    }

    .orb-menu__toggle {
        width: 94px;
        height: 94px;
    }

    .orb-menu__icon {
        font-size: 27px;
    }

    .orb-menu__label {
        font-size: 13px;
    }

    .orb-menu__pulse {
        inset: -27px;
    }

    /* Open state: button + arc + list move to the screen centre. */
    body.home-mobile-menu-open .home-menu-zone {
        top: 50%;
    }
}

/* === SHIFT TABLET ORBITAL MENU POLISH === */

@keyframes tablet-orb-item-reveal {
    0% {
        opacity: 0;
        transform:
            translateX(calc(var(--menu-shift) - 18px))
            translateY(-5px)
            scale(0.97);
    }

    100% {
        opacity: 1;
        transform:
            translateX(var(--menu-shift))
            translateY(0)
            scale(1);
    }
}

@media (min-width: 768px) and (max-width: 1400px) and (pointer: coarse) {
    .orb-menu__panel {
        width: 350px;
        gap: 9px;
    }

    .orb-menu__item,
    .orb-menu:hover .orb-menu__item,
    .orb-menu:focus-within .orb-menu__item {
        width: 270px;
        min-height: 44px;
    }

    .orb-menu.is-open .orb-menu__item {
        opacity: 1;
        transform: translateX(var(--menu-shift));

        animation:
            tablet-orb-item-reveal
            270ms
            cubic-bezier(.2, .72, .25, 1)
            both;

        animation-delay: calc(var(--menu-index) * 65ms);
    }

    .orb-menu__item-icon {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }

    .orb-menu__item-icon svg {
        width: 19px;
        height: 19px;
    }

    .orb-menu__item-body {
        min-height: 44px;
        padding-right: 14px;
        padding-left: 17px;
    }

    .orb-menu__text {
        font-size: 13px;
        font-weight: 600;
    }

    .orb-menu__chevron {
        font-size: 20px;
    }
}

/* === SHIFT DESKTOP ORBITAL STAGGER === */

@keyframes desktop-orb-item-reveal {
    0% {
        opacity: 0;
        transform:
            translateX(calc(var(--menu-shift) - 18px))
            translateY(-5px)
            scale(0.97);
    }

    100% {
        opacity: 1;
        transform:
            translateX(var(--menu-shift))
            translateY(0)
            scale(1);
    }
}

@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
    .orb-menu:hover .orb-menu__item,
    .orb-menu:focus-within .orb-menu__item,
    .orb-menu.is-open .orb-menu__item {
        opacity: 1;
        transform: translateX(var(--menu-shift));

        animation:
            desktop-orb-item-reveal
            270ms
            cubic-bezier(.2, .72, .25, 1)
            both;

        animation-delay: calc(var(--menu-index) * 65ms);
    }
}

/* === SHIFT DESKTOP STAGGER SMOOTHING === */

@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
    /*
     * Do not slide/scale the whole panel while individual items
     * are revealing in sequence. This prevents the old motion
     * from fighting with the new stagger animation.
     */
    .orb-menu__panel {
        transform: translate(0, -50%) scale(1);
        transition:
            opacity 150ms ease,
            visibility 150ms ease;
    }

    .orb-menu:hover .orb-menu__panel,
    .orb-menu:focus-within .orb-menu__panel,
    .orb-menu.is-open .orb-menu__panel {
        transform: translate(0, -50%) scale(1);
    }

    .orb-menu__item {
        transition: none;
    }
}

/* === SHIFT DESKTOP CLICK TOGGLE === */

@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
    /*
     * An explicit second click must win over :hover.
     * The suppression is cleared after the pointer leaves the menu.
     */
    .orb-menu.is-click-closed .orb-menu__panel,
    .orb-menu.is-click-closed:hover .orb-menu__panel,
    .orb-menu.is-click-closed:focus-within .orb-menu__panel {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate(0, -50%) scale(1) !important;
    }

    .orb-menu.is-click-closed .orb-menu__branch,
    .orb-menu.is-click-closed:hover .orb-menu__branch,
    .orb-menu.is-click-closed:focus-within .orb-menu__branch {
        opacity: 0 !important;
    }

    .orb-menu.is-click-closed .orb-menu__item,
    .orb-menu.is-click-closed:hover .orb-menu__item,
    .orb-menu.is-click-closed:focus-within .orb-menu__item {
        opacity: 0 !important;
        animation: none !important;
    }
}

/* Compact landscape tablet orbital menu v2 */
@media (min-width: 768px) and (max-width: 1400px)
       and (min-height: 501px) and (max-height: 850px)
       and (orientation: landscape) and (pointer: coarse) {

    body.natives-redesign .orb-menu__panel,
    body.native-detail-redesign .orb-menu__panel {
        gap: clamp(2px, 0.6dvh, 5px);
        padding-top: 6px;
        padding-bottom: 6px;
    }

    body.natives-redesign .orb-menu__item,
    body.native-detail-redesign .orb-menu__item,
    body.natives-redesign .orb-menu:hover .orb-menu__item,
    body.native-detail-redesign .orb-menu:hover .orb-menu__item,
    body.natives-redesign .orb-menu:focus-within .orb-menu__item,
    body.native-detail-redesign .orb-menu:focus-within .orb-menu__item {
        width: 248px;
        min-height: clamp(28px, 4.8dvh, 38px);
    }

    body.natives-redesign .orb-menu__item-icon,
    body.native-detail-redesign .orb-menu__item-icon {
        flex-basis: clamp(28px, 4.8dvh, 38px);
        width: clamp(28px, 4.8dvh, 38px);
        height: clamp(28px, 4.8dvh, 38px);
    }

    body.natives-redesign .orb-menu__item-body,
    body.native-detail-redesign .orb-menu__item-body {
        min-height: clamp(28px, 4.8dvh, 38px);
    }

    body.natives-redesign .orb-menu__branch,
    body.native-detail-redesign .orb-menu__branch {
        left: -34px;
    }
}

/* Touch orbital close and button size v3 */
@media (min-width: 1401px) and (max-width: 1600px)
       and (pointer: coarse) and (hover: none) {

    /*
     * Touch browsers may retain :hover or :focus-within.
     * The closed state must always override both.
     */
    .orb-menu:not(.is-open) .orb-menu__panel {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .orb-menu:not(.is-open) .orb-menu__branch {
        opacity: 0;
        pointer-events: none;
    }

    .orb-menu:not(.is-open) .orb-menu__item {
        opacity: 0;
        animation: none;
        pointer-events: none;
    }

    /*
     * Compact touch button. Keep the orbital panel
     * geometry and its anchor unchanged.
     */
    .orb-menu__toggle {
        width: 74px;
        height: 74px;
    }

    .orb-menu__toggle::before {
        inset: -6px;
    }

    .orb-menu__toggle::after {
        inset: -12px;
    }

    .orb-menu__pulse {
        inset: -18px;
    }

    .orb-menu__icon {
        font-size: 22px;
    }

    .orb-menu__label {
        font-size: 11px;
    }
}