/* Selected story background and school entrance for the finalized homepage. */
.story-section[data-story-image] { position: relative; isolation: isolate; overflow: clip; scroll-margin-top: 112px; }
.story-backdrop { position: absolute; z-index: -1; inset: 0; overflow: hidden; isolation: isolate; pointer-events: none; }
.story-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; filter: saturate(.8); }
.story-backdrop::before,
.story-backdrop::after { content: ''; position: absolute; inset: 0; }
.story-backdrop::before { background: #0b6340; mix-blend-mode: color; opacity: .82; }
.story-backdrop--dark { background: #092d20; }
.story-backdrop--dark::after { background: linear-gradient(90deg, rgb(3 48 30 / 48%), rgb(4 38 26 / 78%) 30%, rgb(4 38 26 / 78%) 70%, rgb(3 48 30 / 48%)); }
.story-section[data-story-theme="dark"] { background: #092d20; border-color: #244235; }
.story-section[data-story-theme="dark"] .story-heading { color: #f4faf6; }
.story-section[data-story-theme="dark"] .story-body { color: #f4faf6; line-height: 1.65; }
.story-section[data-story-theme="dark"] .story-rule { background: #76d7a3; }
.story-section[data-story-theme="dark"] .story-copy { position: relative; isolation: isolate; }
.story-section[data-story-theme="dark"] .story-copy::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -64px -88px;
    pointer-events: none;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    mask-image: radial-gradient(ellipse at center, #000 20%, rgb(0 0 0 / 85%) 42%, rgb(0 0 0 / 35%) 68%, transparent 94%);
}
.story-section[data-story-theme="dark"] .story-marker { background-image: linear-gradient(rgb(18 110 69 / 60%), rgb(18 110 69 / 60%)); }
.story-marker.is-pending { background-size: 0% 90%; }
.story-marker.is-highlighted { transition: background-size 760ms cubic-bezier(.22, 1, .36, 1); }
.school-section[data-school-motion] { overflow: clip; }
.school-motion-mask-y {
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 60%);
    mask-image: linear-gradient(to bottom, #000 40%, transparent 60%);
    -webkit-mask-size: 100% 250%;
    mask-size: 100% 250%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.school-motion-signal {
    position: absolute;
    inset: -1px auto auto 0;
    width: 72px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #2BBF78 65%, #0B6340);
    opacity: 0;
}
@media (max-width: 900px) {
    .story-backdrop--dark::after { background: rgb(4 38 26 / 80%); }
}
@media (max-width: 600px) {
    .story-section[data-story-theme="dark"] .story-copy::before { inset: -48px -36px; }
}
@media (prefers-reduced-motion: reduce) {
    .story-marker.is-pending { background-size: 100% 90%; }
    .story-marker.is-highlighted { transition: none; }
}