/* HEROBOTS — site-wide motion layer.
   Quiet, precise, no bounce. Additive only: never changes layout. */

@keyframes hb-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes hb-sheen { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }

/* ---- staggered card entrance (parents already toggled to .is-in on scroll) ---- */
.hb-reveal.is-in .hb-card,
.hb-reveal.is-in .hb-stat,
.hb-reveal.is-in .hb-card-hover { animation: hb-rise .72s cubic-bezier(.16, 1, .3, 1) both; }
.hb-reveal.is-in .hb-card:nth-child(1), .hb-reveal.is-in .hb-stat:nth-child(1), .hb-reveal.is-in .hb-card-hover:nth-child(1) { animation-delay: 0s; }
.hb-reveal.is-in .hb-card:nth-child(2), .hb-reveal.is-in .hb-stat:nth-child(2), .hb-reveal.is-in .hb-card-hover:nth-child(2) { animation-delay: .07s; }
.hb-reveal.is-in .hb-card:nth-child(3), .hb-reveal.is-in .hb-stat:nth-child(3), .hb-reveal.is-in .hb-card-hover:nth-child(3) { animation-delay: .14s; }
.hb-reveal.is-in .hb-card:nth-child(4), .hb-reveal.is-in .hb-stat:nth-child(4), .hb-reveal.is-in .hb-card-hover:nth-child(4) { animation-delay: .21s; }
.hb-reveal.is-in .hb-card:nth-child(5), .hb-reveal.is-in .hb-stat:nth-child(5), .hb-reveal.is-in .hb-card-hover:nth-child(5) { animation-delay: .28s; }
.hb-reveal.is-in .hb-card:nth-child(6), .hb-reveal.is-in .hb-stat:nth-child(6), .hb-reveal.is-in .hb-card-hover:nth-child(6) { animation-delay: .35s; }
.hb-reveal.is-in .hb-card:nth-child(7), .hb-reveal.is-in .hb-stat:nth-child(7), .hb-reveal.is-in .hb-card-hover:nth-child(7) { animation-delay: .42s; }
.hb-reveal.is-in .hb-card:nth-child(8), .hb-reveal.is-in .hb-stat:nth-child(8), .hb-reveal.is-in .hb-card-hover:nth-child(8) { animation-delay: .49s; }

/* ---- hover: lift to a lighter edge, orange glow, never a hue shift ---- */
.hb-card, .hb-stat, .hb-callout, .hb-fpill, .hb-compare {
  transition: border-color .32s cubic-bezier(.16, 1, .3, 1),
              transform .42s cubic-bezier(.16, 1, .3, 1),
              box-shadow .42s cubic-bezier(.16, 1, .3, 1),
              background-color .32s ease;
}
.hb-card:hover, .hb-stat:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 77, 0, .45);
  box-shadow: 0 0 30px rgba(255, 77, 0, .12), 0 14px 40px rgba(0, 0, 0, .45);
}
.hb-card:active, .hb-stat:active { transform: translateY(-1px) scale(.995); }

/* ---- spec rows: hairline warms on hover ---- */
.hb-spec { transition: border-color .3s ease, background-color .3s ease; }
.hb-spec:hover { border-color: rgba(255, 77, 0, .4); }
.hb-spec:hover .hb-spec__label { color: var(--hb-orange); transition: color .3s ease; }

/* ---- buttons: 1px lift, press-in, one sheen pass on hover ---- */
.hb-btn { position: relative; overflow: hidden; transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease; }
.hb-btn:hover { transform: translateY(-1px); }
.hb-btn:active { transform: translateY(0) scale(.98); }
.hb-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: translateX(-120%) skewX(-18deg); pointer-events: none; opacity: 0;
}
.hb-btn:hover::after { opacity: 1; animation: hb-sheen .75s cubic-bezier(.16, 1, .3, 1) 1; }

/* ---- tags ---- */
.hb-tag { transition: box-shadow .3s ease, background-color .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1); }
.hb-tag:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 77, 0, .6); }

/* ---- imagery inside framed containers: slow push-in ---- */
.hb-media { overflow: hidden; }
.hb-media img, .hb-media video { transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.hb-media:hover img, .hb-media:hover video { transform: scale(1.04); }

/* ---- focus: 2px orange ring, offset on the ground ---- */
a:focus-visible, button:focus-visible, .hb-btn:focus-visible, .hb-input:focus-visible {
  outline: 2px solid var(--hb-orange); outline-offset: 3px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
}