/* Idonym — coming-soon placeholder.
 *
 * Design contract: delegee_shield/docs/design/DESIGN.md. Values come from the
 * vendored tokens.css; nothing here is a bare colour in a rule.
 *
 * Two page-local custom properties are declared below. DESIGN.md says a new
 * colour becomes a semantic token in tokens.css — but tokens.css is a VENDORED
 * copy here and must not be hand-edited (it would drift from the app's), so the
 * page-local layer is the correct home. Both mirror values the app's own
 * auth.css uses for the same effect.
 *
 * Single visual world by choice, not omission: this is the brand navy panel,
 * the same dark chrome the sign-in split panel and nav rail use in BOTH themes.
 * It is not a "dark mode", so it defines no light variant.
 */

:root {
  /* The cool blue in the drifting highlight — matches auth.css's orb. */
  --glow-blue: 73, 110, 192;
  /* Panel-relative ink alpha for the bilingual line. */
  --line-fg: rgba(239, 239, 234, 0.68);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--navy-panel-3);
  color: var(--navy-panel-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.field {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-7);
  padding: var(--sp-9) var(--sp-6);
  text-align: center;
  background:
    radial-gradient(1200px 640px at 50% -10%, rgba(var(--gold-500-rgb), 0.10), transparent 64%),
    linear-gradient(168deg, var(--navy-panel-1) 0%, var(--navy-panel-2) 40%, var(--navy-panel-3) 100%);
}

/* The moving highlight. Softer and slower than the login panel's: with nothing
 * else on the page, motion that reads as ambient behind content reads as
 * restless on its own. */
.field__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -1;
  pointer-events: none;
}

.field__glow--gold {
  width: 640px;
  height: 640px;
  top: -14%;
  left: 8%;
  opacity: 0.46;
  background: radial-gradient(circle, rgba(var(--gold-500-rgb), 0.55), transparent 70%);
  animation: field-drift-gold 34s ease-in-out infinite alternate;
}

.field__glow--blue {
  width: 760px;
  height: 760px;
  bottom: -24%;
  right: 2%;
  opacity: 0.55;
  background: radial-gradient(circle, rgba(var(--glow-blue), 0.55), transparent 70%);
  animation: field-drift-blue 46s ease-in-out infinite alternate;
}

@keyframes field-drift-gold {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(11vw, 7vh, 0) scale(1.16); }
}

@keyframes field-drift-blue {
  0%   { transform: translate3d(0, 0, 0) scale(1.06); }
  100% { transform: translate3d(-9vw, -6vh, 0) scale(1); }
}

.field__logo {
  display: block;
  width: auto;
  height: clamp(34px, 4.8vw, 58px);
}

/* Mono carries meta text throughout the product; both languages sit on one
 * line, which is why the page needs no language switcher. */
.field__line {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(10.5px, 1.1vw, 13px);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--line-fg);
}

.field__sep {
  color: var(--gold-500);
  margin: 0 0.75em;
}

/* Verified at 360x740 — the line must not wrap. */
@media (max-width: 480px) {
  .field { gap: var(--sp-6); }
  .field__line { letter-spacing: 0.14em; }
}

@media (prefers-reduced-motion: reduce) {
  .field__glow { animation: none; }
}