:root {
    --sup-cream: #fff3d6;
    --sup-white: #fffdf7;
    --sup-brown: #321a14;
    --sup-brown-medium: #6b3826;
    --sup-wood: #8a481f;
    --sup-wood-light: #ad5a25;
    --sup-turquoise: #18b7b0;
    --sup-turquoise-dark: #087f83;
    --sup-orange: #f47a1f;
    --sup-coral: #e63b2e;
    --sup-yellow: #f5c242;

    --sup-content-width: 780px;
    --sup-pattern-width: clamp(80px, 16vw, 280px);
    --sup-wood-grain:
        radial-gradient(
            ellipse at 23% 67%,
            transparent 0 7px,
            rgb(50 26 20 / 25%) 8px 10px,
            transparent 11px 100%
        ),
        radial-gradient(
            ellipse at 76% 28%,
            transparent 0 5px,
            rgb(255 255 255 / 10%) 6px 7px,
            rgb(50 26 20 / 18%) 8px 10px,
            transparent 11px 100%
        ),
        linear-gradient(
            98deg,
            rgb(255 255 255 / 10%) 0 2%,
            transparent 2% 13%,
            rgb(50 26 20 / 13%) 13% 15%,
            transparent 15% 34%,
            rgb(255 255 255 / 7%) 34% 36%,
            transparent 36% 62%,
            rgb(50 26 20 / 12%) 62% 64%,
            transparent 64% 100%
        ),
        linear-gradient(
            180deg,
            rgb(255 255 255 / 15%),
            transparent 24%,
            rgb(50 26 20 / 17%) 100%
        );

    /*
     * La stessa variabile viene usata nella home
     * e nel menu, garantendo posizione identica.
     */
    --sup-tiki-top: clamp(66px, 7vw, 112px);
    --sup-tiki-width: clamp(160px, 12vw, 310px);
    --sup-menu-mask-width: clamp(132px, 9vw, 170px);

    --sup-footer-height: clamp(460px, 62svh, 620px);
    --sup-menu-duration: 700ms;
    --sup-admin-offset: 0px;
}

.admin-bar {
    --sup-admin-offset: 32px;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

[class^="sup-"],
[class*=" sup-"],
[class^="sup-"]::before,
[class^="sup-"]::after,
[class*=" sup-"]::before,
[class*=" sup-"]::after {
    box-sizing: border-box;
}

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

html,
body {
    margin: 0;
    padding: 0;
}

body.sup-body {
    overflow-x: hidden;
    background: var(--sup-turquoise-dark);
    color: var(--sup-brown);
}

body.sup-body.is-menu-open {
    overflow: hidden;
}

.sup-site-menu__mask,
.sup-brand-stack img,
.sup-booking-header img,
.sup-gprent-footer__logo {
    display: block;
    max-width: 100%;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

/* =========================================================
   CONTENITORE DELLA PAGINA
   ========================================================= */

.sup-site-canvas {
    position: relative;
    z-index: 20;
    min-height: 100vh;

    /*
     * Questo spazio trasparente consente al footer fisso
     * di apparire progressivamente a fine pagina.
     */
    margin-bottom: var(--sup-footer-height);

    overflow: hidden;
    isolation: isolate;
    background: var(--sup-cream);

    transform: translate3d(0, 0, 0);
    transition:
        transform var(--sup-menu-duration)
        cubic-bezier(0.77, 0, 0.18, 1);

    will-change: transform;
}

/* Pattern laterali che proseguono per tutta la pagina. */

.sup-site-canvas::before,
.sup-site-canvas::after {
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;

    width: var(--sup-pattern-width);

    content: "";

    background-repeat: repeat-y;
    background-position: top center;
    background-size: 100% auto;

    pointer-events: none;
}

.sup-site-canvas::before {
    left: 0;
    background-image: url("../images/pattern-left-rev2.png");
}

.sup-site-canvas::after {
    right: 0;
    background-image: url("../images/pattern-left-rev2.png");
    transform: scaleX(-1);
}

.sup-container {
    position: relative;
    z-index: 20;

    width: min(
        calc(
            100% -
            (2 * var(--sup-pattern-width)) -
            48px
        ),
        var(--sup-content-width)
    );

    margin-inline: auto;
}

/* =========================================================
   CARTELLO MENU FISSO
   ========================================================= */

.sup-menu-toggle {
    position: fixed;
    z-index: 60;

    top: calc(
        20px +
        var(--sup-admin-offset)
    );

    right: clamp(14px, 2vw, 30px);

    min-width: 240px;
    min-height: 80px;

    padding: 15px 32px;

    border: 5px solid var(--sup-brown);

    background-color: var(--sup-wood);
    background-image: var(--sup-wood-grain);
    color: var(--sup-white);

    box-shadow:
        inset 0 4px 0 rgb(255 255 255 / 12%),
        inset 0 -7px 0 rgb(50 26 20 / 17%);

    clip-path: polygon(
        4% 8%,
        95% 0,
        100% 82%,
        92% 100%,
        3% 92%,
        0 18%
    );

    filter:
        drop-shadow(8px 9px 0 var(--sup-brown))
        drop-shadow(0 14px 16px rgb(50 26 20 / 22%));

    font-size: 2rem;
    font-family: inherit;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-shadow:
        0 2px 0 rgb(50 26 20 / 60%),
        1px 0 0 rgb(50 26 20 / 35%);
    text-transform: uppercase;

    cursor: pointer;

    transform: rotate(1.5deg);

    transition:
        transform 180ms ease,
        background-color 180ms ease;
}

.sup-menu-toggle:hover {
    background-color: var(--sup-wood-light);
    transform:
        rotate(-1deg)
        translateY(-2px);
}

.sup-menu-toggle:focus-visible {
    outline: 4px solid var(--sup-yellow);
    outline-offset: 5px;
}

.sup-menu-toggle::before,
.sup-menu-toggle::after {
    position: absolute;
    top: 50%;

    width: 8px;
    height: 8px;

    border: 2px solid var(--sup-brown);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 34% 30%,
            #fff2a5 0 13%,
            var(--sup-yellow) 18% 55%,
            #ae6812 60% 100%
        );

    box-shadow:
        inset -1px -1px 1px rgb(50 26 20 / 35%),
        0 1px 1px rgb(255 255 255 / 20%);

    content: "";

    transform: translateY(-50%);
}

.sup-menu-toggle::before {
    left: 12px;
}

.sup-menu-toggle::after {
    right: 12px;
}

/* =========================================================
   MENU FULL SCREEN
   ========================================================= */

.sup-site-menu {
    position: fixed;
    z-index: 15;
    inset: 0;
    height: 100dvh;
    min-height: 100svh;

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

    background-color: var(--sup-turquoise);
    background-image:
        radial-gradient(
            circle at 25% 42%,
            transparent 0 115px,
            rgb(255 243 214 / 7%) 117px 122px,
            transparent 124px 100%
        ),
        radial-gradient(
            circle at 78% 72%,
            transparent 0 170px,
            rgb(8 127 131 / 10%) 172px 178px,
            transparent 180px 100%
        );

    visibility: hidden;
    pointer-events: none;

    transform: translate3d(100%, 0, 0);

    transition:
        transform var(--sup-menu-duration)
            cubic-bezier(0.77, 0, 0.18, 1),
        visibility 0s linear var(--sup-menu-duration);

    will-change: transform;
}

.sup-site-menu::before,
.sup-site-menu::after {
    content: none;
}

.sup-site-menu__scene::before,
.sup-site-menu__scene::after {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;

    width: min(14vw, 210px);

    content: "";

    background-repeat: repeat-y;
    background-position: top center;
    background-size: 100% auto;

    pointer-events: none;
}

.sup-site-menu__scene::before {
    left: 0;
    background-image: url("../images/pattern-left-rev2.png");
}

.sup-site-menu__scene::after {
    right: 0;
    background-image: url("../images/pattern-left-rev2.png");
    transform: scaleX(-1);
}

.sup-site-menu__scene {
    position: relative;
    z-index: 2;

    display: flex;
    min-height: 100svh;

    padding:
        calc(
            22px +
            var(--sup-admin-offset)
        )
        24px
        32px;

    align-items: center;
    flex-direction: column;
}

.sup-site-menu__mask {
    position: relative;
    z-index: 4;

    width: var(--sup-menu-mask-width);

    flex: 0 0 auto;
}

/* Palo centrale. */

.sup-signpost {
    position: relative;
    isolation: isolate;

    display: flex;
    width: min(94vw, 680px);

    margin-top: -18px;
    padding: 42px 20px 48px;

    align-items: center;
    flex-direction: column;
    flex: 1 0 auto;

    gap: clamp(16px, 2.2vh, 24px);
}

.sup-signpost::before {
    position: absolute;
    z-index: 0;

    top: -72px;
    bottom: calc(-1 * clamp(58px, 8svh, 94px));
    left: 50%;

    width: clamp(36px, 3.6vw, 50px);

    background-color: var(--sup-wood);
    background-image:
        radial-gradient(
            ellipse at 64% 18%,
            transparent 0 4px,
            rgb(50 26 20 / 22%) 5px 7px,
            transparent 8px 100%
        ),
        radial-gradient(
            ellipse at 31% 73%,
            transparent 0 5px,
            rgb(50 26 20 / 18%) 6px 8px,
            transparent 9px 100%
        ),
        linear-gradient(
            90deg,
            rgb(255 255 255 / 18%),
            transparent 16% 64%,
            rgb(50 26 20 / 17%)
        ),
        repeating-linear-gradient(
            176deg,
            transparent 0 31px,
            rgb(50 26 20 / 11%) 32px 34px,
            transparent 35px 51px
        );

    clip-path: polygon(
        9% 0,
        91% 1%,
        100% 18%,
        87% 39%,
        98% 61%,
        84% 82%,
        92% 100%,
        8% 100%,
        0 79%,
        10% 56%,
        2% 31%
    );

    filter: drop-shadow(
        7px 9px 8px
        rgb(50 26 20 / 18%)
    );

    content: "";

    transform:
        translateX(-48%)
        rotate(0.8deg);
}

/* Cartelli. */

.sup-sign {
    position: relative;
    z-index: 2;

    display: flex;
    width: min(80vw, 620px);
    min-height: 78px;

    padding: 19px 52px;

    align-items: center;
    justify-content: center;

    border: 4px solid var(--sup-brown);

    background-color: var(--sup-wood);
    background-image: var(--sup-wood-grain);
    color: var(--sup-white);

    box-shadow:
        inset 0 5px 0 rgb(255 255 255 / 11%),
        inset 0 -8px 0 rgb(50 26 20 / 18%);

    filter:
        drop-shadow(8px 9px 0 var(--sup-brown))
        drop-shadow(0 14px 14px rgb(50 26 20 / 18%));

    font-size: clamp(1.6rem, 2.8vw, 2rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.045em;
    text-align: center;
    text-decoration: none;
    text-shadow:
        0 2px 0 rgb(50 26 20 / 65%),
        1px 0 0 rgb(50 26 20 / 40%);
    text-transform: uppercase;

    transition:
        transform 180ms ease,
        background-color 180ms ease;
}

.sup-sign--right {
    clip-path: polygon(
        0 7%,
        85% 0,
        100% 50%,
        85% 100%,
        0 93%,
        5% 50%
    );
}

.sup-sign--left {
    clip-path: polygon(
        15% 0,
        100% 7%,
        95% 50%,
        100% 93%,
        15% 100%,
        0 50%
    );
}

.sup-sign::before,
.sup-sign::after {
    position: absolute;
    top: 50%;

    width: 9px;
    height: 9px;

    border: 2px solid var(--sup-brown);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 34% 30%,
            #fff2a5 0 13%,
            var(--sup-yellow) 18% 55%,
            #ae6812 60% 100%
        );

    content: "";

    transform: translateY(-50%);

    box-shadow:
        inset -1px -1px 1px rgb(50 26 20 / 35%),
        0 1px 1px rgb(255 255 255 / 20%);
}

.sup-sign::before {
    left: 23px;
}

.sup-sign::after {
    right: 23px;
}

.sup-sign:hover,
.sup-sign:focus-visible {
    z-index: 5;

    background-color: var(--sup-orange);
    color: var(--sup-white) !important;

    outline: none;

    transform:
        translateX(var(--sup-sign-offset, 0))
        rotate(0deg)
        scale(1.035);
}

.sup-site-menu .sup-sign:any-link,
.sup-site-menu .sup-sign:any-link:hover,
.sup-site-menu .sup-sign:any-link:focus,
.sup-site-menu .sup-sign:any-link:visited {
    color: #452510 !important;
    text-decoration: none !important;
}

.sup-sign--one {
    --sup-sign-offset: -30px;

    transform:
        translateX(-30px)
        rotate(-2deg);
}

.sup-sign--two {
    --sup-sign-offset: 36px;

    transform:
        translateX(36px)
        rotate(1.8deg);
}

.sup-sign--three {
    --sup-sign-offset: -16px;

    transform:
        translateX(-16px)
        rotate(1.2deg);
}

.sup-sign--four {
    --sup-sign-offset: 25px;

    transform:
        translateX(25px)
        rotate(-1.6deg);
}

/* Stato aperto. */

body.is-menu-open .sup-site-menu {
    visibility: visible;
    pointer-events: auto;

    transform: translate3d(0, 0, 0);

    transition-delay: 0s;
}

body.is-menu-open .sup-site-canvas,
body.is-menu-open .sup-reveal-footer {
    transform: translate3d(-100vw, 0, 0);
}

/* =========================================================
   FOOTER FISSO CON EFFETTO REVEAL
   ========================================================= */

.sup-reveal-footer {
    position: fixed;
    z-index: 5;

    right: 0;
    bottom: 0;
    left: 0;

    height: var(--sup-footer-height);

    overflow-x: hidden;
    overflow-y: auto;
    isolation: isolate;

    background: var(--sup-turquoise-dark);

    transform: translate3d(0, 0, 0);

    transition:
        transform var(--sup-menu-duration)
        cubic-bezier(0.77, 0, 0.18, 1);

    will-change: transform;
}

.sup-reveal-footer__picture {
    position: absolute;
    z-index: 1;
    inset: 0;

    display: block;
    width: 100%;
    height: 100%;
}

.sup-reveal-footer__landscape {
    display: block;
    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;
    object-position: center bottom;
}

.sup-reveal-footer::after {
    position: absolute;
    z-index: 2;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgb(4 20 24 / 4%) 0%,
            rgb(4 20 24 / 20%) 24%,
            rgb(4 20 24 / 76%) 62%,
            rgb(4 14 18 / 94%) 100%
        );

    content: "";

    pointer-events: none;
}

.sup-gprent-footer {
    position: relative;
    z-index: 3;

    display: grid;
    width: min(100%, 1500px);
    min-height: 100%;

    margin-inline: auto;
    padding:
        clamp(28px, 4vw, 58px)
        clamp(24px, 4.5vw, 72px)
        calc(
            clamp(30px, 4vw, 56px) +
            env(safe-area-inset-bottom, 0px)
        );

    align-content: end;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);

    gap: clamp(44px, 7vw, 110px);

    color: var(--sup-white);

    text-shadow: 0 2px 5px rgb(0 0 0 / 72%);
}

.sup-gprent-footer__services,
.sup-gprent-footer__company {
    min-width: 0;
}

.sup-gprent-footer__logo {
    width: min(100%, 310px);
    height: auto;

    margin-bottom: 14px;
}

.sup-gprent-footer__logo-link {
    display: block;
    width: fit-content;
}

.sup-gprent-footer__logo-link picture {
    display: block;
}

.sup-gprent-footer h2 {
    margin: 0 0 14px;

    color: var(--sup-white);

    font-size: clamp(1rem, 1.4vw, 1.3rem);
    line-height: 1.2;
}

.sup-gprent-footer h3 {
    margin: 0 0 5px;

    color: var(--sup-white);

    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    line-height: 1.2;
}

.sup-gprent-footer p {
    margin: 0;

    color: var(--sup-white);

    font-size: clamp(0.83rem, 1.05vw, 1rem);
    line-height: 1.5;
}

.sup-gprent-footer__returns {
    display: grid;

    margin-block: 20px;

    gap: 4px;
}

.sup-gprent-footer a {
    width: fit-content;

    color: var(--sup-white) !important;

    font-size: clamp(0.88rem, 1.08vw, 1.02rem);
    font-weight: 900;
    line-height: 1.45;
    text-decoration: none !important;

    transition:
        color 160ms ease,
        transform 160ms ease;
}

.sup-gprent-footer a span {
    color: var(--sup-coral);
}

.sup-gprent-footer a:hover,
.sup-gprent-footer a:focus-visible {
    color: var(--sup-orange) !important;
    outline: none;
    transform: translateY(-1px);
}

.sup-gprent-footer__company {
    display: grid;

    align-content: end;

    gap: 7px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
    :root {
        --sup-pattern-width: clamp(55px, 11vw, 92px);
        --sup-tiki-width: clamp(160px, 21vw, 210px);
        --sup-footer-height: 100svh;
    }

    .sup-site-menu__scene::before,
    .sup-site-menu__scene::after {
        width: 70px;
    }

    .sup-sign {
        width: min(76vw, 500px);
    }

    .sup-gprent-footer {
        min-height: 100%;

        padding:
            24px
            20px
            calc(
                28px +
                env(safe-area-inset-bottom, 0px)
            );

        grid-template-columns: 1fr;

        align-content: end;

        gap: 15px;

        text-align: center;
    }

    .sup-gprent-footer__services {
        display: grid;

        justify-items: center;

        gap: 8px;
    }

    .sup-gprent-footer__services > h2,
    .sup-gprent-footer__services > p,
    .sup-gprent-footer__returns > h3,
    .sup-gprent-footer__returns > p {
        display: none;
    }

    .sup-gprent-footer__logo-link {
        width: min(72vw, 250px);
    }

    .sup-gprent-footer__logo {
        width: 100%;
        margin: 0;
    }

    .sup-gprent-footer__returns {
        display: block;
        margin: 0;
    }

    .sup-gprent-footer__returns > a {
        margin-inline: auto;

        font-size: 0.9rem;
        line-height: 1.2;
    }

    .sup-gprent-footer__company {
        justify-items: center;

        padding-top: 12px;

        border-top: 1px solid rgb(255 255 255 / 18%);

        gap: 5px;

        text-align: center;
    }

    .sup-gprent-footer__company p,
    .sup-gprent-footer__company a {
        max-width: 420px;

        font-size: 0.65rem;
        line-height: 1.35;
    }

    .sup-reveal-footer__landscape {
        object-position: center center;
    }

    .sup-reveal-footer::after {
        background:
            linear-gradient(
                180deg,
                rgb(4 20 24 / 34%) 0%,
                rgb(4 20 24 / 76%) 28%,
                rgb(4 14 18 / 96%) 100%
            );
    }
}

@media (max-width: 640px) {
    :root {
        --sup-pattern-width: 40px;
        --sup-tiki-top: 58px;
        --sup-tiki-width: min(40vw, 160px);
        --sup-menu-mask-width: min(34vw, 120px);
        --sup-footer-height: 100svh;
    }

    .sup-container {
        width: 100%;
        padding-inline:
            calc(
                var(--sup-pattern-width) +
                14px
            );
    }

    .sup-menu-toggle {
        top: calc(
            14px +
            var(--sup-admin-offset)
        );

        right: 12px;

        min-width: 128px;
        min-height: 44px;

        padding: 11px 24px;

        border-width: 3px;

        font-size: 1.2rem;

        filter:
            drop-shadow(5px 6px 0 var(--sup-brown));
    }

    .sup-menu-toggle::before {
        left: 9px;
    }

    .sup-menu-toggle::after {
        right: 9px;
    }

    .sup-site-menu__scene::before,
    .sup-site-menu__scene::after {
        width: 42px;
    }

    .sup-site-menu__scene {
        min-height: 100svh;
        padding-inline: 12px;
        padding-bottom: 24px;
    }

    .sup-signpost {
        width: 100%;

        padding-inline: 20px;
        padding-bottom: 42px;

        gap: 18px;
    }

    .sup-sign {
        width: min(79vw, 440px);
        min-height: 66px;

        padding: 14px 30px;

        border-width: 3px;

        font-size: 1.6rem;

        filter:
            drop-shadow(5px 6px 0 var(--sup-brown));
    }

    .sup-sign::before {
        left: 16px;
    }

    .sup-sign::after {
        right: 16px;
    }

    .sup-sign--one {
        --sup-sign-offset: -12px;

        transform:
            translateX(-12px)
            rotate(-1.8deg);
    }

    .sup-sign--two {
        --sup-sign-offset: 14px;

        transform:
            translateX(14px)
            rotate(1.5deg);
    }

    .sup-sign--three {
        --sup-sign-offset: -8px;

        transform:
            translateX(-8px)
            rotate(1deg);
    }

    .sup-sign--four {
        --sup-sign-offset: 10px;

        transform:
            translateX(10px)
            rotate(-1.2deg);
    }

}

@media (max-width: 782px) {
    .admin-bar {
        --sup-admin-offset: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sup-site-canvas,
    .sup-site-menu,
    .sup-reveal-footer,
    .sup-menu-toggle,
    .sup-sign {
        transition-duration: 1ms;
    }
}