@font-face {
    src: url('/fonts/fonnts.com-Gambado_Sans.otf') format('opentype');
    font-family: 'Gambado Sans';
}

:root {
    --depth: 180px;
    --item-width: 60vw;
    --item-height: 60vw;
    --xs-text: .5rem;
    --s-text: .75rem;
    --m-text: 1rem;
    --l-text: 1.25rem;
    --xl-text: 1.5rem;

    font-size: 11px;

    --background-color: hsl(34, 81%, 88%);
    --sweet-color: #FBE47E;
    --sour-color: #78E6A2;
    --savory-color: #5AC5E6;

    --load-duration: 900ms;
    --load-delay: 120ms;
    --load-ease: cubic-bezier(.2, .9, .2, 1);
}

body {
    /* background: var(--background-color); */
    background: radial-gradient(circle, hsl(34, 81%, 78%) 0%, var(--background-color) 100%);
    padding: 70px 0;
    /* font: 15px/20px Arial, sans-serif; */
    overflow: hidden;

}

* {
    box-sizing: border-box;
}

::-webkit-scrollbar {
    display: none;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body.is-loading #logo {
    top: 50vh;
    left: 50vw;
    width: 40vw;
    transform: translate(-50%, -50%);
    z-index: 0; 
}

#logo {
    z-index: 0;
    transition:
        transform var(--load-duration) var(--load-ease),
        top var(--load-duration) var(--load-ease),
        left var(--load-duration) var(--load-ease),
        width var(--load-duration) var(--load-ease);
    transition-delay: var(--load-delay);
}

@media (prefers-reduced-motion: reduce) {
    #logo {
        transition: none;
    }
}

.food-svg {
    width: clamp(56px, 8vw, 110px);
    height: auto;
    position: absolute;
    z-index: 5;
    pointer-events: none;
    will-change: transform, opacity;
    opacity: 0;
    transform: translate(var(--from-x, 0), var(--from-y, 0)) rotate(0deg);
}

.food-svg.tl {
    top: -18px;
    left: -18px;
    --from-x: -140px;
    --from-y: -140px;
    --final-rot: -25deg;
}

.food-svg.tr {
    top: -18px;
    right: -18px;
    --from-x: 140px;
    --from-y: -140px;
    --final-rot: 25deg;
}

.food-svg.bl {
    bottom: -18px;
    left: -18px;
    --from-x: -140px;
    --from-y: 140px;
    --final-rot: 25deg;
}

.food-svg.br {
    bottom: -18px;
    right: -18px;
    --from-x: 140px;
    --from-y: 140px;
    --final-rot: -25deg;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: none;
    background: rgb(255 255 255 / .45);
    color: rgb(0 0 0 / .8);
    font-size: 24px;
    line-height: 34px;
    cursor: pointer;
    display: none;
}

.close-btn:hover {
    background: rgb(255 255 255 / .65);
}

.item.expanded .close-btn {
    display: block;
}

.container {
    margin: 0 auto;
    width: 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    perspective: 1200px;
    justify-content: center;
    align-items: center;
}

.carousel {
    /* height: 10px; */
    /* width: 100%; */
    /* background: black; */
    display: flex;
    justify-content: center;
    z-index: 1;
    align-items: center;
    /* position: absolute; */
    transform-style: preserve-3d;
    transition: transform 1s;
}

.tosti-image {
    /* width: 100%; */
    width: 100%;
    transition-delay: 500ms;
    transition: all .5s ease;
    /* transition: all .5s ease; */
}

.item h3 {
    font-family: 'Gambado Sans';
    color: white;
    margin: 30px 0 10px 0;
    font-size: 2rem;
}

.expanded h3 {
    margin: 0 0 10px 0;
}

.front-tosti {
    /* box-shadow: 0 0 20px 5px rgba(0,0,0,0.3); */
    /* scale: 1.5; */
    transform-origin: center;
    /* filter: blur(0px);  */
}

.item:not(.front-tosti) {
    filter: blur(10px);
    opacity: 0.5;
}

.item {
    transition: all .5s ease;
    /* transition-delay: 500ms; */
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    /* background: #000; */
    width: var(--item-width);
    height: var(--item-height);
    aspect-ratio: 1;
    padding: 30px 20px;
    /* line-height: 200px; */
    font-size: 5em;
    text-align: center;
    /* color: #FFF; */
    /* opacity: .7; */
    border-radius: 10px;
    font-size: 20px;
    /* overflow: hidden; */
    flex-direction: column;
}

.item.front-tosti .food-svg {
    animation: foodSvgIn 650ms cubic-bezier(.2, .9, .2, 1) forwards;
    animation-delay: 200ms;
}

.item.front-tosti .food-svg.tr { animation-delay: 270ms; }
.item.front-tosti .food-svg.bl { animation-delay: 310ms; }
.item.front-tosti .food-svg.br { animation-delay: 350ms; }

.item.expanded .food-svg {
    animation: foodSvgOut 450ms cubic-bezier(.4, 0, 1, 1) forwards;
    animation-delay: 0ms;
}

.item.expanded .food-svg.tr { animation-delay: 40ms; }
.item.expanded .food-svg.bl { animation-delay: 80ms; }
.item.expanded .food-svg.br { animation-delay: 120ms; }

.item.ingredients-out .food-svg {
    animation: foodSvgOut 450ms cubic-bezier(.4, 0, 1, 1) forwards;
    animation-delay: 0ms;
}

.item.ingredients-out .food-svg.tr { animation-delay: 40ms; }
.item.ingredients-out .food-svg.bl { animation-delay: 80ms; }
.item.ingredients-out .food-svg.br { animation-delay: 120ms; }

.item:not(.front-tosti):not(.ingredients-out) .food-svg {
    animation: none;
    opacity: 0;
    transform: translate(var(--from-x, 0), var(--from-y, 0)) rotate(0deg);
}

@keyframes foodSvgIn {
    from {
        opacity: 0;
        transform: translate(var(--from-x, 0), var(--from-y, 0)) rotate(0deg);
    }
    to {
        opacity: 1;
        transform: translate(0, 0) rotate(var(--final-rot, 0deg));
    }
}

@keyframes foodSvgOut {
    from {
        opacity: 1;
        transform: translate(0, 0) rotate(var(--final-rot, 0deg));
    }
    to {
        opacity: 0;
        transform: translate(var(--from-x, 0), var(--from-y, 0)) rotate(var(--final-rot, 0deg));
    }
}

@media (prefers-reduced-motion: reduce) {
    .item.front-tosti .food-svg {
        animation: none;
        opacity: 1;
        transform: translate(0, 0) rotate(var(--final-rot, 0deg));
    }

    .item.expanded .food-svg {
        animation: none;
        opacity: 0;
        transform: translate(var(--from-x, 0), var(--from-y, 0)) rotate(0deg);
    }
}

.item:nth-child(1) {
    transform: rotateY(0deg) translateZ(var(--depth));
    background: var(--sweet-color);
}

.item:nth-child(2) {
    transform: rotateY(120deg) translateZ(var(--depth));
    background: var(--sour-color);
}

.item:nth-child(3) {
    background: var(--savory-color);
    transform: rotateY(240deg) translateZ(var(--depth));
}

.next,
.previous {
    color: #444;
    position: fixed;
    bottom: 20px;
    padding: 14px 18px;
    cursor: pointer;
    background: #CCC;
    border-radius: 5px;
    border-top: 1px solid #FFF;
    box-shadow: 0 5px 0 #999;
    transition: box-shadow 0.1s, bottom 0.1s;
    z-index: 1400;
}

.next:hover,
.previous:hover {
    color: #000;
}

.next:active,
.previous:active {
    bottom: 16px;
    box-shadow: 0 1px 0 #999;
}

.next {
    right: 16px;
}

.previous {
    left: 16px;
}


.expanded {
    width: 80vw;
    height: 83vh;
}

.expanded .tosti-image {
    background: rgb(0 0 0 / .1);
    /* background: white; */
    border-radius: 20px;
    width: 85%;
}

.expanded .description {
    display: flex;
    overflow-y: scroll;
    animation: descriptionIn 450ms ease forwards;
    animation-delay: 500ms;
    background: rgba(0, 0, 0, 0.1);
    color: rgb(255 255 255 / 1);
}

.description {
    padding: 20px;
    margin: 10px 0 0 0;
    flex-direction: column;
    font-size: 1rem;
    display: none;
    text-align: left;
    border-radius: 20px;
    opacity: 0;
    transform: translateY(12px);
}

@keyframes descriptionIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

ul {
    margin: 0;
    padding-inline-start: 20px;
}

li {
    font-size: 1rem;
    font-family: 'inter', sans-serif;
}

p {
    font-size: 1rem;
    margin: 0;
    font-family: 'inter', sans-serif;
}

h2 {
    margin: 20px 0 5px 0;
    font-size: 1.5rem;
    font-family: 'Gambado Sans';
}

h2:first-of-type {
    margin-top: 0;
}

.content {

    /* display: none; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    align-items: center;
    /* gap: 30px; */
}

.expanded .content {
    /* display: flex; */
    opacity: 1;
    justify-content: start;
    width: 100%;
}

.item:hover {
    cursor: pointer;
}



#logo {
    position: absolute;
    width: 40vw;
    /* height: 120px; */
    aspect-ratio: 1;
    left: calc(50% - 20vw);
    top: 5vh;
    /* border-radius: 20px; */
    /* background: black; */
}

#logo img {
    width: 100%;
    height: 100%;
    /* object-fit: contain; */
}