/*==================================*
        POWDER SPICES PAGE
==================================*/

.powder-products-page{

    position:relative;

    padding:60px 8%;

    background:var(--bg-dark);

    overflow:hidden;

    isolation:isolate;

}


/*==================================*
        PREMIUM BACKGROUND GLOW
==================================*/

.powder-products-page::before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    top:-260px;
    left:-220px;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.10),
            rgba(212,175,55,.035) 35%,
            transparent 70%
        );

    pointer-events:none;

    z-index:0;

    animation:
        powderGlowMove
        12s
        ease-in-out
        infinite
        alternate;

}


.powder-products-page::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-250px;
    bottom:-280px;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.09),
            rgba(212,175,55,.025) 35%,
            transparent 70%
        );

    pointer-events:none;

    z-index:0;

    animation:
        powderGlowMoveReverse
        14s
        ease-in-out
        infinite
        alternate;

}


/*==================================*
        POWDER GRID
==================================*/

.powder-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(250px,1fr)
        );

    gap:30px;

}


/*==================================*
        POWDER CARD
==================================*/

.powder-card{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.015)
        ),
        var(--card-dark);

    border-radius:18px;

    text-align:center;

    padding-bottom:22px;

    border:1px solid rgba(212,175,55,.25);

    box-shadow:
        0 8px 20px rgba(0,0,0,.50);

    opacity:0;

    transform:
        translateY(45px)
        scale(.96);

    animation:
        powderCardReveal
        .85s
        cubic-bezier(.2,.7,.2,1)
        forwards;

    transition:
        transform .5s cubic-bezier(.2,.7,.2,1),
        box-shadow .5s ease,
        border-color .5s ease;

}


/*==================================*
        CARD STAGGER
==================================*/

.powder-card:nth-child(1){
    animation-delay:.10s;
}

.powder-card:nth-child(2){
    animation-delay:.22s;
}

.powder-card:nth-child(3){
    animation-delay:.34s;
}

.powder-card:nth-child(4){
    animation-delay:.46s;
}

.powder-card:nth-child(5){
    animation-delay:.58s;
}

.powder-card:nth-child(6){
    animation-delay:.70s;
}


/*==================================*
        GOLD BORDER EFFECT
==================================*/

.powder-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:18px;

    padding:1px;

    background:
        linear-gradient(
            120deg,
            transparent 15%,
            rgba(212,175,55,.80),
            rgba(255,255,255,.35),
            rgba(212,175,55,.80),
            transparent 85%
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    pointer-events:none;

    z-index:6;

    transition:
        opacity .5s ease;

}


/*==================================*
        CARD SHINE
==================================*/

.powder-card::after{

    content:"";

    position:absolute;

    top:-20%;

    left:-140%;

    width:65%;

    height:140%;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255,255,255,.04) 35%,
            rgba(255,255,255,.28) 50%,
            rgba(255,255,255,.04) 65%,
            transparent 100%
        );

    transform:skewX(-22deg);

    pointer-events:none;

    z-index:5;

    transition:
        left .9s cubic-bezier(.2,.7,.2,1);

}


/*==================================*
        CARD HOVER
==================================*/

.powder-card:hover{

    transform:
        translateY(-12px)
        scale(1.015);

    border-color:
        rgba(212,175,55,.70);

    box-shadow:
        0 22px 50px rgba(0,0,0,.55),
        0 0 30px rgba(212,175,55,.12);

}


/*==================================*
        GOLD BORDER HOVER
==================================*/

.powder-card:hover::before{

    opacity:1;

}


/*==================================*
        SHINE HOVER
==================================*/

.powder-card:hover::after{

    left:145%;

}


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

.powder-card img{

    position:relative;

    z-index:1;

    display:block;

    width:100%;

    height:180px;

    object-fit:cover;

    transition:
        transform .7s
        cubic-bezier(.2,.7,.2,1),
        filter .5s ease;

}


/*==================================*
        IMAGE HOVER
==================================*/

.powder-card:hover img{

    transform:scale(1.09);

    filter:
        brightness(1.07)
        saturate(1.10)
        contrast(1.03);

}


/*==================================*
        PRODUCT TITLE
==================================*/

.powder-card h3{

    position:relative;

    z-index:7;

    margin:18px 15px;

    font-family:
        'Cormorant Garamond',
        serif;

    color:var(--gold);

    font-size:28px;

    font-weight:700;

    letter-spacing:.5px;

    transition:
        transform .35s ease,
        color .35s ease;

}


/*==================================*
        TITLE HOVER
==================================*/

.powder-card:hover h3{

    transform:
        translateY(-3px);

    color:var(--gold-light);

}


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

.powder-card .btn{

    position:relative;

    z-index:8;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:11px 30px;

    background:var(--gold);

    color:var(--bg-dark);

    text-decoration:none;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    border-radius:30px;

    overflow:hidden;

    box-shadow:
        0 5px 15px
        rgba(212,175,55,.18);

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

}


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

.powder-card .btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:65%;

    height:100%;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(255,255,255,.70),
            transparent
        );

    transform:skewX(-25deg);

    transition:
        left .7s ease;

}


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

.powder-card .btn:hover{

    background:var(--white);

    color:var(--bg-dark);

    transform:
        translateY(-4px);

    box-shadow:
        0 12px 28px
        rgba(212,175,55,.28);

}


/*==================================*
        BUTTON SHINE HOVER
==================================*/

.powder-card .btn:hover::before{

    left:145%;

}


/*==================================*
        POWDER BANNER
==================================*/

.powder-banner{

    position:relative;

    width:100%;

    height:50vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

    isolation:isolate;

    background:
        linear-gradient(
            rgba(11,43,38,.48),
            rgba(11,43,38,.48)
        ),
        url("../images/powder-banner.jpeg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    animation:
        powderBannerReveal
        1s
        ease
        both;

}


/*==================================*
        BANNER SLOW ZOOM
==================================*/

.powder-banner::before{

    content:"";

    position:absolute;

    inset:-6%;

    background:
        url("../images/powder-banner.jpeg")
        center/cover
        no-repeat;

    opacity:.25;

    transform:scale(1.05);

    z-index:0;

    pointer-events:none;

    animation:
        powderBannerZoom
        15s
        ease-in-out
        infinite
        alternate;

}


/*==================================*
        BANNER GOLD ATMOSPHERE
==================================*/

.powder-banner::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    left:50%;
    top:50%;

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

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.15),
            transparent 68%
        );

    z-index:1;

    pointer-events:none;

    animation:
        powderBannerGlow
        7s
        ease-in-out
        infinite;

}


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

.back-arrow{

    position:absolute;

    top:30px;

    left:30px;

    z-index:20;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 22px;

    background:#D4AF37;

    color:#FFFFFF;

    text-decoration:none;

    font-family:
        'Montserrat',
        sans-serif;

    font-size:16px;

    font-weight:600;

    letter-spacing:.5px;

    border-radius:50px;

    box-shadow:
        0 5px 15px
        rgba(0,0,0,.25);

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease;

    animation:
        powderBackReveal
        .9s
        .25s
        ease
        both;

}


/*==================================*
        BACK ICON
==================================*/

.back-arrow i{

    font-size:16px;

    transition:
        transform .35s ease;

}


/*==================================*
        BACK BUTTON HOVER
==================================*/

.back-arrow:hover{

    background:#12372A;

    color:#FFFFFF;

    transform:
        translateX(6px);

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.30);

}


.back-arrow:hover i{

    transform:
        translateX(-4px);

}


/*==================================*
        BANNER CONTENT
==================================*/

.banner-content{

    position:relative;

    z-index:10;

    color:#FFFFFF;

    padding:0 20px;

}


/*==================================*
        BANNER TITLE
==================================*/

.banner-content h1{

    margin:0 0 10px;

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:68px;

    font-weight:700;

    letter-spacing:.5px;

    line-height:1.1;

    text-shadow:
        0 5px 25px
        rgba(0,0,0,.40);

    animation:
        powderBannerTitle
        .95s
        .2s
        ease
        both;

}


/*==================================*
        BANNER SUBTITLE
==================================*/

.banner-content h2{

    margin-bottom:15px;

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:40px;

    font-weight:600;

    letter-spacing:.5px;

    animation:
        powderBannerSubtitle
        .9s
        .4s
        ease
        both;

}


/*==================================*
        BANNER DESCRIPTION
==================================*/

.banner-content p{

    font-family:
        'Montserrat',
        sans-serif;

    font-size:20px;

    font-weight:400;

    letter-spacing:1px;

    animation:
        powderBannerSubtitle
        .9s
        .55s
        ease
        both;

}


/*==================================*
        KEYFRAMES
==================================*/

@keyframes powderGlowMove{

    from{

        transform:
            translate3d(0,0,0);

    }

    to{

        transform:
            translate3d(120px,90px,0);

    }

}


@keyframes powderGlowMoveReverse{

    from{

        transform:
            translate3d(0,0,0);

    }

    to{

        transform:
            translate3d(-100px,-80px,0);

    }

}


/*==================================*
        CARD REVEAL
==================================*/

@keyframes powderCardReveal{

    0%{

        opacity:0;

        transform:
            translateY(45px)
            scale(.96);

    }

    70%{

        opacity:1;

        transform:
            translateY(-3px)
            scale(1.005);

    }

    100%{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


/*==================================*
        BANNER REVEAL
==================================*/

@keyframes powderBannerReveal{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/*==================================*
        BANNER ZOOM
==================================*/

@keyframes powderBannerZoom{

    from{

        transform:scale(1.05);

    }

    to{

        transform:scale(1.12);

    }

}


/*==================================*
        BANNER GLOW
==================================*/

@keyframes powderBannerGlow{

    0%,
    100%{

        opacity:.35;

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

    }

    50%{

        opacity:.85;

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

    }

}


/*==================================*
        BACK REVEAL
==================================*/

@keyframes powderBackReveal{

    from{

        opacity:0;

        transform:
            translateX(-25px);

    }

    to{

        opacity:1;

        transform:
            translateX(0);

    }

}


/*==================================*
        BANNER TITLE ANIMATION
==================================*/

@keyframes powderBannerTitle{

    from{

        opacity:0;

        transform:
            translateY(35px)
            scale(.96);

        letter-spacing:8px;

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

        letter-spacing:.5px;

    }

}


/*==================================*
        BANNER SUBTITLE ANIMATION
==================================*/

@keyframes powderBannerSubtitle{

    from{

        opacity:0;

        transform:
            translateY(20px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


/*==================================*
        RESPONSIVE
==================================*/

@media(max-width:768px){

    .powder-products-page{

        padding:40px 5%;

    }


    .powder-grid{

        grid-template-columns:1fr;

        gap:25px;

    }


    .powder-card{

        width:100%;

    }


    .powder-card img{

        height:160px;

    }


    .powder-card:hover{

        transform:
            translateY(-7px);

    }


    .powder-banner{

        height:40vh;

    }


    .back-arrow{

        top:20px;

        left:20px;

        padding:10px 16px;

        font-size:14px;

    }


    .banner-content{

        padding:0 20px;

    }


    .banner-content h1{

        font-size:48px;

    }


    .banner-content h2{

        font-size:32px;

    }


    .banner-content p{

        font-size:16px;

    }


    .powder-card h3{

        font-size:26px;

    }

}


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

@media(max-width:480px){

    .powder-products-page{

        padding:35px 5%;

    }


    .powder-card{

        border-radius:15px;

    }


    .powder-card img{

        height:150px;

    }


    .powder-card h3{

        font-size:24px;

        margin:16px 10px;

    }


    .powder-card .btn{

        padding:10px 25px;

        font-size:14px;

    }


    .powder-banner{

        height:38vh;

    }


    .banner-content h1{

        font-size:40px;

        letter-spacing:.2px;

    }


    .banner-content h2{

        font-size:28px;

    }

}


/*==================================*
        REDUCED MOTION
==================================*/

@media(prefers-reduced-motion:reduce){

    .powder-products-page::before,
    .powder-products-page::after,
    .powder-card,
    .powder-card::before,
    .powder-card::after,
    .powder-banner,
    .powder-banner::before,
    .powder-banner::after,
    .back-arrow,
    .banner-content h1,
    .banner-content h2,
    .banner-content p{

        animation:none !important;

        transition:none !important;

    }

    .powder-card{

        opacity:1;

        transform:none;

    }

}