/* AGRREEN storefront motion layer — loaded on every storefront page from
   base.html when config.SITE_MOTION is on. Animates transform/opacity only;
   everything here is switched off for prefers-reduced-motion. */

:root{
  --mt-ease:cubic-bezier(.22,.8,.24,1);
  --mt-gold:#e8b13a;
  --mt-leaf:#7cc27a;
}

/* ---------- loading bar (internal navigation) ---------- */
.mt-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:10001;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);opacity:0;background:linear-gradient(90deg,var(--mt-leaf),var(--mt-gold));box-shadow:0 0 10px rgba(232,177,58,.6);}
.mt-progress.is-on{opacity:1;animation:mt-load 9s cubic-bezier(.08,.7,.2,1) forwards;}
@keyframes mt-load{0%{transform:scaleX(0);}12%{transform:scaleX(.4);}100%{transform:scaleX(.94);}}

/* ---------- navigation ---------- */
@media (min-width:901px){
  header{position:sticky;top:0;z-index:55;}
  body[data-page^="cart."] header{position:static;}
}
header{transition:transform .38s var(--mt-ease),box-shadow .3s;}
html.mt-scrolled header{box-shadow:0 8px 24px rgba(10,20,14,.22);}
html.mt-header-hidden header{transform:translateY(-100%);}

.account-dropdown{display:block;visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .22s var(--mt-ease),visibility 0s linear .22s;}
.account-dropdown-wrap:hover .account-dropdown,.account-dropdown-wrap:focus-within .account-dropdown,.account-dropdown-wrap.open .account-dropdown{visibility:visible;opacity:1;transform:none;transition-delay:0s;}
.account-dropdown a{transition:background-color .15s,padding-left .2s var(--mt-ease);}

.search-suggestions{transform-origin:top center;animation:mt-drop .2s var(--mt-ease);}
@keyframes mt-drop{from{opacity:0;transform:translateY(-6px) scale(.98);}}
.mt-sk-row{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid #f0f0f0;}
.mt-sk{display:block;height:11px;border-radius:6px;position:relative;overflow:hidden;background:#eee8d9;}
.mt-sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:mt-shimmer 1.1s ease-in-out infinite;}
@keyframes mt-shimmer{to{transform:translateX(100%);}}

.app-tabbar a svg{transition:transform .2s var(--mt-ease);}
.app-tabbar a:active svg{transform:scale(.86);}
.app-tabbar a.on::before{animation:mt-grow .35s var(--mt-ease);}
@keyframes mt-grow{from{transform:scaleX(0);}}

/* ---------- micro-interactions ---------- */
.btn,.btn-cart-quick,.lp-btn,.qty-btn,.shop-btn,.welcome-popup button,.lp-round{transition:transform .14s var(--mt-ease),background-color .2s,color .2s,border-color .2s,box-shadow .2s;}
.btn:active,.btn-cart-quick:active,.lp-btn:active,.qty-btn:active,.shop-btn:active,.lp-round:active{transform:scale(.95);}
.btn-cart-quick.mt-added{background:#2f5d3a !important;border-color:#2f5d3a !important;color:#fff !important;animation:mt-pop .4s var(--mt-ease);}
.btn-cart-quick.mt-busy{opacity:.7;}
.cart-count.mt-bump,.tab-cart-count.mt-bump,.icon-cart.mt-bump{animation:mt-bump .55s var(--mt-ease);}
.wishlist-heart.mt-pop,.wishlist-heart-lg.mt-pop{animation:mt-pop .45s var(--mt-ease);}
@keyframes mt-bump{0%{transform:scale(1);}35%{transform:scale(1.45);}60%{transform:scale(.9);}100%{transform:scale(1);}}
@keyframes mt-pop{0%{transform:scale(1);}40%{transform:scale(1.28);}100%{transform:scale(1);}}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{transition:box-shadow .2s,border-color .2s;}
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(232,177,58,.35);}
.flash{animation:mt-drop .35s var(--mt-ease);}
.wa-float-btn{transition:transform .2s var(--mt-ease);}
.welcome-popup,.testi-modal{animation:mt-modal .35s var(--mt-ease);}
@keyframes mt-modal{from{opacity:0;transform:translateY(16px) scale(.97);}}

@media (hover:hover) and (pointer:fine){
  .foot-col a{display:inline-block;transition:transform .2s var(--mt-ease),opacity .2s;}
  .foot-col a:hover{transform:translateX(4px);}
  .account-dropdown a:hover{padding-left:18px;}
  .wa-float-btn:hover{transform:scale(1.08);}
  .header-icons .icon-item{transition:background-color .2s,transform .2s var(--mt-ease);}
  .header-icons .icon-item:hover{transform:translateY(-1px);}
}

/* ---------- scroll reveal + lazy image fade (classes added by motion.js) ---------- */
.mt-motion .mt-reveal{opacity:0;transform:translateY(26px);transition:opacity .75s var(--mt-ease),transform .75s var(--mt-ease);transition-delay:calc(var(--mt-d,0) * 80ms);}
.mt-motion .mt-reveal.is-in{opacity:1;transform:none;}
.mt-motion img.mt-fade{opacity:0;transition:opacity .45s ease;}
.mt-motion img.mt-fade.is-loaded{opacity:1;}

/* ---------- page transitions (browsers with cross-document View Transitions) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto;}
  header{view-transition-name:site-header;}
  .app-tabbar{view-transition-name:site-tabbar;}
  ::view-transition-old(root){animation:mt-page-out .2s ease both;}
  ::view-transition-new(root){animation:mt-page-in .38s var(--mt-ease) both;}
}
@keyframes mt-page-out{to{opacity:0;transform:translateY(-6px);}}
@keyframes mt-page-in{from{opacity:0;transform:translateY(14px);}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  html.mt-header-hidden header{transform:none;}
}