/* =====================================================================
   Sohel Nursery — Motion & glass layer
   Progressive: everything is visible without JS; motion is added by sn-motion.js
   Respects prefers-reduced-motion (all motion disabled)
   ===================================================================== */

/* ---------- Page entrance ---------- */
@keyframes sn-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
main{animation:sn-enter .6s cubic-bezier(.2,.7,.2,1) both}

/* ---------- Scroll reveal (only below-the-fold items are hidden, and only once JS is running) ---------- */
.js-motion .sn-reveal{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--sn-d,0ms);will-change:opacity,transform
}
.js-motion .sn-reveal.is-in{opacity:1;transform:none}

/* ---------- Glass header on scroll ---------- */
.site-header{transition:background-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}
.site-header.is-scrolled{
  background:rgba(255,255,255,.74)!important;
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  box-shadow:0 8px 28px rgba(15,48,25,.10)
}

/* ---------- Reading progress bar ---------- */
.sn-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;pointer-events:none;
  background:linear-gradient(90deg,var(--sn-gold-500,#f0a500),var(--sn-green-600,#2e7d32));
  transform-origin:0 50%;transform:scaleX(0);transition:transform .12s linear
}

/* ---------- Glass surfaces ---------- */
.nav-more-menu{background:rgba(255,255,255,.86)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ---------- Buttons: light sheen on hover ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .8s cubic-bezier(.2,.7,.2,1)
}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(120%)}

/* ---------- Cards: lift + image breathing ---------- */
.prod-card,.cat-card,.branch-card,.feature-card,.service-card,.testi-card{
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease
}
.prod-card:hover,.cat-card:hover,.branch-card:hover,.feature-card:hover,.service-card:hover{transform:translate3d(0,-4px,0)}
.prod-card img,.cat-card img,.branch-card img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.prod-card:hover img,.cat-card:hover img{transform:scale(1.045)}

/* ---------- Counter numerals keep tabular width while counting ---------- */
.sn-count{font-variant-numeric:tabular-nums}

/* ---------- Reduced motion: no transforms, no transitions, content simply visible ---------- */
@media (prefers-reduced-motion:reduce){
  main,.js-motion .sn-reveal{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
  .sn-progress{display:none}
  .btn::after{display:none}
  .prod-card:hover,.cat-card:hover,.branch-card:hover,.feature-card:hover,.service-card:hover{transform:none}
  .prod-card:hover img,.cat-card:hover img{transform:none}
}