/* The logo face. Ade Display has capitals, figures and basic punctuation
   only (56 glyphs), so it sets the wordmark and the small lines, nothing else.
   The big word itself is drawn from its outline (wordmark.js); the font file
   is for the small lines and the no-JS fallback. */
@font-face {
  font-family: "Ade Display";
  src: url("fonts/ade-display.woff2") format("woff2");
  font-display: block;
}

/* Ade has no @: that one glyph is cut from Bailleul (OFL). */
@font-face {
  font-family: "Ade Display";
  src: url("fonts/bailleul-at.woff2") format("woff2");
  font-display: block;
  unicode-range: U+40;
}

:root {
  --paper: #f1efea;
  --face: "Ade Display", Georgia, serif;
  --tag-size: 15px;      /* app.js: 1.05vw, 13-16 px */
  --tag-top: 60%;        /* app.js: under the drawn word */
  --mail-top: 90%;       /* app.js: at the foot of the screen */
  --mail-delay: 0s;      /* app.js: after the three dots */
}

html,
body {
  margin: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.soon {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4em;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.soon__field,
.soon__word {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* The particles take over from the solid word in one frame (app.js), so no
   transition here: the switch has to be invisible. */
.soon__field {
  visibility: hidden;
}

.is-live .soon__field {
  visibility: visible;
}

.soon__word {
  overflow: visible;
}

/* No JS: plain type. */
.soon__mark {
  margin: 0;
  font: 400 min(11vw, 20svh)/1 var(--face);
  letter-spacing: 0;
}

.soon__tag {
  margin: 0;
  font: 400 var(--tag-size)/1.2 var(--face);
  letter-spacing: .16em;
  padding-left: .16em;   /* trailing tracking would pull the line off centre */
  color: rgb(241 239 234 / .62);
  white-space: nowrap;
}

/* The DOM keeps the address in lowercase for screen readers and mail apps;
   Ade only has the capitals. */
.soon__mail {
  position: relative;
  font: 400 var(--tag-size)/1.2 var(--face);
  letter-spacing: .16em;
  padding-left: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgb(241 239 234 / .62);
  white-space: nowrap;
  user-select: text;
  -webkit-user-select: text;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s ease;
}

/* finger-sized hit area without moving the line */
.soon__mail::after {
  content: "";
  position: absolute;
  inset: -16px -20px;
}

.soon__mail:hover,
.soon__mail:focus-visible {
  color: var(--paper);
}

.soon__mail:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 8px;
}

/* JS: the word is the SVG (intro) and then the particles; the h1 stays for
   screen readers. The small line is placed under the drawn word. */
.js .soon__mark {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.js .soon__tag {
  position: absolute;
  left: 50%;
  top: var(--tag-top);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Hidden until app.js has split it into letters: on a slow phone the plain
   line used to sit on the black screen before the intro had even begun. */
.js .soon__tag:not(.is-set) {
  visibility: hidden;
}

/* The small line comes in letter by letter, out of a blur; each span gets
   its own delay from app.js, the three dots last and one at a time. */
.js .soon__tag span {
  display: inline-block;
  opacity: 0;
  filter: blur(7px);
  transition: opacity 1s ease, filter 1.1s ease;
}

.is-told .soon__tag span {
  opacity: 1;
  filter: blur(0);
}

/* The address comes last, whole, in the same blur. */
.js .soon__mail {
  position: absolute;
  left: 50%;
  top: var(--mail-top);
  transform: translateX(-50%);
  opacity: 0;
  filter: blur(7px);
  pointer-events: none;
  transition: opacity 1s ease var(--mail-delay), filter 1.1s ease var(--mail-delay), color .25s ease;
}

.is-told .soon__mail {
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .js .soon__tag span,
  .js .soon__mail {
    transition: none;
  }
}