/* Storefront motion layer. Purely additive; loaded after main.css.
   Everything is gated on html.anim (set by js/animations.js), so no-JS and
   prefers-reduced-motion visitors see the unchanged static page.
   To remove: run /root/wls-rollback-animations.sh */

html.anim { scroll-behavior: smooth; }

/* ---------- Page load ---------- */
@keyframes anim-fade-up   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes anim-fade-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes anim-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes anim-pop       { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

html.anim .main-nav { animation: anim-fade-down .7s cubic-bezier(.2,.7,.2,1) both; }

html.anim .hero-text h1               { animation: anim-fade-up .8s cubic-bezier(.2,.7,.2,1) .10s both; }
html.anim .hero-text .hero-subheadline{ animation: anim-fade-up .8s cubic-bezier(.2,.7,.2,1) .25s both; }
html.anim .hero-text .btn-instagram   { animation: anim-fade-up .8s cubic-bezier(.2,.7,.2,1) .38s both; }
html.anim .hero-text .hero-actions    { animation: anim-fade-up .8s cubic-bezier(.2,.7,.2,1) .50s both; }
html.anim .hero-right                 { animation: anim-pop 1s cubic-bezier(.2,.7,.2,1) .30s both; }

/* ---------- Scroll reveal ---------- */
html.anim .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--d, 0ms);
}
html.anim .reveal.reveal-scale { transform: scale(.94); }
html.anim .reveal.reveal-left  { transform: translateX(-36px); }
html.anim .reveal.reveal-right { transform: translateX(36px); }
html.anim .reveal.in {
    opacity: 1;
    transform: none;
}

/* Safety net: if the script stalls, nothing stays hidden */
html.anim-off .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- Interaction feedback ---------- */
.btn-primary:active, .btn-secondary:active, .btn-add-to-cart:active, .btn-instagram:active {
    transform: translateY(-1px) scale(.97);
}

@keyframes anim-added {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(214, 36, 110, .18); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(214, 36, 110, 0); }
}
html.anim .btn-add-to-cart.is-added { animation: anim-added .6s ease-out; }

/* Cart modal: backdrop fades, panel springs in */
@keyframes anim-backdrop { from { background-color: rgba(26, 26, 46, 0); } to { background-color: rgba(26, 26, 46, .7); } }
@keyframes anim-panel    { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
html.anim .modal.is-open               { animation: anim-backdrop .25s ease-out both; }
html.anim .modal.is-open .modal-content{ animation: anim-panel .35s cubic-bezier(.2,.8,.25,1.1) both; }

/* Gentle idle motion on value pills */
@keyframes anim-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
html.anim .value-pill.in.settled { animation: anim-bob 4.5s ease-in-out infinite; }
html.anim .value-pill:nth-child(2).in.settled { animation-delay: .6s; }
html.anim .value-pill:nth-child(3).in.settled { animation-delay: 1.2s; }

@media (prefers-reduced-motion: reduce) {
    html.anim, html.anim * { animation: none !important; scroll-behavior: auto !important; }
    html.anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}