:root {
  color-scheme: dark;
  --ink: #f0eee8;
  --muted: #aaa89f;
  --ground: #07080b;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.holding {
  isolation: isolate;
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: 48px 24px;
  background:
    radial-gradient(ellipse at 50% 45%, #111116 0%, transparent 48%),
    #07080b;
}
.holding::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  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='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
  content: '';
  opacity: .11;
  pointer-events: none;
}
.holding::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(ellipse at 50% 46%, rgba(7, 8, 11, .58) 0%, rgba(7, 8, 11, .2) 35%, transparent 70%);
  content: '';
  pointer-events: none;
}
.aurora {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .98;
  pointer-events: none;
}
.lockup {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(100%, 620px);
  flex-direction: column;
  align-items: center;
  transform: translateY(-1.5vh);
}
.logo {
  display: block;
  width: clamp(218px, 31vw, 326px);
  height: auto;
  margin-bottom: clamp(52px, 8vh, 78px);
  animation: arrive .95s cubic-bezier(.2,.7,.2,1) both;
}
.message { text-align: center; }
h1 {
  margin: 0;
  color: var(--ink);
  font: 500 clamp(27px, 4.4vw, 43px)/1.15 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .115em;
  text-transform: uppercase;
  animation: arrive .95s .16s cubic-bezier(.2,.7,.2,1) both;
}
.message p {
  margin: 17px 0 0;
  color: var(--muted);
  font-size: clamp(9px, 1.25vw, 11px);
  font-weight: 400;
  letter-spacing: .48em;
  line-height: 1.6;
  text-transform: uppercase;
  animation: arrive .95s .31s cubic-bezier(.2,.7,.2,1) both;
}
.orbit {
  z-index: 2;
  position: absolute;
  width: 9px;
  aspect-ratio: 1;
  border: 1px solid rgba(225, 203, 163, .35);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(220, 187, 130, .22);
  animation: glint 4s ease-in-out infinite;
}
.orbit-a { top: 27%; right: 23%; }
.orbit-b { bottom: 25%; left: 19%; width: 5px; animation-delay: -2.3s; }
@keyframes arrive {
  from { opacity: 0; transform: translateY(11px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes glint { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }
@media (max-width: 520px) {
  .holding { padding: 32px 20px; }
  .lockup { transform: translateY(-1vh); }
  .logo { width: clamp(206px, 68vw, 275px); margin-bottom: 58px; }
  h1 { letter-spacing: .09em; }
  .message p { margin-top: 15px; letter-spacing: .4em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}