/* ==========================================================================
   Hero section: oversized rotating headline + portfolio link.
   Typography is the primary visual element here — layout stays out
   of its way.
   ========================================================================== */

.hero {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: var(--header-h);
}

.hero__inner {
  width: 100%;
  padding-block: var(--space-7);
}

.hero__content {
  max-width: 100%;
}

.hero__heading {
  font-family: var(--font-body);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-tight);
  color: var(--color-ink);
}

.hero__line {
  display: block;
}

/* Clips the rotating word so it can slide vertically without reflowing the line */
.hero__word-slot {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.hero__word {
  display: inline-block;
  color: var(--color-blue);
  transition: transform var(--duration-word) var(--ease-signature), opacity var(--duration-word) var(--ease-signature);
}

.hero__dot {
  color: var(--color-blue);
}

.hero__portfolio-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-7);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-portfolio-link);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  color: var(--color-ink);
  transition:
    color var(--duration-link) var(--ease-signature),
    text-decoration-thickness var(--duration-link) var(--ease-signature);
}

.hero__portfolio-link:hover,
.hero__portfolio-link:focus-visible {
  color: var(--color-blue);
  text-decoration-thickness: 2.5px;
}

.hero__portfolio-arrow {
  width: 1.45rem;
  height: 1.45rem;
  color: var(--color-blue);
  transition: transform var(--duration-link) var(--ease-signature);
}

.hero__portfolio-link:hover .hero__portfolio-arrow,
.hero__portfolio-link:focus-visible .hero__portfolio-arrow {
  transform: translateX(6px);
}