/* ============================================================================
   eStorePoint — animations (polished & subtle, lightweight, vanilla)
   ============================================================================ */

/* ---- Scroll reveal (only hide when JS is available) ----------------------- */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform;}
.reveal.in{opacity:1;transform:none;}
.js .reveal-left{opacity:0;transform:translateX(-32px);transition:opacity .7s ease,transform .7s ease;}
.reveal-left.in{opacity:1;transform:none;}
.js .reveal-right{opacity:0;transform:translateX(32px);transition:opacity .7s ease,transform .7s ease;}
.reveal-right.in{opacity:1;transform:none;}
.js .reveal-scale{opacity:0;transform:scale(.94);transition:opacity .6s ease,transform .6s ease;}
.reveal-scale.in{opacity:1;transform:none;}

/* Stagger children (e.g. product cards) */
.js .stagger > *{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.stagger.in > *{opacity:1;transform:none;}
.stagger.in > *:nth-child(1){transition-delay:.05s}
.stagger.in > *:nth-child(2){transition-delay:.12s}
.stagger.in > *:nth-child(3){transition-delay:.19s}
.stagger.in > *:nth-child(4){transition-delay:.26s}
.stagger.in > *:nth-child(5){transition-delay:.33s}
.stagger.in > *:nth-child(6){transition-delay:.40s}
.stagger.in > *:nth-child(7){transition-delay:.47s}
.stagger.in > *:nth-child(8){transition-delay:.54s}
.stagger.in > *:nth-child(n+9){transition-delay:.60s}

/* ---- Hero entrance -------------------------------------------------------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.hero .eyebrow{animation:fadeUp .7s ease both;}
.hero h1{animation:fadeUp .8s .1s ease both;}
.hero p.lead{animation:fadeUp .8s .2s ease both;}
.hero-cta{animation:fadeUp .8s .32s ease both;}
.hero-visual{animation:fadeIn 1s .3s ease both;}

/* ---- Floating leaves ------------------------------------------------------ */
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(6deg)}}
@keyframes sway{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
/* ---- Keyframe helpers ----------------------------------------------------- */
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
@keyframes slideIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}

/* ---- Animated underline for hero words ------------------------------------ */
.hl{position:relative;display:inline-block;color:#c9f5d8;}
.hl::after{content:"";position:absolute;left:0;bottom:.06em;height:.32em;width:100%;background:rgba(229,252,84,.5);border-radius:4px;transform:scaleX(0);transform-origin:left;animation:growLine .9s .6s cubic-bezier(.2,.8,.2,1) forwards;z-index:-1;}
@keyframes growLine{to{transform:scaleX(1)}}

/* ---- Button ripple -------------------------------------------------------- */
.btn{position:relative;overflow:hidden;}
.btn .ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background:rgba(255,255,255,.5);}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* ---- Counter glow --------------------------------------------------------- */
.impact-item .num{transition:text-shadow .4s;}
.impact-item:hover .num{text-shadow:0 0 24px rgba(229,252,84,.55);}

/* ---- Cart badge bounce ---------------------------------------------------- */
@keyframes bounceIn{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.cart-badge.bounce{animation:bounceIn .45s ease;}

/* ---- Image placeholder shimmer (while loading) ---------------------------- */
.card-media.loading{background:linear-gradient(90deg,#eef6f0 25%,#dcefe2 50%,#eef6f0 75%);background-size:800px 100%;animation:shimmer 1.3s infinite linear;}

/* ---- Parallax hero background shift (JS-driven) --------------------------- */
.hero-bg-parallax{will-change:transform;}

/* ---- Navbar shrink on scroll ---------------------------------------------- */
.navbar{transition:box-shadow .3s,height .3s;}
.navbar.shrunk{height:60px;box-shadow:0 4px 20px rgba(10,55,24,.12);}
.navbar.shrunk .brand span{font-size:1.15rem;}

/* ---- Respect reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .reveal,.reveal-left,.reveal-right,.reveal-scale,.stagger > *{opacity:1 !important;transform:none !important;}
}