/* Story chapters (II-VI): one deep colour each, arriving as a sheet.
   No graphics and no liquid fields. The section starts in the colour of the
   section above; the chapter's stage arrives as a sheet laid over it,
   smaller with rounded top corners and a soft shadow, and settles to the
   full screen (st-art.js) while the text lifts and sharpens. */
#scrollytelling-2 { --st-c: #1c1846; --st-acc: #ffb27a; }
#scrollytelling-3 { --st-c: #3b1022; --st-acc: #ff9a8a; }
#scrollytelling-4 { --st-c: #0d3a33; --st-acc: #c8f08a; }
#scrollytelling-5 { --st-c: #2a1443; --st-acc: #e3b8ff; }
#scrollytelling-6 { --st-c: #0a3046; --st-acc: #8ff2dc; }

#scrollytelling-2 .st-psyche, #scrollytelling-3 .st-psyche, #scrollytelling-4 .st-psyche,
#scrollytelling-5 .st-psyche, #scrollytelling-6 .st-psyche { display: none !important; }

:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) {
    background: var(--st-prev, var(--st-c));
    box-shadow: 0 -2px 0 0 var(--st-prev, var(--st-c));
}
/* the stage is the sheet: smaller with round top corners and a shadow cast
   up onto the page while it arrives (--st-k 0), full and square once settled */
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .scrollytelling-inner {
    background:
        radial-gradient(ellipse 90% 70% at 50% 40%, rgba(255, 255, 255, 0.05), transparent 70%),
        var(--st-c);
    transform: scale(calc(0.9 + 0.1 * var(--st-k, 1)));
    transform-origin: 50% 0%;
    border-radius: calc((1 - var(--st-k, 1)) * 56px) calc((1 - var(--st-k, 1)) * 56px) 0 0;
    box-shadow: 0 -30px 90px -20px rgba(0, 0, 0, calc((1 - var(--st-k, 1)) * 0.45));
    will-change: transform;
    opacity: 1 !important;
}

/* the veil over the section above: it darkens and blurs as the sheet comes */
.st-scrim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 100vh;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg, rgba(6, 5, 8, 0.55), rgba(6, 5, 8, 0.9));
    -webkit-backdrop-filter: blur(var(--st-sb, 0px));
    backdrop-filter: blur(var(--st-sb, 0px));
}

/* the numeral: from many times its size to its place */
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .st-watermark {
    scale: var(--st-zoom, 1);
    opacity: var(--st-numa, 1);
    transform-origin: 50% 50%;
}

/* the text arrives with the colour */
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .scrollytelling-text {
    translate: 0 var(--st-lift, 0px);
    filter: blur(var(--st-blur, 0px));
}
html body :is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .scrollytelling-text .st-word.st-em { color: var(--st-acc) !important; }
html body :is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .st-progress-rule { background: var(--st-acc) !important; }
:is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .st-frame { display: none; }

@media (prefers-reduced-motion: reduce) {
    :is(#scrollytelling-2, #scrollytelling-3, #scrollytelling-4, #scrollytelling-5, #scrollytelling-6) .scrollytelling-text { translate: none; filter: none; }
}