/*
MODULE: Hero Styles
RESPONSIBILITY: Visual treatment and parallax layer positioning for the
  .hero block.
DEPENDS ON: tokens.css, layout.css
EXPOSES: .hero and its elements
*/

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--space-10);
  padding-bottom: var(--space-9);
  overflow: hidden;
}

.hero__eyebrow {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-6);
}

.hero__name {
  font-size: var(--font-size-hero-mobile);
  color: var(--color-text);
}

.hero__name-line {
  display: block;
}

.hero__tagline {
  font-size: var(--font-size-2xl);
  color: var(--color-muted);
  margin-top: var(--space-6);
}

.hero__tagline-line {
  display: block;
}

.hero__tagline-accent {
  color: var(--color-accent);
}

.hero__scroll-cue {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: var(--space-3);
  margin-top: var(--space-9);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

.hero__scroll-cue-line {
  width: var(--space-8);
  height: var(--border-width-thin);
  background-color: var(--color-muted);
}

@media (min-width: 768px) {
  .hero__name {
    font-size: var(--font-size-4xl);
  }

  .hero__tagline {
    font-size: var(--font-size-3xl);
  }
}