/* The illustrated sequence also works as four ordinary panels without motion. */
.motion-story{--stage-top:84px;background:var(--paper);position:relative;isolation:isolate}
.motion-stage{position:relative}
.motion-scene{--scene-p:0;position:relative;height:calc(100svh - var(--stage-top));min-height:620px;overflow:hidden;border-bottom:1px solid var(--ink)}
.motion-scene img{pointer-events:none;user-select:none}
.street-layer,.crowd-street{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.street-layer{object-position:center 58%;transform:scale(calc(1.02 + var(--scene-p)*.34)) translateY(calc(var(--scene-p)*-3%));transform-origin:50% 65%}
.city-copy{position:absolute;z-index:1;top:7%;left:6%;width:80%}
.scene-city:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#eee8daeb,#eee8da60 40%,transparent 65%)}
.city-copy .eyebrow{margin-bottom:20px}
.city-copy h2{font-size:clamp(64px,7.8vw,116px);text-shadow:0 1px 25px var(--paper);max-width:1050px}
.ink-caption{display:table;background:var(--paper);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:15px 22px;font-size:14px;line-height:1.5;max-width:90%}
.city-copy .ink-caption{margin-top:26px;transform:rotate(-1deg)}
.scene-art-credit{position:absolute;z-index:3;left:24px;bottom:22px;font-size:8px;letter-spacing:.1em;line-height:1.4;background:var(--paper);color:var(--ink);padding:6px 9px;max-width:calc(100% - 48px)}
.scene-crowd{background:var(--gold)}
.crowd-street{opacity:.32;filter:sepia(.3);transform:scale(calc(1.25 + var(--scene-p)*.12));object-position:center 65%}
.chant-lettering{position:absolute;inset:4% 3% auto;text-align:center;transform:translateY(calc(var(--scene-p)*-16px));z-index:1}
.chant-lettering p{font:700 clamp(26px,3vw,46px)/1.3 Georgia,serif;color:var(--red);margin-bottom:5px}
.chant-lettering h2{font-size:clamp(85px,13vw,200px);line-height:.9;letter-spacing:-.03em}
.chant-lettering>span{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;margin-top:13px}
.crowd-layer{position:absolute;width:86%;max-width:1380px;height:79%;object-fit:contain;object-position:bottom;left:50%;bottom:-6%;transform:translateX(-50%) translateY(calc((1 - var(--scene-p))*11%)) scale(calc(.94 + var(--scene-p)*.09));transform-origin:50% 100%;z-index:2}
.crowd-caption{position:absolute;z-index:3;right:5%;bottom:10%;transform:rotate(2deg)}
.scene-footage{background:var(--red);color:var(--paper)}
.footage-heading{position:absolute;left:5%;right:5%;top:4%;display:flex;justify-content:space-between;align-items:center;gap:24px}
.footage-heading>span{font-size:10px;letter-spacing:.12em;max-width:180px}
.footage-heading h2{font-size:clamp(54px,6vw,90px)}
.moving-film-panel{position:absolute;top:21%;left:50%;width:min(73%,1050px);height:62%;background:#111713;border:7px solid var(--paper);box-shadow:10px 10px 0 #1c211d;transform:translateX(-50%) rotate(calc(-3deg + var(--scene-p)*5deg)) scale(calc(.89 + var(--scene-p)*.17));transform-origin:50% 50%;overflow:hidden}
.moving-film-panel video{width:100%;height:100%;display:block;object-fit:contain}
.footage-time{position:absolute;left:0;right:0;bottom:0;padding:8px 12px;display:flex;justify-content:space-between;background:#111713e8;color:var(--paper);font-size:8px;letter-spacing:.1em}
.footage-caption{position:absolute;right:4%;bottom:7%;color:var(--ink);font-size:11px;transform:rotate(-2deg)}
.scene-footage .scene-art-credit{background:transparent;color:var(--paper);padding-left:0}
.scene-peace{background:var(--ink);color:var(--paper)}
.peace-sun{position:absolute;width:72vw;height:72vw;border-radius:50%;background:var(--red);right:-18vw;top:-10vw;transform:scale(calc(.9 + var(--scene-p)*.3))}
.peace-crowd{position:absolute;right:-19%;bottom:-12%;height:110%;max-width:none;width:100%;object-fit:contain;object-position:bottom right;opacity:calc(1 - var(--scene-p)*.65);transform:translateX(calc(var(--scene-p)*4%)) scale(calc(1 + var(--scene-p)*.13));transform-origin:right bottom}
.peace-copy{position:absolute;left:6%;top:20%;z-index:2;text-shadow:0 3px 30px #1c211d99}
.peace-copy .eyebrow{font-size:10px;margin-bottom:28px;max-width:240px}
.peace-copy h2{font-size:clamp(90px,11vw,175px)}
.peace-copy h2 em{color:var(--gold)}
.motion-controls{position:relative;z-index:5;background:var(--paper);border-top:1px solid var(--ink);display:flex;align-items:center;gap:22px;min-height:65px;padding:7px 25px;font-size:9px;font-weight:600;letter-spacing:.08em}
#story-sound{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;white-space:nowrap}
#story-sound[aria-pressed=true]{color:var(--red)}
.sound-bars{display:flex;align-items:center;gap:3px;height:20px;width:21px}
.sound-bars i{height:4px;width:3px;background:currentColor;transform-origin:center}
.sound-bars i:nth-child(2){height:12px}.sound-bars i:nth-child(3){height:18px}.sound-bars i:nth-child(4){height:8px}
.audio-playing .sound-bars i{animation:audio-bar .8s ease-in-out infinite alternate}.audio-playing .sound-bars i:nth-child(2n){animation-delay:-.5s}
@keyframes audio-bar{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
#story-audio-status{font-size:8px;letter-spacing:.06em;opacity:.7;max-width:280px}
.scene-navigation{display:flex;align-items:center;gap:12px;margin-left:auto;white-space:nowrap}
.scene-navigation button{border:1px solid var(--ink);width:44px;height:40px;font-size:22px;line-height:1}
.scene-navigation button:hover{background:var(--ink);color:var(--paper)}
.scene-navigation button:disabled{opacity:.25;cursor:default;background:transparent;color:var(--ink)}
.skip-experience{margin-left:12px;font-size:8px;text-decoration:none;white-space:nowrap;padding:10px 0}
.scene-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#1c211d15;overflow:hidden}
.scene-progress i{display:block;height:100%;background:var(--red);transform:scaleX(var(--story-progress,0));transform-origin:left}
.motion-fallback{padding:25px 6%;font-size:13px;display:flex;gap:25px;justify-content:space-between}
.motion-fallback a{white-space:nowrap;font-size:11px}
.is-animated{height:680svh}
.is-animated .motion-stage{position:sticky;top:var(--stage-top);height:calc(100svh - var(--stage-top));min-height:0;overflow:hidden}
.is-animated .motion-scene{position:absolute;inset:0 0 65px;height:auto;min-height:0;border:0;will-change:opacity;visibility:hidden}
.is-animated .motion-scene:first-child{visibility:visible}
.is-animated .motion-controls{position:absolute;bottom:0;left:0;right:0}
.is-animated .motion-fallback{display:none}
.motion-ready:not(.is-animated) .motion-controls{position:sticky;bottom:0}
.motion-ready:not(.is-animated) .scene-navigation,.motion-ready:not(.is-animated) .scene-progress,.motion-ready:not(.is-animated) .skip-experience{display:none}
.blackout-image{filter:none;opacity:.78;object-position:70% center}
.blackout-shade{background:linear-gradient(90deg,#0c100df5,#0c100db0 45%,#0c100d22);opacity:calc(.3 + var(--black-p,0)*.7)}
.blackout-content{justify-self:start;margin-left:4vw;text-align:left;max-width:750px}
.blackout-copy{margin:25px 0}.blackout-content .signal{justify-content:flex-start}
.blackout-art-credit{position:absolute;bottom:25px;right:5%;font-size:8px;letter-spacing:.1em;color:var(--paper)}
html[lang=fi] .city-copy h2{font-size:clamp(55px,6.8vw,105px)}
@media(min-width:1700px){.crowd-layer{height:85%;bottom:-12%}.moving-film-panel{width:min(75%,1300px)}}
@media(max-width:1000px){.motion-controls{gap:12px;padding-inline:15px}.crowd-layer{width:110%;max-width:none;height:70%;bottom:0}.crowd-caption{bottom:9%}.moving-film-panel{width:87%;height:55%;top:25%}.peace-crowd{right:-33%;width:130%}.peace-copy h2{font-size:13vw}.blackout-content{max-width:72%;margin-left:0}.blackout h2{font-size:10vw}.skip-experience{margin-left:0}}
@media(max-width:700px){
 .motion-story{--stage-top:70px}.is-animated{height:620svh}.motion-scene{min-height:650px}
 .city-copy{top:6%;left:7%;width:88%}.city-copy .eyebrow{font-size:8px;margin-bottom:19px}.city-copy h2{font-size:16vw}.city-copy .ink-caption{font-size:11px;padding:12px 15px;max-width:90%;margin-top:23px}
 .street-layer{object-position:53% center;transform:scale(calc(1.05 + var(--scene-p)*.25)) translateX(calc(var(--scene-p)*-3%))}
 .scene-art-credit{font-size:6px;left:16px;bottom:15px;max-width:calc(100% - 32px);padding:5px 7px}
 .chant-lettering{top:6%;inset-inline:4%}.chant-lettering p{font-size:32px;margin-bottom:12px}.chant-lettering h2{font-size:20vw}.chant-lettering>span{font-size:9px;letter-spacing:.15em;margin-top:15px}
 .crowd-layer{width:180%;height:72%;bottom:-3%;object-fit:contain}.crowd-caption{font-size:11px;right:7%;bottom:9%;padding:12px 16px}
 .footage-heading{top:6%;left:7%;right:7%;display:block}.footage-heading>span{font-size:8px;max-width:none;display:block;margin-bottom:12px}.footage-heading h2{font-size:15vw}
 .moving-film-panel{top:30%;height:43%;width:91%;border-width:4px;box-shadow:6px 6px 0 var(--ink)}
 .footage-time{font-size:6px;padding:7px}.footage-caption{font-size:10px;left:7%;right:7%;max-width:86%;bottom:9%;padding:12px}.footage-caption br{display:none}
 .peace-sun{width:150vw;height:150vw;right:-65vw;top:12%}.peace-copy{left:7%;top:9%}.peace-copy h2{font-size:23vw}.peace-copy .eyebrow{font-size:8px;max-width:180px;margin-bottom:22px}.peace-crowd{height:79%;width:180%;right:-75%;bottom:-2%}
 .motion-controls{min-height:70px;padding:5px 12px;gap:3px;flex-wrap:wrap;align-content:center}.is-animated .motion-scene{bottom:70px}
 #story-sound{font-size:8px;padding:0 5px;min-height:38px;gap:7px}.sound-bars{transform:scale(.85)}
 #story-audio-status{order:4;flex-basis:100%;max-width:100%;font-size:6px;padding-left:6px;min-height:10px}
 .scene-navigation{gap:8px;font-size:8px}.scene-navigation button{width:34px;height:36px;font-size:19px}.skip-experience{font-size:6px;max-width:62px;white-space:normal;margin-left:9px}
 .motion-fallback{flex-direction:column;font-size:12px;gap:12px}.blackout-content{max-width:100%;padding-top:95px}.blackout h2{font-size:18vw}.blackout-image{object-position:70% center;opacity:.5}.blackout-shade{background:linear-gradient(90deg,#0c100dcc,#0c100d70)}.blackout-art-credit{bottom:42px;font-size:6px;left:7%;right:auto}
 html[lang=fi] .city-copy h2{font-size:13.4vw}html[lang=fi] .footage-heading h2{font-size:13vw}
}
@media(max-height:560px) and (min-width:701px){.city-copy h2{font-size:60px}.city-copy .ink-caption{font-size:11px;margin-top:15px}.chant-lettering h2{font-size:90px}.chant-lettering p{font-size:22px}.peace-copy h2{font-size:85px}.footage-heading h2{font-size:50px}.footage-caption{font-size:9px}}
@media(prefers-reduced-motion:reduce){.motion-scene *{transform:none!important;animation:none!important}.crowd-layer{left:7%;width:86%}.moving-film-panel{left:10%;width:80%}.peace-crowd{opacity:1}}
.motion-paused .motion-scene *{animation:none!important}
.motion-paused .street-layer,.motion-paused .crowd-street,.motion-paused .peace-sun,.motion-paused .peace-crowd{transform:none!important}