/* Hero =====================================================================
   Figma: hero · Y 96 · W 1280 · H 704 (fix) · padding 48 · fill Grey (12)
   title frame W 782 · Display (57) desktop / Display (45) mobile
   The headline's base colour is Grey (98); js/animations.js paints the
   gradient on top
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  /* Horizontal padding comes from .hero__inner so the grid resolves against
     it. Vertically the nav height is accounted for, equally top and bottom:
     the text box stays in the middle of the screen and never slides under
     the nav, even in a short window. */
  padding-block: calc(var(--nav-height) + var(--container-pad));

  /* The hero reaches the fold — that is what the down arrow promises. The
     nav floats over it, so the whole visible height belongs to the hero.
     min-height, so the section still grows if the text needs more. */
  min-height: 100svh;
  /* required by the micro-animation contract (docs/INTEGRATION.md) */
  overflow: hidden;
}

.hero__inner {
  display: flex;
  justify-content: center;   /* text box centred */
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* The text box is 8 columns (66.66%), the text inside it left-aligned.
   No grid on mobile: full width. */
.hero__title {
  width: 100%;
  margin: 0;
  /* size, leading and weight come from the role tokens in base.css */

  /* For the gradient: this makes each word's offsetLeft the exact
     horizontal position inside the headline — see paintHeroGradient()
     in js/animations.js. */
  position: relative;
}

/* Columns only from 64rem (1024px): tablets keep the mobile layout, so the
   text runs out to the outer margin. The outer margin and the hero type do
   step up at 48rem though — see tokens.css. */
@media (width >= 64rem) {
  .hero__title { width: var(--w-8); }
}

/* The headline is uniformly Grey (98) = #FAFAFA. js/animations.js lays the
   gradient over it; if the script does not run, the headline simply stays
   #FAFAFA. The second half no longer gets a colour of its own — the gradient
   replaced the earlier two-tone treatment. The data-muted attribute stays,
   because motion.js derives a delay from it. */
.hero__title em {
  font-style: inherit;
}

/* Scroll indicator arrow ("learn more") ------------------------------------
   Disappears once the second fold is reached — see js/main.js */

.hero__scroll {
  position: absolute;
  /* Centred with margins, not translate: motion.js bounce() animates
     translate for the entrance with composite: 'replace', which would
     overwrite the centring translate: -50% 0 — the arrow ended up exactly
     half its own width, 20px, to the right. Nothing in a transform can
     break margin-inline: auto. */
  inset-inline: 0;
  margin-inline: auto;
  bottom: var(--container-pad);
  display: grid;
  place-items: center;
  /* the chevron's frame is 40×40 in Figma */
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-text-inverse);
  transition: opacity 300ms ease, visibility 300ms ease;
}

/* Touch target, following the .btn::before pattern: the visible frame is
   40×40, the area meant for a finger is 4px larger all round (48×48). */
.hero__scroll::before {
  content: "";
  position: absolute;
  inset: -0.25rem;
}

.hero__scroll-icon {
  width: 100%;
  height: 100%;
}

/* motion.js bounce() fades the arrow in and keeps it bobbing.
   Transparent to begin with so it does not flash before its entrance. */
.hero__scroll { opacity: 0; }

.hero__scroll[hidden] {
  /* [hidden] alone would be display:none — we want a fade here */
  display: grid;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}