/* Motion follows the content; the page remains complete when motion is off. */
.civic-site .motion-heading{clip-path:inset(0 -3% -8%);}
.motion-enabled .c-use-panel:not([hidden]){animation:panel-enter .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes panel-enter{from{opacity:0;transform:translateY(14px);clip-path:inset(0 0 8%)}to{opacity:1;transform:none;clip-path:inset(0)}}
.c-link span,.c-button span,.nav-contact span{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.c-link:hover span,.c-button:hover span,.nav-contact:hover span{transform:translate(3px,-3px)}
.c-two-films .film-screen,.library-film .film-screen{isolation:isolate}
.c-two-films .film-screen::after,.library-film .film-screen::after{content:'';position:absolute;inset:0;pointer-events:none;border:1px solid #172b2010;z-index:2;transition:border-color .5s}
.c-two-films .film-screen:hover::after,.library-film .film-screen:hover::after{border-color:#172b2059}
.motion-enabled .c-two-films .film-screen>:is(img,video),.motion-enabled .library-film .film-screen>:is(img,video){transition:transform .8s cubic-bezier(.2,.7,.2,1);transform:scale(1)}
.motion-enabled .c-two-films .film-screen:hover>:is(img,video),.motion-enabled .library-film .film-screen:hover>:is(img,video){transform:scale(1.035)}
.c-static-media{overflow:hidden}
.c-static-media>img,.c-static-media>picture>img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.motion-enabled .c-static-media:hover>img,.motion-enabled .c-static-media:hover>picture>img{transform:scale(1.025)}
.world-story{position:relative;margin:0 0 108px;height:150svh;min-height:1100px}
.world-sticky{position:sticky;top:max(22px,5svh)}
.world-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:30px}
.world-heading .c-kicker{margin-bottom:18px}
.civic-site .world-heading h2{font-size:clamp(2.9rem,4.3vw,4.3rem);line-height:1.02;max-width:820px}
.civic-site .world-instruction{font-size:.72rem;display:flex;gap:26px;align-items:center;padding-bottom:5px}
.world-study{--trace:1;--world-scale:1;--world-y:0px;--lens-x:50%;--lens-y:55%}
.world-frame{position:relative;aspect-ratio:1942/809;overflow:clip;background:#253128;isolation:isolate}
.world-plane{position:relative;width:100%;height:100%;isolation:isolate}
.world-plane>img,.world-lens,.world-lens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.world-plane>img{z-index:1;clip-path:inset(0 var(--image-reveal,0%) 0 0);transform:scale(var(--world-scale));transform-origin:center}
.world-map{position:absolute;inset:0;width:100%;height:100%;background:#ece9e0;max-width:none;transform:scale(var(--world-scale));transform-origin:center}
.map-footprints{fill:#d5d0c4;stroke:#bdb5a7;stroke-width:.6}
.map-traces path{fill:none;stroke:#d74931;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--trace));opacity:.9}
/* editorial-motion.js splits each traced path into one path per road; the group keeps the original layer's opacity. */
.map-traces g[data-draw]{opacity:.9}
.map-traces g[data-draw] path{opacity:1}
@property --trace{syntax:'<number>';inherits:true;initial-value:1}
.world-study[data-layer=map] .world-coordinate{color:#54493d;text-shadow:none}
.world-study[data-layer=map] .world-hover-hint{visibility:hidden}
.world-study[data-layer=map] .world-lens{visibility:hidden}
.world-study[data-layer=town] .world-lens img{transform:scale(calc(var(--world-scale)*1.85))}
.world-lens{z-index:2;pointer-events:none;clip-path:circle(0 at var(--lens-x) var(--lens-y));transition:clip-path .4s cubic-bezier(.2,.7,.2,1)}
.world-lens img{transform:scale(1.85);transform-origin:var(--lens-x) var(--lens-y)}
.world-study.is-inspecting .world-lens{clip-path:circle(clamp(85px,10vw,150px) at var(--lens-x) var(--lens-y))}
.world-coordinate{position:absolute;left:23px;top:20px;font-size:.65rem;letter-spacing:.08em;color:#fff;text-shadow:0 1px 5px #0009;pointer-events:none}
.world-layers{position:absolute;left:20px;bottom:20px;z-index:4;display:flex;gap:3px;background:#f7f6f0ed;padding:4px}
.world-layers button{background:transparent;border:0;min-height:38px;padding:9px 15px;font-size:.72rem;color:#202b23;transition:color .3s,background .3s}
.world-layers button[aria-pressed=true]{background:#273f31;color:#fff}
.world-layers button:hover{background:#dfe5da;color:#202b23}
.world-layers button:focus-visible,.world-detail:focus-visible{outline-color:#fff;outline-offset:4px}
.world-detail{position:absolute;right:20px;bottom:20px;z-index:4;color:#fff;background:#182e22e8;border:1px solid #fff7;padding:12px 17px;min-height:46px;font-size:.72rem;display:flex;gap:28px}
.world-detail:hover,.world-detail[aria-pressed=true]{background:#fff;color:#213426}
.world-study figcaption{display:flex;justify-content:space-between;gap:20px;font-size:.66rem;color:var(--muted);padding-top:13px}
.world-hover-hint{transition:opacity .3s}
.world-study.is-inspecting .world-hover-hint{opacity:.3}
html:not(.motion-enabled) .world-story{height:auto;min-height:0}
html:not(.motion-enabled) .world-sticky{position:static}
html:not(.motion-enabled) .world-instruction{display:none}
html:not(.motion-enabled) .world-plane{transform:none;will-change:auto}
html:not(.motion-enabled) .map-traces path{stroke-dashoffset:0}
html:not(.motion-enabled) .world-lens{transition:none}
.motion-paused .c-use-panel{animation:none}
.motion-paused :is(.c-link span,.c-button span,.nav-contact span){transition:none;transform:none}
@media(min-width:1600px){.world-story{min-height:1350px}.world-sticky{top:4svh}}
@media(max-width:760px){.world-story{height:120svh;min-height:880px;margin-bottom:60px}.world-sticky{top:22px}.world-heading{gap:20px;margin-bottom:24px}.world-heading .c-kicker{margin-bottom:15px}.civic-site .world-heading h2{font-size:2.7rem}.world-instruction{display:none!important}.world-frame{aspect-ratio:1.1}.world-plane>img,.world-lens img{object-position:48% center}.world-coordinate{top:16px;left:16px;font-size:.6rem}.world-layers{left:12px;bottom:12px}.world-layers button{padding:9px 12px;font-size:.66rem}.world-detail{right:12px;bottom:12px;gap:14px;font-size:.66rem;padding:12px}.world-study figcaption{font-size:.61rem}.world-hover-hint{display:none}}
@media(prefers-reduced-motion:reduce){.world-story{height:auto;min-height:0}.world-sticky{position:static}.world-instruction{display:none}.map-traces path{stroke-dashoffset:0}.world-plane{transform:none;will-change:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
