/* ======================================================
   SPICENEST MOTION SYSTEM
====================================================== */

.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:
        opacity .65s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms),
        transform .65s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms);
}

.reveal.is-revealed{
    opacity:1;
    transform:translateY(0);
}

.hero-text{
    animation:heroTextIn .8s cubic-bezier(.22,1,.36,1) both;
}

.hero-image{
    animation:heroImageIn .9s .12s cubic-bezier(.22,1,.36,1) both;
}

.progressive-section.is-visible{
    animation:sectionReveal .55s cubic-bezier(.22,1,.36,1) both;
}

.order-success-section.success-visible .order-confirmation{
    animation:successCardIn .65s cubic-bezier(.22,1,.36,1) both;
}

.order-success-section.success-visible .confirmation-success-icon{
    animation:successTick .65s .18s cubic-bezier(.22,1,.36,1) both;
}

.floating-whatsapp-btn{
    animation:floatingNudge 4.5s 2.5s ease-in-out infinite;
}

.add-cart:active,
.primary-btn:active,
.secondary-btn:active{
    transform:translateY(0) scale(.98);
}

@keyframes heroTextIn{
    from{opacity:0;transform:translateX(-36px)}
    to{opacity:1;transform:translateX(0)}
}

@keyframes heroImageIn{
    from{opacity:0;transform:translateX(36px) scale(.97)}
    to{opacity:1;transform:translateX(0) scale(1)}
}

@keyframes sectionReveal{
    from{opacity:0;transform:translateY(24px)}
    to{opacity:1;transform:translateY(0)}
}

@keyframes successCardIn{
    from{opacity:0;transform:translateY(28px) scale(.985)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes successTick{
    0%{opacity:0;transform:scale(.55) rotate(-18deg)}
    65%{transform:scale(1.08) rotate(3deg)}
    100%{opacity:1;transform:scale(1) rotate(0)}
}

@keyframes floatingNudge{
    0%,78%,100%{transform:translateY(0)}
    84%{transform:translateY(-5px)}
    90%{transform:translateY(0)}
    95%{transform:translateY(-3px)}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }

    .reveal{
        opacity:1;
        transform:none;
    }
}

/* Product wheel and enriched product motion */
.product-wheel-experience.is-revealed .product-wheel-stage{
    animation:wheelStageIn .8s .12s cubic-bezier(.22,1,.36,1) both;
}

.product-wheel.is-spinning{
    filter:saturate(1.08);
}

.wheel-product-orb{
    animation:orbFloat 4s ease-in-out infinite;
}

.wheel-orb-lasoora{animation-delay:.55s}
.wheel-orb-mixed{animation-delay:1.1s}

.product-card.wheel-selected{
    animation:wheelCardPulse .9s cubic-bezier(.22,1,.36,1);
}

.footer-logo-link img,
.logo img{
    animation:brandMarkIn .75s cubic-bezier(.22,1,.36,1) both;
}

@keyframes wheelStageIn{
    from{opacity:0;transform:scale(.88) rotate(-7deg)}
    to{opacity:1;transform:scale(1) rotate(0)}
}

@keyframes orbFloat{
    0%,100%{margin-top:0}
    50%{margin-top:-7px}
}

@keyframes wheelCardPulse{
    0%{transform:translateY(0) scale(1)}
    45%{transform:translateY(-8px) scale(1.025)}
    100%{transform:translateY(0) scale(1)}
}

@keyframes brandMarkIn{
    from{opacity:0;transform:scale(.9)}
    to{opacity:1;transform:scale(1)}
}