/* Gooey Menu (adapted from Lucas Bebber's CodePen) - scoped to Philistine page */
body.philip-persecutor .menu-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--header-height, 72px);
    pointer-events: none;
    /* default off, enabled on controls */
}

body.philip-persecutor .menu {
    position: relative;
    width: 120px;
    height: 120px;
    pointer-events: auto;
    filter: url('#goo');
}

body.philip-persecutor .menu .menu-open {
    display: none;
}

body.philip-persecutor .menu-open-button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.philip-persecutor .menu-item {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 56px;
    height: 56px;
    margin: -28px;
    border-radius: 50%;
    background: var(--c1, #222);
    color: var(--cBg, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transform: translate3d(0, 0, 0) scale(.95);
    transition: transform .48s cubic-bezier(.2, .9, .3, 1), opacity .48s cubic-bezier(.2, .9, .3, 1);
    opacity: 0;
    z-index: 50;
}

/* 4 items layout (radial positions) */
body.philip-persecutor .menu-item:nth-of-type(1) {
    transform: translate(-70px, -10px) scale(.95);
}

body.philip-persecutor .menu-item:nth-of-type(2) {
    transform: translate(0px, -90px) scale(.95);
}

body.philip-persecutor .menu-item:nth-of-type(3) {
    transform: translate(70px, -10px) scale(.95);
}

body.philip-persecutor .menu-item:nth-of-type(4) {
    transform: translate(0px, 80px) scale(.95);
}

body.philip-persecutor .menu-open:checked~.menu-item {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* small label inside */
body.philip-persecutor .menu-item .label {
    display: block;
    font-size: 0.85rem;
    pointer-events: none;
}

/* goo blobs (visual elements that the CodePen used) */
body.philip-persecutor .menu .blob {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--c1, #222);
    opacity: .85;
    z-index: 10;
}

/* Hide legacy global elements */
body.philip-persecutor #hamburger,
body.philip-persecutor #mobile-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ensure menu sits above page content */
body.philip-persecutor header .menu-wrap {
    z-index: 1200;
}

/* Accessibility: keyboard focus */
body.philip-persecutor .menu-item:focus {
    outline: 2px solid rgba(255, 255, 255, 0.2);
}

/* Strong overrides to prevent legacy CSS from showing duplicate elements */
body.philip-persecutor #hamburger,
body.philip-persecutor #mobile-nav,
body.philip-persecutor .phiper-blobs,
body.philip-persecutor .phiper-blob {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Ensure our blob sits behind items and is not oversized */
body.philip-persecutor .menu .blob {
    width: 120px !important;
    height: 120px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 0 !important;
    opacity: .75 !important;
}

/* make menu items clearly on top */
body.philip-persecutor .menu-item {
    z-index: 200 !important;
}