/* Sgnfai: white, near-black, one blue. See ../sgnfai-look-and-feel.md */

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

:root {
  --white: #ffffff;
  --ink: #111111;
  --ink-muted: #555555;
  --grid: #ececec;
  --blue: #153894; /* sampled from the Discography sleeve band (Wikipedia scan, median of band pixels) */
  --blue-glow: color-mix(in srgb, var(--blue), var(--white)); /* derived: blue lifted for dark backgrounds */

  --font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
  display: flex; flex-direction: column;
  background-color: var(--white);
  /* faint data grid */
  background-image: radial-gradient(var(--grid) 1px, transparent 1.2px);
  background-size: 24px 24px;
  color: var(--ink);
  font: 400 17px/1.55 var(--font-sans);
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* free space split 1:5 so the content sits high; on wide screens the left inset is
   half what centring a 1120px column would give, so the content leans left */
.stage {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 64px 32px;
  padding-left: max(32px, calc((100vw - 1120px) / 4 + 32px));
}
@media (max-width: 640px) { .stage { padding: 48px 16px; } }
.stage::before { content: ""; flex: 1; }
.stage::after  { content: ""; flex: 5; }

.logo {
  position: relative; align-self: flex-start;
  font-size: clamp(64px, 13vw, 160px); line-height: 1.1; height: 1.1em;
  font-weight: 700; letter-spacing: -0.04em;
  cursor: pointer;
}
.logo__word { white-space: pre; }
.logo__cursor {
  position: absolute; top: 0.1em; left: 100%;
  width: 0.05em; min-width: 3px; height: 0.95em;
  background: var(--blue); opacity: 0;
}

.reveal { margin-top: 20px; }

/* dictionary entry under the logo */
.dict { font-size: 17px; color: var(--ink-muted); margin-bottom: 48px; }
.dict b { color: var(--ink); font-weight: 700; }
.dict__ipa { font-family: var(--font-mono); font-size: 15px; color: var(--blue); margin-inline: 0.4em; }
.dict__say { font-style: italic; display: inline-block; white-space: nowrap; }
@media (max-width: 480px) { .dict { font-size: 15px; } .dict__ipa { font-size: 14px; } }
/* text unfolds while the logo types: dictionary line, tagline, description, a third of a second apart */
.js .reveal > * { opacity: 0; transform: translateY(8px); transition: opacity 0.9s ease, transform 0.9s ease; }
.js .reveal.is-shown > * { opacity: 1; transform: none; }
.js .reveal.is-shown > :nth-child(1) { transition-delay: 0.33s; }
.js .reveal.is-shown > :nth-child(2) { transition-delay: 0.67s; }
.js .reveal.is-shown > :nth-child(3) { transition-delay: 1s; }
@media (prefers-reduced-motion: reduce) { .js .reveal > * { transition: none; transform: none; } }

/* tagline on one line, thin vertical rules between the three parts */
.tagline {
  display: flex; flex-wrap: wrap;
  font-size: clamp(20px, 2.9vw, 36px); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em;
}
.tagline span { white-space: nowrap; padding-inline: 0.6em; border-left: 1px solid var(--ink); }
.tagline span:first-child { padding-left: 0; border-left: 0; }
.tagline span:last-child { padding-right: 0; }
/* too narrow for one line: stack, keeping the rule on the left of each part */
@media (max-width: 560px) {
  .tagline { flex-direction: column; gap: 6px; }
  .tagline span, .tagline span:first-child { padding: 0 0 0 12px; border-left: 1px solid var(--ink); }
}

.lede { margin-top: 24px; max-width: 46ch; color: var(--ink-muted); font-size: 18px; }


/* blue top bar */
.strip a:hover { text-decoration: underline; text-underline-offset: 3px; }
.strip {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 29px 32px;
  background: var(--blue); color: var(--white);
  font: 500 15px/1 var(--font-sans);
}
/* same face as the animated logo, smaller */
.strip__logo {
  position: relative; display: inline-block; height: 1em;
  font-size: 26px; font-weight: 700; letter-spacing: -0.04em; line-height: 1;
}
.strip__logo .logo__cursor { top: 0; height: 1em; background: var(--white); } /* white cursor on the blue bar */
.strip .strip__logo:hover { text-decoration: none; }
@media (max-width: 640px) { .strip { padding-inline: 16px; } }

/* copyright pinned to the bottom-right corner of the screen */
.copyright {
  position: fixed; right: 32px; bottom: 16px;
  font-size: 12px; color: #8a8a8a;
}
@media (max-width: 640px) { .copyright { right: 16px; bottom: 12px; } }

/* look-and-feel prototype switcher, bottom-left (/1/, /2/, /3/) */
.protos {
  position: fixed; left: 32px; bottom: 12px; z-index: 1;
  display: flex; gap: 10px; font: 600 13px/1 var(--font-mono); color: #8a8a8a;
}
.protos a { padding: 4px 2px; }
.protos a:hover { color: var(--ink); }
.signal-bg--dark .protos { color: rgba(255, 255, 255, 0.45); }
.signal-bg--dark .protos a:hover { color: var(--white); }
@media (max-width: 640px) { .protos { left: 16px; bottom: 8px; } }

/* animated background (signal-bg.js): canvas sits at z-index 0, page content above it */
.signal-bg-on body { background-image: none; }
.signal-bg-on .strip, .signal-bg-on .stage { position: relative; z-index: 1; }
.signal-bg-on .copyright { z-index: 1; }

/* dark theme: brand near-black field, white type, blue lifted so it reads on dark */
.signal-bg--dark body { background-color: var(--ink); color: var(--white); }
.signal-bg--dark .dict, .signal-bg--dark .lede { color: rgba(255, 255, 255, 0.7); }
.signal-bg--dark .dict b { color: var(--white); }
.signal-bg--dark .dict__ipa { color: var(--blue-glow); }
.signal-bg--dark .tagline span { border-color: rgba(255, 255, 255, 0.45); }
.signal-bg--dark .logo .logo__cursor { background: var(--blue-glow); }
.signal-bg--dark .copyright { color: rgba(255, 255, 255, 0.45); }
.signal-bg--dark :focus-visible { outline-color: var(--blue-glow); }