/* ================================
   TYPOGRAPHY STYLES
   ================================
   Headings, text styles, and font treatments
*/

/* Headings */
h1 {
  font-size: clamp(12px, 8vw, 100px);
  text-align: center;
  line-height: 0.67;
  margin: 0 auto;
  font-family: var(--font-display);
}

h1 .eyebrow {
  font-family: var(--font-body);
  font-size: clamp(12px, 3vw, 40px);
  font-weight: var(--font-weight-normal);
}

.intro,
h2,
h3 {
  font-size: var(--step-1);
  font-weight: var(--font-weight-medium);
}

/* Heading Animation Text */
.heading {
  position: absolute;
  top: 50vh;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  width: 100%;
  max-width: 100vw;
  overflow: visible;
}

.heading p {
  font-family: var(--font-display);
  font-size: clamp(50px, 15.5vw, 250px);
  text-align: center;
  line-height: 0.67;
  margin: 0;
  color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--color-primary);
  z-index: -10;
  white-space: nowrap;
}

/* Text Container for Layered Text */
.text-container {
  position: relative;
}

.text-container p {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  color: transparent;
  opacity: 0;
}

.text-container p:first-child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  color: var(--color-text);
  opacity: 1;
}