@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Poppins:wght@400;500;600;700&display=swap');
/* $anim: cubic-bezier(0.02, 0.63, 0.23, 0.99); */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#roto {
    position: relative;
    &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
        background: linear-gradient(0deg, #fff, transparent);
        opacity: 0;
        z-index: 4;
        transition: .2s all ease;
    }
    &.active::before {
        opacity: 1;
        height: 50%;
    }
}

body {
    font-family: 'Poppins', sans-serif;
    ;
    color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Cormorant Garamond', serif;
}

.slide {
    width: 100%;
    min-height: 100vh;
    position: relative;
    /* overflow: hidden; */
    background-color: #000;
    .mainImage {
        position: absolute;
        width: 130vw;
        height: 130vw;
        left: 0;
        top: calc(50% - 65vw);
        /* left: 50%;
    top: 50%; */
        transform: translate(-50%, -50%);
        animation-name: rotate;
        /* animation-timing-function: $anim; */
        animation-iteration-count: 1;
        animation-duration: 1.1s;
    }
    .roundOuter {
        position: absolute;
        width: 86vw;
        height: 86vw;
        /* overflow: hidden; */
        border-radius: 50%;
        left: calc(50% - 43vw);
        top: calc(50% - 43vw);
        filter: brightness(0.9);
        z-index: 1;
        border: 1px solid rgba(255, 255, 255, 0.2);
        img {
            /* position: absolute; */
            width: 130vw;
            height: 130vw;
            /* left: 50%;
      top: 50%; */
            transform: translate(-50%, -50%);
            animation-name: rotate;
            /* animation-timing-function: $anim; */
            animation-iteration-count: 1;
            animation-duration: 1.3s;
        }
    }
    .roundInner {
        position: absolute;
        width: 50vw;
        height: 50vw;
        /* overflow: hidden; */
        left: calc(50% - 25vw);
        top: calc(50% - 25vw);
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.2);
        z-index: 2;
        img {
            position: absolute;
            width: 130vw;
            height: 130vw;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            animation-name: rotate;
            /* animation-timing-function: $anim; */
            animation-iteration-count: 1;
            animation-duration: 1.2s;
        }
    }
    .slideText {
        position: absolute;
        z-index: 3;
        width: 100%;
        height: 100%;
        display: grid;
        place-content: center;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.3);
        h1 {
            font-size: 5vw;
            font-weight: 400;
            /* text-transform: uppercase; */
            /* letter-spacing: 5vw; */
            text-align: center;
            /* padding-left: 5vw; */
            animation-delay: 1s;
            filter: drop-shadow(0 2px 10px #000);
            position: relative;
            &::after {
                content: "";
                position: absolute;
                width: 40vw;
                height: 1px;
                background-color: #fff;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
            }
        }
        p {
            text-align: center;
            letter-spacing: 20px;
            font-weight: 600;
            font-size: 1.3rem;
            padding-left: 1.3rem;
            text-transform: uppercase;
            animation-delay: 1.5s;
            filter: drop-shadow(0 2px 10px #000);
        }
        .buttonNav {
            display: flex;
            justify-content: center;
            gap: 12px;
            animation-delay: 1.7s;
            button {
                border: none;
                background: transparent;
                color: #fff;
                font-size: 1.3rem;
                filter: drop-shadow(0 2px 10px #000);
            }
            span {
                display: grid;
                width: 1px;
                flex: 0 0 1px;
                background-color: #fff;
                filter: drop-shadow(0 2px 10px #000);
            }
        }
    }
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(5)
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1)
    }
}

#about {
    color: #999;
    padding-top: 80px;
    padding-bottom: 80px;
    h2 {
        color: #000;
    }
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

@media(max-width: 575px) {
    .slide {
        .mainImage {
            width: 130vh;
            height: 130vh;
        }
        .roundOuter {
            width: 86vh;
            height: 86vh;
            left: calc(50% - 43vh);
            top: calc(50% - 43vh);
            img {
                width: 130vh;
                height: 130vh;
            }
        }
        .roundInner {
            width: 50vh;
            height: 50vh;
            left: calc(50% - 25vh);
            top: calc(50% - 25vh);
            img {
                width: 130vh;
                height: 130vh;
            }
        }
        .slideText {
            h1 {
                font-size: 9vw;
                /* letter-spacing: 3vw; */
                padding-left: 3vw;
            }
            p {
                font-size: 5vw;
                letter-spacing: 2vw;
                padding-left: 2vw;
            }
        }
    }
}

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

.animate__animated {
    animation-duration: 1s;
    /* Adjust the duration as needed */
    animation-fill-mode: both;
}

.animate__fadeInUp {
    animation-name: fadeInUp;
}