/* Shared motion — scroll reveal + entrance. Native CSS, no library. */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none}

/* share card entrance is a soft scale, not a slide */
.stage.reveal{transform:translateY(0) scale(.965)}
.stage.reveal.in{transform:none}

/* richer hover micro-interactions */
.feat,.sw,.demo,.step{transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease}
.feat:hover,.step:hover{transform:translateY(-3px)}
.sw:hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(46,42,34,.45)}
.appstore,.btn,.demolink,.ghost{will-change:transform}
.nav-links a:not(.btn){position:relative}
.nav-links a:not(.btn)::after{
  content:'';position:absolute;left:0;bottom:-4px;height:1.5px;width:0;background:var(--terracotta);
  transition:width .28s cubic-bezier(.16,1,.3,1);
}
.nav-links a:not(.btn):hover::after{width:100%}

/* the ticking numbers get a gentle settle when they change */
.unit .num{transition:transform .25s ease}

@media (prefers-reduced-motion: reduce){
  .reveal,.stage.reveal{opacity:1!important;transform:none!important;transition:none!important}
  .feat,.sw,.demo,.step{transition:none}
}