html[data-intro="on"]{
  overflow:hidden;
  scrollbar-gutter:auto;
}

.intro{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  place-items:center;
  background-color:var(--teal, #1cb09f);
  background-image:linear-gradient(
    160deg,
    #060424 0%,
    #1035a3 33.333%,
    #1be8d7 66.666%,
    #00fce7 100%
  );
  background-size:100% 300%;
  background-position:50% 0%;
}

html[data-intro="on"] .intro{
  display:grid;
  animation:
    intro-sweep 1150ms cubic-bezier(.4,.05,.3,1) 1720ms forwards,
    intro-out 560ms ease-in 4850ms forwards;
}

.intro-logo{
  display:block;
  width:clamp(170px, 26vh, 300px);
  height:auto;
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.35));
  will-change: transform, opacity;
  transform: translateZ(0);
  animation: 
    intro-logo-in 350ms cubic-bezier(0, 0, 0.2, 1) 0ms both,
    logo-float 3s ease-in-out 350ms infinite alternate;
}

.intro-video{
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:24px;
  background-color:#000;
  filter:none;
  box-shadow:0 18px 44px rgba(0,0,0,.35);
}




@keyframes logo-float{
  from{
    transform: translate3d(0, 0, 0) scale(1);
  }
  to{
    transform: translate3d(0, -7px, 0) scale(1.015);
  }
}

@keyframes intro-sweep{
  from{ background-position:50% 0%; }
  to{ background-position:50% 100%; }
}

@keyframes intro-out{
  from{ opacity:1; }
  to{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  html[data-intro="on"] .intro{
    display:none;
    animation:none;
  }
  .intro-logo{
    animation:none;
  }
}