/* ==========================================================
   KITTU BITTU FOODS
   HERO.CSS
   Premium Hero Section
==========================================================*/


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

.hero-section{

    position:relative;

    overflow:hidden;

    padding:80px 0 120px;

    background:

    radial-gradient(circle at top left,#fbfaf6 0%,#f6f3ea 45%,#eef4ed 100%);

}

/* Decorative Background */

.hero-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-220px;

    top:-250px;

    border-radius:50%;

    background:

    rgba(54,91,60,.05);

    filter:blur(20px);

}

.hero-section::after{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    left:-180px;

    bottom:-180px;

    border-radius:50%;

    background:

    rgba(183,139,48,.08);

    filter:blur(25px);

}

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

.hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:

    1.05fr

    .95fr;

    align-items:center;

    gap:90px;

}

/* ==========================================================
   LEFT
==========================================================*/

.hero-content{

    position:relative;

}

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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:999px;

    background:#fff;

    box-shadow:var(--shadow);

    color:var(--primary);

    font-weight:700;

    margin-bottom:28px;

}

.hero-badge i{

    color:var(--secondary);

}

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

.hero-title{

    font-size:4.5rem;

    line-height:1.05;

    color:var(--primary-dark);

    margin-bottom:28px;

}

.hero-title span{

    color:var(--secondary);

}

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

.hero-description{

    max-width:620px;

    font-size:1.12rem;

    margin-bottom:36px;

}

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

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:42px;

}

.hero-feature{

    display:flex;

    align-items:center;

    gap:10px;

    background:#fff;

    border-radius:999px;

    padding:12px 18px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.hero-feature:hover{

    transform:translateY(-4px);

}

.hero-feature i{

    color:var(--primary);

}

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

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:42px;

}

.hero-buttons .btn{

    min-width:220px;

}

/* ==========================================================
   TRUST BADGES
==========================================================*/

.hero-trust{

    display:flex;

    flex-wrap:wrap;

    gap:24px;

}

.trust-item{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

}

.trust-item i{

    color:var(--success);

}

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

.hero-media{

    position:relative;

}

.hero-image-wrapper{

    position:relative;

}

.hero-image{

    width:100%;

    border-radius:34px;

    box-shadow:

    0 35px 70px rgba(0,0,0,.15);

    transition:.5s;

}

.hero-image:hover{

    transform:

    scale(1.02);

}

/* ==========================================================
   IMAGE GLOW
==========================================================*/

.hero-image-wrapper::before{

    content:"";

    position:absolute;

    inset:-18px;

    border-radius:40px;

    background:

    linear-gradient(

    135deg,

    rgba(183,139,48,.18),

    rgba(54,91,60,.12)

    );

    filter:blur(40px);

    z-index:-1;

}
/* ==========================================================
   FLOATING CARDS
==========================================================*/

.floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    min-width:250px;

    padding:18px 22px;

    border-radius:22px;

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

    backdrop-filter:blur(18px);

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

    box-shadow:var(--shadow-lg);

    transition:var(--transition);

    z-index:5;

}

.floating-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 30px 65px rgba(0,0,0,.16);

}

/* Floating Icon */

.floating-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            var(--secondary)

        );

    color:#fff;

    font-size:24px;

    flex-shrink:0;

}

/* Floating Text */

.floating-content{

    display:flex;

    flex-direction:column;

}

.floating-content strong{

    color:var(--primary-dark);

    font-size:1rem;

    margin-bottom:4px;

}

.floating-content span{

    color:var(--text-light);

    font-size:.92rem;

}

/* ==========================================================
   CARD POSITIONS
==========================================================*/

.floating-card-top{

    top:-35px;

    left:-45px;

}

.floating-card-left{

    left:-70px;

    bottom:140px;

}

.floating-card-right{

    right:-60px;

    bottom:30px;

}

/* ==========================================================
   GOOGLE RATING CARD
==========================================================*/

.hero-rating-card{

    position:absolute;

    top:45px;

    right:-45px;

    width:235px;

    padding:20px;

    background:#fff;

    border-radius:24px;

    box-shadow:

        0 24px 55px rgba(0,0,0,.14);

    z-index:6;

}

.rating-stars{

    color:#F4B400;

    font-size:20px;

    margin-bottom:10px;

}

.rating-content strong{

    display:block;

    color:var(--primary-dark);

    margin-bottom:6px;

}

.rating-content span{

    color:var(--text-light);

    font-size:.92rem;

}

/* ==========================================================
   EXPERIENCE CARD
==========================================================*/

.experience-card{

    position:absolute;

    left:40px;

    bottom:-35px;

    display:flex;

    align-items:center;

    gap:16px;

    width:215px;

    padding:22px;

    border-radius:24px;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            #4f7b54

        );

    color:#fff;

    box-shadow:

        0 26px 55px rgba(54,91,60,.30);

    z-index:6;

}

.experience-number{

    font-size:38px;

    font-weight:700;

    line-height:1;

}

.experience-text{

    font-size:.92rem;

    line-height:1.5;

    font-weight:600;

}

/* ==========================================================
   PREMIUM HOVER
==========================================================*/

.hero-image-wrapper:hover .floating-card,

.hero-image-wrapper:hover .hero-rating-card,

.hero-image-wrapper:hover .experience-card{

    transform:translateY(-8px);

}

/* ==========================================================
   GLASS BORDER
==========================================================*/

.floating-card::before,

.hero-rating-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

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

    pointer-events:none;

}
/* ==========================================================
   HERO STATISTICS
==========================================================*/

.hero-bottom{

    margin-top:80px;

}

/* Statistics Grid */

.hero-stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

}

/* Individual Card */

.stat-card{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    gap:18px;

    padding:28px;

    background:#ffffff;

    border-radius:26px;

    box-shadow:var(--shadow);

    transition:all .35s ease;

}

.stat-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        135deg,

        rgba(54,91,60,.04),

        rgba(183,139,48,.06)

    );

    opacity:0;

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 35px 65px rgba(0,0,0,.15);

}

.stat-card:hover::before{

    opacity:1;

}

/* Icon */

.stat-icon{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--primary),

            var(--secondary)

        );

    color:#fff;

    font-size:28px;

    flex-shrink:0;

}

/* Text */

.stat-content{

    position:relative;

    z-index:2;

}

.stat-content h3{

    color:var(--primary);

    font-size:2rem;

    margin-bottom:4px;

}

.stat-content p{

    color:var(--text-light);

    font-size:.92rem;

    margin:0;

}

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

.scroll-indicator{

    display:flex;

    justify-content:center;

    margin-top:35px;

}

.scroll-indicator a{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:600;

    transition:var(--transition);

}

.scroll-indicator a:hover{

    color:var(--secondary);

}

.scroll-indicator i{

    font-size:22px;

    animation:heroBounce 2s infinite;

}

@keyframes heroBounce{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.hero-content{

    animation:heroFadeLeft .9s ease;

}

.hero-media{

    animation:heroFadeRight 1s ease;

}

.hero-bottom{

    animation:heroFadeUp 1.3s ease;

}

@keyframes heroFadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes heroFadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes heroFadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   IMAGE FLOAT
==========================================================*/

.hero-image{

    animation:

        heroImageFloat

        7s

        ease-in-out

        infinite;

}

@keyframes heroImageFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.hero-buttons .btn{

    position:relative;

    overflow:hidden;

}

.hero-buttons .btn::after{

    content:"";

    position:absolute;

    width:45px;

    height:220%;

    background:

        rgba(255,255,255,.22);

    top:-60%;

    left:-120px;

    transform:rotate(25deg);

}

.hero-buttons .btn:hover::after{

    animation:

        heroButtonShine

        .8s;

}

@keyframes heroButtonShine{

    from{

        left:-120px;

    }

    to{

        left:130%;

    }

}

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

.hero-image-wrapper:hover .hero-image{

    transform:

        scale(1.03)

        rotate(.4deg);

}
/* ==========================================================
   HERO RESPONSIVE
==========================================================*/

/* ==========================================================
   LARGE TABLETS
==========================================================*/

@media (max-width:1200px){

.hero-grid{

    gap:60px;

}

.hero-title{

    font-size:3.8rem;

}

.hero-image-wrapper{

    max-width:540px;

}

.hero-stats{

    grid-template-columns:repeat(2,1fr);

}

.floating-card-top{

    left:0;

}

.floating-card-left{

    left:-20px;

}

.floating-card-right{

    right:-20px;

}

.hero-rating-card{

    right:-10px;

}

}


/* ==========================================================
   TABLETS
==========================================================*/

@media (max-width:992px){

.hero-section{

    padding:70px 0 90px;

}

.hero-grid{

    grid-template-columns:1fr;

    gap:60px;

    text-align:center;

}

.hero-content{

    order:2;

    align-items:center;

}

.hero-media{

    order:1;

}

.hero-description{

    max-width:720px;

    margin:auto auto 35px;

}

.hero-features{

    justify-content:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-trust{

    justify-content:center;

}

.hero-image-wrapper{

    max-width:600px;

    margin:auto;

}

.hero-stats{

    grid-template-columns:repeat(2,1fr);

}

.floating-card-top{

    top:-20px;

    left:10px;

}

.floating-card-left{

    left:-10px;

    bottom:120px;

}

.floating-card-right{

    right:-10px;

    bottom:20px;

}

.hero-rating-card{

    right:-10px;

}

.experience-card{

    left:20px;

}

}


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

@media (max-width:768px){

.hero-section{

    padding:60px 0 70px;

}

.hero-title{

    font-size:2.6rem;

}

.hero-description{

    font-size:1rem;

}

.hero-badge{

    justify-content:center;

}

.hero-features{

    flex-direction:column;

    align-items:center;

    gap:12px;

}

.hero-feature{

    width:100%;

    max-width:360px;

    justify-content:center;

}

.hero-buttons{

    flex-direction:column;

    width:100%;

}

.hero-buttons .btn{

    width:100%;

}

.hero-trust{

    flex-direction:column;

    gap:12px;

}

.hero-image{

    border-radius:24px;

}

/* Floating Cards become stacked */

.floating-card,

.hero-rating-card,

.experience-card{

    position:relative;

    inset:auto;

    width:100%;

    max-width:380px;

    margin:18px auto 0;

    animation:none;

}

.hero-image-wrapper{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.hero-stats{

    grid-template-columns:1fr;

    gap:18px;

}

.stat-card{

    padding:22px;

}

.scroll-indicator{

    margin-top:40px;

}

}


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

@media (max-width:480px){

.hero-title{

    font-size:2.1rem;

}

.hero-description{

    font-size:.95rem;

}

.hero-badge{

    width:100%;

    padding:12px 16px;

}

.hero-feature{

    font-size:.9rem;

}

.hero-buttons .btn{

    padding:15px 22px;

}

.stat-card{

    flex-direction:column;

    text-align:center;

}

.stat-icon{

    margin-bottom:10px;

}

.scroll-indicator span{

    font-size:.9rem;

}

}


/* ==========================================================
   LANDSCAPE PHONES
==========================================================*/

@media (max-height:500px) and (orientation:landscape){

.hero-section{

    padding:20px 0;

}

.hero-grid{

    gap:35px;

}

.hero-title{

    font-size:2.4rem;

}

.hero-bottom{

    margin-top:40px;

}

}

/*======================================
HERO V2 FIXES
======================================*/

.hero-media{

overflow:visible;

}

.hero-image-wrapper{

overflow:visible;

max-width:620px;

margin:auto;

}

.floating-card-top{

left:10px;

top:-20px;

}

.floating-card-left{

left:-15px;

bottom:110px;

}

.floating-card-right{

right:-15px;

bottom:20px;

}

.hero-rating-card{

right:-15px;

top:30px;

}

.experience-card{

left:20px;

bottom:-20px;

}

.hero-grid{

gap:70px;

}

.hero-buttons .btn{

min-width:210px;

}

.hero-image{

display:block;

} 


/* ==========================================================
   HERO SPOTLIGHT
   Small event / offer message inside hero image gap
========================================================== */

.hero-spotlight{

    position:absolute;

    top:-130px;

    left:0;

    width:100%;

    z-index:20;

    display:flex;

    justify-content:center;

    pointer-events:none;

}

.hero-spotlight-content{

    width:100%;

    max-width:620px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px 16px;

    border-radius:18px;

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

    backdrop-filter:blur(14px);

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

    box-shadow:0 14px 35px rgba(0,0,0,.10);

    pointer-events:auto;

    animation:heroSpotlightFloat 4s ease-in-out infinite;

}

.hero-spotlight-icon{

    width:42px;

    height:42px;

    min-width:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    font-size:21px;

    box-shadow:0 8px 18px rgba(44,95,45,.18);

}

.hero-spotlight-text{

    flex:1;

    min-width:0;

}

.hero-spotlight-text strong{

    display:block;

    color:var(--primary-dark);

    font-size:.95rem;

    line-height:1.25;

}

.hero-spotlight-text span{

    display:block;

    margin-top:3px;

    color:#666;

    font-size:.78rem;

    line-height:1.3;

}

.hero-spotlight-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    padding:9px 14px;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    font-size:.78rem;

    font-weight:700;

    white-space:nowrap;

    transition:.3s ease;

}

.hero-spotlight-btn:hover{

    background:var(--primary-dark);

    transform:translateX(3px);

}

.hero-spotlight-btn i{

    font-size:.72rem;

}

@keyframes heroSpotlightFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-3px);

    }

}


@media (max-width:768px){

    .hero-spotlight{

        top:-80px;

        left:0;

        width:100%;

    }

    .hero-spotlight-content{

        width:94%;

        padding:10px 12px;

        gap:10px;

        border-radius:16px;

    }

    .hero-spotlight-icon{

        width:36px;

        height:36px;

        min-width:36px;

        font-size:18px;

    }

    .hero-spotlight-text strong{

        font-size:.82rem;

    }

    .hero-spotlight-text span{

        font-size:.68rem;

    }

    .hero-spotlight-btn{

        padding:8px 11px;

        font-size:.68rem;

    }

}



@media (max-width:480px){

    .hero-spotlight{

        top:-70px;

    }

    .hero-spotlight-content{

        width:92%;

        gap:8px;

        padding:9px 10px;

    }

    .hero-spotlight-icon{

        width:32px;

        height:32px;

        min-width:32px;

        font-size:16px;

    }

    .hero-spotlight-text strong{

        font-size:.76rem;

    }

    .hero-spotlight-text span{

        font-size:.62rem;

    }

    .hero-spotlight-btn{

        padding:7px 9px;

        font-size:.62rem;

    }

}

/* ==========================================================
   HERO SPOTLIGHT - PREMIUM LAUNCH OFFER ANIMATION
   Added on top of existing Hero Spotlight
========================================================== */


/* ----------------------------------------------------------
   Premium card entrance
---------------------------------------------------------- */

.hero-spotlight-content{

    animation:
        heroSpotlightReveal
        1s
        cubic-bezier(.22,1,.36,1)
        both;

    transform-origin:center;

}


/* ----------------------------------------------------------
   Gift icon entrance
---------------------------------------------------------- */

.hero-spotlight-icon{

    animation:
        spotlightIconReveal
        .75s
        cubic-bezier(.22,1,.36,1)
        .15s
        both;

}


/* ----------------------------------------------------------
   Title animation
---------------------------------------------------------- */

#heroSpotlightTitle{

    animation:
        spotlightTitleReveal
        .8s
        cubic-bezier(.22,1,.36,1)
        .28s
        both;

}


/* ----------------------------------------------------------
   Supporting text animation
---------------------------------------------------------- */

#heroSpotlightMessage{

    animation:
        spotlightMessageReveal
        .8s
        cubic-bezier(.22,1,.36,1)
        .42s
        both;

}


/* ----------------------------------------------------------
   Claim button animation
---------------------------------------------------------- */

#heroSpotlightButton{

    animation:
        spotlightButtonReveal
        .8s
        cubic-bezier(.22,1,.36,1)
        .55s
        both;

    position:relative;

    overflow:hidden;

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

}


/* ----------------------------------------------------------
   Premium button shine
---------------------------------------------------------- */

#heroSpotlightButton::before{

    content:"";

    position:absolute;

    top:-80%;

    left:-120%;

    width:45px;

    height:260%;

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

    transform:rotate(25deg);

    pointer-events:none;

}


/* Shine on hover */

#heroSpotlightButton:hover::before{

    animation:
        spotlightButtonShine
        .8s
        ease
        forwards;

}


/* ----------------------------------------------------------
   Button hover
---------------------------------------------------------- */

#heroSpotlightButton:hover{

    transform:
        translateY(-2px)
        scale(1.02);

    box-shadow:
        0 12px 28px rgba(44,95,45,.25);

}


/* ----------------------------------------------------------
   Arrow movement
---------------------------------------------------------- */

#heroSpotlightButton i{

    display:inline-block;

    transition:
        transform .3s ease;

}


#heroSpotlightButton:hover i{

    transform:
        translateX(4px);

}


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


/* Card */

@keyframes heroSpotlightReveal{

    0%{

        opacity:0;

        transform:
            translateY(18px)
            scale(.97);

        filter:blur(3px);

    }

    70%{

        opacity:1;

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

        filter:blur(0);

    }

    100%{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

        filter:blur(0);

    }

}


/* Icon */

@keyframes spotlightIconReveal{

    0%{

        opacity:0;

        transform:
            scale(.65)
            rotate(-12deg);

    }

    70%{

        opacity:1;

        transform:
            scale(1.08)
            rotate(3deg);

    }

    100%{

        opacity:1;

        transform:
            scale(1)
            rotate(0);

    }

}


/* Title */

@keyframes spotlightTitleReveal{

    0%{

        opacity:0;

        transform:
            translateX(20px);

    }

    100%{

        opacity:1;

        transform:
            translateX(0);

    }

}


/* Message */

@keyframes spotlightMessageReveal{

    0%{

        opacity:0;

        transform:
            translateX(15px);

    }

    100%{

        opacity:1;

        transform:
            translateX(0);

    }

}


/* Button */

@keyframes spotlightButtonReveal{

    0%{

        opacity:0;

        transform:
            translateX(18px)
            scale(.94);

    }

    70%{

        opacity:1;

        transform:
            translateX(-2px)
            scale(1.02);

    }

    100%{

        opacity:1;

        transform:
            translateX(0)
            scale(1);

    }

}


/* Button shine */

@keyframes spotlightButtonShine{

    0%{

        left:-120%;

    }

    100%{

        left:150%;

    }

}


/* ==========================================================
   DESKTOP - SLIGHTLY MORE PREMIUM SPACING
========================================================== */

@media (min-width:769px){

    .hero-spotlight-content{

        padding:
            13px
            17px;

    }

    .hero-spotlight-text strong{

        letter-spacing:.1px;

    }

}


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

@media (max-width:768px){

    .hero-spotlight-content{

        animation:
            heroSpotlightReveal
            .85s
            cubic-bezier(.22,1,.36,1)
            both;

    }

    #heroSpotlightTitle{

        animation:
            spotlightTitleReveal
            .7s
            cubic-bezier(.22,1,.36,1)
            .22s
            both;

    }

    #heroSpotlightMessage{

        animation:
            spotlightMessageReveal
            .7s
            cubic-bezier(.22,1,.36,1)
            .34s
            both;

    }

    #heroSpotlightButton{

        animation:
            spotlightButtonReveal
            .7s
            cubic-bezier(.22,1,.36,1)
            .46s
            both;

    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

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

    .hero-spotlight-content,
    .hero-spotlight-icon,
    #heroSpotlightTitle,
    #heroSpotlightMessage,
    #heroSpotlightButton{

        animation:none !important;

        transition:none !important;

    }

}


/* =========================================================
   HERO SPOTLIGHT PREMIUM ANIMATION
========================================================= */

#heroSpotlight {

    animation:
        heroSpotlightEnter
        0.8s
        cubic-bezier(.22,1,.36,1)
        both;

}


/* Main content */

#heroSpotlightContent {

    animation:
        heroTextReveal
        0.9s
        cubic-bezier(.22,1,.36,1)
        both;

    animation-delay: .15s;

}


/* Gift / Icon */

#heroSpotlight .hero-spotlight-icon {

    animation:
        giftPulse
        2.8s
        ease-in-out
        infinite;

}


/* Title */

#heroSpotlightTitle {

    animation:
        titleGlow
        3.5s
        ease-in-out
        infinite;

}


/* Message */

#heroSpotlightMessage {

    animation:
        messageReveal
        1s
        ease-out
        both;

    animation-delay: .35s;

}


/* Claim button */

#heroSpotlightButton {

    animation:
        offerButtonPulse
        2.8s
        ease-in-out
        infinite;

}


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

@keyframes heroSpotlightEnter {

    from {

        opacity: 0;

        transform:
            translateY(12px)
            scale(.97);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}


@keyframes heroTextReveal {

    from {

        opacity: 0;

        transform:
            translateX(18px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


@keyframes giftPulse {

    0%,
    100% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.08);

    }

}


@keyframes titleGlow {

    0%,
    100% {

        transform: scale(1);

        text-shadow:
            0 0 0 transparent;

    }

    50% {

        transform: scale(1.025);

        text-shadow:
            0 0 14px rgba(244,211,107,.28);

    }

}


@keyframes messageReveal {

    from {

        opacity: 0;

        transform:
            translateY(6px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes offerButtonPulse {

    0%,
    100% {

        transform: scale(1);

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

    }

    50% {

        transform: scale(1.035);

        box-shadow:
            0 10px 26px rgba(244,211,107,.22);

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    #heroSpotlight,
    #heroSpotlightContent,
    #heroSpotlight .hero-spotlight-icon,
    #heroSpotlightTitle,
    #heroSpotlightMessage,
    #heroSpotlightButton {

        animation: none !important;

    }

}