/* Krystallis Softworks — palette carried over from a7a so the two sites are
   visibly the same hand. */

/* The one typeface. Newsreader — a sharp transitional serif, self-hosted
   (no CDN call), variable across weight 200–800 AND optical size 6–72 so
   the wordmark gets the display cut and body copy gets the text cut off the
   same file. Loaded here because hero.css is on every page.
   Before this, --font named a sans that was never actually loaded and
   `body` had no font-family at all, so the whole site was silently
   rendering in the browser's default serif (Times New Roman). This makes
   that serif a deliberate choice instead of an accident. */
@font-face {
  font-family: 'Newsreader';
  src: url('../assets/newsreader.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --void:      #05060C;
  --starlight: #ECEEF3;
  --haze:      #8A8F9C;
  --faint:     #4C5262;
  --vein:      #C81E2A;
  --font: 'Newsreader', Georgia, 'Times New Roman', serif;
}

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

/* Present to search engines and screen readers, invisible to everyone
   else. Only needed on index.html — its h1 would otherwise be the motto's
   SVG text, which isn't real text content — the other five pages already
   carry a real <h1>. */
.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;
}

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--void);
  color: var(--starlight);
  font-family: var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `.hero` alone used to be the whole page, so the body refused to scroll.
     Now there's an entrance sequence below it — this must be free to grow
     past one viewport, or nothing under the hero is reachable. */
}

.hero {
  /* Fixed, not in normal flow — the canvas has to keep rendering behind the
     entrance content as you scroll, or "the sky deepens as you scroll" has
     nothing to show. A spacer immediately after .hero (see index.html)
     reserves the first viewport-height of scroll so the entrance content
     still starts below a fully visible hero. */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  z-index: 0;
  overflow: hidden;
  background-color: var(--void);
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABMNDhEODBMRDxEVFBMXHTAfHRoaHToqLCMwRT1JR0Q9Q0FMVm1dTFFoUkFDX4JgaHF1e3x7SlyGkIV3j214e3b/2wBDARQVFR0ZHTgfHzh2T0NPdnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnb/wAARCAASACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDmkdUPXNROxdzioVJqRGIFXe4xGUimMuBUjknFRt70riGinjpRRQgBqYaKKGB//9k=");
  background-size: cover;
  background-position: center;
}

.hero > picture,
.hero__plate,
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero__plate { object-fit: cover; z-index: 0; }

.hero__canvas {
  z-index: 1;
  opacity: 0;
  transition: opacity 1100ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hero[data-mode='live'] .hero__canvas { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__canvas { transition: none; }
}