@font-face{
  font-family:"Redaction 35 Static";
  src:url("https://cdn.jsdelivr.net/fontsource/fonts/redaction-35@latest/latin-400-normal.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

.hero-parallax img{
  object-position:center center;
}

.hero .hero-parallax{
  transform:translate3d(0,var(--image-shift),0) scale(1.4);
}

.hero h1 .typewriter{
  display:inline-block;
  min-height:1.25em;
  min-width:12ch;
  font-size:clamp(50px,7.1vw,102px);
  font-family:"Redaction 35 Static","Redaction 35",Georgia,serif;
  font-weight:400;
}

@media(min-width:701px){
  .hero h1 .typewriter{
    font-size:calc(clamp(50px,7.1vw,102px) - 13.333px);
  }
}

.hero .hero-lead{
  font-size:11.66px;
}

.shooting-stars{
  position:absolute;
  inset:0;
  z-index:7;
  overflow:hidden;
  pointer-events:none;
}

.shooting-stars i{
  position:absolute;
  top:18%;
  left:78%;
  width:150px;
  height:1px;
  border-radius:999px;
  opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(205,250,255,.75) 62%,#fff);
  filter:drop-shadow(0 0 5px rgba(91,226,238,.95));
  transform:rotate(-32deg) translate3d(0,0,0);
  animation:shooting-star 8.5s ease-in infinite;
}

.shooting-stars i::after{
  content:"";
  position:absolute;
  right:-2px;
  top:-2px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 12px #bffaff;
}

.shooting-stars i:nth-child(2){
  top:35%;
  left:92%;
  width:110px;
  animation-delay:3.2s;
  animation-duration:10.5s;
}

.shooting-stars i:nth-child(3){
  top:9%;
  left:58%;
  width:92px;
  animation-delay:6.1s;
  animation-duration:12s;
}

@keyframes shooting-star{
  0%,70%{opacity:0;transform:rotate(-32deg) translate3d(0,0,0)}
  72%{opacity:.95}
  80%{opacity:0;transform:rotate(-32deg) translate3d(-72vw,0,0)}
  100%{opacity:0;transform:rotate(-32deg) translate3d(-72vw,0,0)}
}

.hero h1 .typewriter.typing-active::after{
  content:"";
  display:inline-block;
  width:.045em;
  height:.82em;
  margin-left:.06em;
  vertical-align:-.02em;
  background:#d9fbff;
  box-shadow:0 0 12px rgba(89,231,240,.8);
  animation:typewriter-cursor .72s steps(1,end) infinite;
}

@keyframes typewriter-cursor{
  0%,45%{opacity:1}
  46%,100%{opacity:0}
}

@media(max-width:700px){
  .hero .hero-parallax{
    transform:translate3d(0,var(--mobile-image-shift),0) scale(1.35);
  }

  .hero h1 .typewriter{
    min-width:0;
    max-width:100%;
    white-space:nowrap;
    font-size:clamp(24px,8.7vw,40px);
  }

  .hero .hero-lead{
    font-size:8.66px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero .hero-parallax{transform:scale(1.06)!important}
  .hero h1 .typewriter.typing-active::after{display:none}
  .shooting-stars{display:none}
}


/* Keep the wide typewriter title centered against the viewport */
.hero h1{
  width:100vw;
  margin-left:calc((100vw - 100%)/-2);
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:visible;
}
.hero h1 .typewriter{
  min-width:0;
  width:max-content;
  max-width:94vw;
  white-space:nowrap;
  text-align:center;
  font-size:clamp(40px,5.7vw,82px);
  letter-spacing:-.045em;
}
@media(max-width:700px){
  .hero h1 .typewriter{
    max-width:92vw;
    font-size:clamp(24px,8.4vw,38px);
    letter-spacing:-.04em;
  }
}