/* ==========================================================================
   Hush — Animations & micro-interactions
   Scroll reveals, staggered entrances, hover polish, ambient motion.
   Everything respects prefers-reduced-motion.
   ========================================================================== */

/* ---------- Scroll reveal ---------- */
.hush-reveal{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--hush-ease),transform .7s var(--hush-ease)}
.hush-reveal.is-in{opacity:1;transform:none}

/* Variants — add these classes alongside .hush-reveal */
.hush-reveal--left{transform:translateX(-30px)}
.hush-reveal--right{transform:translateX(30px)}
.hush-reveal--scale{transform:scale(.94)}
.hush-reveal--left.is-in,.hush-reveal--right.is-in,.hush-reveal--scale.is-in{transform:none}

/* Staggered children — parent gets .hush-stagger, children reveal in sequence */
.hush-stagger.is-in > *{animation:hush-rise .6s var(--hush-ease) backwards}
.hush-stagger.is-in > *:nth-child(1){animation-delay:.05s}
.hush-stagger.is-in > *:nth-child(2){animation-delay:.12s}
.hush-stagger.is-in > *:nth-child(3){animation-delay:.19s}
.hush-stagger.is-in > *:nth-child(4){animation-delay:.26s}
.hush-stagger.is-in > *:nth-child(5){animation-delay:.33s}
.hush-stagger.is-in > *:nth-child(6){animation-delay:.40s}
.hush-stagger.is-in > *:nth-child(7){animation-delay:.47s}
.hush-stagger.is-in > *:nth-child(8){animation-delay:.54s}

@keyframes hush-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes hush-fade{from{opacity:0}to{opacity:1}}
@keyframes hush-pop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@keyframes hush-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes hush-float-slow{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(2deg)}}
@keyframes hush-spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes hush-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes hush-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ---------- Ambient floating (hero blobs, decorative shapes) ---------- */
.hush-float{animation:hush-float 6s ease-in-out infinite}
.hush-float-slow{animation:hush-float-slow 9s ease-in-out infinite}
.hush-spin-slow{animation:hush-spin-slow 24s linear infinite}

/* ---------- Buttons — springy press + sheen ---------- */
.hush-btn{position:relative;overflow:hidden;transition:transform .18s var(--hush-ease),box-shadow .25s var(--hush-ease),background .25s var(--hush-ease)}
.hush-btn:active{transform:scale(.96)}
.hush-btn--primary::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .6s var(--hush-ease)}
.hush-btn--primary:hover::after{left:130%}

/* ---------- Cards — lift, image zoom, wishlist pop ---------- */
.hush-card{transition:transform .35s var(--hush-ease),box-shadow .35s var(--hush-ease),border-color .35s var(--hush-ease)}
.hush-card:hover{transform:translateY(-8px)}
.hush-card__media img{transition:transform .7s var(--hush-ease)}
.hush-card:hover .hush-card__media img{transform:scale(1.07)}
.hush-card__wish{transition:transform .25s var(--hush-ease),background .25s,color .25s}
.hush-card__wish:active{transform:scale(.82)}
.hush-card__wish.is-active{background:var(--hush-pink);color:#fff;animation:hush-pop .4s var(--hush-ease)}
/* The "add" button confirming */
.hush-add{transition:transform .2s var(--hush-ease),background .25s,color .25s}
.hush-add:active{transform:scale(.9)}
.hush-add.added{animation:hush-pop .45s var(--hush-ease)}

/* ---------- Nav underline already animated; add mega fade-up ---------- */
.hush-mega__cols > li{animation:none}
.hush-has-mega:hover .hush-mega__cols > li,
.hush-has-mega.is-open .hush-mega__cols > li{animation:hush-rise .5s var(--hush-ease) backwards}
.hush-has-mega:hover .hush-mega__cols > li:nth-child(2){animation-delay:.06s}
.hush-has-mega:hover .hush-mega__cols > li:nth-child(3){animation-delay:.12s}
.hush-has-mega:hover .hush-mega__cols > li:nth-child(4){animation-delay:.18s}

/* ---------- Cart drawer + count bump ---------- */
.hush-cart-count.is-bump{animation:hush-pop .45s var(--hush-ease)}

/* ---------- Skeleton shimmer (for lazy images / loading) ---------- */
.hush-skeleton{background:linear-gradient(90deg,var(--hush-line) 25%,var(--hush-cream-2) 37%,var(--hush-line) 63%);
  background-size:400% 100%;animation:hush-shimmer 1.4s ease infinite}

/* ---------- Section entrance for headings ---------- */
.hush-section .hush-h2,.hush-section .hush-eyebrow{will-change:transform}

/* ---------- Ticker / marquee (topbar) speed control ---------- */
.hush-topbar__track{animation:hush-marquee 26s linear infinite}
.hush-topbar:hover .hush-topbar__track{animation-play-state:paused}
@keyframes hush-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Link arrow nudge ---------- */
.hush-viewall svg,.hush-mega__featured-cta svg{transition:transform .25s var(--hush-ease)}
.hush-viewall:hover svg,.hush-mega__featured-cta:hover svg{transform:translateX(4px)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hush-reveal,.hush-reveal.is-in{opacity:1;transform:none;transition:none}
  .hush-stagger.is-in > *{animation:none}
  .hush-float,.hush-float-slow,.hush-spin-slow,.hush-topbar__track{animation:none}
  .hush-btn--primary::after{display:none}
  *{scroll-behavior:auto !important}
}

/* ---------- Toast notification ---------- */
.hush-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);z-index:130;
  display:flex;align-items:center;gap:.6rem;background:var(--hush-ink);color:#fff;
  padding:.9em 1.4em;border-radius:var(--hush-r-pill);font-weight:700;font-size:.9rem;
  box-shadow:0 12px 40px rgba(28,19,64,.3);opacity:0;transition:opacity .3s var(--hush-ease),transform .3s var(--hush-ease);pointer-events:none}
.hush-toast.is-in{opacity:1;transform:translate(-50%,0)}
.hush-toast svg{color:var(--hush-green)}
@media (max-width:860px){.hush-toast{bottom:calc(var(--hush-tabbar-h,64px) + 16px)}}