*, *::before, *::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    font-size: 1.16667em;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;

    --g-padding: 1em;
    --ff-sans-serif: "barbieri", sans-serif;

    --section-separator-height: 32px;
}
body {
    min-height: 100%;
    margin: 0;
    display: grid;
    grid-template: minmax(0, 1fr)
                   max-content
                 / minmax(0, 1fr);
    font-family: var(--ff-sans-serif);
}
header {
    --_edge-offset: var(--g-padding);
    display: grid;
    grid-template: minmax(0, 1fr)
                 / max-content minmax(0, 1fr);
    position: fixed;
    inset: var(--_edge-offset) var(--_edge-offset) auto var(--_edge-offset);
    margin-inline: auto;
    inline-size: max-content;
    background: linear-gradient(#fff6, #fffc);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 2px solid #fff;
    border-width: 3px 5px 1px 5px;
    border-radius: 100vh;
    padding-inline: 2em;
    box-shadow: 0 1em 4em #0005;
    z-index: 9;
    #logo {
        display: block;
        padding: var(--g-padding);
        transition: scale 0.1s ease;
        position: relative;
        top: 4px;
        &:hover {
            scale: 1.1;
            animation: navlink-hovering 1s ease infinite;
        }
    }
    nav {
        margin-inline-start: auto;
        display: flex;
        align-items: center;
        a {
            display: block;
            padding: var(--g-padding);
            text-decoration: none;
            transition: 0.1s ease;
            transition-property: scale, rotate, filter;
            span {
                color: #eee;
                text-shadow:
                    0 1px 0 #4d4d4d,
                    0 -1px 0 #4d4d4d,
                    -1px 0 0 #4d4d4d,
                    1px 0 0 #4d4d4d,
                    1px 1px 0 #4d4d4d,
                    -1px -1px 0 #4d4d4d,
                    -1px 1px 0 #4d4d4d,
                    1px -1px 0 #4d4d4d,

                    0 2px 0 #fff,
                    0 -2px 0 #fff,
                    -2px 0 0 #fff,
                    2px 0 0 #fff,
                    2px 2px 0 #fff,
                    -2px -2px 0 #fff,
                    -2px 2px 0 #fff,
                    2px -2px 0 #fff,

                    0 3px 0 #000,
                    0 -3px 0 #000,
                    -3px 0 0 #000,
                    3px 0 0 #000,
                    3px 3px 0 #000,
                    -3px -3px 0 #000,
                    -3px 3px 0 #000,
                    3px -3px 0 #000,

                    0 4px 0 #000,
                    -3px 4px 0 #000,
                    3px 4px 0 #000
                ;
            }
            &:hover {
                scale: 1.1;
                filter: drop-shadow(0 0 3px #fffc);
                animation: navlink-hovering 1s ease infinite;
                &:nth-child(4n) { rotate: 2deg; }
                &:nth-child(4n + 1) { rotate: -2.4deg; }
                &:nth-child(4n + 2) { rotate: 0.8deg; }
                &:nth-child(4n + 3) { rotate: -1.1deg; }
            }
        }
    }
}

@keyframes navlink-hovering {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

main {
    >section {
        min-block-size: 100dvh;
        scroll-snap-align: start;
        &.flavor-spotlight {
            padding: 11em 4em calc(4em + var(--section-separator-height)) 4em;
            background-size: 100% auto;
            background-repeat: repeat-y;
            background-attachment: fixed;
            block-size: calc(100dvh + var(--section-separator-height));
            position: relative;
            filter: drop-shadow(0 6px 12px #0008);
            .spotlight-content {
                max-inline-size: max-content;
                margin-inline: auto;
                block-size: 100%;
                display: flex;
                justify-content: center;
                align-items: stretch;
                gap: var(--g-padding);
                .content-column {
                    display: flex;
                    flex-direction: column;
                    align-items: start;
                    gap: var(--g-padding);
                    &.left-column {
                        flex: 0;
                    }
                }
            }
            &:not(:first-child)::before {
                content: "";
                display: block;
                height: var(--section-separator-height);
                position: absolute;
                inset: calc(-1 * var(--section-separator-height)) 0 auto 0;
                background: inherit;
                -webkit-mask: url("/_asset/image/wave-mask.svg");
                mask: url("/_asset/image/wave-mask.svg");
            }
            &:last-child {
                z-index: 2;
                &::after {
                    content: "";
                    display: block;
                    height: var(--section-separator-height);
                    position: absolute;
                    inset: auto 0 calc(-1 * var(--section-separator-height)) 0;
                    background: inherit;
                    -webkit-mask: url("/_asset/image/wave-mask-inverted.svg");
                    mask: url("/_asset/image/wave-mask-inverted.svg");
                }
            }
            .flavor-logo {
                display: block;
                inline-size: 512px;
            }
            .flavor-text {
                display: block;
                font-size: 1.5em;
                margin-inline-start: 2em;
                margin-block-start: 1em;
            }
            .flavor-bottle {
                display: block;
                width: auto;
                height: 100%;
                margin-inline-start: auto;
                aspect-ratio: 0.757;
            }
            .flavor-cta {
                --_button-background: var(--s-button-fill);
                --_inner-color: hsl(from var(--_button-background) h s calc(l - 15));
                background: var(--_button-background);
                display: inline-flex;
                align-items: center;
                gap: .25em;
                margin-block-start: var(--g-padding);
                border-radius: 100vh;
                color: var(--s-button-text);
                text-decoration: none;
                border: 2px solid #fff;
                box-shadow: 0 0 0 rgb(from var(--_button-background) r g b / 0%), 0 0 0 2px #000, 0 2px 0 2px #000, 0 0 0 2px var(--_inner-color) inset;
                padding: 0.5em 1.5em;
                transition: 0.2s ease;
                transition-property: background-color, box-shadow, translate;
                &::after {
                    --_mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6.37219 4.64209'%3E%3Cpath d='M3.44592,0c-.21582.38379-.51562.95947-.73145,1.25928.16138.07397.56366.28357.93951.48126-1.50171.00244-3.40027.01019-3.65399.03448.01221.27588.02441.42041.02441.72021l-.02441.44336c.39972-.02411,2.1673-.0321,3.57275-.03479-.26202.16504-.52832.34186-.82263.55029.21631.2998.4082.63574.74365,1.18799,1.57129-1.03223,2.30273-1.5,2.87842-1.77539v-1.22363c-1.03125-.51562-1.9668-1.11523-2.92627-1.64307Z'/%3E%3C/svg%3E");
                    content: "";
                    display: block;
                    width: .68em;
                    height: .5em;
                    background: currentColor;
                    -webkit-mask: var(--_mask) right/contain no-repeat;
                    mask: var(--_mask) right/contain no-repeat;
                    transition: translate 0.2s ease;
                }
                &:hover {
                    --_button-background: hsl(from var(--s-button-fill) h s calc(l + 20));
                    translate: 0 -6px;
                    box-shadow: 0 0 8px 2px rgb(from var(--_button-background) r g b / 100%), 0 0 0 2px #000, 0 8px 0 2px #000, 0 0 0 2px var(--_inner-color) inset;
                    &::after {
                        translate: 0.25em;
                    }
                }
            }
        }
    }
}

.flavor__blueberry-rush {
    --s-button-fill: #4f00c1;
    --s-button-text: #fff;
    background-image: image-set(
        url("/_asset/image/backgrounds/SectionBackgroundTile_Blueberry_Rush.avif") type("image/avif"),
        url("/_asset/image/backgrounds/SectionBackgroundTile_Blueberry_Rush.webp") type("image/webp"),
        url("/_asset/image/backgrounds/SectionBackgroundTile_Blueberry_Rush.jpg") type("image/jpeg")
    );
    color: #fff;
}

.flavor__fresh-orange {
    --s-button-fill: #f50;
    --s-button-text: #fff;
    background-image: image-set(
        url("/_asset/image/backgrounds/SectionBackgroundTile_Fresh_Orange.avif") type("image/avif"),
        url("/_asset/image/backgrounds/SectionBackgroundTile_Fresh_Orange.webp") type("image/webp"),
        url("/_asset/image/backgrounds/SectionBackgroundTile_Fresh_Orange.jpg") type("image/jpeg")
    );
}

.flavor__cherry-blast {
    --s-button-fill: #e50042;
    --s-button-text: #fff;
    background-image: image-set(
        url("/_asset/image/backgrounds/SectionBackgroundTile_Cherry_Blast.avif") type("image/avif"),
        url("/_asset/image/backgrounds/SectionBackgroundTile_Cherry_Blast.webp") type("image/webp"),
        url("/_asset/image/backgrounds/SectionBackgroundTile_Cherry_Blast.jpg") type("image/jpeg")
    );
    color: #fff;
}

.flavor__freezy-mint {
    --s-button-fill: #00a880;
    --s-button-text: #fff;
    background-image: image-set(
        url("/_asset/image/backgrounds/SectionBackgroundTile_Freezy_Mint.avif") type("image/avif"),
        url("/_asset/image/backgrounds/SectionBackgroundTile_Freezy_Mint.webp") type("image/webp"),
        url("/_asset/image/backgrounds/SectionBackgroundTile_Freezy_Mint.jpg") type("image/jpeg")
    );
}

.flavor__cool-citrus {
    --s-button-fill: #9ec400;
    --s-button-text: #fff;
    background-image: image-set(
        url("/_asset/image/backgrounds/SectionBackgroundTile_Cool_Citrus.avif") type("image/avif"),
        url("/_asset/image/backgrounds/SectionBackgroundTile_Cool_Citrus.webp") type("image/webp"),
        url("/_asset/image/backgrounds/SectionBackgroundTile_Cool_Citrus.jpg") type("image/jpeg")
    );
}

.flavor__cola-crush {
    --s-button-fill: #4f2407;
    --s-button-text: #fff;
    background-image: image-set(
        url("/_asset/image/backgrounds/SectionBackgroundTile_Cola_Crush.avif") type("image/avif"),
        url("/_asset/image/backgrounds/SectionBackgroundTile_Cola_Crush.webp") type("image/webp"),
        url("/_asset/image/backgrounds/SectionBackgroundTile_Cola_Crush.jpg") type("image/jpeg")
    );
    color: #fff;
}

footer {
    padding: var(--g-padding);
    scroll-snap-align: end;
    min-height: 12.5dvh;
    position: relative;
    background: linear-gradient(#555, #777);
    color: #fff;
    padding-block-start: calc(var(--section-separator-height) + var(--g-padding));
    text-align: center;
    align-content: center;
    font-family: sans-serif;
    line-height: 1.5;
    a {
        color: inherit;
    }
}

@media (max-width: 1024px) {
    main>section.flavor-spotlight {
        .flavor-logo {
            inline-size: 256px;
        }
        .flavor-bottle {
            margin-inline-start: 0;
        }
        .flavor-text {
            font-size: 1em;
            padding: 0;
        }
    }
}

@media (max-width: 768px) {
    header {
        grid-template: max-content minmax(0, 1fr) / minmax(0, 1fr);
        border-radius: 1.5em;
        padding: 0;
        margin: 0;
        font-size: 0.8571428571em;
        nav {
            flex-direction: column;
            padding-inline: 0;
            width: 100%;
            a {
                width: 100%;
                text-align: center;
                padding-inline: 0;
                padding-block: calc(0.5 * var(--g-padding));
            }
        }
        #logo {
            position: static;
            padding-block-end: 0;
        }
    }
    main>section.flavor-spotlight .flavor-bottle {
        max-width: 128px;
        height: auto;
        aspect-ratio: auto;
    }
}

@media (max-width: 580px) {
    main>section.flavor-spotlight .spotlight-content {
        flex-direction: column;
        .flavor-logo {
            max-inline-size: 100%;
            height: auto;
        }
        .flavor-bottle {
            margin-inline: auto;
        }
    }
}