/* =========================================================
   ALGARVE'S GRILL — INTERACTIVE 3D MENU

   The menu artwork is rendered at its full inspection size from
   the start. A single 3D transform handles the approach, rotation
   and flip, then JavaScript takes over for pointer panning and
   wheel zoom.

   --menu-start delays the reveal until the shared header intro has
   finished. Page-to-page navigation sets it to 0s.
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.menu3d-page {
    --menu-start: 3.65s;

    width: 100%;
    overflow: hidden;
}

.skip-header-intro .menu3d-page {
    --menu-start: 0s;
}


/* =========================================================
   3D STAGE
   ========================================================= */

.menu3d-stage {
    position: relative;

    width: 100%;
    height: min(820px, 76vh);
    min-height: 650px;

    overflow: hidden;

    display: grid;
    place-items: center;

    perspective: 1800px;
    perspective-origin: 50% 46%;

    cursor: default;

    isolation: isolate;
}


/* Very subtle vignette without changing the site background */

.menu3d-stage::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 30%,
            rgba(0, 0, 0, 0.12) 100%
        );

    opacity: 0;

    animation:
        menu3dStageReveal
        0.3s
        ease-out
        var(--menu-start)
        forwards;

    z-index: 0;
}

@keyframes menu3dStageReveal {
    to {
        opacity: 1;
    }
}


/* =========================================================
   CAMERA
   ========================================================= */

.menu3d-camera {
    width: min(1120px, 78vw);
    aspect-ratio: 1190.6 / 841.9;

    transform-style: preserve-3d;
}


/* =========================================================
   INSPECTOR

   IMPORTANT:
   The SVG is physically rendered at 220% from the start.
   We never enlarge a low-resolution rendered version.
   ========================================================= */

.menu3d-inspector {

    visibility: hidden;

    animation:
        menu3dAppear
        0.01s
        linear
        var(--menu-start)
        forwards;
    position: absolute;

    left: 50%;
    top: 50%;

    width: 220%;
    height: 220%;

    transform-style: preserve-3d;

    --menu-pan-x: 0px;
    --menu-pan-y: 0px;

    transform:
        translate(
            calc(-50% + var(--menu-pan-x)),
            calc(-50% + var(--menu-pan-y))
        );

    will-change: transform;
}

@keyframes menu3dAppear {
    to {
        visibility: visible;
    }
}


/* =========================================================
   ANGLE WRAPPER
   ========================================================= */

.menu3d-angle {
    width: 100%;
    height: 100%;

    transform-style: preserve-3d;
}


/* =========================================================
   PHYSICAL MENU

   ONE animation controls:
   - distance
   - screen rotation
   - flip

   No separate camera animation.
   No separate angle animation.
   No scale animation.
   ========================================================= */

.menu3d-sheet {
    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;
    transform-origin: center center;

    animation:
        menu3dSheetFlip
        2.9s
        linear
        var(--menu-start)
        forwards;

    will-change: transform;
}


/* =========================================================
   CONTINUOUS REVEAL
   ========================================================= */

@keyframes menu3dSheetFlip {

    0% {
        transform:
            translate3d(-1.4vw, -1vh, -3800px)
            rotateZ(66deg)
            rotateY(0deg);
    }

    52% {
        transform:
            translate3d(-0.35vw, -0.25vh, -650px)
            rotateZ(14deg)
            rotateY(-8deg);
    }

    72% {
        transform:
            translate3d(-0.10vw, -0.08vh, -260px)
            rotateZ(7deg)
            rotateY(-78deg);
    }

    88% {
        transform:
            translate3d(0, 0, -70px)
            rotateZ(2deg)
            rotateY(-150deg);
    }

    100% {
        transform:
            translate3d(0, 0, 0)
            rotateZ(0deg)
            rotateY(-180deg);
    }
}


/* =========================================================
   FLATTEN 3D MENU FOR HIGH-RESOLUTION INSPECTION
   ========================================================= */

.menu3d-stage.is-ready .menu3d-sheet {
    animation: none !important;
    transform: none !important;

    transform-style: flat;
}

.menu3d-stage.is-ready .menu3d-front {
    display: none;
}

.menu3d-stage.is-ready .menu3d-back {
    transform: none !important;

    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

.menu3d-stage.is-ready .menu3d-paper-light {
    display: none;
}


/* =========================================================
   MENU FACES
   ========================================================= */

.menu3d-face {
    position: absolute;
    inset: 0;

    overflow: hidden;

    background: #ffffff;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transform-style: preserve-3d;
}

.menu3d-face img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    user-select: none;
    pointer-events: none;
}


/* Outside */

.menu3d-front {
    transform:
        rotateY(0deg)
        translateZ(1px);
}


/* Inside */

.menu3d-back {
    transform:
        rotateY(180deg)
        translateZ(1px);
}


/* =========================================================
   PAPER LIGHT / RIGHT-EDGE FLIP CUE
   ========================================================= */

.menu3d-paper-light {
    position: absolute;
    inset: 0;

    z-index: 4;

    pointer-events: none;

    opacity: 0;

    backface-visibility: hidden;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 58%,
            rgba(255, 255, 255, 0.08) 72%,
            rgba(255, 255, 255, 0.52) 94%,
            rgba(255, 255, 255, 0.72) 100%
        );

    animation:
        menu3dRightEdgeLight
        2.70s
        ease
        var(--menu-start)
        forwards;
}

@keyframes menu3dRightEdgeLight {

    0%,
    60% {
        opacity: 0;
    }

    66% {
        opacity: 0.85;
    }

    78% {
        opacity: 0.25;
    }

    90%,
    100% {
        opacity: 0;
    }
}


/* =========================================================
   INSPECTION MODE
   ========================================================= */

.menu3d-stage.is-ready {
    cursor: crosshair;
}


/* Small instruction appears only after the animation */

.menu3d-hint {
    position: absolute;

    left: 50%;
    bottom: 22px;

    z-index: 5;

    transform:
        translateX(-50%)
        translateY(8px);

    opacity: 0;

    padding:
        7px
        11px
        5px;

    font-family:
        "Bebas Neue",
        sans-serif;

    font-size: 17px;
    letter-spacing: 1.2px;

    color: var(--cream);

    background:
        rgba(40, 30, 24, 0.72);

    pointer-events: none;
}

.menu3d-stage.is-ready .menu3d-hint {
    animation:
        menu3dHint
        2.3s
        ease
        forwards;
}

@keyframes menu3dHint {

    0% {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(8px);
    }

    16%,
    70% {
        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }

    100% {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(0);
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .menu3d-stage::before,
    .menu3d-sheet,
    .menu3d-paper-light {
        animation: none !important;
    }

    .menu3d-stage::before {
        opacity: 1;
    }


    .menu3d-sheet {
        transform:
            rotateY(-180deg);
    }

}


/* =========================================================
   MOBILE MENU INTERACTION
   ========================================================= */

@media (max-width: 767px) {

    .menu3d-stage {
        height: calc(100svh - 96px);
        min-height: 560px;

        perspective: 1500px;
        perspective-origin: 50% 46%;
    }

    .menu3d-camera {
        position: relative;
        width: 100%;
    }

    /*
       Mobile begins at 1.7x rather than the desktop 2.2x.
       menu.js uses the same value when inspection mode takes over,
       so there is no size jump at the end of the reveal.
    */

    .menu3d-inspector {
        width: 170%;
        height: 170%;

        --menu-gesture-scale: 1;

        transform:
            translate(
                calc(-50% + var(--menu-pan-x)),
                calc(-50% + var(--menu-pan-y))
            )
            scale(var(--menu-gesture-scale));

        transform-origin: center center;

        touch-action: none;
        overscroll-behavior: contain;
        user-select: none;
        -webkit-user-select: none;
    }

    .menu3d-stage.is-ready {
        cursor: default;
    }

    .menu3d-stage.is-ready .menu3d-inspector {
        cursor: grab;
    }

    .menu3d-stage.is-ready .menu3d-inspector.is-touching {
        cursor: grabbing;
    }

    .menu3d-face img {
        -webkit-user-drag: none;
    }

    .menu3d-hint {
        bottom: 18px;

        padding: 7px 10px 5px;

        font-size: 0;
        white-space: nowrap;
    }

    .menu3d-hint::before {
        content: "DRAG TO EXPLORE  •  PINCH TO ZOOM";

        font-size: 15px;
        letter-spacing: 0.9px;
    }
}