@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap");

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    width: 100%;
    height: 100dvh;
    background:
        radial-gradient(circle at top, #fff8e8, transparent 40%),
        #e8d7b8;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: "Vazirmatn", sans-serif;
}

/* intro */

.intro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #5a3927;
    z-index: 5;
    animation: introFade 3s ease forwards;
}

.intro h1 {
    font-size: 28px;
    line-height: 2;
    font-weight: 500;
}

/* petals */

.petal {
    position: absolute;
    top: -30px;
    width: 12px;
    height: 18px;
    background: #a91d2f;
    border-radius: 70% 0 70% 0;
    opacity: .8;
    animation: petalFall linear infinite;
}

@keyframes petalFall {

    from {
        transform: translateY(-20px) rotate(0);
    }

    to {
        transform: translateY(110vh) rotate(360deg);
    }

}

/* scene */

.scene {
    perspective: 1400px;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: cardEnter 1.6s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: 3s;
}

/* card */

.card {
    width: min(90vw, 430px);
    aspect-ratio: .72;
    position: relative;
    cursor: pointer;
    border-radius: 20px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    outline: none;
}

.card *{
    -webkit-tap-highlight-color:transparent;
    -webkit-user-select:none;
    user-select:none;
}

.card:focus,
.card:focus-visible,
.card:active {
    outline: none;
    box-shadow: none;
}

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.25, .8, .25, 1);
    border-radius: 20px;
}

.card.flip .card-inner {
    transform: rotateY(180deg);
}

.card-side {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    overflow: hidden;
    backface-visibility: hidden;
    box-shadow: 0 30px 70px rgba(70, 40, 20, .3);
}

.card-side img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
}

.front,
.back {
    transform-style: preserve-3d;
}

.back {
    transform: rotateY(180deg);
}

/* enter */

@keyframes cardEnter {

    0% {
        opacity: 0;
        transform: translateY(-450px) rotate(-12deg);
    }

    65% {
        opacity: 1;
        transform: translateY(20px) rotate(3deg);
    }

    82% {
        transform: translateY(-10px) rotate(-1deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotate(0);
    }

}

@keyframes introFade {

    0% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        pointer-events: none;
    }

}

/* desktop */

@media (hover:hover) {

    .card:hover .card-side {
        box-shadow: 0 45px 90px rgba(70, 40, 20, .35);
    }

}

/* mobile */

@media(max-width:768px) {

    .scene {
        animation-duration: 1.2s;
        animation-delay: 2.5s;
    }

    .card {
        width: 86vw;
        max-width: 380px;
        aspect-ratio: .72;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        user-select: none;
        outline: none;
    }

    .card *{
        -webkit-tap-highlight-color:transparent;
        -webkit-user-select:none;
        user-select:none;
    }

    .card:focus,
    .card:focus-visible,
    .card:active {
        outline: none;
        box-shadow: none;
    }

    .intro h1 {
        font-size: 22px;
        line-height: 1.8;
    }

    .petal {
        animation-duration: 10s !important;
    }

}