.home-logo-intro {
  isolation: isolate;
}

.home-logo-intro-header {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-1rem);
  transition: opacity 420ms ease, transform 420ms ease, visibility 0s linear 420ms;
  visibility: hidden;
}

.home-logo-intro-header.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
  visibility: visible;
}

.home-logo-intro__layer {
  background: #fff;
  height: 100vh;
  height: 100svh;
  inset: 0 0 auto;
  opacity: 1;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  visibility: visible;
  z-index: 20;
}

.home-logo-intro__canvas {
  display: block;
  height: 100%;
  width: 100%;
}

.home-logo-intro [data-logo-intro-content] {
  margin-top: 100vh;
  margin-top: 100svh;
}

.home-logo-intro.logo-intro-fallback [data-logo-intro-content] {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .home-logo-intro-header {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }

  .home-logo-intro__layer {
    display: none;
  }

  .home-logo-intro [data-logo-intro-content] {
    margin-top: 0;
  }
}