/* Figma instance "hero - intro": 1440x1810 desktop, 402x1254 mobile (Frame
   26 + "story"). The textured purple background spans the header (built
   elsewhere) and the hero at every width; the intro band below paints over
   it with a solid fill. */

.hero-intro {
  position: relative;
  overflow: hidden;
  background-color: var(--light-purple);
  /* Figma stretches this fill over the full instance (header band included);
     the intro's solid fill paints over its lower part. */
  background-image: url("../../img/hero-texture.jpg");
  background-image: image-set(
    url("../../img/hero-texture-m.avif") type("image/avif"),
    url("../../img/hero-texture-m.webp") type("image/webp"),
    url("../../img/hero-texture.jpg") type("image/jpeg")
  );
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

@media (min-width: 1024px) {
  .hero-intro {
    background-image: image-set(
      url("../../img/hero-texture.avif") type("image/avif"),
      url("../../img/hero-texture.webp") type("image/webp"),
      url("../../img/hero-texture.jpg") type("image/jpeg")
    );
  }
}

/* The ring of twelve marks turns continuously (one rotation every eight
   seconds). It's the control's own button so a click — or Enter/Space — can
   pause and resume it; script upgrades it into that control and starts the
   motion, so with scripting off it stays a static, decorative mark. The
   wrapper's overflow: hidden crops whatever runs past the viewport, which is
   what sells the turn on mobile: only a little over half the ring is on
   screen, the rest rotating into and out of dead space. */
.hero__blob {
  display: block;
  position: absolute;
  top: clamp(96px, 24vw, 240px);
  left: auto;
  right: -38vw;
  width: min(86vw, 560px);
  height: auto;
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  transform-origin: 50% 50%;
  will-change: transform;
}

.hero__blob.is-spinning {
  cursor: pointer;
  animation: hero-blob-spin 8s linear infinite;
}

.hero__blob.is-paused {
  animation-play-state: paused;
}

.hero__blob:focus-visible {
  outline: 2px solid var(--dozen-blue);
  outline-offset: 4px;
}

.hero__blob-img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes hero-blob-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__blob.is-spinning {
    animation: none;
  }
}

/* Three consistent layers at every width: section background < ring < copy.
   The intro keeps position without a z-index, so its opaque fill stays at the
   section's own level (below the ring) instead of grouping with its text — and
   only the copy wrappers are lifted above the ring. That keeps the ring reading
   as backing texture on the hero and over the intro fill alike, rather than
   hiding behind the fill on mobile or jumping in front of the copy at
   in-between widths. */
.intro {
  position: relative;
}

.hero__content,
.intro__row {
  position: relative;
  z-index: 2;
}

/* ---------- Hero ---------- */

.hero {
  /* The mobile board runs a 32px gap between the header row and the h1
     (the wordmark row sits inside the hero column in Figma); the header
     block above already carries the board's 40px top pad. */
  padding-block: 2rem var(--space-60);
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 700px;
}

.hero__lockup {
  display: flex;
  flex-direction: column;
  gap: 13.06px;
}

.hero__heading {
  line-height: 1.2;
}

.hero__subline {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-style: italic;
  font-size: clamp(1.5rem, 1.1127rem + 1.5414vw, 2.5rem);
  line-height: 1.2;
  color: var(--dozen-blue);
}

.hero__cta {
  display: inline-flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  /* The mobile boards render this pill full-column-width with the label on
     one line; Figma's declared 40px side padding can't fit that, so the
     side padding narrows at mobile (matches the rendered reference). */
  padding: var(--space-20);
  border-radius: 60px;
  background: var(--gradient-blue-deep);
  font-family: var(--font-body);
  font-weight: var(--weight-heading);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.7px;
  color: var(--off-white);
  text-decoration: none;
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ---------- Intro band ---------- */

/* Mobile board values at base (the intro re-styles heavily between boards:
   italic eyebrow, off-white 36px heading, white 16px copy at 402 vs plain
   eyebrow, white 48px heading, light-purple 32px copy at 1440). */
.intro {
  background-color: var(--dozen-blue);
  padding-block: var(--space-40) var(--space-60);
}

.intro__row {
  display: flex;
  flex-direction: column;
  gap: 34.54px;
}

.intro__col {
  display: flex;
  flex-direction: column;
  gap: 13.06px;
}

.intro__eyebrow {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--dozen-teal);
}

/* Single-column layout: both the heading and the body take the same lavender
   tint rather than white, so the copy doesn't vanish where the white ring
   passes behind it. #cdc9ec (not --light-purple) is the most saturated purple
   that still clears AA on the blue band at the 16px body size — 4.52:1 vs the
   3.12:1 --light-purple manages, which only passes as large text. The desktop
   two-column rules below restore the board's white heading / --light-purple
   copy, where the ring stays clear of the copy column. */
.intro__heading {
  margin: 0;
  color: #cdc9ec;
  /* Mobile board: 36/43.2 — the fluid h2 token undershoots at 402 */
  font-size: 2.25rem;
  line-height: 1.2;
}

.intro__copy {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--p-size);
  line-height: var(--p-leading);
  color: #cdc9ec;
}

@media (min-width: 1024px) {
  /* Desktop restores the Figma placement: pinned at its (803, 195) offset with
     most of the ring running off the right edge as a sliver. Above the 1440
     board width .container re-centers rather than stretching, so the offset
     tracks that same centering instead of gluing to the true edge. */
  .hero__blob {
    top: 195px;
    left: calc(803px + max(0px, (100vw - 1440px) / 2));
    right: auto;
    width: 971px;
  }

  .hero {
    display: flex;
    align-items: center;
    min-height: clamp(560px, 62.3611vw, 898px);
    padding-block: 0;
  }

  .hero__content {
    gap: 57px;
  }

  .hero__heading {
    line-height: var(--h1-leading);
  }

  .hero__subline {
    white-space: nowrap; /* single line per Figma; node runs 717px, wider than the 700px lockup */
    line-height: 1;
    letter-spacing: -1.39px;
  }

  .hero__cta {
    align-self: flex-start;
    padding: var(--space-20) var(--space-40);
  }

  .intro {
    padding-block: var(--space-120) 42px;
  }

  .intro__row {
    flex-direction: row;
    align-items: flex-start;
    gap: 82px;
    /* Figma's row is a fixed 632px frame, taller than its hugged content */
    min-height: 632px;
  }

  .intro__col {
    flex: 0 1 639px;
    gap: 0;
  }

  .intro__eyebrow {
    font-style: normal;
    font-size: var(--h4-size);
    line-height: var(--h4-leading);
  }

  .intro__heading {
    font-size: var(--h2-size);
    line-height: var(--h2-leading);
    color: var(--pure-white);
  }

  .intro__copy {
    flex: 0 1 559px;
    font-weight: 500;
    font-size: 2rem;
    letter-spacing: -1.12px;
    color: var(--light-purple);
  }
}