:root {
  color-scheme: dark;
  background: #000;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

.splash {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background: rgba(0, 0, 0, .86);
}

.splash-background {
  position: absolute;
  inset: -2rem;
  z-index: -2;
  background-image: url("assets/black-build-side.png");
  background-position: center;
  background-size: cover;
  filter: grayscale(1) brightness(.2) blur(1.5px);
  transform: scale(1.025);
}

.splash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at center, rgba(0, 0, 0, .2), rgba(0, 0, 0, .7) 74%),
    rgba(0, 0, 0, .38);
}

.splash::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E");
}

.intro-badge {
  position: relative;
  width: min(68vw, 420px);
  aspect-ratio: 1;
  filter: drop-shadow(0 20px 46px rgba(0, 0, 0, .66));
}

.intro-badge-svg,
.intro-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.intro-badge-svg {
  overflow: visible;
}

.intro-badge-ring {
  fill: none;
  stroke: #fff;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}

.intro-layer {
  object-fit: contain;
  pointer-events: none;
}

.intro-word,
.intro-side {
  opacity: 0;
  transform-origin: center;
}

.intro-mark {
  opacity: 0;
  transform: scale(.84);
  transform-origin: center;
}

body.is-ready .intro-mark {
  animation: intro-mark-in .92s cubic-bezier(.65, 0, .35, 1) .08s both;
}

body.is-ready .intro-word-top {
  animation: intro-word-up .82s cubic-bezier(.65, 0, .35, 1) .78s both;
}

body.is-ready .intro-word-bottom {
  animation: intro-word-down .82s cubic-bezier(.65, 0, .35, 1) .78s both;
}

body.is-ready .intro-badge-ring {
  animation: intro-ring-draw 1.22s cubic-bezier(.65, 0, .35, 1) 1.32s both;
}

body.is-ready .intro-side {
  animation: intro-side-in .62s ease-in-out 1.96s both;
}

@keyframes intro-mark-in {
  0% { opacity: 0; transform: scale(.84); }
  62% { opacity: 1; transform: scale(1.025); }
  82% { transform: scale(.992); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes intro-ring-draw {
  0% { stroke-dashoffset: 100; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes intro-word-up {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes intro-word-down {
  from { opacity: 0; transform: translateY(-26px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes intro-side-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
  .intro-badge {
    width: min(88vw, 380px);
  }

  .splash-background {
    background-position: 35% center;
  }
}