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

html,
body {
    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #120b07;

    font-family: "Montserrat", sans-serif;
}


/* =========================================
   FULL PAGE
========================================= */

.fullpage {

    width: 100%;
    height: 100vh;

    overflow-y: auto;

    scroll-snap-type: y mandatory;

    scroll-behavior: smooth;

    scrollbar-width: none;
}

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


/* =========================================
   EVERY SECTION
========================================= */

.page-section {

    width: 100%;
    height: 100vh;

   /* min-height: 650px;*/

    position: relative;

    overflow: hidden;

    scroll-snap-align: start;

    scroll-snap-stop: always;
}


/* =========================================
   HERO
========================================= */

.hero-section {

    background: #eee8df;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* Hero background */

.hero-bg {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            #fff 0%,
            #eee7de 65%,
            #ddd0c2 100%
        );
}


/* =========================================
   HERO LOGO
========================================= */

.hero-logo {

    position: absolute;

    z-index: 5;

    top: 32%;

    left: 50%;

    width: min(630px, 38vw);

    transform:
        translate(-50%, -50%)
        scale(.8);

    opacity: 0;

    animation:
        heroLogoReveal
        1.5s
        .3s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


.hero-logo img {

    width: 100%;

    height: auto;

    display: block;
}


@keyframes heroLogoReveal {

    from {

        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(.75);

        filter: blur(15px);

    }

    to {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);

        filter: blur(0);

    }

}


/* =========================================
   HERO PRODUCT
========================================= */

.hero-product {

    position: absolute;

    z-index: 3;

    bottom: 12%;

    left: 50%;

    width: min(900px, 75vw);

    transform:
        translateX(-50%)
        translateY(80px);

    opacity: 0;

    animation:
        heroProductReveal
        1.8s
        .7s
        cubic-bezier(.16,1,.3,1)
        forwards;
}


.hero-product img {

    display: block;

    width: 100%;

    height: auto;

    filter:
        drop-shadow(
            0 30px 35px
            rgba(35,20,10,.25)
        );

}


@keyframes heroProductReveal {

    to {

        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);

    }

}


/* =========================================
   HERO GOLD LIGHT
========================================= */

.hero-light {

    position: absolute;

    z-index: 6;

    top: -20%;

    left: -30%;

    width: 25%;

    height: 150%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(197,153,87,.08),
            rgba(255,218,155,.35),
            rgba(197,153,87,.08),
            transparent
        );

    transform: skewX(-20deg);

    animation:
        luxuryLight
        7s
        1s
        ease-in-out
        infinite;
}


@keyframes luxuryLight {

    0% {
        left: -30%;
    }

    50%,
    100% {
        left: 130%;
    }
}


/* =========================================
   HERO PRODUCTS
========================================= */

.hero-products {

    position: absolute;

    z-index: 10;

    bottom: 5%;

    left: 50%;

    width: min(1000px, 90%);

    transform:
        translateX(-50%)
        translateY(30px);

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    animation:
        menuReveal
        1.2s
        1.2s
        forwards;
}


@keyframes menuReveal {

    to {

        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);

    }

}


.hero-product-item {

    padding: 0 25px;

    text-align: center;

    color: #2b1a10;

    transition: .4s;

}


.hero-product-item span {

    display: block;

    font-size: 8px;

    color: #98734e;

    letter-spacing: 2px;

    margin-bottom: 5px;
}


.hero-product-item strong {

    font-size: 10px;

    letter-spacing: 3px;

    font-weight: 500;
}


.hero-product-item:hover {

    transform:
        translateY(-5px);

    color: #a77842;
}


.hero-divider {

    width: 1px;

    height: 35px;

    background:
        rgba(58,35,20,.3);
}


/* =========================================
   SCROLL INDICATOR
========================================= */

.scroll-indicator {

    position: absolute;

    right: 30px;

    bottom: 50%;

    z-index: 10;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;

    color: #76563d;

    font-size: 8px;

    letter-spacing: 3px;
}


.scroll-indicator div {

    width: 1px;

    height: 55px;

    background: #76563d;

    animation:
        scrollLine
        2s
        infinite;
}


@keyframes scrollLine {

    0% {
        transform: scaleY(0);
        transform-origin: top;
    }

    50% {
        transform: scaleY(1);
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}


/* =========================================
   PRODUCT SECTION
========================================= */

.product-section {

    background: #170d08;

    color: white;
}


/* Background */

.section-bg {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(117,78,44,.3),
            transparent 40%
        ),

        linear-gradient(
            120deg,
            #100805,
            #24140b
        );
}


/* =========================================
   PRODUCT LAYOUT
========================================= */

.product-layout {

    position: relative;

    z-index: 5;

    width: min(1250px, 88%);

    height: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =========================================
   PRODUCT INFO
========================================= */

.product-info {

    width: 45%;

    transform:
        translateX(-80px);

    opacity: 0;

    transition:
        1.2s
        cubic-bezier(.16,1,.3,1);
}


.page-section.active
.product-info {

    opacity: 1;

    transform:
        translateX(0);
}


.small-title {

    color: #c9a16c;

    font-size: 9px;

    letter-spacing: 5px;
}


.product-info h1 {

    margin-top: 25px;

    margin-bottom: 30px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(65px, 8vw, 125px);

    font-weight: 400;

    line-height: 1;
}


.product-info h1 em {

    display: block;

    color: #c49a62;

    font-style: italic;
}


.product-info p {

    max-width: 430px;

    color: #c5b4a4;

    font-size: 13px;

    line-height: 1.9;
}


/* =========================================
   BUTTON
========================================= */

.luxury-button {

    margin-top: 35px;

    padding: 15px 24px;

    background: transparent;

    border:
        1px solid
        rgba(204,164,104,.6);

    color: #d2ad78;

    font-size: 9px;

    letter-spacing: 3px;

    transition: .4s;
}


.luxury-button span {

    margin-left: 20px;

    font-size: 17px;
}


.luxury-button:hover {

    background: #c49a62;

    color: #170d08;
}


/* =========================================
   PRODUCT IMAGE
========================================= */

.product-image {

    width: 52%;

    height: 80%;

    display: flex;

    justify-content: center;

    align-items: center;

    transform:
        translateX(120px)
        scale(.8);

    opacity: 0;

    transition:
        1.5s
        .15s
        cubic-bezier(.16,1,.3,1);
}


.page-section.active
.product-image {

    opacity: 1;

    transform:
        translateX(0)
        scale(1);
}


.product-image img {

    max-width: 100%;

    max-height: 90%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 35px 35px
            rgba(0,0,0,.55)
        );

    animation:
        productFloat
        6s
        ease-in-out
        infinite;
}


@keyframes productFloat {

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

    50% {
        transform:
            translateY(-15px)
            rotate(1deg);
    }
}


/* =========================================
   NUMBER
========================================= */

.section-number {

    position: absolute;

    z-index: 10;

    left: 4%;

    top: 50%;

    transform:
        translateY(-50%)
        rotate(-90deg);

    color: #a48668;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 14px;

    letter-spacing: 5px;
}


/* =========================================
   LABEL
========================================= */

.section-label {

    position: absolute;

    z-index: 10;

    bottom: 35px;

    left: 50%;

    transform:
        translateX(-50%);

    color: #c7a77f;

    font-size: 9px;

    letter-spacing: 5px;
}


/* =========================================
   DIFFERENT PRODUCT BACKGROUNDS
========================================= */

.wallet-section .section-bg {

    background:
        linear-gradient(
            90deg,
            #110805 0%,
            rgba(30,17,10,.7) 55%,
            rgba(18,9,5,.4)
        ),
        url("images/bg.png")
        center / cover;
}


.shoes-section .section-bg {

    background:
        linear-gradient(
            90deg,
            #110805 0%,
            rgba(30,17,10,.7) 55%,
            rgba(18,9,5,.4)
        ),
        url("images/bg.png")
        center / cover;
}


.slippers-section .section-bg {

    background:
        linear-gradient(
            90deg,
            #110805 0%,
            rgba(30,17,10,.7) 55%,
            rgba(18,9,5,.4)
        ),
        url("images/bg.png")
        center / cover;
}


.belt-section .section-bg {

    background:
        linear-gradient(
            90deg,
            #110805 0%,
            rgba(30,17,10,.7) 55%,
            rgba(18,9,5,.4)
        ),
        url("images/bg.png")
        center / cover;
}


.bag-section .section-bg {

    background:
        linear-gradient(
            90deg,
            #110805 0%,
            rgba(30,17,10,.7) 55%,
            rgba(18,9,5,.4)
        ),
        url("images/bg.png")
        center / cover;
}


/* =========================================
   DOT NAVIGATION
========================================= */

.page-dots {

    position: fixed;

    z-index: 100;

    right: 30px;

    top: 50%;

    transform:
        translateY(-50%);

    display: flex;

    flex-direction: column;

    gap: 14px;
}


.page-dots button {

    width: 7px;

    height: 7px;

    padding: 0;

    border-radius: 50%;

    border: 1px solid #c49a62;

    background: transparent;

    transition: .4s;
}


.page-dots button.active {

    background: #c49a62;

    transform:
        scale(1.6);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .hero-logo {

        width: 75vw;

        top: 35%;
    }


    .hero-product {

        width: 100vw;

        bottom: 20%;
    }


    .hero-products {

        width: 96%;

        bottom: 3%;
    }


    .hero-product-item {

        padding: 0 7px;
    }


    .hero-product-item strong {

        font-size: 6px;

        letter-spacing: 1px;
    }


    .hero-divider {

        height: 25px;
    }


    .scroll-indicator {

        display: none;
    }


    .product-layout {

        flex-direction: column;

        justify-content: center;

        text-align: center;
    }


    .product-image {

        order: 1;

        width: 90%;

        height: 45%;

    }


    .product-info {

        order: 2;

        width: 100%;
    }


    .product-info h1 {

        font-size: 55px;

        margin-top: 15px;

        margin-bottom: 20px;
    }


    .product-info p {

        margin: auto;

        max-width: 320px;

        font-size: 11px;
    }


    .luxury-button {

        margin-top: 20px;
    }


    .section-number {

        display: none;
    }


    .page-dots {

        right: 12px;
    }

}