/* ==========================================================
   SPICEST PREMIUM DARK TASTE BANNER
========================================================== */

:root{
    --taste-olive: #82975B;
    --taste-olive-dark: #667748;
    --taste-olive-deep: #4E5F38;
    --taste-olive-light: #AAB98D;

    --taste-cream: #F7F4EA;
    --taste-white: #FFFFFF;

    --taste-dark: #11150F;
    --taste-dark-soft: #1B2117;
}


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

.taste-luxury-section{
    position: relative;

    padding: 55px 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #F7F4EA 0%,
            #F3F0E5 100%
        );
}


/* ==========================================================
   MAIN WRAPPER
========================================================== */

.taste-luxury-wrapper{
    --taste-x: 0px;
    --taste-y: 0px;

    --mouse-x: 65%;
    --mouse-y: 45%;

    position: relative;
    isolation: isolate;

    min-height: 570px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding:
        70px clamp(28px, 5vw, 90px);

    border-radius: 30px;

    background-image:
        url("../img/center.png");

    background-size: cover;

    background-position: center;

    box-shadow:
        0 35px 90px
        rgba(34,42,28,.18);

    transform:
        translateZ(0);
}


/* Luxury outer border */

.taste-luxury-wrapper::before{
    content: "";

    position: absolute;
    inset: 0;

    z-index: 20;

    pointer-events: none;

    border-radius: inherit;

    border:
        1px solid
        rgba(255,255,255,.12);

    box-shadow:
        inset 0 0 0 1px
        rgba(130,151,91,.08);
}


/* ==========================================================
   DARK CINEMATIC OVERLAY
========================================================== */

.taste-dark-overlay{
    position: absolute;
    inset: 0;

    z-index: -4;

    background:
        linear-gradient(
            90deg,
            rgba(8,10,7,.97) 0%,
            rgba(10,13,9,.92) 27%,
            rgba(12,15,10,.70) 53%,
            rgba(10,12,8,.25) 78%,
            rgba(8,10,7,.15) 100%
        );
}


/* ==========================================================
   MOUSE SPOTLIGHT
========================================================== */

.taste-spotlight{
    position: absolute;
    inset: 0;

    z-index: -3;

    pointer-events: none;

    background:
        radial-gradient(
            circle 350px at
            var(--mouse-x)
            var(--mouse-y),

            rgba(130,151,91,.18),
            transparent 70%
        );

    transition:
        background .15s linear;
}


/* ==========================================================
   VIGNETTE
========================================================== */

.taste-vignette{
    position: absolute;
    inset: 0;

    z-index: -2;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(0,0,0,.38) 100%
        );
}


/* ==========================================================
   NOISE TEXTURE
========================================================== */

.taste-noise{
    position: absolute;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: .18;

    background-image:
        repeating-radial-gradient(
            circle at 0 0,
            transparent 0,
            rgba(255,255,255,.025) 1px,
            transparent 2px
        );

    background-size:
        7px 7px;

    animation:
        tasteNoiseMove
        8s linear infinite;
}


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

.taste-content{
    position: relative;

    z-index: 10;

    width: 56%;
    max-width: 780px;
}


/* ==========================================================
   KICKER
========================================================== */

.taste-kicker{
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 19px;

    color:
        var(--taste-olive-light);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.taste-kicker-line{
    width: 47px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--taste-olive)
        );
}


.taste-kicker-icon{
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color:
        var(--taste-olive-light);

    background:
        rgba(255,255,255,.07);

    border:
        1px solid
        rgba(170,185,141,.20);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.20);

    animation:
        tasteKickerPulse
        3s ease-in-out infinite;
}


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

.taste-title{
    margin:
        0 0 18px;

    color:
        var(--taste-cream);

    font-size:
        clamp(42px, 4.8vw, 76px);

    line-height: .98;

    font-weight: 900;

    letter-spacing: -3px;
}


.taste-title-line{
    display: block;
}


.taste-title-second{
    margin-top: 5px;
}


.taste-nature{
    position: relative;

    display: inline-block;

    margin-left: 8px;

    color:
        var(--taste-olive-light);

    font-family:
        "Georgia",
        "Times New Roman",
        serif;

    font-style: italic;

    font-weight: 500;

    letter-spacing: -3px;

    text-shadow:
        0 10px 35px
        rgba(130,151,91,.18);
}


/* Animated underline SVG */

.taste-nature-stroke{
    position: absolute;

    left: 0;
    bottom: -10px;

    width: 100%;
    height: 17px;

    overflow: visible;
}


.taste-nature-stroke path{
    fill: none;

    stroke:
        var(--taste-olive);

    stroke-width: 3;

    stroke-linecap: round;

    stroke-dasharray: 300;

    stroke-dashoffset: 300;

    opacity: .75;

    transition:
        stroke-dashoffset
        1.4s
        cubic-bezier(.22,1,.36,1)
        .8s;
}


.taste-luxury-section.is-visible
.taste-nature-stroke path{
    stroke-dashoffset: 0;
}


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

.taste-description{
    max-width: 580px;

    margin:
        0 0 28px;

    color:
        rgba(247,244,234,.66);

    font-size:
        clamp(13px, 1.1vw, 16px);

    line-height: 1.75;
}


/* ==========================================================
   ACTION ROW
========================================================== */

.taste-action-row{
    display: flex;
    align-items: center;

    gap: 16px;

    flex-wrap: wrap;
}


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

.taste-btn{
    position: relative;

    min-height: 59px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    padding:
        9px 10px 9px 28px;

    overflow: hidden;

    border-radius: 999px;

    color: #fff;

    text-decoration: none;

    font-size: 15px;
    font-weight: 850;

    background:
        linear-gradient(
            135deg,
            #8FA466,
            #71834F
        );

    border:
        1px solid
        rgba(170,185,141,.18);

    box-shadow:
        0 18px 40px
        rgba(76,92,55,.30);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


/* Button shine */

.taste-btn::before{
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 65%;
    height: 100%;

    transform:
        skewX(-25deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.30),
            transparent
        );

    transition:
        left .75s ease;
}


.taste-btn:hover::before{
    left: 145%;
}


.taste-btn:hover{
    color: #fff;

    transform:
        translateY(-5px);

    box-shadow:
        0 25px 50px
        rgba(76,92,55,.42);
}


.taste-btn-icon{
    position: relative;

    width: 41px;
    height: 41px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color:
        var(--taste-olive-dark);

    background:
        var(--taste-cream);

    transition:
        transform .45s
        cubic-bezier(.22,1,.36,1);
}


.taste-btn:hover
.taste-btn-icon{
    transform:
        rotate(-35deg)
        scale(1.05);
}


/* ==========================================================
   MINI OFFER
========================================================== */

.taste-offer-mini{
    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        8px 15px 8px 8px;

    border-radius: 17px;

    background:
        rgba(255,255,255,.07);

    border:
        1px solid
        rgba(255,255,255,.11);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.18);

    backdrop-filter:
        blur(14px);

    animation:
        tasteOfferFloat
        4.5s ease-in-out infinite;
}


.taste-offer-icon{
    width: 39px;
    height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color:
        var(--taste-olive-dark);

    background:
        var(--taste-cream);
}


.taste-offer-mini > span:last-child{
    display: flex;
    flex-direction: column;
}


.taste-offer-mini small{
    color:
        rgba(255,255,255,.48);

    font-size: 9px;
}


.taste-offer-mini strong{
    color:
        var(--taste-cream);

    font-size: 12px;
    font-weight: 850;
}


/* ==========================================================
   TRUST ROW
========================================================== */

.taste-trust{
    display: flex;
    align-items: center;

    gap: 13px;

    flex-wrap: wrap;

    margin-top: 30px;

    padding-top: 23px;

    max-width: 600px;

    border-top:
        1px solid
        rgba(170,185,141,.13);
}


.taste-trust-item{
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color:
        rgba(247,244,234,.58);

    font-size: 10px;
    font-weight: 700;
}


.taste-trust-item i{
    color:
        var(--taste-olive-light);
}


.taste-trust-dot{
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        rgba(170,185,141,.45);
}


/* ==========================================================
   RIGHT VISUAL ZONE
========================================================== */

.taste-visual-zone{
    position: absolute;

    top: 0;
    right: 0;

    width: 46%;
    height: 100%;

    z-index: 7;

    pointer-events: none;

    transform:
        translate(
            var(--taste-x),
            var(--taste-y)
        );

    transition:
        transform .25s ease-out;
}


/* ==========================================================
   PREMIUM ROTATING STAMP
========================================================== */

.taste-premium-stamp{
    position: absolute;

    top: 50%;
    right: 7%;

    width: 165px;
    height: 165px;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        rgba(16,20,13,.55);

    border:
        1px solid
        rgba(170,185,141,.20);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.28);

    backdrop-filter:
        blur(14px);
}


.taste-stamp-ring{
    position: relative;

    width: 100%;
    height: 100%;
}


.taste-stamp-svg{
    position: absolute;
    inset: 7px;

    width:
        calc(100% - 14px);

    height:
        calc(100% - 14px);

    animation:
        tasteStampRotate
        18s linear infinite;
}


.taste-stamp-svg text{
    fill:
        rgba(247,244,234,.72);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


.taste-stamp-center{
    position: absolute;

    top: 50%;
    left: 50%;

    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color:
        var(--taste-olive-light);

    font-size: 23px;

    background:
        rgba(130,151,91,.16);

    border:
        1px solid
        rgba(170,185,141,.18);

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

    box-shadow:
        inset 0 0 25px
        rgba(130,151,91,.08);
}


/* ==========================================================
   FLOATING GLASS CARDS
========================================================== */

.taste-floating-card{
    position: absolute;

    display: flex;
    align-items: center;

    gap: 10px;

    padding:
        9px 14px 9px 8px;

    border-radius: 17px;

    background:
        rgba(18,23,15,.58);

    border:
        1px solid
        rgba(255,255,255,.12);

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.26);

    backdrop-filter:
        blur(16px);
}


.taste-floating-icon{
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color:
        var(--taste-olive-dark);

    background:
        var(--taste-cream);
}


.taste-floating-card > span:last-child{
    display: flex;
    flex-direction: column;
}


.taste-floating-card small{
    color:
        rgba(255,255,255,.48);

    font-size: 9px;
}


.taste-floating-card strong{
    color:
        var(--taste-cream);

    font-size: 12px;
    font-weight: 850;
}


.taste-card-one{
    top: 16%;
    left: 4%;

    animation:
        tasteCardOne
        5s ease-in-out infinite;
}


.taste-card-two{
    right: 9%;
    bottom: 14%;

    animation:
        tasteCardTwo
        5.7s ease-in-out infinite;
}


/* ==========================================================
   MINI FLOATS
========================================================== */

.taste-mini-float{
    position: absolute;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color:
        var(--taste-olive-light);

    background:
        rgba(15,20,12,.55);

    border:
        1px solid
        rgba(170,185,141,.17);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.25);

    backdrop-filter:
        blur(14px);
}


.taste-mini-one{
    left: 18%;
    bottom: 15%;

    animation:
        tasteMiniOne
        4.8s ease-in-out infinite;
}


.taste-mini-two{
    right: 16%;
    top: 15%;

    animation:
        tasteMiniTwo
        5.5s ease-in-out infinite;
}


/* ==========================================================
   DECORATIVE LINES
========================================================== */

.taste-line{
    position: absolute;

    pointer-events: none;

    z-index: 2;

    opacity: .3;
}


.taste-line-one{
    width: 260px;
    height: 260px;

    right: 22%;
    top: -150px;

    border-radius: 50%;

    border:
        1px solid
        rgba(170,185,141,.20);

    animation:
        tasteLineRotate
        20s linear infinite;
}


.taste-line-two{
    width: 190px;
    height: 190px;

    left: 42%;
    bottom: -120px;

    border-radius: 50%;

    border:
        1px dashed
        rgba(170,185,141,.17);

    animation:
        tasteLineReverse
        18s linear infinite;
}


/* ==========================================================
   ORBS
========================================================== */

.taste-orb{
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(4px);

    z-index: 1;
}


.taste-orb-one{
    width: 280px;
    height: 280px;

    left: -120px;
    top: -130px;

    background:
        radial-gradient(
            circle,
            rgba(130,151,91,.18),
            transparent 70%
        );

    animation:
        tasteOrbOne
        9s ease-in-out infinite;
}


.taste-orb-two{
    width: 230px;
    height: 230px;

    right: -90px;
    bottom: -100px;

    background:
        radial-gradient(
            circle,
            rgba(170,185,141,.15),
            transparent 70%
        );

    animation:
        tasteOrbTwo
        10s ease-in-out infinite;
}


/* ==========================================================
   BOTTOM DECORATION
========================================================== */

.taste-bottom-decoration{
    position: absolute;

    left:
        clamp(28px, 5vw, 90px);

    right:
        clamp(28px, 5vw, 90px);

    bottom: 20px;

    z-index: 12;

    display: flex;
    align-items: center;

    gap: 12px;

    color:
        rgba(247,244,234,.35);
}


.taste-bottom-number{
    color:
        var(--taste-olive-light);

    font-size: 11px;
    font-weight: 850;
}


.taste-bottom-line{
    position: relative;

    flex: 1;

    max-width: 130px;

    height: 1px;

    overflow: hidden;

    background:
        rgba(170,185,141,.13);
}


.taste-bottom-line span{
    position: absolute;

    left: 0;
    top: 0;

    width: 45%;
    height: 100%;

    background:
        var(--taste-olive);

    animation:
        tasteProgress
        3.5s ease-in-out infinite;
}


.taste-bottom-text{
    font-size: 9px;

    letter-spacing: 1.4px;

    text-transform: uppercase;
}


/* ==========================================================
   REVEAL ANIMATIONS
========================================================== */

.taste-reveal{
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .9s
        cubic-bezier(.22,1,.36,1),

        transform .9s
        cubic-bezier(.22,1,.36,1);
}


.taste-luxury-section.is-visible
.taste-reveal{
    opacity: 1;

    transform:
        translateY(0);
}


.taste-luxury-section.is-visible
.taste-kicker{
    transition-delay: .08s;
}


.taste-luxury-section.is-visible
.taste-title{
    transition-delay: .18s;
}


.taste-luxury-section.is-visible
.taste-description{
    transition-delay: .30s;
}


.taste-luxury-section.is-visible
.taste-action-row{
    transition-delay: .42s;
}


.taste-luxury-section.is-visible
.taste-trust{
    transition-delay: .54s;
}


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

@keyframes tasteNoiseMove{

    0%{
        transform:
            translate(0,0);
    }

    25%{
        transform:
            translate(2px,-2px);
    }

    50%{
        transform:
            translate(-2px,2px);
    }

    75%{
        transform:
            translate(1px,2px);
    }

    100%{
        transform:
            translate(0,0);
    }

}


@keyframes tasteKickerPulse{

    0%,
    100%{
        transform:
            scale(1);
    }

    50%{
        transform:
            scale(1.08);
    }

}


@keyframes tasteOfferFloat{

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

    50%{
        transform:
            translateY(-7px);
    }

}


@keyframes tasteStampRotate{

    to{
        transform:
            rotate(360deg);
    }

}


@keyframes tasteCardOne{

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

    50%{
        transform:
            translateY(-11px)
            rotate(-2deg);
    }

}


@keyframes tasteCardTwo{

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

    50%{
        transform:
            translateY(10px)
            rotate(2deg);
    }

}


@keyframes tasteMiniOne{

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

    50%{
        transform:
            translateY(-12px);
    }

}


@keyframes tasteMiniTwo{

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

    50%{
        transform:
            translateY(10px)
            rotate(10deg);
    }

}


@keyframes tasteLineRotate{

    to{
        transform:
            rotate(360deg);
    }

}


@keyframes tasteLineReverse{

    to{
        transform:
            rotate(-360deg);
    }

}


@keyframes tasteOrbOne{

    0%,
    100%{
        transform:
            translate(0,0);
    }

    50%{
        transform:
            translate(30px,20px);
    }

}


@keyframes tasteOrbTwo{

    0%,
    100%{
        transform:
            translate(0,0);
    }

    50%{
        transform:
            translate(-25px,-20px);
    }

}


@keyframes tasteProgress{

    0%{
        transform:
            translateX(-100%);
    }

    50%{
        transform:
            translateX(120%);
    }

    100%{
        transform:
            translateX(280%);
    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1199.98px){

    .taste-luxury-wrapper{
        min-height: 540px;

        padding:
            65px 55px;
    }

    .taste-content{
        width: 60%;
    }

    .taste-title{
        font-size:
            clamp(48px, 6vw, 74px);
    }

    .taste-premium-stamp{
        width: 140px;
        height: 140px;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991.98px){

    .taste-luxury-section{
        padding:
            40px 0;
    }

    .taste-luxury-wrapper{
        min-height: 650px;

        padding:
            65px 40px 85px;

        background-position:
            65% center;
    }


    .taste-dark-overlay{
        background:
            linear-gradient(
                90deg,
                rgba(8,10,7,.96) 0%,
                rgba(8,10,7,.88) 55%,
                rgba(8,10,7,.50) 100%
            );
    }


    .taste-content{
        width: 72%;
    }


    .taste-visual-zone{
        width: 42%;

        opacity: .75;
    }


    .taste-premium-stamp{
        right: 2%;

        width: 125px;
        height: 125px;
    }


    .taste-card-one{
        display: none;
    }

}


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

@media (max-width: 767.98px){

    .taste-luxury-section{
        padding:
            28px 0;
    }


    .taste-luxury-wrapper{
        min-height: 650px;

        align-items: flex-start;

        padding:
            60px 25px 85px;

        border-radius: 23px;

        background-position:
            68% center;
    }


    .taste-dark-overlay{
        background:
            linear-gradient(
                180deg,
                rgba(8,10,7,.95) 0%,
                rgba(8,10,7,.86) 58%,
                rgba(8,10,7,.62) 100%
            );
    }


    .taste-content{
        width: 100%;

        max-width: 560px;
    }


    .taste-kicker{
        font-size: 10px;

        gap: 7px;
    }


    .taste-kicker-line{
        width: 28px;
    }


    .taste-kicker-icon{
        width: 30px;
        height: 30px;
    }


    .taste-title{
        font-size:
            clamp(42px, 13vw, 64px);

        letter-spacing:
            -2.5px;
    }


    .taste-description{
        max-width: 470px;

        font-size: 14px;
    }


    .taste-action-row{
        align-items: flex-start;
    }


    .taste-trust{
        max-width: 480px;

        gap: 10px;
    }


    .taste-visual-zone{
        top: auto;
        bottom: 35px;

        width: 100%;
        height: 190px;

        opacity: .75;
    }


    .taste-premium-stamp{
        top: auto;
        bottom: 0;
        right: 15px;

        width: 110px;
        height: 110px;

        transform: none;
    }


    .taste-card-two{
        left: 15px;
        right: auto;

        bottom: 20px;
    }


    .taste-mini-one{
        left: 50%;
        bottom: 10px;
    }


    .taste-mini-two{
        display: none;
    }


    .taste-bottom-decoration{
        left: 25px;
        right: 25px;

        bottom: 18px;
    }

}


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

@media (max-width: 480px){

    .taste-luxury-wrapper{
        min-height: 680px;

        padding:
            52px 20px 90px;
    }


    .taste-title{
        font-size:
            clamp(38px, 12vw, 53px);

        line-height: 1.02;
    }


    .taste-nature{
        margin-left: 2px;
    }


    .taste-action-row{
        flex-direction: column;

        width: 100%;
    }


    .taste-btn{
        width: 100%;

        max-width: 310px;

        justify-content:
            space-between;
    }


    .taste-offer-mini{
        width: 100%;

        max-width: 240px;
    }


    .taste-trust{
        gap: 8px;

        margin-top: 24px;
    }


    .taste-trust-item{
        font-size: 9px;
    }


    .taste-trust-dot{
        display: none;
    }


    .taste-premium-stamp{
        width: 95px;
        height: 95px;
    }


    .taste-stamp-svg text{
        font-size: 9px;
    }


    .taste-stamp-center{
        width: 45px;
        height: 45px;

        font-size: 17px;
    }


    .taste-floating-card{
        transform:
            scale(.90);
    }


    .taste-card-two{
        left: 5px;
    }


    .taste-mini-one{
        display: none;
    }


    .taste-bottom-text{
        display: none;
    }

}


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

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

    .taste-noise,
    .taste-kicker-icon,
    .taste-offer-mini,
    .taste-stamp-svg,
    .taste-floating-card,
    .taste-mini-float,
    .taste-line,
    .taste-orb,
    .taste-bottom-line span{
        animation:
            none !important;
    }


    .taste-reveal{
        opacity: 1;

        transform: none;

        transition: none;
    }


    .taste-nature-stroke path{
        stroke-dashoffset: 0;

        transition: none;
    }

}