/* ============ MOTION ============ */
@keyframes pulse{0%,100%{opacity:.5;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes floaty{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-52%) translateX(-8px)}}
.product-card.featured .product-symbol img,.hero-bg .hb-eye{will-change:transform}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.product-card.featured .product-symbol img{animation-name:floaty2!important}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
@keyframes drawline{from{stroke-dashoffset:var(--len,600)}to{stroke-dashoffset:0}}
@keyframes sweep{0%{opacity:0;transform:translateX(-30%)}20%{opacity:1}100%{opacity:0;transform:translateX(130%)}}
.dash-chart .chart-line{stroke-dasharray:var(--len,600);animation:drawline 2.2s var(--ease-out) forwards}
.map-node{animation:pulse 3s var(--ease) infinite}
.map-node:nth-child(2){animation-delay:.6s}.map-node:nth-child(3){animation-delay:1.2s}.map-node:nth-child(4){animation-delay:1.8s}

/* reveal on load for hero */
.hero-visual,.hero-grid>div:first-child{animation:rise .8s var(--ease-out) both}
.hero-visual{animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ============ UTILITIES ============ */
.mb{height:6px}
[hidden]{display:none!important}

@media (prefers-reduced-motion:reduce){
  .hero-bg .hb-orbit,.hero-bg .hb-eye,.product-card.featured .product-symbol img,.map-node,.dash-chart .chart-line,.hero-foot::before,.hero-visual,.hero-grid>div:first-child{animation:none!important}
  .dash-chart .chart-line{stroke-dashoffset:0}
}