/* A full-screen illustrated memory; scrolling and navigation stay available. */
.owney-passage{--dog-size:min(clamp(420px,56vw,820px),105svh);position:relative;isolation:isolate;width:var(--page-width,100vw);margin:0 calc((100% - var(--page-width,100vw))/2);min-height:calc(100svh - var(--nav-height));overflow:clip;text-align:center;pointer-events:none;contain:layout style;scroll-snap-align:start}
.owney-country-scene,.country-plane{position:absolute;inset:0;overflow:hidden}
.owney-country-scene{z-index:-2;background:url('assets/owney-country-scene.png') center/cover no-repeat}
.country-track{display:flex;width:300%;height:100%;transform:translate3d(0,0,0)}
.country-track canvas{display:block;flex:0 0 calc(100% / 3);width:calc(100% / 3);height:100%;max-width:none}
.country-track canvas:nth-child(even){transform:scaleX(-1)}
.country-far .country-track{width:108%}
.country-far canvas{flex-basis:100%;width:100%}
.country-middle{top:60%;bottom:13%;--country-duration:var(--road-duration,12.5s)}
.country-near{top:79%;--country-duration:var(--near-duration,10s)}
.owney-passage::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0d182415 0%,transparent 42%,#0d182400 63%,#0d1824b3 100%)}
.owney-passage-art{position:absolute;inset:0;opacity:0;transition:opacity .35s}
.owney-passage.is-ready .owney-passage-art{opacity:1}
.owney-runner{position:absolute;bottom:14%;left:calc(50% - var(--dog-size)/2);width:var(--dog-size);aspect-ratio:512/320;isolation:isolate}
.owney-runner::after{content:"";position:absolute;bottom:6%;left:28%;width:46%;height:2%;border-radius:50%;background:#543c2638;filter:blur(5px);z-index:-1}
.owney-frames{display:block;width:100%;height:100%;overflow:visible}
.owney-passage.is-ready .country-track{animation:owney-country-travel var(--country-duration) linear infinite;animation-play-state:paused}
.owney-passage.is-ready .country-far .country-track{animation:owney-horizon-drift 90s linear infinite alternate;animation-play-state:paused}
.owney-passage.is-running .country-track{animation-play-state:running}
.owney-passage.is-running .country-far .country-track{animation-play-state:running}
.owney-passage:is(.is-warming,.is-running) .country-track{will-change:transform}
.owney-passage figcaption{position:absolute;left:5%;right:5%;bottom:5.5%;margin:auto;max-width:650px;color:#fff6e9;font:italic clamp(22px,2vw,30px)/1.5 var(--serif);text-wrap:balance;text-shadow:0 2px 16px #07121cc9}
@keyframes owney-country-travel{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-200% / 3),0,0)}}
@keyframes owney-horizon-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-7.407407%,0,0)}}
@media(min-width:980px) and (max-height:700px){.owney-passage{--dog-size:min(56vw,100svh)}}
@media(max-width:600px){.owney-passage{--dog-size:88vw}.owney-runner{bottom:25%}.owney-passage figcaption{font-size:22px;max-width:330px;bottom:7%}.country-middle{--country-duration:var(--road-duration,6.6s)}.country-near{--country-duration:var(--near-duration,5.3s)}}
@media(prefers-reduced-motion:reduce){.owney-passage-art{transition:none}.owney-passage .country-track{animation-play-state:paused!important}}
