/* The coming-soon page: the torii at dusk, the name, one line. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #070812; color: #f2f3fa;
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

.soon {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100dvh;
  /* The words sit in the sky, well above the gate's beam. */
  display: grid; justify-items: center; align-content: start; text-align: center;
  padding: clamp(96px, 22vh, 240px) 24px 72px;
}
.soon__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.soon::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 8, 18, 0.7) 0%, rgba(7, 8, 18, 0.35) 45%, rgba(7, 8, 18, 0.55) 100%); }

.soon__brand {
  position: absolute; top: max(32px, env(safe-area-inset-top)); left: max(36px, env(safe-area-inset-left)); margin: 0;
  display: flex; align-items: center; gap: 12px;
  font: 650 18px/1 var(--font);
}
.soon__mark { display: block; width: 36px; height: auto; -webkit-tap-highlight-color: transparent; user-select: none; }

.soon__inner { display: grid; justify-items: center; gap: 16px; max-width: 920px; animation: soon-rise 0.8s var(--ease-out) both; }
.soon__eyebrow { margin: 0; font: 600 13px/1 var(--font); letter-spacing: 0.3em; text-transform: uppercase; color: #ffb3d4; }
.soon__title { margin: 0; font: var(--type-display); font-size: clamp(40px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.soon__lede { margin: 0; max-width: 46ch; color: rgba(242, 243, 250, 0.8); text-wrap: pretty; }

/* Where a phone's keyboard types when the mark is tapped: present, unseen. */
.soon__keys { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; font-size: 16px; pointer-events: none; }

@keyframes soon-rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .soon__inner { animation: none; } }
@media (max-width: 560px) {
  .soon__brand { left: 20px; top: max(24px, env(safe-area-inset-top)); }
}