/* =========================================================================
   Hero v2 — centered stack + full-width transformation scene.
   Selectors prefixed .hero2 / #hero-anim-layer to avoid collisions with the
   legacy .hero block in site.css.
   Tokens consumed: --bg, --pad, --blue, --muted, --sb-ease (tokens.css).
   ========================================================================= */

/* Local fallback in case tokens.css isn't loaded for some reason. */
.hero2 { --sb-ease: var(--sb-ease, cubic-bezier(.4,0,.2,1)); }

.hero2 {
  /* Tight top padding: #stage already provides 200px below the floating nav
     (see styles/nav.css). Negative margin pulls content up closer to the
     pill so the hero doesn't feel like it's hanging in space.
     Bottom padding (128px) preserves the original "below the imagery"
     breathing room that the chevron-row previously occupied. */
  padding: 0 var(--pad) 128px;
  margin-top: -22px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.hero2__copy {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.hero2__title {
  font: 500 64px/1.06 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.018em;
  color: #000;
  margin: 0;
  text-wrap: balance;
}
.hero2__work { color: var(--blue); }
.hero2__sub {
  font: 400 18px/1.45 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.002em;
  color: var(--muted);
  margin: 22px auto 0;
  max-width: 560px;
  text-wrap: pretty;
}
.hero2__cta {
  margin-top: 32px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero2__cta .btn { min-width: 176px; }

.hero2__scene {
  max-width: 1357px;
  /* With the CTAs removed, pull the scene tighter to the sub-headline so
     there's no awkward whitespace under the type. */
  margin: 12px auto 0;
  padding: 0 var(--pad);
}
.hero2__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Responsive — aligned with the site's existing breakpoints (1280 / 860 / 480). */
@media (max-width: 1280px) {
  .hero2__title { font-size: 56px; }
  .hero2 { padding: 0 48px 120px; margin-top: -18px; }
  .hero2__scene { padding: 0 24px; }
}
@media (max-width: 860px) {
  .hero2 { padding: 0 22px 96px; margin-top: -10px; }
  .hero2__title { font-size: 42px; line-height: 1.07; letter-spacing: -0.01em; }
  .hero2__sub { font-size: 17px; margin-top: 18px; }
  .hero2__scene { margin-top: 16px; padding: 0 16px; }
}
@media (max-width: 480px) {
  .hero2__title { font-size: 34px; }
}

/* =====================================================================
   Entry-animation states — currently no-op (static composition). The
   .hv-init / .hv-play gate is preserved in the markup for future motion
   work; selectors below force the rest pose so nothing flashes.
   ===================================================================== */
.hero2 .hv-in,
.hero2 .hv-out,
.hero2 .hv-br,
.hero2 .hv-bracket,
.hero2 .hv-tag-anim,
.hero2 .hv-disc-anim {
  opacity: 1;
}
.hero2 .hv-arrow {
  stroke-dasharray: 3 4.5 !important;
  stroke-dashoffset: 0 !important;
  animation: none !important;
}
.hero2 .hv-data {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}

/* Reduced-motion fallback for the static hv-* layer. */
@media (prefers-reduced-motion: reduce) {
  .hero2 * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hv-arrow { stroke-dashoffset: 12 !important; }
  .hv-data { stroke-dashoffset: 0 !important; }
  .hv-packet { opacity: 0 !important; }
}

/* =====================================================================
   Dot pipeline — dots emit from cubes, travel through Input pill, through
   the disc (picking up their output color), then along a single curve
   through the pill stack into the browser. Their destination pill pulses
   (soft breathing glow) as the dot passes.

   #hero-anim-layer is parked EARLY in the SVG so dots tuck UNDER the
   cubes, disc body, pills, and browser stack — visible only in gaps.
   ===================================================================== */
#hero-anim-layer .dot {
  pointer-events: none;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 0.9;
}
#hero-anim-layer .halo {
  pointer-events: none;
  stroke: none;
  /* Softer/wider blur so the halo feels like a glow, not an outline. */
  filter: blur(10px);
  /* Calm breath: slow ease, long duration. The ring should look like
     it's being exhaled outward, then dissipating. --peak-opacity and
     --peak-scale are set per-halo from JS so each ripple can have its
     own intensity. */
  animation: heroBreath 3400ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes heroBreath {
  0%   { transform: scale(0.90); opacity: 0;                          }
  22%  { transform: scale(1.04); opacity: var(--peak-opacity, 0.35);  }
  100% { transform: scale(var(--peak-scale, 1.50)); opacity: 0;       }
}

/* Reduced motion: hide the dot layer entirely; static scene reads correctly. */
@media (prefers-reduced-motion: reduce) {
  #hero-anim-layer { display: none; }
}