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

.tq-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--space-section);
  margin-top: calc(65px + var(--space-section));
  background: var(--tq-bg);
  color: var(--tq-text);
  text-align: center;
}

.tq-hero__title {
  width: 100%;
  max-width: clamp(320px, 95vw, 1000px);
  margin: 0 auto;
  font-family: var(--font-family-jakarta);
  font-size: var(--font-size-hero);
  line-height: var(--line-height-display);
  font-weight: 750;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--tq-text);
  text-align: center;
  text-wrap: balance;
  text-shadow:
    0 1px 1px color-mix(
      in srgb,
      var(--tq-text) 12%,
      transparent
    ),
    0 3px 10px color-mix(
      in srgb,
      var(--tq-text) 8%,
      transparent
    );
}

.tq-hero__title-line {
  display: block;
}

.tq-hero__title-accent {
  display: inline;
}

.tq-hero__title-accent--secondary {
  color: var(--tq-text);
}

.tq-hero__title-accent--highlight {
  color: var(--tq-accent);
}

.tq-hero__title-accent--secondary * {
  color: var(--tq-text) !important;
}

.tq-hero__title-accent--highlight * {
  color: var(--tq-accent) !important;
}

.tq-hero__phrase-highlight,
.tq-hero__phrase-highlight * {
  color: var(--tq-accent) !important;
}

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

@media (prefers-reduced-motion: no-preference) {
  .tq-hero__title {
    animation: tq-hero-rise 620ms var(--tq-ease-out) both;
  }
}

@keyframes tq-hero-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   Scroll Indicator
--------------------------------------------------------------------- */

.tq-hero__scroll-indicator {
  display: none;
}

@media (min-width: 1100px) {
  .tq-hero__scroll-indicator {
    position: fixed;
    right: clamp(24px, 4vw, 70px);
    bottom: clamp(24px, 4vw, 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(48px, 5vw, 72px);
    height: clamp(48px, 5vw, 72px);
    pointer-events: none;
    z-index: 100;
  }

  .tq-hero__scroll-arrow {
    display: block;
    font-size: var(--font-size-hero);
    font-weight: 300;
    line-height: 1;
    animation: tq-hero-scroll-arrow 1.5s ease-in-out infinite;
  }

  @keyframes tq-hero-scroll-arrow {
    0%,
    100% {
      transform: translateY(-8px);
    }

    50% {
      transform: translateY(10px);
    }
  }
}

/* ---------------------------------------------------------------------
   Mobile
--------------------------------------------------------------------- */

@media (max-width: 768px) {

  .tq-hero__title {
    max-width: 95vw;
    line-height: 1.15;
  }
}

/* ---------------------------------------------------------------------
   Small Mobile
--------------------------------------------------------------------- */

@media (max-width: 480px) {
  .tq-hero {
    padding-inline: 20px;
  }

  .tq-hero__title {
    max-width: 100%;
    line-height: 1.15;
  }
}

/* ---------------------------------------------------------------------
   Reduced Motion
--------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tq-hero__title {
    animation: none;
  }

  .tq-hero__scroll-arrow {
    animation: none;
  }
}