/* Intiam splash page.
   Palette, type, and motion follow the consumer app's design system
   (specs/features/design-system.md): neutral gray with a cyan accent,
   Hanken Grotesk for words, JetBrains Mono for metadata, Ubuntu for
   the name in the lockup, lowercase voice, OS-driven dark mode, and the hero
   weight-contrast wordmark. */

/* ---- fonts (self-hosted latin subsets; licenses alongside them in fonts/:
        SIL OFL for the first two, the Ubuntu Font Licence for Ubuntu) ---- */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2-variations'),
       url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ubuntu-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations'),
       url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens ---- */

:root {
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --wordmark-size: clamp(39px, 7.6vw, 73px);
  --wordmark-line: 0.95;

  --bg: hsl(0 0% 95.5%);
  --fg: #374151;      /* gray-700 */
  --logo: #0891b2;      /* the mark's own cyan (favicon, IntiamLogo) */
  --heavy: #0e7490;     /* cyan-700: hero heavy syllable */
  --light: #374151;     /* gray-700: hero light syllable, tagline */
  --mute: #d1d5db;      /* gray-300: the trailing period */
  --caret: #0891b2;
  --meta: #6b7280;      /* gray-500: mono metadata */
  --link: #0e7490;      /* cyan-700: inline link */
  --wordmark-color: var(--fg); /* the name, in the lockup */

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(0 0% 15%);
    --fg: hsl(0 0% 85%);
    --logo: #22d3ee;    /* cyan-400 */
    --heavy: #22d3ee;
    --light: #d1d5db;   /* gray-300 */
    --mute: #374151;    /* gray-700 */
    --caret: #22d3ee;
    --meta: #9ca3af;    /* gray-400 */
    --link: #06b6d4;    /* cyan-500 */
    --wordmark-color: var(--fg); /* soft gray on the dark ground */
  }
}

/* ---- page ---- */

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.splash {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3.5vh, 36px);
  /* Far more room below than above, so the composition rides about a third of
     the way down the page rather than at true center. */
  padding: 6vh 24px 30vh;
  text-align: center;
}

/* ---- lockup: the mark standing behind the name ----

   The mark's cut-out dot rings the tittle of the second i, so the two read as
   one drawing. The geometry is in wordmark ems, off the constants below: the
   first four are metrics of "intiam" set in Ubuntu Regular at no tracking, the
   rest are read off the mark's own artwork. Re-measure the type constants if
   the word, its face, its weight, or its tracking ever changes.

   --mark is the knob: it scales the spire without disturbing the alignment. */

.lockup {
  position: relative;
  /* the em everything below is measured in */
  font-size: var(--wordmark-size);

  --word: 2.865em;      /* the advance width of the whole word */
  --tittle-x: 1.3538em; /* the second i's tittle, from the word's left edge */
  --tittle-y: 0.6763em; /* ...and above the baseline */
  --baseline: 0.845em;  /* where the baseline falls below the heading's top */
  --line: calc(var(--wordmark-line) * 1em);

  --mark: 1.4913em;     /* the mark's square; its dot hole sits at 50.8%, 32.8% */
  --drop: 0.01em;       /* the name rides this much below the hole it is pinned to */
  --hole-x: calc(0.508 * var(--mark));
  --hole-y: calc(0.328 * var(--mark));

  /* The spire is drawn from 4.3% to 95.6% down that square, so once the hole
     is pinned to the tittle this is how far it reaches past the heading. */
  --rise: calc(var(--hole-y) + var(--tittle-y) - var(--baseline));
  --above: calc(var(--rise) - 0.043 * var(--mark));
  --below: calc(0.956 * var(--mark) - var(--rise) - var(--line));

  padding: var(--above) 0 var(--below);
}

/* ---- the mark ---- */

.logo {
  height: auto;
  color: var(--logo);
  transform-origin: center center;
  will-change: transform;
}

/* On its own (404.html) it simply stands above the name. */
.splash > .logo {
  width: clamp(88px, 18vw, 136px);
}

/* In the lockup it drops behind the name, its hole on the tittle: half the
   word left of center, across to the tittle, then back by the hole's own
   offset inside the square. */
.lockup .logo {
  position: absolute;
  left: calc(50% - var(--word) / 2 + var(--tittle-x) - var(--hole-x));
  top: calc(var(--above) + var(--baseline) - var(--tittle-y) - var(--hole-y));
  width: var(--mark);
  height: var(--mark);
}

/* The name itself is set in Ubuntu, the design's own face, untracked the way the
   design draws it, though lighter than the Medium the design draws it in.
   404.html's wordmark stays in Hanken Grotesk: Ubuntu ships here as the single
   Regular weight, so its heavy stem would have to be synthesized. */

.lockup .wordmark {
  font-family: 'Ubuntu', var(--font-sans);
  font-weight: 400;
  letter-spacing: 0;
  top: var(--drop); /* settles the name a touch below the spire */
}

/* ---- wordmark: the app's hero weight contrast (heavy stem, light terminal,
        muted period), split on the int. ---- */

.wordmark {
  position: relative; /* in the lockup, over the mark */
  margin: 0;
  font-size: var(--wordmark-size);
  line-height: var(--wordmark-line);
  color: var(--wordmark-color);
  letter-spacing: -0.025em;
  font-weight: 400;
}

.wordmark-text {
  display: block;
}

/* Keep the trademark outside the measured name so the logo stays aligned. */
.wordmark-trademark {
  position: absolute;
  top: 1em;
  left: calc(100% + 0.3em);
  font-family: var(--font-sans);
  font-size: 0.18em;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.wordmark-heavy {
  font-weight: 900;
  color: var(--heavy);
}

.wordmark-light {
  font-weight: 200;
  color: var(--light);
}

.wordmark-mute {
  font-weight: 200;
  color: var(--mute);
}

/* ---- tagline ---- */

.tagline {
  margin: 0;
  /* Wide enough, and stepped down enough, that each of the three lines holds
     one row on a desktop screen; narrower viewports wrap them. */
  max-width: min(100%, 80ch);
  font-size: clamp(15px, 2vw, 19px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--light);
}

/* The tagline's three lines all live in the same spot: each is typed, held,
   and erased in its turn, and the last one is left standing. Only that last
   one is the page's resting copy, so it is the only one shown until main.js
   stacks them for typing. */
.tagline-text {
  display: block;
}

.tagline-text:not(:last-child) {
  display: none;
}

/* Prepared for typing, the lines become one pile: a single grid cell holding
   all three, sized by the longest and tallest of them so the page never
   reflows as one line gives way to the next. Each line is centered in that
   cell, and types and erases from its own left edge, so nothing slides
   sideways under the caret. */
html.js .tagline.is-prepared {
  display: grid;
  align-items: center;
  justify-items: center;
}

html.js .tagline.is-prepared > .tagline-text {
  display: grid;
  grid-area: 1 / 1;
}

/* Once main.js takes over, each typed line becomes a one-cell grid: a hidden
   copy of the full line reserves the final size and wrap points, and the
   typed text paints over it left to right, so nothing shifts as letters
   land. */
.is-typing-ready {
  display: grid;
  width: fit-content;
  margin-inline: auto;
  text-align: left;
}

.is-typing-ready > * {
  grid-area: 1 / 1;
}

.typewriter-ghost {
  visibility: hidden;
}

/* In both lines the hidden full copy sets the box, and the typed copy paints
   over it out of flow. That matters once the last letters land: in flow, the
   caret riding the end would push past the full copy and widen the box, and
   since both lines are centered, the text would jump left as it finished.
   Out of flow the caret simply overhangs. */
.wordmark .typewriter-typed {
  position: absolute;
  white-space: nowrap;
}

.tagline .tagline-text {
  position: relative;
}

.tagline .typewriter-typed {
  position: absolute;
  inset: 0;
}

.caret {
  display: inline-block;
  width: 0.08em;
  height: 1em;
  margin-left: 0.1em;
  /* Cancels its own advance, so the caret costs the line nothing. The hidden
     full copy leaves only a pixel or two of slack at the end of the last line,
     and without this the caret would break to a line of its own there. It
     overhangs to the right instead, which nothing clips. */
  margin-right: -0.18em;
  vertical-align: -0.15em;
  background: var(--caret);
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

/* The name sets its line box tight, at 0.95em, and the font's ascent already
   fills 0.836em of it. A full-height caret reaches higher than that, growing
   the line box upward and pushing the text down a pixel until it is removed.
   Trim it to sit inside the line box so the name never moves. The tagline
   keeps the full caret; its 1.4 line-height has the room. */
.wordmark .caret {
  height: 0.72em;
  vertical-align: -0.05em;
}

.caret.is-idle {
  animation: caret-blink 1.05s steps(1, end) infinite;
}

.caret.is-typing {
  opacity: 1;
  transition: none;
}

.caret.is-done {
  animation: none;
  opacity: 0;
}

@keyframes caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ---- footer ---- */

.footer {
  flex: 0 0 auto;
  padding: 20px 24px 28px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--meta);
}

.footer p {
  margin: 0;
}

/* ---- 404 ---- */

.note {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--light);
}

.note a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.note a:focus-visible {
  outline: 2px solid #06b6d4;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- script-driven reveal (index.html only; 404.html never adds .js) ---- */

html.js .wordmark {
  opacity: 0;
}

html.js .wordmark:not(.is-typing-complete) .wordmark-trademark {
  visibility: hidden;
}

html.js .footer {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .wordmark.is-revealed,
html.js .footer.is-revealed {
  opacity: 1;
  transform: none;
}

/* Hold the authored tagline back until main.js has rebuilt its lines for
   typing, so they never flash before the first letter lands. */
html.js .tagline:not(.is-prepared) {
  visibility: hidden;
}

/* ---- accessibility ---- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .caret,
  .caret.is-idle {
    animation: none;
    transition: none;
  }

  html.js .wordmark,
  html.js .footer {
    transition: none;
  }
}