.boundary-frame{display:block;isolation:isolate;overflow:hidden}
.boundary-art{position:absolute;left:50%;top:50%;height:100%;aspect-ratio:2205/1290;transform:translate(-50%,-50%);will-change:transform}
.boundary-photo,.boundary-vignette,.boundary-map{position:absolute;inset:0;width:100%;height:100%}
.boundary-photo{display:block;object-fit:fill;filter:saturate(1.07) contrast(1.025) brightness(.97)}
.boundary-vignette{background:radial-gradient(ellipse at 52% 50%,transparent 50%,#09110b2e 100%),linear-gradient(180deg,#09110b33,transparent 28%,transparent 70%,#09110b25);z-index:1;pointer-events:none}
.boundary-map{z-index:2;overflow:visible;pointer-events:none}
.boundary-fill{fill:#e3c98c;fill-opacity:0;stroke:none}
.boundary-road,.boundary-perimeter,.boundary-divider{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 2px 3px #10150be6) drop-shadow(0 0 6px #f4d58b99)}
.boundary-road{stroke:#fff2c8;stroke-width:7;opacity:1}
.boundary-perimeter{stroke:#ffe5a0;stroke-width:10}
.boundary-divider{stroke:#ffebb8;stroke-width:8}
.boundary-label,.boundary-road-text{opacity:0;filter:drop-shadow(0 2px 5px #0b140de0)}
.boundary-label circle{fill:#f0dab0}
.boundary-label text{fill:#fff5db;font:500 54px/1 'Hanken Grotesk',Arial,sans-serif;letter-spacing:3px;text-anchor:middle}
.boundary-road-text{fill:#f6ead0;font:500 25px/1 'Hanken Grotesk',Arial,sans-serif;letter-spacing:6px;text-anchor:middle}
.boundary-film-label{position:absolute;top:22px;left:24px;right:24px;z-index:3;display:flex;justify-content:space-between;gap:20px;color:#fffbec;font:500 11px/1.2 'IBM Plex Mono',monospace;letter-spacing:.13em;text-shadow:0 2px 8px #071109}
.boundary-replay{position:absolute;z-index:4;right:20px;bottom:20px;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;border-radius:28px;border:1px solid #e4d3adad;background:#102016a8;color:#fff9ec;font:500 13px/1 'Hanken Grotesk',Arial,sans-serif;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.boundary-replay:hover{background:#172c1ec9;border-color:#fff4d8}
.boundary-replay svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.boundary-frame.playing .boundary-art{animation:boundary-push 6.2s cubic-bezier(.18,.62,.32,1) both}
.boundary-frame.playing .boundary-road{animation:boundary-draw .95s cubic-bezier(.32,.68,.32,1) .15s forwards}
.boundary-frame.playing .boundary-perimeter{animation:boundary-draw 1.5s cubic-bezier(.35,.7,.28,1) .75s forwards}
.boundary-frame.playing .divider-one{animation:boundary-draw .58s ease-out 2.03s forwards}
.boundary-frame.playing .divider-two{animation:boundary-draw .58s ease-out 2.40s forwards}
.boundary-frame.playing .divider-three{animation:boundary-draw .58s ease-out 2.77s forwards}
.boundary-frame.playing .fill-one{animation:boundary-fill-in .5s ease-out 2.23s forwards}
.boundary-frame.playing .fill-two{animation:boundary-fill-in .5s ease-out 2.60s forwards}
.boundary-frame.playing .fill-three{animation:boundary-fill-in .5s ease-out 2.97s forwards}
.boundary-frame.playing .fill-four{animation:boundary-fill-in .5s ease-out 3.34s forwards}
.boundary-frame.playing .label-one{animation:boundary-appear .45s ease-out 2.38s forwards}
.boundary-frame.playing .label-two{animation:boundary-appear .45s ease-out 2.75s forwards}
.boundary-frame.playing .label-three{animation:boundary-appear .45s ease-out 3.12s forwards}
.boundary-frame.playing .label-four{animation:boundary-appear .45s ease-out 3.49s forwards}
.boundary-frame.playing .boundary-road-text{animation:boundary-appear .55s ease-out 1.10s forwards}
@keyframes boundary-draw{to{stroke-dashoffset:0}}
@keyframes boundary-fill-in{to{fill-opacity:.085}}
@keyframes boundary-appear{to{opacity:1}}
@keyframes boundary-push{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.035)}}
@media(max-width:600px){
 .boundary-frame{aspect-ratio:4/5;max-height:560px}
 .boundary-art{left:0;top:0;transform:translateX(0)}
 .boundary-frame.playing .boundary-art{animation:boundary-track 6.2s cubic-bezier(.24,.75,.4,1) both}
 .boundary-film-label{top:16px;left:16px;right:16px;font-size:9px}
 .boundary-replay{bottom:14px;right:14px;font-size:12px}
 @keyframes boundary-track{from{transform:translateX(0) scale(1)}to{transform:translateX(-50%) scale(1.015)}}
}
@media(prefers-reduced-motion:reduce){
 .boundary-frame .boundary-art,.boundary-frame.playing .boundary-art{animation:none!important;transform:translate(-50%,-50%)!important;left:50%!important;top:50%!important}
 .boundary-frame .boundary-road,.boundary-frame .boundary-perimeter,.boundary-frame .boundary-divider{animation:none!important;stroke-dashoffset:0!important}
 .boundary-frame .boundary-fill{animation:none!important;fill-opacity:.085!important}
 .boundary-frame .boundary-label,.boundary-frame .boundary-road-text{animation:none!important;opacity:1!important}
}


@media(max-width:600px) and (prefers-reduced-motion:reduce){.boundary-frame .boundary-art{width:100%;height:auto;aspect-ratio:2205/1290}}


/* Portrait study: rotate the complete aerial, keeping every plot in one view. */
@media(max-width:600px) and (orientation:portrait){
 .boundary-frame{width:min(100%,calc(58.5svh - 70px));height:auto;max-height:none;aspect-ratio:1290/2205;margin-inline:auto}
 .boundary-art{left:50%;top:50%;width:170.93%;height:58.5%;aspect-ratio:2205/1290;transform:translate(-50%,-50%) rotate(90deg)}
 .boundary-frame.playing .boundary-art{animation:boundary-portrait-push 6.2s cubic-bezier(.18,.62,.32,1) both}
 .boundary-label text,.boundary-road-text{transform-box:fill-box;transform-origin:center;transform:rotate(-90deg)}
 .boundary-film-label{font-size:10px}
 @keyframes boundary-portrait-push{from{transform:translate(-50%,-50%) rotate(90deg) scale(1)}to{transform:translate(-50%,-50%) rotate(90deg) scale(1.015)}}
}
@media(max-width:600px) and (orientation:portrait) and (prefers-reduced-motion:reduce){.boundary-frame .boundary-art,.boundary-frame.playing .boundary-art{width:170.93%;height:58.5%;transform:translate(-50%,-50%) rotate(90deg)!important}}
