:root {
  --intro-black: #05060a;
  --intro-panel: rgba(10, 12, 18, 0.82);
  --intro-purple: #8d4dff;
  --intro-purple-soft: #be8cff;
  --intro-silver: #e7eaf1;
  --intro-muted: #a9b0c0;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.intro-preview {
  background: var(--intro-black);
  height: 100vh;
  overflow: hidden;
}

.intro-homepage-frame {
  border: 0;
  display: block;
  height: 100vh;
  inset: 0;
  position: fixed;
  width: 100vw;
}

.intro-overlay {
  align-items: stretch;
  background: #000;
  color: #fff;
  display: flex;
  inset: 0;
  isolation: isolate;
  justify-content: stretch;
  opacity: 1;
  overflow: hidden;
  pointer-events: auto;
  position: fixed;
  transition:
    opacity 460ms ease,
    visibility 460ms ease;
  visibility: visible;
  z-index: 20;
}

.intro-overlay.is-complete {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.intro-canvas {
  height: 100%;
  position: absolute;
  width: 100%;
}

.intro-vignette {
  background:
    radial-gradient(circle at 50% 46%, rgba(141, 77, 255, 0.12), transparent 30rem),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.72));
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.intro-title {
  align-self: end;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  margin: 0 0 clamp(1rem, 4vw, 2rem) clamp(1rem, 4vw, 2rem);
  position: relative;
  text-transform: uppercase;
  z-index: 3;
}

.intro-logo {
  filter: drop-shadow(0 0 20px rgba(141, 77, 255, 0.58)) drop-shadow(0 0 55px rgba(141, 77, 255, 0.24));
  left: 50%;
  max-width: min(520px, 72vw);
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  transition:
    opacity 260ms ease,
    transform 460ms ease;
  width: 46vw;
  z-index: 4;
}

.intro-logo.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.intro-logo.is-exiting {
  opacity: 0;
  transform: translate(-50%, -48%) scale(1.08);
}

@media (max-width: 860px) {
  .intro-logo {
    max-width: 80vw;
    width: 78vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-overlay {
    transition: opacity 160ms ease;
  }

  .intro-logo {
    transition: opacity 120ms ease;
  }
}