/* =====================================================================
   motion.css: light motion graphics. Only active when js/motion.js adds
   the "mg" class (not on weak devices, not with reduced motion).
   Transform and opacity only, so it stays smooth on modest hardware.
   ===================================================================== */
@keyframes mgIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes mgShine{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(260%) skewX(-18deg)}}

/* cards settle in with a short stagger on every page */
html.mg .view:not([hidden]) .panel,
html.mg .view:not([hidden]) .stat,
html.mg .view:not([hidden]) .st-card{animation:mgIn .55s cubic-bezier(.2,.7,.2,1) both}
html.mg .view:not([hidden]) .panel:nth-child(2),html.mg .view:not([hidden]) .stat:nth-child(2){animation-delay:.06s}
html.mg .view:not([hidden]) .panel:nth-child(3),html.mg .view:not([hidden]) .stat:nth-child(3){animation-delay:.12s}
html.mg .view:not([hidden]) .panel:nth-child(4),html.mg .view:not([hidden]) .stat:nth-child(4){animation-delay:.18s}

/* soft lift on hover, for mouse users */
@media (hover:hover) and (pointer:fine){
  html.mg .panel,html.mg .stat,html.mg .st-card{transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s}
  html.mg .panel:hover,html.mg .stat:hover,html.mg .st-card:hover{transform:translateY(-2px)}
}

/* primary buttons get a light shine that sweeps across */
html.mg .btn.primary{position:relative;overflow:hidden}
html.mg .btn.primary::after{content:'';position:absolute;top:0;bottom:0;left:0;width:36%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);animation:mgShine 3.4s ease-in-out infinite}

/* the hero glow follows the pointer */
html.mg .hero{position:relative;overflow:hidden}
html.mg .hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(160,189,210,.12),transparent 60%)}
html.mg .hero:hover::before{opacity:1}

@media (prefers-reduced-motion:reduce){
  html.mg *,html.mg *::before,html.mg *::after{animation:none!important;transition:none!important}
}