@keyframes ping{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55)}70%,100%{box-shadow:0 0 0 12px rgba(var(--accent-rgb),0)}}
@keyframes blink{50%{opacity:0}}
@keyframes tabIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Hero: one orchestrated sequence (name resolves, then the rest follows) */
html.js .status,html.js #dynamic-header,html.js .lead,html.js .cta{opacity:0}
html.js.go .status{animation:heroIn .8s var(--ease) .05s forwards}
html.js.go #dynamic-header{animation:heroIn .8s var(--ease) .25s forwards}
html.js.go .lead{animation:heroIn .9s var(--ease) 1.5s forwards}
html.js.go .cta{animation:heroIn .9s var(--ease) 1.7s forwards}

/* Scroll reveals: kept small, applied to groups only */
html.js .rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
html.js .rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  html.js .status,html.js #dynamic-header,html.js .lead,html.js .cta,html.js .rv{opacity:1;transform:none}
}