/* Subtle motion: scroll reveals, count-ups, card and image hover. Content stays visible without JS
   (html.motion is only added by js/motion.js) and for visitors who prefer reduced motion. */
html.motion [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.65,.3,1),transform .7s cubic-bezier(.2,.65,.3,1);transition-delay:var(--reveal-delay,0s);}
html.motion [data-reveal].in{opacity:1;transform:none;}
html.motion [data-reveal="fade"]{transform:none;}
html.motion [data-reveal="left"]{transform:translateX(-22px);}
html.motion [data-reveal="right"]{transform:translateX(22px);}
html.motion [data-reveal="left"].in,html.motion [data-reveal="right"].in{transform:none;}

/* cards lift a little on hover; images ease in */
.lift{transition:transform .35s cubic-bezier(.2,.65,.3,1),box-shadow .35s ease;}
.lift:hover{transform:translateY(-4px);box-shadow:0 14px 34px -18px rgba(6,38,63,.35);}
.zoom{overflow:hidden;}
.zoom img{transition:transform .9s cubic-bezier(.2,.65,.3,1);}
.lift:hover .zoom img,.zoom:hover img{transform:scale(1.04);}

/* product pages: existing cards and photos get the same hover feel */
.product-page-motion .app-card,.product-page-motion .family-card,.product-page-motion .related-card{transition:transform .35s cubic-bezier(.2,.65,.3,1),box-shadow .35s ease;}
.product-page-motion .app-card:hover,.product-page-motion .family-card:hover,.product-page-motion .related-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px -18px rgba(6,38,63,.35);}

/* header gains a soft shadow once the page scrolls */
.site-header{transition:box-shadow .3s ease;}
html.scrolled .site-header{box-shadow:0 6px 24px -12px rgba(6,38,63,.28);}

/* hero photo settles in slowly */
@keyframes settle{from{transform:scale(1.06);}to{transform:scale(1);}}
html.motion .settle{animation:settle 2.4s cubic-bezier(.2,.65,.3,1) both;}

@media (prefers-reduced-motion: reduce){
  html.motion [data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}
  .lift,.lift:hover,.zoom img,.lift:hover .zoom img{transition:none!important;transform:none!important;}
  html.motion .settle{animation:none;}
}