/* vnish.it — shared site CSS (base, motion, responsive). Tokens in tokens.css. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg-2);font-family:var(--font-body);overflow-x:clip}
a{text-decoration:none;color:inherit}
img{max-width:100%}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---- keyframes ---- */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes floatChip{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes barFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---- header responsive ---- */
.hdr-burger{display:none}
@media(max-width:900px){
  .hdr-desktop{display:none!important}
  .hdr-burger{display:inline-flex!important}
  .mega-panel{display:none!important}
}
@media(min-width:901px){
  .mobile-drawer{display:none!important}
}

/* ---- grid responsive (mirrors design inline media queries) ---- */
@media(max-width:940px){
  [data-grid=hero]{grid-template-columns:1fr!important}
  [data-grid=mhero]{grid-template-columns:1fr!important}
  [data-grid=adv]{grid-template-columns:1fr 1fr!important}
  [data-grid=stats]{grid-template-columns:1fr 1fr!important}
  [data-grid=posts]{grid-template-columns:1fr!important}
  [data-grid=models]{grid-template-columns:1fr 1fr!important}
  [data-grid=nums]{grid-template-columns:1fr!important}
  [data-grid=related]{grid-template-columns:1fr!important}
  [data-grid=demo]{grid-template-columns:1fr!important}
  [data-grid=cases]{grid-template-columns:1fr!important}
  [data-grid=guide]{grid-template-columns:1fr!important}
  [data-toc]{position:static!important;margin-bottom:32px}
  [data-spec4]{grid-template-columns:1fr 1fr!important}
  [data-pad]{padding-left:20px!important;padding-right:20px!important}
  .foot-grid{grid-template-columns:1fr 1fr!important;gap:32px 24px!important}
}
@media(max-width:560px){
  [data-grid=adv]{grid-template-columns:1fr!important}
  [data-grid=models]{grid-template-columns:1fr!important}
  [data-hide-sm]{display:none!important}
}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}