:root {
  --background: #faf9f6;
  --logo-width: min(42vw, 430px);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--background);
}

.splash {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100svh;
  padding: 2rem;
}

.logo-stage {
  position: relative;
  width: var(--logo-width);
  aspect-ratio: 1 / 1;
}

/* Normal fallback: the logo is visible when JavaScript is disabled. */
.final-logo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  filter: none;
  transform: none;
  transition:
    opacity 500ms ease,
    filter 500ms ease,
    transform 500ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

/* While JavaScript prepares the animation, keep the finished logo hidden. */
.js:not(.fallback) .final-logo {
  opacity: 0;
  filter: blur(4px);
  transform: scale(0.99);
}

/* JavaScript adds this after the particles assemble. */
.js .final-logo.revealed {
  opacity: 1;
  filter: none;
  transform: scale(1);
}

.pixel-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.pixel {
  position: absolute;
  opacity: 1;
  border-radius: 1px;
  transform: translate(var(--scatter-x), var(--scatter-y))
             scale(var(--scatter-scale));
  transition:
    transform var(--duration) cubic-bezier(.16, .84, .22, 1),
    opacity 450ms ease;
  will-change: transform, opacity;
}

.pixel.assemble {
  transform: translate(0, 0) scale(1);
}

.pixel.fade {
  opacity: 0;
}

@media (max-width: 700px) {
  :root {
    --logo-width: min(72vw, 330px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-layer {
    display: none;
  }

  .final-logo,
  .js:not(.fallback) .final-logo {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}