/* Offline-rendered liquid colour fields. Only transforms move in the browser. */
#scrollytelling-2 { --story-base: #170d3a; --story-hot: #fc5f31; --story-cool: #674bff; --story-light: #fabc63; --story-accent: #ffc587; }
#scrollytelling-3 { --story-base: #350d32; --story-hot: #ec4776; --story-cool: #ff763c; --story-light: #ffc78d; --story-accent: #ffd6b1; }
#scrollytelling-4 { --story-base: #073b35; --story-hot: #b0e367; --story-cool: #06a695; --story-light: #a0f0ce; --story-accent: #d9f7ad; }
#scrollytelling-5 { --story-base: #240d43; --story-hot: #ce69f3; --story-cool: #4e40e1; --story-light: #fea781; --story-accent: #e9c6ff; }
#scrollytelling-6 { --story-base: #082c44; --story-hot: #27e5cf; --story-cool: #187bd0; --story-light: #ffe287; --story-accent: #aaf9dc; }

:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) { background: #111115; }
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6)::before,
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6)::after { content: none; animation: none; }
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .st-glow { display: none; animation: none; }
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .scrollytelling-inner { isolation: isolate; overflow: hidden; transition: opacity .55s ease-out; }
.is-story-active .scrollytelling-inner { will-change: opacity; }
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .scrollytelling-inner::before,
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .scrollytelling-inner::after { content: none; animation: none; }
.st-psyche { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: layout paint; display: none; }
.is-story-active .st-psyche { display: block; }
.st-psyche__wash { position: absolute; inset: -12%; background: var(--story-field, none) center / cover no-repeat, var(--story-base); opacity: .42; transition: translate .22s ease-out; }
.st-psyche__ribbon { position: absolute; inset: -32% -14%; border-radius: 46% 54% 62% 38%; background: conic-gradient(from 35deg at 38% 52%, var(--story-base) 0deg, var(--story-cool) 45deg, var(--story-light) 92deg, var(--story-hot) 125deg, var(--story-base) 160deg, var(--story-cool) 208deg, var(--story-hot) 250deg, var(--story-light) 285deg, var(--story-base) 360deg); mask-image: radial-gradient(ellipse at 46% 50%, transparent 16%, #000 32%, #000 46%, transparent 69%); opacity: .10; transition: translate .22s ease-out; }
.st-psyche__cursor { z-index: 1; position: absolute; left: calc(50% - 180px); top: calc(50% - 180px); width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(ellipse at 38% 35%, var(--story-light), transparent 48%), radial-gradient(ellipse at 62% 60%, var(--story-hot), transparent 55%); opacity: 0; transform: translate(0, 0); transition: transform .12s ease-out, opacity .35s; }
.st-psyche__shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #080711b3 8%, #08071160 55%, #08071126 85%), linear-gradient(0deg, #08071160, transparent 25%, transparent 75%, #08071140); }
.is-story-active .st-psyche__wash,
.is-story-active .st-psyche__ribbon { will-change: transform; }
.is-story-hover .st-psyche__cursor { opacity: .30; will-change: transform, opacity; }
#scrollytelling-3 .st-psyche__ribbon { transform-origin: 60% 40%; }
#scrollytelling-4 .st-psyche__ribbon { transform-origin: 30% 60%; }
#scrollytelling-6 .st-psyche__ribbon { transform-origin: 65% 50%; }
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .st-word { color: #fff8ed !important; text-shadow: none; }
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .st-word.st-em { color: var(--story-accent) !important; text-shadow: none; }
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .scrollytelling-text .st-word:first-of-type::first-letter { color: inherit; }
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .st-watermark { color: #fff8ed0d; animation: none; }
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .st-chapter-label { color: #fff8edb3; text-shadow: none; }
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .st-chapter-line { background: linear-gradient(90deg, transparent, #fff8ed80, transparent); }
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .st-end-mark { color: #fff8ed80; }
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .st-frame { border-color: #fff8ed1a; }
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .st-corner { border-color: #fff8ed40; }
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .st-progress-rule { background: var(--story-accent); }
@media (max-width: 768px) {
  .st-psyche__ribbon { inset: -18%; }
  .st-psyche__cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .scrollytelling-inner { transition: none; }
  .is-story-active .st-psyche__wash,
  .is-story-active .st-psyche__ribbon { animation: none !important; will-change: auto !important; }
  .st-psyche__cursor { display: none; transition: none; }
  .st-psyche__wash, .st-psyche__ribbon { transition: none; }
}