/* Hero direction: slow, seamless cinematic loop with responsive focal points. */
.hero-bg img {
  transform: scale(1.045) translate3d(-0.35%, 0, 0);
  transform-origin: 54% 52%;
  animation: hero-cinematic-loop 28s ease-in-out infinite;
  will-change: transform;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(10, 16, 14, 0.96) 0%, rgba(10, 16, 14, 0.78) 36%, rgba(10, 16, 14, 0.18) 76%, rgba(10, 16, 14, 0.24) 100%),
    linear-gradient(180deg, rgba(10, 16, 14, 0.16) 15%, rgba(10, 16, 14, 0.76) 100%);
}

.hero-copy {
  max-width: 47rem;
}

.hero h1 {
  max-width: 8.4ch;
  text-wrap: balance;
}

.hero .button-dark {
  border: 1px solid var(--cta);
  box-shadow: 0 12px 28px rgba(8, 13, 12, 0.24);
}

.hero .button-dark:hover {
  box-shadow: 0 15px 30px rgba(8, 13, 12, 0.32);
}

.hero-stamp {
  box-shadow: 0 14px 26px rgba(8, 13, 12, 0.22);
}

@keyframes hero-cinematic-loop {
  0%, 100% {
    transform: scale(1.045) translate3d(-0.35%, 0, 0);
  }
  50% {
    transform: scale(1.095) translate3d(0.65%, -0.55%, 0);
  }
}

@media (max-width: 660px) {
  .hero {
    min-height: min(760px, 90svh);
    padding-top: 2.4rem;
    padding-bottom: 2.7rem;
  }

  .hero-bg img {
    object-position: 50% center;
    transform-origin: 51% 48%;
  }

  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(10, 16, 14, 0.26) 0%, rgba(10, 16, 14, 0.52) 44%, rgba(10, 16, 14, 0.94) 100%),
      linear-gradient(90deg, rgba(10, 16, 14, 0.24) 0%, rgba(10, 16, 14, 0.08) 100%);
  }

  .hero-copy {
    max-width: 29rem;
  }

  .hero h1 {
    max-width: 7.1ch;
    font-size: clamp(3.35rem, 17vw, 5.5rem);
  }

  .hero-lede {
    max-width: 26rem;
  }

  .hero-notes {
    margin-top: 2.5rem;
  }

  .hero-stamp {
    top: 1.25rem;
    right: 1.15rem;
    width: 5.7rem;
    height: 5.7rem;
    font-size: 1.12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg img {
    animation: none;
    transform: none;
  }
}