@font-face {
  font-family: "DM Serif Display Local";
  src: url("./assets/DMSerifDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  background: #080b0a;
  color: #f3efe2;
  --warmup: 5.8s;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: Arial, Helvetica, sans-serif; }

.stage {
  isolation: isolate;
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 43%, #141913 0%, #0c110e 28%, #080b0a 62%, #050706 100%);
}

.mind, .illumination { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.mind { opacity: .58; }
.filaments { width: 100%; height: 100%; display: block; }
.pathways path { vector-effect: non-scaling-stroke; }

.illumination {
  opacity: 1;
  background:
    radial-gradient(ellipse 35% 16% at 50% 45%, #e6cc8410, transparent 100%),
    radial-gradient(ellipse 44% 29% at 50% 46%, #85a16b08, transparent 100%);
}

.identity {
  width: 100%;
  padding: 2rem 6vw;
  text-align: center;
  transform: translateY(-1.6vh);
  opacity: 1;
  filter: brightness(1);
}

h1 {
  margin: 0;
  font-family: "DM Serif Display Local", "DM Serif Display", Georgia, "Times New Roman", serif;
  font-size: clamp(2.15rem, 8.2vw, 9.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.025em;
  white-space: nowrap;
  color: #f3efe2;
  text-shadow: 0 0 18px #fff5d512, 0 0 65px #eed79d0b;
}

.category {
  margin: clamp(1.4rem, 3vh, 2.7rem) 0 0;
  color: #b9c2b5;
  font-size: clamp(.7rem, 1vw, .94rem);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.credit {
  margin: .8rem 0 0;
  color: #737f75;
  font-size: clamp(.65rem, .84vw, .8rem);
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: .055em;
}
.name { white-space: nowrap; }

.is-booting .identity, .is-booting .illumination { opacity: .15; filter: brightness(.65); }
.is-warming .identity { animation: light-on var(--warmup) linear both; }
.is-warming .illumination { animation: room-on var(--warmup) ease-out both; }

/* A cold lamp gathering strength: small, slow dips, never a hard on/off flash. */
@keyframes light-on {
  0% { opacity: .15; filter: brightness(.65); }
  9% { opacity: .21; filter: brightness(.7); }
  16% { opacity: .18; filter: brightness(.7); }
  27% { opacity: .39; filter: brightness(.8); }
  34% { opacity: .34; filter: brightness(.79); }
  46% { opacity: .62; filter: brightness(.9); }
  54% { opacity: .56; filter: brightness(.88); }
  68% { opacity: .84; filter: brightness(.97); }
  76% { opacity: .8; filter: brightness(.96); }
  88%, 100% { opacity: 1; filter: brightness(1); }
}

@keyframes room-on {
  0% { opacity: .05; }
  24% { opacity: .16; }
  47% { opacity: .4; }
  69% { opacity: .65; }
  88%, 100% { opacity: 1; }
}

.replay {
  position: absolute;
  right: max(1.4rem, env(safe-area-inset-right));
  bottom: max(1.4rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #9da98b22;
  border-radius: 50%;
  background: #0a100d99;
  color: #b5c3ae;
  opacity: 0;
  cursor: pointer;
  transition: opacity .35s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.replay svg { width: 1.05rem; height: 1.05rem; }
body[data-controls="visible"] .replay, .replay:focus-visible { opacity: .72; }
.replay:hover { border-color: #9da98b77; }
.replay:focus-visible { outline: 2px solid #d5e0c5; outline-offset: 4px; }

@media (max-width: 600px) {
  .identity { padding-inline: 5vw; transform: translateY(-3vh); }
  h1 { font-size: 8.2vw; letter-spacing: -.03em; }
  .category { letter-spacing: .13em; margin-top: 1.55rem; font-size: .63rem; }
  .credit { font-size: .62rem; letter-spacing: .02em; margin-top: .7rem; }
  .illumination { background: radial-gradient(ellipse 68% 17% at 50% 46%, #e6cc8410, transparent); }
  .mind { opacity: .48; }
}

@media (prefers-reduced-motion: reduce) {
  .is-booting .identity, .is-booting .illumination { opacity: 1; filter: none; }
  .is-warming .identity, .is-warming .illumination { animation: none; }
  .replay { transition: none; }
}