/* ============================================================
   Zelmora Shop — Premium Motion Layer
   ADDITIVE ONLY: this file layers transitions, hover depth,
   scroll-reveal and a premium loader on top of styles.css.
   It never overrides layout or brand colours — unlink to remove.
   ============================================================ */
:root{
  --zs-ease:cubic-bezier(.22,.61,.36,1);
  --zs-ease-out:cubic-bezier(.16,1,.3,1);
  --zs-lift:0 18px 40px -12px rgba(0,0,0,.55),0 6px 14px -8px rgba(0,0,0,.4);
}

@keyframes zsFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes zsSpin{to{transform:rotate(360deg)}}
@keyframes zsPulseRing{0%{transform:scale(.7);opacity:.85}80%,100%{transform:scale(2.2);opacity:0}}
@keyframes zsShine{0%{transform:translateX(-130%)}60%,100%{transform:translateX(240%)}}

/* Soft page entrance (only when JS is on, so no-JS users see content instantly) */
html.js #main-content{animation:zsFadeUp .55s var(--zs-ease-out) both}

/* Smooth interactive transitions */
a,button,.btn,.card,.product-card,.tool-card,.shop-card,.pricing-card,
.feature-card,.plan-card,img,.badge,input,select,textarea{
  transition:transform .35s var(--zs-ease),box-shadow .35s var(--zs-ease),
             border-color .25s ease,background-color .25s ease,color .25s ease,opacity .25s ease;
}

/* Card hover lift + image zoom */
.card:hover,.product-card:hover,.tool-card:hover,.shop-card:hover,
.pricing-card:hover,.feature-card:hover,.plan-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--zs-lift);
}
.card img,.product-card img,.tool-card img,.shop-card img{will-change:transform}
.card:hover img,.product-card:hover img,.tool-card:hover img,.shop-card:hover img{transform:scale(1.04)}

/* Primary button premium shine + press */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::after{
  content:"";position:absolute;top:0;left:0;width:55%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-130%);z-index:1;pointer-events:none;
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary:hover::after{animation:zsShine .9s var(--zs-ease-out)}
.btn:active{transform:translateY(0) scale(.98)}

/* Animated nav underline */
.nav-link{position:relative}
.nav-link::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:currentColor;opacity:.7;transition:width .3s var(--zs-ease-out)}
.nav-link:hover::after{width:100%}

/* Scroll reveal (JS adds .zs-reveal then .zs-in) */
html.js .zs-reveal{opacity:0;transform:translateY(22px)}
html.js .zs-reveal.zs-in{opacity:1;transform:none;
  transition:opacity .6s var(--zs-ease-out),transform .6s var(--zs-ease-out)}

/* Premium full-screen loader (only shown when JS present) */
html:not(.js) .zs-loader{display:none}
.zs-loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 38%,#211f2b 0%,#16151c 72%);
  transition:opacity .5s ease,visibility .5s ease}
.zs-loader.zs-hide{opacity:0;visibility:hidden}
.zs-loader-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.7rem}
.zs-loader-orb{position:relative;width:62px;height:62px}
.zs-loader-orb::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:3px solid rgba(138,127,162,.22);border-top-color:#C9A96E;animation:zsSpin 1s linear infinite}
.zs-loader-orb::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(201,169,110,.5);animation:zsPulseRing 1.6s ease-out infinite}
.zs-loader-text{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:#8A7FA2}

/* Slim top progress bar */
.zs-topbar-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:10000;
  background:linear-gradient(90deg,#8A7FA2,#C9A96E);
  box-shadow:0 0 10px rgba(201,169,110,.6);transition:width .3s ease,opacity .4s ease}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  html.js #main-content{animation:none}
  html.js .zs-reveal{opacity:1;transform:none}
  .zs-loader{display:none !important}
  .btn-primary::after{display:none}
}