/* ==========================================================================
   Hero — full-viewport video loop with the headline and two CTA pills.
   Motion (js/hero.js): the header slides in, then the headline characters and
   the pills fade in. While scrolling past, --hero-fade (0..1) fades the copy out.
   ========================================================================== */
.home-hero {
  --hero-fade: 0;
  background: #000;
  color: #fff;
  height: 100vh;
  height: 100lvh;
  height: var(--hero-stable-vh, var(--home-vh, 100lvh));
  overflow: hidden;
  overflow-anchor: none;
  position: relative;
  width: 100%;
}

.home-hero__pin {
  background: #000;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

/* Video frame (bleeds 2px so no edge shows during transforms) */
.home-hero__frame {
  background: #000;
  cursor: default;
  inset: 0 -2px;
  overflow: hidden;
  position: absolute;
}

.home-hero__media {
  background-color: #000;
  inset: 0;
  overflow: hidden;
  position: absolute;
}

.home-hero__video {
  background: transparent;
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
  z-index: 1;
}

/* fine dot grid + top/bottom shading over the video */
.home-hero__grid,
.home-hero__scrim {
  inset: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity .8s var(--home-ease);
  z-index: 2;
}

.home-hero__grid {
  background-image: radial-gradient(hsla(0, 0%, 100%, .16) .6px, transparent .7px);
  background-size: 5px 5px;
  mix-blend-mode: overlay;
  opacity: .28;
}

.home-hero__scrim {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .16), transparent 28%),
    linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, .22));
}

@media (max-width: 767px) {
  .home-hero__pin {
    height: calc(100% + 4px);
    margin-top: -2px;
  }

  .home-hero__frame {
    inset: -3px -1px -1px;
  }

  .home-hero__media {
    inset: -3px;
  }
}

/* --------------------------------------------------------------------------
   Copy (headline, description, pills) — centred over the video
   -------------------------------------------------------------------------- */
.home-hero__copy {
  align-items: center;
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  inset: 0;
  justify-content: center;
  padding: 0 1.5rem;
  pointer-events: none;
  position: absolute;
  text-align: center;
  transform: translateZ(0);
  transition: opacity .48s cubic-bezier(.22, 1, .36, 1), transform .48s cubic-bezier(.22, 1, .36, 1);
  z-index: 6;
}

.home-hero__lede {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* fade the copy out while scrolling past the hero */
.home-hero--entered .home-hero__lede,
.home-hero--entered .home-hero__cta {
  opacity: calc(1 - var(--hero-fade));
  transform: none;
}

/* Headline */
.home-hero__title {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.02;
  overflow: visible;
  text-align: center;
}

.home-hero__title:not([data-heading-settled]) .home-heading-char {
  opacity: 0;
}

.home-hero--entered .home-heading-char {
  filter: none;
  opacity: 1;
}

.home-hero__line {
  display: block;
  justify-content: center;
  overflow: visible;
  text-align: center;
  width: 100%;
}

.home-hero__line--one {
  line-height: 1;
}

.home-hero__line--mastery {
  align-items: baseline;
  display: flex;
  gap: .06em;
  margin-top: -.06em;
}

.home-hero__line--mastery > .home-hero__type {
  margin-left: -.04em;
}

.home-hero__type {
  display: inline-block;
  filter: drop-shadow(0 0 1.15px #fff) drop-shadow(0 0 1px #ffefe14d);
}

.home-hero__mastery {
  align-items: baseline;
  display: inline-flex;
  font-size: inherit;
  line-height: inherit;
  overflow: visible;
}

.home-hero__line--mastery .home-h1-accent {
  font-size: .96em;
  letter-spacing: -.045em;
  line-height: inherit;
}

/* Description — fades in once the headline has settled */
.home-hero__desc {
  color: rgba(255, 255, 255, .88);
  font-family: var(--font-display);
  font-size: clamp(16px, 1.25vw, 20px);
  letter-spacing: -.005em;
  line-height: 1.5;
  margin: 1.4rem auto 0;
  max-width: 46rem;
  opacity: 0;
  text-align: center;
  text-wrap: balance;
  transition: opacity .9s ease .15s;
}

.home-hero__title[data-heading-settled] ~ .home-hero__desc {
  opacity: 1;
}

/* CTA pills */
.home-hero__cta {
  align-items: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: fit-content;
  opacity: 0;                         /* set to 1 by the intro (.home-hero--entered) */
  text-align: center;
  width: 100%;
}

.home-hero__actions {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: fit-content;
}

.home-hero__pills {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  isolation: isolate;
  justify-content: center;
  max-width: 100%;
  position: relative;
}

.home-hero:not(.home-hero--entered) .home-hero__pills {
  opacity: 0;
}

.home-hero__pill-glow-wrap {
  border-radius: 9999px;
  display: inline-flex;
  isolation: isolate;
  position: relative;
}

.home-hero__pill {
  align-items: center;
  border: none;
  border-radius: 28px;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  gap: 8px;
  height: 45px;
  justify-content: center;
  letter-spacing: -.01em;
  line-height: 1.5;
  max-width: 100%;
  min-width: 13.5rem;
  overflow: hidden;
  padding: 0 22px;
  pointer-events: auto;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
  width: 13.5rem;
  z-index: 1;
}

.home-hero__pill--solid {
  background: #ffffffe0;
  color: #000000b8;
  transition: background .3s ease, transform .45s var(--home-ease-out);
}

.home-hero__pill--solid:hover {
  background: #fff;
}

.home-hero__pill--glass {
  background: #ffffff1a;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  color: #fff;
  transition: background .3s ease;
}

/* rotating warm glow ring around the glass pill */
.home-hero__pill-glow {
  border-radius: inherit;
  inset: -1px;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  overflow: hidden;
  padding: 2px;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.home-hero__pill-glow-spin {
  animation: home-pill-glow-spin 12s linear infinite;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 200deg, rgba(255, 193, 126, 0) 230deg, rgba(255, 193, 126, .55) 275deg, #fff 308deg, rgba(255, 193, 126, .55) 338deg, transparent 1turn);
  filter: blur(8px);
  left: 50%;
  position: absolute;
  top: 50%;
  width: 240%;
  will-change: transform;
}

@keyframes home-pill-glow-spin {
  0% { transform: translate(-50%, -50%) rotate(0); }
  to { transform: translate(-50%, -50%) rotate(1turn); }
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .home-hero__title {
    font-size: 68px;
    line-height: 1.02;
  }

  .home-hero__line--mastery {
    margin-top: -.08em;
  }
}

@media (max-width: 767px) {
  .home-hero__copy {
    --hero-content-gap: 1.35rem;
    transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
  }

  .home-hero__lede {
    gap: 0;
  }

  .home-hero__title {
    font-size: clamp(38px, calc(13.60544vw - .40816rem), 52px);
    gap: .16em;
    letter-spacing: -.02em;
    line-height: 1;
    white-space: nowrap;
  }

  .home-hero__line--mastery {
    margin-top: 0;
  }

  .home-hero__cta {
    gap: var(--hero-content-gap);
    max-width: none;
  }

  .home-hero__actions {
    justify-content: center;
    max-width: 100%;
    width: auto;
  }
}

@media (max-width: 420px) {
  .home-hero__pill,
  .home-hero__pill-glow-wrap {
    min-width: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__copy,
  .home-hero__lede,
  .home-hero__cta {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .home-hero__pill-glow-spin {
    animation: none;
  }
}