*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  overflow:hidden;
  background:#ed9fa5;
  color:#fff;
  font-family:Arial, Helvetica, sans-serif;
}

#loader{
  position:fixed;
  inset:0;
  background:#ed9fa5;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  transition:opacity .35s ease, visibility .35s ease;
}

#loader.is-hidden{
  opacity:0;
  visibility:hidden;
}

.loader-line{
  width:200px;
  height:2px;
  background:rgba(255,255,255,.3);
  overflow:hidden;
}

.loader-line__indeterminate{
  width:40%;
  height:100%;
  background:#fff;
  animation:loading 1s linear infinite;
}

@keyframes loading{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(250%)}
}

.hero{
  position:sticky;
  top:0;
  height:100vh;
  display:grid;
  place-items:center;
}

.hero__media{
  position:relative;
  width:min(100vw,1920px);
  height:100vh;
}

video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  background:transparent;
}

.hero__quote{
  position:absolute;
  left:6vw;
  bottom:9vh;
  white-space:nowrap;
  opacity:0;
  transform:translateY(40px);
  transition:all .8s ease;
  z-index:2;
  pointer-events:none;
}

.hero__quote.is-visible{
  opacity:1;
  transform:translateY(0);
}

.hero__claim{
  margin:0 0 .5rem 0;
  font-size:clamp(32px,3.5vw,70px);
  line-height:1;
  font-family:'Caveat', cursive;
}

.hero__signature{
  margin:0;
  font-size:clamp(28px,2vw,42px);
  line-height:1;
  font-family:'Caveat', cursive;
}

.hero__signature .ai{
  font-weight:700;
}

.scroll-space{
  height:520vh;
}

@media (max-width:900px){
  .hero__quote{
    white-space:normal;
    left:6vw;
    right:6vw;
    bottom:8vh;
  }

  .hero__claim{
    font-size:clamp(24px,8vw,44px);
  }

  .hero__signature{
    font-size:clamp(24px,6vw,34px);
  }
}