/* fx.css · story/theme-shift, the page changes colour as each chapter arrives · owner: Lizzy East · all rights reserved */

/* Each chapter wears its own colours: that is the finished look without script and
   with motion off. With motion allowed, fx.js lays one full-size colour layer per
   theme behind the chapters and cross-fades them (opacity only) as each chapter
   crosses the middle of the screen; the words change colour half-way through the fade,
   where both colours still read. */
[data-fx~="story/theme-shift"] { position: relative; isolation: isolate; }
[data-fx~="story/theme-shift"] :is([data-fx-theme="paper"], [data-fx-layer="paper"]),
[data-fx~="story/theme-shift"][data-fx-ink="paper"] {
  --fx-t-bg: var(--fx-theme-paper, #f4f5f7);
  --fx-t-ink: var(--fx-theme-paper-ink, #111117);
  --fx-t-accent: var(--fx-theme-paper-accent, #2340ff);
}
[data-fx~="story/theme-shift"] :is([data-fx-theme="night"], [data-fx-layer="night"]),
[data-fx~="story/theme-shift"][data-fx-ink="night"] {
  --fx-t-bg: var(--fx-theme-night, #111117);
  --fx-t-ink: var(--fx-theme-night-ink, #f4f5f7);
  --fx-t-accent: var(--fx-theme-night-accent, #cfff3e);
}
[data-fx~="story/theme-shift"] :is([data-fx-theme="cobalt"], [data-fx-layer="cobalt"]),
[data-fx~="story/theme-shift"][data-fx-ink="cobalt"] {
  --fx-t-bg: var(--fx-theme-cobalt, #2340ff);
  --fx-t-ink: var(--fx-theme-cobalt-ink, #ffffff);
  --fx-t-accent: var(--fx-theme-cobalt-accent, #cfff3e);
}
[data-fx~="story/theme-shift"] [data-fx-theme] { background-color: var(--fx-t-bg); color: var(--fx-t-ink); }
[data-fx~="story/theme-shift"] [data-fx-theme] em { color: var(--fx-t-accent); }
[data-fx~="story/theme-shift"] [data-fx-theme] a { color: inherit; }
[data-fx~="story/theme-shift"] [data-fx-theme] :focus-visible { outline-color: currentColor; }

/* The colour layers, made by fx.js. */
[data-fx~="story/theme-shift"] > [data-fx-backdrop] { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
[data-fx~="story/theme-shift"] [data-fx-layer] { position: absolute; inset: 0; background-color: var(--fx-t-bg); opacity: 0; }
[data-fx~="story/theme-shift"] [data-fx-layer].is-prev { z-index: 1; opacity: 1; }
[data-fx~="story/theme-shift"] [data-fx-layer].is-on { z-index: 2; opacity: 1; }
[data-fx~="story/theme-shift"].fx-themed [data-fx-theme] { background-color: transparent; --fx-t-ink: inherit; --fx-t-accent: inherit; }
html.fx-armed [data-fx~="story/theme-shift"].fx-live [data-fx-layer] { transition: opacity var(--fx-theme-dur, 700ms) ease-in-out; }
html.fx-armed [data-fx~="story/theme-shift"].fx-live [data-fx-layer].is-snap { transition: none; opacity: 0; }