:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; background: #121212; color: #F2EFE8; }
.landing {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow: clip;
  padding: 72px 32px 52px;
  background: #121212;
}
.motion { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.arc {
  position: absolute;
  display: block;
  border: clamp(1px, .13vw, 2px) solid #B7410E;
  border-radius: 50%;
  opacity: .62;
  will-change: transform;
}
.arc-one { width: 92vw; height: 92vw; min-width: 780px; min-height: 780px; top: -66vw; left: -50vw; animation: drift-one 28s ease-in-out infinite alternate; }
.arc-two { width: 78vw; height: 78vw; min-width: 660px; min-height: 660px; right: -49vw; bottom: -58vw; animation: drift-two 36s ease-in-out infinite alternate; }
.arc-three { width: 48vw; height: 48vw; min-width: 420px; min-height: 420px; top: 12%; right: -39vw; border-color: #B7410E; opacity: .36; animation: drift-three 31s ease-in-out infinite alternate; }
.identity { display: grid; justify-items: center; gap: clamp(22px, 3.1vw, 42px); max-width: min(86vw, 1040px); }
.wordmark { display: block; width: min(76vw, 900px); height: auto; }
.slogan, .place { margin: 0; font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; font-size: clamp(11px, 1.1vw, 15px); font-weight: 400; letter-spacing: .22em; line-height: 1.2; }
.place { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: #B9B7B0; font-size: 10px; letter-spacing: .18em; white-space: nowrap; }
@keyframes drift-one { from { transform: translate3d(0, 0, 0) rotate(-12deg); } to { transform: translate3d(9vw, 7vw, 0) rotate(6deg); } }
@keyframes drift-two { from { transform: translate3d(0, 0, 0) rotate(8deg); } to { transform: translate3d(-11vw, -8vw, 0) rotate(-7deg); } }
@keyframes drift-three { from { transform: translate3d(0, 0, 0) rotate(12deg); } to { transform: translate3d(-7vw, 5vw, 0) rotate(-10deg); } }
@media (max-width: 560px) {
  .landing { padding: 48px 22px; }
  .wordmark { width: min(88vw, 560px); }
  .arc-one { top: -96vw; left: -86vw; }
  .arc-two { right: -92vw; bottom: -84vw; }
  .arc-three { top: 8%; right: -72vw; }
  .place { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .arc { animation: none; }
  .arc-one { transform: rotate(-5deg); }
  .arc-two { transform: rotate(5deg); }
  .arc-three { transform: rotate(8deg); }
}