/* arcanio.de — landing page.
   One stylesheet: tokens, layout and the wordmark animation. The fuller token
   set that the parked tools use lives in parked/assets/. */

:root {
  --bg:         #0a0b0d;
  --text:       #e7eaf0;
  --text-dim:   #9aa3b2;
  --text-faint: #606978;
  --accent:     #7c9cff;
  --accent-dim: #4a5fa8;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pad: clamp(1rem, 3vw, 2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

#bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.stage { position: fixed; inset: 0; display: grid; place-items: center; }

.center { position: relative; text-align: center; padding: var(--pad); }

.wordmark {
  font-size: clamp(3.2rem, 15vw, 11rem);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .95;
  margin: 0;
  user-select: none;

  /* Base and peak sit close together and the highlight is wide, so this reads
     as the letterforms breathing rather than a shine crossing them. */
  background-image: linear-gradient(
    100deg,
    #6b7590 0%, #9fb2e8 26%, #cfd9f5 37%, #9fb2e8 48%, #6b7590 72%, #6b7590 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 15s linear infinite;
}

@keyframes sheen {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}

/* Deliberately quiet: found on a second look, never announcing itself. */
.quote {
  margin: 1.9rem auto 0;
  max-width: 44ch;
  color: var(--text-faint);
  font-size: clamp(.82rem, 1.4vw, .95rem);
  line-height: 1.6;
}
.quote cite {
  display: block;
  margin-top: .5rem;
  font-style: normal;
  font-size: .82em;
  color: #4c5462;
  letter-spacing: .04em;
}

/* ---- 404 ---------------------------------------------------------------
   Same treatment, less motion. No canvas: a page you reached by mistake
   should settle quickly rather than perform. */

/* Entirely static: the same gradient as the wordmark, held still. Nothing on
   this page moves. */
.code {
  font-size: clamp(2.6rem, 9vw, 5rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  margin: 0;
  user-select: none;
  background-image: linear-gradient(100deg, #6b7590 0%, #9fb2e8 42%, #cfd9f5 58%, #6b7590 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glyph {
  display: block;
  width: clamp(96px, 13vw, 150px);
  height: auto;
  margin: 0 auto 1.8rem;
}

@media (prefers-reduced-motion: reduce) {
  .wordmark { animation: none; background-position: 40% 0; }
  #bg { display: none; }
  body { background: radial-gradient(1200px 600px at 50% 35%, #14171d 0%, var(--bg) 70%); }
}