/* Editable styles from the published Hactually site. */
.continuous-scroll {
  --mask-width: 900vmax;
  --color-progress: 0;
  --invite-progress: 0;
  height: 370svh;
  background: #141318;
}

.continuous-scroll .video-stage {
  background: #141318;
}

.continuous-mask {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  -webkit-mask: url('../assets/logo/hactually-mark.svg') center / var(--mask-width) auto no-repeat;
  mask: url('../assets/logo/hactually-mark.svg') center / var(--mask-width) auto no-repeat;
}

.continuous-mask .hero-video {
  z-index: 0;
  opacity: 1;
}

.continuous-mask .hero-wash {
  z-index: 1;
  opacity: 1;
}

.continuous-color {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: var(--color-progress);
  background: url('../assets/logo/hactually-mark-glossy.svg') center / var(--mask-width) auto no-repeat;
  pointer-events: none;
}

.continuous-scroll .tunnel-content {
  z-index: 3;
  visibility: visible;
  opacity: var(--invite-progress);
  transform: none;
  pointer-events: none;
  -webkit-mask: url('../assets/logo/hactually-mark.svg') center / var(--mask-width) auto no-repeat;
  mask: url('../assets/logo/hactually-mark.svg') center / var(--mask-width) auto no-repeat;
  will-change: opacity,-webkit-mask-size,mask-size;
}

.continuous-scroll.is-ready .tunnel-content {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion:reduce) {
  .continuous-scroll {
    height: auto;
  }

  .continuous-scroll .video-stage {
    position: relative;
    height: auto;
    min-height: 200svh;
  }

  .continuous-mask {
    height: 100svh;
    -webkit-mask: none;
    mask: none;
  }

  .continuous-color {
    display: none;
  }

  .continuous-scroll .hero-copy {
    height: 100svh;
  }

  .continuous-scroll .hero-line {
    opacity: 1;
    transform: none;
  }

  .continuous-scroll .tunnel-content {
    position: relative;
    visibility: visible;
    min-height: 100svh;
    -webkit-mask: none;
    mask: none;
  }

}

.continuous-scroll:not(.motion-ready) {
  height: auto;
}

.continuous-scroll:not(.motion-ready) .video-stage {
  position: relative;
  height: auto;
  min-height: 200svh;
}

.continuous-scroll:not(.motion-ready) .continuous-mask {
  height: 100svh;
  -webkit-mask: none;
  mask: none;
}

.continuous-scroll:not(.motion-ready) .hero-copy {
  height: 100svh;
}

.continuous-scroll:not(.motion-ready) .tunnel-content {
  position: relative;
  min-height: 100svh;
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  -webkit-mask: none;
  mask: none;
}

@font-face  {
  font-family: Ezra;
  src: url('../assets/fonts/Ezra-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

.hero h1 {
  font-family: Ezra,Arial,sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: none;
}

.tunnel-content>h2 {
  font-family: Ezra,Arial,sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  text-transform: none;
}

.hero h1 {
  font-size: clamp(64px,10vw,150px);
}

.waitlist-form button {
  letter-spacing: 0;
  text-transform: none;
}

.success-card span {
  letter-spacing: 0;
  text-transform: none;
}

.waitlist-form label span {
  letter-spacing: 0;
}

@media (max-width:650px) {
  .hero h1 {
    font-size: clamp(58px,17vw,86px);
    line-height: 1.02;
  }

  .tunnel-content>h2 {
    font-size: clamp(42px,12.5vw,64px);
    line-height: 1.04;
  }

}