/* Nightfall — base tokens, paper themes, reset.
   No pure white and no pure black anywhere in this file, on purpose. */

:root{
  --dim: 0.10;                 /* the brightness slider drives this (a black veil) */
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --ease-out : cubic-bezier(.16,1,.3,1);
  --ease-ui  : cubic-bezier(.33,1,.68,1);
  --rail-w: 112px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* UI chrome is dark in both papers — only the sheet changes */
  --ui-bg   : #14121a;
  --ui-bg-2 : #1d1a24;
  --ui-fg   : #b9b3c4;
  --ui-fg-dim: #7d7789;
  --ui-line : rgba(185,179,196,.16);
  --ui-glow : rgba(196,186,214,.35);
}

/* ── paper: parchment (default) ─────────────────────────── */
body.paper-parchment{
  --page  : #1A1712;
  --paper : #B9AE97;
  --line  : rgba(74,66,54,.78);
  --ink   : rgba(74,66,54,.52);
  --paper-edge: rgba(26,23,18,.55);
  --fill-blend: multiply;
  --fill-lift : 14%;
}

/* ── paper: moonlight ───────────────────────────────────── */
body.paper-moonlight{
  --page  : #070A12;
  --paper : #0F1524;
  --line  : rgba(201,212,232,.55);
  --ink   : rgba(201,212,232,.34);
  --paper-edge: rgba(3,5,10,.7);
  --fill-blend: normal;
  --fill-lift : 0%;
  --ui-bg   : #0c1018;
  --ui-bg-2 : #131a26;
  --ui-fg   : #aab6cc;
  --ui-fg-dim: #6d7a90;
  --ui-line : rgba(170,182,204,.16);
  --ui-glow : rgba(150,180,220,.32);
}

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

html,body{
  margin:0; padding:0; height:100%; width:100%;
  overflow:hidden; overscroll-behavior:none;
  background:var(--page); color:var(--ui-fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:15px; line-height:1.5; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
body{ position:fixed; inset:0; }

h1,h2,h3{
  font-family: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight:400; letter-spacing:.06em; margin:0;
}

button,input{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; -webkit-appearance:none; appearance:none; }
:focus-visible{ outline:2px solid var(--ui-glow); outline-offset:3px; border-radius:6px; }

#app{ position:fixed; inset:0; display:block; }

.screen{ position:absolute; inset:0; display:none; flex-direction:column; }
body.screen-gallery #gallery{ display:flex; }
body.screen-play    #play   { display:grid; }

/* ── the dim veil: this *is* the brightness control ─────── */
.dimmer{
  position:fixed; inset:0; background:#000; pointer-events:none;
  opacity:var(--dim); z-index:90;
  transition:opacity 1.2s linear;
}

/* ── the sheet of paper ─────────────────────────────────── */
.stage{ position:relative; overflow:hidden; touch-action:none; user-select:none; }
.sheet{ position:absolute; inset:0; display:grid; place-items:center; }
.sheet svg{
  width:100%; height:100%; display:block;
  touch-action:none; -webkit-user-select:none; user-select:none;
}

/* the breathing halo behind the paper — slow, unlabelled, ignorable */
.halo{
  position:absolute; left:50%; top:50%; width:80%; height:80%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--ui-glow), transparent 68%);
  opacity:.16; pointer-events:none;
  animation:breathe 11s var(--ease-soft) infinite;
}
@keyframes breathe{
  0%   { transform:translate(-50%,-50%) scale(1);     opacity:.13; }
  36%  { transform:translate(-50%,-50%) scale(1.035); opacity:.19; }
  45%  { transform:translate(-50%,-50%) scale(1.035); opacity:.19; }
  100% { transform:translate(-50%,-50%) scale(1);     opacity:.13; }
}

/* Region + line-work presentation. Colours are mixed into the paper in JS
   (CC.color.onPaper) rather than with mix-blend-mode — a blend mode would also
   darken every *unfilled* region against the page behind the sheet. */
/* A long, soft cross-fade. Re-colouring a region part way through carries on
   from the colour it has reached rather than restarting from the old one —
   that is how a CSS transition on fill behaves, and it is why this is a
   transition and not an animation. */
.rgn{ transition:fill 1600ms cubic-bezier(.33,0,.2,1); }
.lines path, .ink path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.lines path{ stroke:var(--line); transition:opacity 800ms var(--ease-soft); }
/* two regions that became one group: the border between them dissolves, which
   is the whole of the merge rendering */
.lines path.gone{ opacity:0; }
.ink path{ stroke:var(--ink); }
.ink .solid{ fill:var(--ink); stroke:none; }

body[data-motion="off"] .halo{ animation:none; }
body[data-motion="off"] .rgn{ transition-duration:300ms; }
@media (prefers-reduced-motion:reduce){
  body[data-motion="auto"] .halo{ animation:none; }
  body[data-motion="auto"] .rgn{ transition-duration:300ms; }
}

/* Several overlays set their own display in CSS, which would otherwise beat
   the UA rule behind the hidden attribute. */
[hidden]{ display:none !important; }