.site-intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #fff;
  color: #000;
  isolation: isolate;
}

html[data-intro-active] .site-intro {
  display: block;
  /* Clear the cover even if the animation controller stops executing. */
  animation: intro-fail-open 1ms step-end 3500ms forwards;
}

.intro-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.intro-cube {
  position: relative;
  width: 64px;
  height: 64px;
  perspective: 480px;
  perspective-origin: center;
  transform-style: preserve-3d;
  font: 800 80px/1 var(--display);
}

.intro-letter {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

.intro-letter > span {
  display: block;
  transform: translateY(-2%) scaleX(1.12);
}

.intro-skip {
  position: absolute;
  right: max(1.5rem, env(safe-area-inset-right));
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: 400 0.75rem/1.5 var(--mono);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.site-intro .intro-skip:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
}

@keyframes intro-fail-open {
  from, to { visibility: hidden; pointer-events: none; }
}

@media (max-width: 599px) {
  .intro-cube { width: 56px; height: 56px; font-size: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-intro-active] .site-intro { display: none; }
}

@media print {
  html[data-intro-active] .site-intro { display: none; }
}