/* Namma Hearth — nh-animations.css
   Every motion entry from animation-inventory.md (28 rows), reproduced 1:1 from V9.
   Tokens: ease-out-soft cubic-bezier(.22,1,.36,1); spring cubic-bezier(.34,1.56,.64,1). */

/* ---- Scroll reveals (#11) — hook: add class nh-reveal + attr data-reveal ---- */
.nh-reveal,[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);}
.nh-reveal.is-in,[data-reveal].is-in{opacity:1;transform:none;}
.nh-fade-in{opacity:0;transition:opacity .8s ease;} .nh-fade-in.is-in{opacity:1;}

/* ---- Hero cinematic staggered rise (#12) ---- */
@keyframes nh-cine-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.nh-cine>*{opacity:0;animation:nh-cine-rise .95s cubic-bezier(.22,1,.36,1) both;}
.nh-cine>*:nth-child(1){animation-delay:.05s}.nh-cine>*:nth-child(2){animation-delay:.16s}
.nh-cine>*:nth-child(3){animation-delay:.27s}.nh-cine>*:nth-child(4){animation-delay:.38s}
.nh-cine>*:nth-child(5){animation-delay:.49s}.nh-cine>*:nth-child(6){animation-delay:.60s}

/* ---- Hero gradient drift (#13) ---- */
@keyframes nh-cine-drift{from{background-position:0% 50%}to{background-position:100% 50%}}
.nh-hero-cine{background-size:180% 180%!important;animation:nh-cine-drift 24s ease-in-out infinite alternate;}
.nh-hero-cine>*{position:relative;z-index:1;}

/* ---- Floating deco emoji (#14) ---- */
@keyframes nh-drift-a{0%{transform:translate(0,0) rotate(-5deg)}50%{transform:translate(12px,-16px) rotate(5deg)}100%{transform:translate(0,0) rotate(-5deg)}}
@keyframes nh-drift-b{0%{transform:translate(0,0) rotate(4deg)}50%{transform:translate(-14px,-12px) rotate(-4deg)}100%{transform:translate(0,0) rotate(4deg)}}
.nh-drift-a{animation:nh-drift-a 7.5s ease-in-out infinite;}
.nh-drift-b{animation:nh-drift-b 8.5s ease-in-out infinite;}

/* ---- Mascot peek + sway (#15) ---- */
@keyframes nh-mascot-peek{0%{opacity:0;transform:translate(60%,30%) rotate(12deg)}100%{opacity:1;transform:translate(0,0) rotate(0deg)}}
@keyframes nh-mascot-sway{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-4px,-8px) rotate(-2deg)}}
.nh-mascot{animation:nh-mascot-peek 1.1s cubic-bezier(.34,1.56,.64,1) .4s both,nh-mascot-sway 6s ease-in-out 1.5s infinite;}

/* ---- Idle loops: bob / wiggle / float (#17, #18) ---- */
@keyframes nh-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
@keyframes nh-wiggle{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes nh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.nh-bowl-bob{animation:nh-bob 3s ease-in-out infinite;}
.nh-wiggle{display:inline-block;animation:nh-wiggle 2.4s ease-in-out infinite;transform-origin:50% 85%;}
.nh-float{animation:nh-float 3.4s ease-in-out infinite;}

/* ---- Breathe scale (#20) ---- */
@keyframes nhBreathe{from{transform:scale(1)}to{transform:scale(1.03)}}
.nh-breathe{animation:nhBreathe 6s ease-in-out infinite alternate;}

/* ---- Card hover lift (#16) ---- */
.nh-card-hover-lift{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1);}
.nh-card-hover-lift:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(74,21,75,.14);}
.nh-card-hover-lift:hover .nh-bowl-bob{animation-duration:1.1s;}

/* ---- Pack-shot hover lift+scale (#25) ---- */
.nh-hover-pack .nh-pack,.nh-pack{transition:transform .4s cubic-bezier(.22,1,.36,1);}
.nh-hover-pack:hover .nh-pack{transform:translateY(-8px) scale(1.04);}

/* ---- Image entrance zoom (#26) ---- */
@keyframes nh-cine-zoom{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}
.nh-cine-img{animation:nh-cine-zoom 1.3s cubic-bezier(.22,1,.36,1) both;will-change:transform;}

/* ---- Field focus ring (#19) ---- */
.nh-field-focus:focus,.nh-field:focus{outline:none;border-color:#FFA51F;box-shadow:0 0 0 3px rgba(255,165,31,.18);}

/* ---- Click pop + hover pop (#6, #7) — JS toggles .nh-pop; hover via CSS fallback ---- */
@keyframes nhBtnPop{0%{transform:scale(1)}42%{transform:scale(.9)}70%{transform:scale(1.06)}100%{transform:scale(1)}}
.nh-btn-pop,.nh-pop{animation:nhBtnPop .4s cubic-bezier(.22,1,.36,1);}
.nh-hover-pop{transition:transform .22s cubic-bezier(.34,1.56,.64,1);}
.nh-hover-pop:hover{transform:scale(1.05);}

/* ---- Emoji burst float (#5) — JS spawns spans ---- */
@keyframes nhFloatUp{0%{opacity:0;transform:translate(-50%,0) scale(.4)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-72px) scale(1.15)}}

/* ---- Back-to-top reveal (#24) ---- */
#nh-to-top{opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.22,1,.36,1);}
#nh-to-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}

/* ---- Cart drawer / overlay parity (#1, #2, #3) — for any custom mini-cart panel ---- */
.nh-overlay{transition:opacity .3s ease,visibility .3s ease;}
.nh-drawer{transition:transform .38s cubic-bezier(.22,1,.36,1);}

/* ---- Mobile menu open/close (#23) ---- */
@keyframes nh-menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
#nh-mobile-menu{animation:nh-menu-in .28s cubic-bezier(.22,1,.36,1);}

/* ============ prefers-reduced-motion guard ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .nh-reveal,[data-reveal],.nh-fade-in,.nh-cine>*{opacity:1!important;transform:none!important;}
}
body.nh-reduced-motion .nh-hero-cine,body.nh-reduced-motion .nh-drift-a,
body.nh-reduced-motion .nh-drift-b,body.nh-reduced-motion .nh-mascot,
body.nh-reduced-motion .nh-bowl-bob,body.nh-reduced-motion .nh-wiggle,
body.nh-reduced-motion .nh-float,body.nh-reduced-motion .nh-breathe{animation:none!important;}