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

* { box-sizing: border-box; }

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

body { overflow: hidden; }

.homepage {
  position: relative;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  isolation: isolate;
}

.spectacles {
  position: absolute;
  top: max(22px, env(safe-area-inset-top));
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0;
  transform: translateX(-50%);
  color: #c6c8cc;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(.63rem, 1vw, .78rem);
  font-weight: 400;
  letter-spacing: .18em;
  line-height: 1;
  text-align: center;
  text-indent: .18em;
  white-space: nowrap;
  z-index: 1;
}

.spectacles span {
  display: block;
  opacity: .78;
}

.portrait {
  position: relative;
  margin: 0;
  width: min(84vw, 78svh, 880px);
  aspect-ratio: 1;
  user-select: none;
}

.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.portrait-glimmer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.glimmer {
  animation: glimmer 7.5s ease-in-out infinite;
  animation-delay: 1s;
}

.spark {
  opacity: 0;
  animation: spark 7.5s ease-in-out infinite;
  animation-delay: 1s;
}

.portrait-sweep {
  opacity: 0;
  animation: portrait-glimmer 7.5s ease-in-out infinite;
  animation-delay: 1.15s;
}

@keyframes glimmer {
  0%, 68% { transform: translateX(0); opacity: 0; }
  72% { opacity: .7; }
  87% { opacity: .7; }
  92%, 100% { transform: translateX(340px); opacity: 0; }
}

@keyframes spark {
  0%, 84%, 94%, 100% { opacity: 0; }
  88% { opacity: .85; }
}

@keyframes portrait-glimmer {
  0%, 68% { transform: translateX(0); opacity: 0; }
  74% { opacity: .45; }
  86% { opacity: .45; }
  94%, 100% { transform: translateX(300px); opacity: 0; }
}

/* Suspend decorative motion when the page is in the background. */
.is-paused .glimmer,
.is-paused .spark,
.is-paused .portrait-sweep { animation-play-state: paused; }

@media (max-width: 600px) {
  .portrait { width: min(100vw, 72svh); }
  .spectacles { top: max(28px, env(safe-area-inset-top)); font-size: .6rem; letter-spacing: .16em; text-indent: .16em; }
}

@media (max-height: 450px) and (orientation: landscape) {
  .spectacles { top: 8px; font-size: .58rem; }
  .portrait { width: 78svh; }
}

@media (prefers-reduced-motion: reduce) {
  .glimmer, .spark, .portrait-sweep { animation: none; opacity: 0; }
}