@font-face {
  font-family: "Stage Grotesk";
  src: url("fonts/StageGrotesk-Light.otf") format("opentype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Stage Grotesk";
  src: url("fonts/StageGrotesk-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Stage Grotesk";
  src: url("fonts/StageGrotesk-Medium.otf") format("opentype");
  font-weight: 500;
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #000; }
body { color: #fff; font-family: "Stage Grotesk", Arial, sans-serif; }
.waiting { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.artboard, .content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 177.777778vh);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  container-type: inline-size;
}
.artboard > div { position: absolute; background-repeat: no-repeat; background-size: 100% 100%; }
.background { inset: 0; background-image: url("images/background.png"); }
.texture {
  left: -20.520833%; top: 21.62037%; width: 129.0625%; height: 129.722222%;
  background-image: url("images/texture.png"); mix-blend-mode: darken;
}
.outline { mix-blend-mode: overlay; transform: rotate(-90deg); transform-origin: center; }
.outline--top {
  left: -35%; top: -64.583333%; width: 36.302083%; height: 105.648148%;
  background-image: url("images/outline-top.svg");
}
.outline--bottom {
  left: -22.734375%; top: -45.231481%; width: 32.239583%; height: 125.462963%;
  background-image: url("images/outline-bottom.svg");
}
.glow { mix-blend-mode: color-dodge; }
.glow--left {
  left: 31.276042%; top: -10.009259%; width: 20.520156%; height: 35.662407%;
  background-image: url("images/glow-left.svg");
}
.glow--right {
  left: 52.213542%; top: -9.916667%; width: 20.468073%; height: 35.569815%;
  background-image: url("images/glow-right.svg");
}
.announcement {
  position: absolute; left: 29.322917%; top: 42.546296%; margin: 0;
  font-size: 1.09375cqw; line-height: .952381; font-weight: 400;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
h1 {
  position: absolute; left: 55.260417%; top: 41.342593%; width: 18.28125%; margin: 0;
  font-size: 2.760417cqw; line-height: .849057; font-weight: 300; text-align: right;
}
h1 strong { font-weight: 500; white-space: nowrap; }
.symbol {
  position: absolute; left: 76.354167%; top: 41.9%; width: 3.333333%; aspect-ratio: 64 / 36.1927;
  background: url("images/symbol.svg") center / contain no-repeat;
}

@media (max-width: 640px) {
  .artboard { left: 30%; }
  .content {
    inset: 0; transform: none; width: 100%; height: 100%; aspect-ratio: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 34px; padding: 40px 24px;
  }
  .announcement, h1, .symbol { position: static; }
  .symbol { order: -1; width: 64px; flex-shrink: 0; }
  .announcement { font-size: 13px; line-height: 1.4; }
  h1 { width: 100%; font-size: clamp(36px, 9vw, 53px); line-height: .95; text-align: center; }
}