/*==================================
        WHOLE SPICES PAGE
==================================*/

.whole-products-page{

    position:relative;

    padding:60px 8%;

    background:var(--bg-dark);

    overflow:hidden;

}


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

.whole-products-page::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-250px;

    left:-200px;

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

    pointer-events:none;

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

}


.whole-products-page::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-220px;

    bottom:-250px;

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

    pointer-events:none;

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

}


/*==================================
        PRODUCT GRID
==================================*/

.whole-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:30px;

}


/*==================================
        PRODUCT CARD
==================================*/

.whole-card{

    position:relative;

    overflow:hidden;

    background:var(--card-dark);

    border-radius:18px;

    text-align:center;

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

    padding-bottom:20px;

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

    transition:
        transform .5s ease,
        box-shadow .5s ease,
        border-color .5s ease;

    opacity:0;

    animation:
        wholeCardReveal .8s ease forwards;

}


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

.whole-card:nth-child(1){

    animation-delay:.15s;

}

.whole-card:nth-child(2){

    animation-delay:.25s;

}

.whole-card:nth-child(3){

    animation-delay:.35s;

}

.whole-card:nth-child(4){

    animation-delay:.45s;

}

.whole-card:nth-child(5){

    animation-delay:.55s;

}

.whole-card:nth-child(6){

    animation-delay:.65s;

}


/*==================================
        CARD GOLD BORDER GLOW
==================================*/

.whole-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:18px;

    border:1px solid transparent;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(212,175,55,.65),
            transparent 80%
        )
        border-box;

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

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:
        opacity .5s ease;

    pointer-events:none;

}


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

.whole-card::after{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:70%;

    height:100%;

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

    transform:skewX(-22deg);

    transition:
        left .9s ease;

    pointer-events:none;

    z-index:3;

}


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

.whole-card:hover{

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

    box-shadow:
        0 20px 45px rgba(0,0,0,.5),
        0 0 25px rgba(212,175,55,.10);

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

}


.whole-card:hover::before{

    opacity:1;

}


.whole-card:hover::after{

    left:145%;

}


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

.whole-card img{

    width:100%;

    height:180px;

    object-fit:cover;

    display:block;

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

}


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

.whole-card:hover img{

    transform:
        scale(1.08);

    filter:
        brightness(1.06)
        saturate(1.08);

}


/*==================================
        IMAGE OVERLAY
==================================*/

.whole-card img{

    position:relative;

}


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

.whole-card h3{

    position:relative;

    z-index:4;

    font-family:'Cormorant Garamond',serif;

    margin:18px;

    color:var(--gold);

    font-size:28px;

    font-weight:700;

    letter-spacing:.5px;

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

}


.whole-card:hover h3{

    transform:
        translateY(-2px);

    color:var(--gold-light);

}


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

.whole-card .btn{

    position:relative;

    z-index:5;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 30px;

    background:var(--gold);

    color:var(--bg-dark);

    text-decoration:none;

    border-radius:30px;

    font-weight:600;

    overflow:hidden;

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

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

}


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

.whole-card .btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:
        left .7s ease;

}


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

.whole-card .btn:hover{

    background:var(--white);

    color:var(--bg-dark);

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px rgba(212,175,55,.25);

}


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

    left:145%;

}


/*==================================
        WHOLE SPICES BANNER
==================================*/

.whole-banner{

    position:relative;

    width:100%;

    height:50vh;

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

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

    animation:
        wholeBannerReveal 1s ease both;

}


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

.whole-banner::before{

    content:"";

    position:absolute;

    inset:-5%;

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

    opacity:.22;

    transform:scale(1.05);

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

    pointer-events:none;

}


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

.whole-banner::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    left:50%;

    top:50%;

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

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

    pointer-events:none;

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

}


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

.back-arrow{

    position:absolute;

    top:30px;

    left:30px;

    z-index:10;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 22px;

    background:#D4AF37;

    color:#FFFFFF;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    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:
        wholeBackReveal .9s .25s ease both;

}


/*==================================
        BACK BUTTON 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:5;

    color:#FFFFFF;

}


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

.banner-content h1{

    font-family:'Cormorant Garamond',serif;

    font-size:60px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:10px;

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

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

}


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

.banner-content h2{

    font-family:'Cormorant Garamond',serif;

    font-size:34px;

    font-weight:600;

    margin-bottom:15px;

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

}


.banner-content p{

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

    font-size:20px;

    letter-spacing:1px;

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

}


/*==================================
        KEYFRAME ANIMATIONS
==================================*/

@keyframes wholeGlowMove{

    from{

        transform:
            translate3d(0,0,0);

    }

    to{

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

    }

}


@keyframes wholeGlowMoveReverse{

    from{

        transform:
            translate3d(0,0,0);

    }

    to{

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

    }

}


@keyframes wholeCardReveal{

    from{

        opacity:0;

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

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes wholeBannerReveal{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


@keyframes wholeBannerZoom{

    from{

        transform:scale(1.05);

    }

    to{

        transform:scale(1.12);

    }

}


@keyframes wholeBannerGlow{

    0%,
    100%{

        opacity:.35;

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

    }

    50%{

        opacity:.8;

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

    }

}


@keyframes wholeBackReveal{

    from{

        opacity:0;

        transform:
            translateX(-25px);

    }

    to{

        opacity:1;

        transform:
            translateX(0);

    }

}


@keyframes wholeBannerTitle{

    from{

        opacity:0;

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

        letter-spacing:8px;

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

        letter-spacing:.5px;

    }

}


@keyframes wholeBannerSubtitle{

    from{

        opacity:0;

        transform:
            translateY(20px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


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

@media(max-width:768px){

    .whole-products-page{

        padding:40px 5%;

    }


    .whole-grid{

        grid-template-columns:1fr;

        gap:25px;

    }


    .whole-card{

        width:100%;

    }


    .whole-card img{

        height:160px;

    }


    .whole-card:hover{

        transform:
            translateY(-7px);

    }


    .whole-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:42px;

    }


    .banner-content h2{

        font-size:28px;

    }


    .banner-content p{

        font-size:16px;

    }


    .whole-card h3{

        font-size:26px;

    }

}


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

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

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

        animation:none !important;

        transition:none !important;

    }

}