/* MIA website – "stay tuned" holding page on top of tokens.css (MIA CI, dark). */

@font-face { font-family: "Space Grotesk"; font-weight: 400; font-display: swap; src: url("../fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

html, body { height: 100%; }
body {
  display: grid; grid-template-rows: 1fr auto; min-height: 100vh; min-height: 100dvh;
  background:
    radial-gradient(60vmax 40vmax at 50% 42%, rgba(14, 124, 123, .16), transparent 70%),
    var(--color-bg);
}

/* animated node network (js/network.js) + vignette that keeps the centre readable */
#net { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(38vmax 26vmax at 50% 45%, rgba(10, 10, 11, .85), rgba(10, 10, 11, .35) 60%, transparent 100%); }
.hold, .foot { position: relative; z-index: 2; }

/* same mask technique as the Neuro Log boot screen: logo takes the text colour */
.logo { display: inline-block; height: 22px; aspect-ratio: 733 / 269; background: currentColor;
  -webkit-mask: url("../img/mia_logo.svg") center / contain no-repeat;
          mask: url("../img/mia_logo.svg") center / contain no-repeat; }

.hold { display: grid; place-content: center; justify-items: center; text-align: center;
  padding: var(--space-8) var(--container-pad); gap: var(--space-2); }
.hold .logo { height: clamp(56px, 12vw, 96px); margin-bottom: var(--space-6); color: var(--color-text);
  animation: pulse 1.4s var(--ease-out) infinite alternate; }
@keyframes pulse { from { opacity: .35; } to { opacity: 1; } }

.hold h1 { font-weight: var(--fw-medium); font-size: clamp(var(--fs-38), 7vw, var(--fs-60)); margin: 0;
  color: var(--mia-teal-hi);
  background: linear-gradient(100deg, var(--mia-teal-hi) 0%, var(--mia-teal-hi) 35%, var(--mia-amber-hi) 50%, var(--mia-teal-hi) 65%, var(--mia-teal-hi) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.hold .lead { color: var(--color-text-muted); font-size: var(--fs-18); margin: 0; }

.foot { padding: var(--space-5) var(--container-pad); text-align: center;
  font-size: var(--fs-12); letter-spacing: var(--tracking-wide); color: var(--mia-slate); }