/* Home — hero only
   Figma: D6f8lbypFFemvmIplJBfAH / node 265:2127 */

body.home {
  background: var(--color-teal);
  color: var(--ink-inverse);
}

.home-hero {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  background: var(--color-teal);
}

.home-hero__media {
  position: absolute;
  inset: -2% -2% -8%;
  z-index: 0;
}

.home-hero__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

/* 40px Medium, 37px leading. Fixed size. */
.home-hero__copy {
  position: absolute;
  z-index: 10;
  left: var(--pad-x);
  bottom: clamp(2.5rem, 10.6vh, 6.65rem);
  max-width: 510px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-heading);
  line-height: 37px;
  color: var(--ink-inverse);
  text-wrap: pretty;
  animation: home-fade-up 1400ms cubic-bezier(0.22, 1, 0.36, 1) 760ms both;
}

@keyframes home-fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .home-hero__copy {
    max-width: min(23.2rem, calc(100% - (var(--pad-x) * 2)));
    bottom: 1.75rem;
    font-size: 30px;
  }

  .home-hero__media {
    inset: 0;
  }

  .home-hero__media img {
    object-position: 55% center;
  }
}

/* Home only. Logo starts at 80ms; the hero line follows at 760ms. */
body.home .site-header__logo {
  animation: home-logo-fade 1400ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}

@keyframes home-logo-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__copy,
  body.home .site-header__logo {
    animation: none;
    opacity: 1;
    transform: none;
  }
}