/* Keep the scrollbar gutter stable so a growing page never shifts the layout. */
html{scrollbar-gutter:stable}

/* A separate transform layer leaves scroll scaling and phone hover intact.
   The headline group reveals first (script.js staggers .hero-copy > *), then the
   phones rise in — one short move, small distance, opacity + transform only. */
.hero-entrance{
  display:grid;
  grid-template-columns:repeat(20,minmax(0,1fr));
  padding-block:8%;
  transform-origin:center;
}
@media(max-width:899px){
  .hero-entrance{grid-template-columns:repeat(12,minmax(0,1fr))}
}
html.hero-entrance-pending .hero-entrance{transform:translateY(26px) scale(.965);opacity:0}
html.hero-entrance-running .hero-entrance{animation:hero-entrance-rise 760ms var(--ease-out) 260ms both}
@keyframes hero-entrance-rise{
  from{transform:translateY(26px) scale(.965);opacity:0}
  to{transform:none;opacity:1}
}

@media(prefers-reduced-motion:reduce){
  html.hero-entrance-pending .hero-entrance{transform:none;opacity:.7}
  html.hero-entrance-running .hero-entrance{animation:hero-entrance-fade 200ms linear both !important}
}
@keyframes hero-entrance-fade{from{opacity:.7}to{opacity:1}}