html, body {
  margin: 0;
  height: 100%;
  background: #e7e3db;
  overflow: hidden;
}

#gl {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #ddd8d0;
}

.mark {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

#logogram {
  display: block;
  width: min(58vmin, 560px);
  height: min(58vmin, 560px);
  opacity: 0;
  transform: scale(0.96);
  mix-blend-mode: multiply;
  filter: blur(0.9px);
  transition: opacity 0.42s ease, transform 3.14s ease;
}

#logogram.is-in {
  opacity: 0.95;
  transform: scale(1);
}

.glass-reflection {
  position: fixed;
  inset: 10% 8%;
  border-radius: 2.8vh;
  overflow: hidden;
  pointer-events: none;
}

.glass-reflection::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(
    180deg,
    transparent 43%,
    rgba(255, 253, 246, 0.015) 47%,
    rgba(255, 253, 246, 0.09) 50%,
    rgba(255, 253, 246, 0.015) 53%,
    transparent 57%
  );
  transform: translateY(var(--reflection-y, -17.4vh)) rotate(11.1deg);
}

@media (prefers-reduced-motion: reduce) {
  #logogram {
    transition: none;
    transform: none;
  }
}