/* Teras Core splash. One page, no framework, no webfont.
   A webfont on a holding page is a network round trip to look at four words,
   and a missing one is a flash of the fallback anyway. System stack it is. */

/* Light, committed rather than following the system. A holding page has one
   job and one look, and the mark was drawn for a light ground: the same blues
   on a dark one lose the separation between the two layers that carries the
   whole idea. `color-scheme` is set so the scrollbar and the form chrome the
   browser draws agree with the page instead of arriving dark over it. */
:root {
  color-scheme: light;
  --ground: #f5f7fc;
  --ink: #0d1b3e;
  --muted: #5a6785;
  --accent: #1668f0;
  --hair: rgba(13, 27, 62, 0.12);
  --glow: rgba(30, 155, 245, 0.16);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* One soft light behind the mark, so the page has a centre without an image
     to wait for. Tinted from the logo's own blue rather than a neutral grey,
     which is what stops it reading as a smudge. */
  background-image: radial-gradient(58rem 32rem at 50% 30%, var(--glow), transparent 70%);
  background-repeat: no-repeat;
}

.splash {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem 1.5rem 3rem;
  text-align: center;
}

.logo {
  display: block;
  width: clamp(5rem, 17vw, 8.25rem);
  height: auto;
  margin-bottom: 1.25rem;
  /* width/height are on the element too, so the page does not reflow around
     the mark when it lands. */
}

.mark {
  margin: 0;
  /* Fluid, so it fills a phone and does not shout on a desktop. */
  font-size: clamp(2.25rem, 9vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* Two weights rather than two colours: it survives printing and a
   high-contrast mode, where a colour split falls apart. The space between the
   words is real, because the brand is two words - only the domain elides it. */
.mark span { font-weight: 650; }

.lede {
  margin: 0.5rem 0 0;
  max-width: 26rem;
  font-size: clamp(1rem, 2.6vw, 1.175rem);
  color: var(--muted);
  text-wrap: balance;
}

.foot {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hair);
  min-width: 12rem;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* The page settles in rather than appearing hard, but only where the reader
   has not asked for stillness. */
@media (prefers-reduced-motion: no-preference) {
  .logo, .mark, .lede, .foot {
    animation: rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .mark { animation-delay: 0.08s; }
  .lede { animation-delay: 0.16s; }
  .foot { animation-delay: 0.24s; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: none; }
}