/* Scene pigments. Scenes are line art whose closed regions carry a pigment
   class (pg-*). In ink state every region is paper; when its locus is read
   (.lit) the region takes its pigment. Ornament ribbons use rb-* stroke
   classes the same way. Shared by index.html and tools/preview. */
:root {
  --paper: #f3ecdc;
  --ink: #221c17;
  --lapis: #2d4d97;
  --verm: #c4442c;
  --verd: #3f8a6a;
  --gold: #c99a32;
  --gold-light: #f1d47a;
  --gold-dark: #8f6a1f;
  --ochre: #d8b35e;
  --flesh: #efd0b2;
  --rose: #c46f80;
  --purple: #6c3f73;
  --white: #f8f3e8;
  --brown: #8b5b3b;
  --sky: #a6bddc;
  --stone: #b9b2a2;
  --band-a: #2d4d97;
  --band-b: #c4442c;
  --tongue-ground: #3f8a6a;
  --grille-ground: #6c3f73;
  --panel-ground: #2d4d97;
  --vine-ground: #d8b35e;
  --frame-color: #c4442c;
  --ring-a: #3f8a6a;
  --ring-b: #c4442c;
  --font-inscription: 'Uncial Antiqua';
  --paint-ms: 900ms;
  --pigment-alpha: 1;
}

.scene, .orn { stroke: var(--ink); stroke-linejoin: round; stroke-linecap: round; }
.scene *, .orn * { fill: none; }
.scene .ink { fill: var(--ink); }
.scene [class*="pg-"], .orn [class*="pg-"] {
  fill: var(--paper);
  transition: fill var(--paint-ms) ease, fill-opacity var(--paint-ms) ease;
}
.scene text { fill: var(--ink); stroke: none; font-family: var(--font-inscription), 'Uncial Antiqua', serif; }
.scene text * { fill: inherit; }   /* textPath / tspan follow their <text> */
.scene text.rub { fill: var(--verm); }

/* a scene being drawn (ILLUMINATOR.drawScene): pen strokes in document order, inscriptions fading in, and, if it
   is painted, then its colours and its frame's, laid in one at a time as a painter would: each region from bare
   paper to its colour at its turn (--p0, 0…1, set by drawScene), after the drawing (--draw-ms), over the painting
   time (--paint-seq-ms), each patch taking --paint-step-ms. Plain CSS, so <use> copies draw and paint in step. */
.scene.drawing [style*="--len"] {
  stroke-dasharray: calc(var(--len) * 1px) calc(var(--len) * 1px);
  animation: draw-stroke calc(var(--draw-ms) * var(--dd) * 1ms) cubic-bezier(.45, .05, .55, .95) calc(var(--draw-ms) * var(--d0) * 1ms) both;
}
.scene.drawing text { animation: draw-fade calc(var(--draw-ms) * .12ms) ease calc(var(--draw-ms) * var(--d0, 0) * 1ms) both; }
.drawing.lit [style*="--p0"] {
  --paint-for: calc(var(--paint-step-ms, 220) * 1ms);
  --paint-at: calc((var(--draw-ms, 2600) + (var(--paint-seq-ms, 2500) - var(--paint-step-ms, 220)) * var(--p0)) * 1ms);
}
.drawing.lit [class*="pg-"][style*="--p0"] { animation: paint-in var(--paint-for) ease-out var(--paint-at) both; }
.scene.drawing.lit [class*="pg-"][style*="--p0"][style*="--len"] {
  animation: draw-stroke calc(var(--draw-ms) * var(--dd) * 1ms) cubic-bezier(.45, .05, .55, .95) calc(var(--draw-ms) * var(--d0) * 1ms) both,
             paint-in var(--paint-for) ease-out var(--paint-at) both;
}
.drawing.lit [class^="rb-"][style*="--p0"] { animation: paint-in-stroke var(--paint-for) ease-out var(--paint-at) both; }
@keyframes draw-stroke { from { stroke-dashoffset: calc(var(--len) * 1px); } to { stroke-dashoffset: 0; } }
@keyframes draw-fade { from { opacity: 0; } }
@keyframes paint-in { from { fill: var(--paper); } }
@keyframes paint-in-stroke { from { stroke: var(--paper); } }
@media (prefers-reduced-motion: reduce) { .drawing * { animation: none !important; } }

/* read (.lit): each region takes its pigment. A letter kept in ink (app: ink only) sets --unpaint and the other
   --unpaint-* switches on its own <svg>; the folio's magnifier mirrors it through <use> and inherits from its own
   frame instead, so the magnifier still shows the paint. */
.lit .pg-lapis { fill: var(--unpaint, var(--lapis)); }
.lit .pg-verm { fill: var(--unpaint, var(--verm)); }
.lit .pg-verd { fill: var(--unpaint, var(--verd)); }
.lit .pg-gold { fill: var(--unpaint, url(#gold-leaf)); }
.lit .pg-ochre { fill: var(--unpaint, var(--ochre)); }
.lit .pg-flesh { fill: var(--unpaint, var(--flesh)); }
.lit .pg-rose { fill: var(--unpaint, var(--rose)); }
.lit .pg-purple { fill: var(--unpaint, var(--purple)); }
.lit .pg-white { fill: var(--unpaint, var(--white)); }
.lit .pg-brown { fill: var(--unpaint, var(--brown)); }
.lit .pg-sky { fill: var(--unpaint, var(--sky)); }
.lit .pg-stone { fill: var(--unpaint, var(--stone)); }
.lit .pg-ink { fill: var(--unpaint, var(--ink)); }
/* ornament grounds (themeable in the VFX panel) */
.lit .pg-bandA { fill: var(--unpaint, var(--band-a)); }
.lit .pg-bandB { fill: var(--unpaint, var(--band-b)); }
.lit .pg-tongue { fill: var(--unpaint, var(--tongue-ground)); }
.lit .pg-grille { fill: var(--unpaint, var(--grille-ground)); }
.lit .pg-panel { fill: var(--unpaint, var(--panel-ground)); }
.lit .pg-vine { fill: var(--unpaint, var(--vine-ground)); }
.lit .pg-frame { fill: var(--unpaint, var(--frame-color)); }
.lit .pg-ringA { fill: var(--unpaint, var(--ring-a)); }
.lit .pg-ringB { fill: var(--unpaint, var(--ring-b)); }
.lit .pg-hole { fill: var(--unpaint, var(--lapis)); }
.orn .raster { opacity: 0; transition: opacity var(--paint-ms) ease; }
.lit .raster { opacity: var(--unpaint-raster, .55); }
.lit [class*="pg-"]:not(.pg-white):not(.pg-ink) { fill-opacity: var(--unpaint-alpha, var(--pigment-alpha)); }
.lit text.tit { fill: var(--verm); }

/* ornament ribbons: hollow in ink, pigment cores when lit */
.orn [class^="rb-"] { stroke: var(--paper); transition: stroke var(--paint-ms) ease; }
.orn .rb-ink { stroke: var(--ink); transition: none; }
.lit .rb-gold { stroke: var(--unpaint, url(#gold-page)); }
.lit .rb-verd { stroke: var(--unpaint, var(--verd)); }
.lit .rb-white { stroke: var(--unpaint, var(--white)); }
.lit .rb-brown { stroke: var(--unpaint, var(--brown)); }
.orn .rb-ink, .orn [class^="rb-"] { stroke-linecap: butt; }