/* Artwork-led, articulated delivery sequence. Atlas frames keep source transparency. */
.finale-page{max-width:1160px;margin:0 auto 35px}
.finale-heading{margin-bottom:23px}.finale-heading h1{margin-bottom:0}
.finale-scene{position:relative;isolation:isolate;width:100%;aspect-ratio:3/2;overflow:hidden;background:#d8b472}
.finale-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.finale-welcome{position:absolute;z-index:2;left:33%;top:34%;width:34%;text-align:center;padding:1% 1.5%;font:900 clamp(9px,1.65vw,20px)/1.1 var(--head);letter-spacing:.04em;color:#173d49;background:linear-gradient(#fff0bd,#e9be66);border:2px solid #9f6d2d;border-radius:3px;box-shadow:0 3px 0 #69411e,0 4px 5px #40280a33;transform:rotate(-2deg)}
.finale-neighbours{position:absolute;z-index:2;display:flex;justify-content:space-between;gap:1.8%;left:11%;right:11%;top:42%}
.finale-neighbour{position:relative;display:block;width:9.5%;aspect-ratio:1;border:clamp(1px,.25vw,3px) solid #c99d4c;border-radius:50%;box-shadow:0 3px 0 #805125,0 4px 7px #5b391b66;background:#fff7df;transform-origin:50% 100%}
.finale-neighbour>i{position:absolute;inset:0;border-radius:50%;background-image:url('assets/citizens.webp');background-size:400% 300%;background-position:var(--neighbour-x) var(--neighbour-y);background-repeat:no-repeat}
.finale-neighbour>b{position:absolute;right:-15%;top:-20%;color:#ffe29b;text-shadow:0 1px 3px #7c541d;font-size:clamp(9px,2vw,24px);opacity:0}
.finale-parade{position:absolute;inset:0;z-index:4;transform:translateX(-85%);will-change:transform}
.finale-scene.is-walking .finale-parade{animation:finale-procession 7.2s linear both}
.finale-scene.is-arrived .finale-parade,.finale-scene.is-finished .finale-parade{transform:translateX(0)}
.finale-puppet{position:absolute;width:16%;aspect-ratio:220/240;left:var(--actor-left);bottom:9%;z-index:4;filter:drop-shadow(0 3px 1px #53361925)}
.finale-rig{position:absolute;inset:0;display:block;transform-origin:50% 85%}
.finale-part{position:absolute;display:block;background-repeat:no-repeat;transform-origin:20% 18%;will-change:transform}
.finale-part.body{z-index:3}
.finale-part.far-leg{z-index:1;filter:brightness(.88);transform-origin:25% 15%}
.finale-part.near-leg{z-index:2;transform-origin:25% 15%}
.finale-part.near-arm{z-index:5;transform-origin:12% 40%;transform:rotate(-7deg)}
.finale-part.tail{z-index:0;transform-origin:90% 65%}
.puppet-tumbit .tail{transform-origin:85% 50%}
.puppet-zippy .tail,.puppet-nori .tail{transform:scaleX(-1);transform-origin:75% 55%}
.finale-part.near-wing{z-index:5;transform-origin:25% 12%}
.finale-part.far-wing{z-index:1;transform-origin:90% 12%}
.finale-ground-shadow{position:absolute;left:25%;bottom:4%;width:64%;height:7%;border-radius:50%;background:radial-gradient(ellipse,#59402055,transparent 70%)}
.finale-scene.is-walking .near-leg{animation:finale-step .63s ease-in-out infinite alternate;animation-delay:var(--step-delay)}
.finale-scene.is-walking .far-leg{animation:finale-step .63s ease-in-out infinite alternate-reverse;animation-delay:var(--step-delay)}
.finale-scene.is-walking .near-arm{animation:finale-push .63s ease-in-out infinite alternate;animation-delay:var(--step-delay)}
.finale-scene.is-walking .tail{animation:finale-tail .85s ease-in-out infinite alternate;animation-delay:var(--step-delay)}
.finale-scene.is-walking .puppet-zippy .tail,.finale-scene.is-walking .puppet-nori .tail{animation-name:finale-tail-mirrored}
.finale-scene.is-walking .finale-rig{animation:finale-body-step .63s ease-in-out infinite;animation-delay:var(--step-delay)}
.finale-scene.is-walking .near-wing,.finale-scene.is-cheering .near-wing{animation:finale-wing .72s ease-in-out infinite alternate}
.finale-scene.is-walking .far-wing,.finale-scene.is-cheering .far-wing{animation:finale-other-wing .72s ease-in-out infinite alternate}
.finale-wagon{position:absolute;left:51%;bottom:9.5%;width:25%;z-index:5}
.finale-wagon .wagon-stage{width:100%;margin:0!important;overflow:visible;transform:none!important}
.finale-wagon .fixed-wheel,.finale-wagon .fitted-wheel{top:73.3%;width:24%;transform:translate(-50%,-50%)}
.finale-wagon .fixed-wheel{left:19.1%}.finale-wagon .fitted-wheel{left:68.2%}
.finale-scene.is-walking .finale-wagon .fixed-wheel,.finale-scene.is-walking .finale-wagon .fitted-wheel{animation:finale-wheel .72s linear infinite}
.finale-scene.is-walking .finale-wagon{animation:finale-cart-rattle .4s ease-in-out infinite alternate}
.finale-picnic-load{position:absolute;left:13%;right:23%;bottom:63%;height:24%;display:flex;align-items:end;gap:3%;z-index:-1}
.picnic-basket{position:relative;display:block;width:33%;height:78%;border-radius:8% 8% 22% 22%;border:2px solid #996229;background:repeating-linear-gradient(0deg,transparent 0 16%,#80531d55 17% 20%),repeating-linear-gradient(90deg,#d9a550 0 14%,#e6be6c 15% 19%,#b78037 20% 25%);box-shadow:inset 1px 2px 2px #ffe9a6,inset -2px -3px 3px #78481855}
.picnic-basket:before{content:"";position:absolute;left:19%;right:19%;height:65%;top:-48%;border:3px solid #a96e2f;border-bottom:0;border-radius:60% 60% 0 0;box-shadow:inset 1px 1px #f5cf7c}
.picnic-basket:after{content:"";position:absolute;left:5%;top:-10%;width:80%;height:45%;background:repeating-conic-gradient(#fff5df 0 25%,#dd725d 0 50%) 0 0/12px 12px;transform:rotate(7deg);border-radius:20% 10% 40% 10%;box-shadow:0 2px 1px #96632d55}
.picnic-basket:nth-child(2){height:100%}.picnic-basket:nth-child(2):after{filter:hue-rotate(150deg)}
.finale-scene.is-cheering .finale-neighbour{animation:finale-neighbour-cheer .55s ease-in-out infinite alternate;animation-delay:var(--cheer-delay)}
.finale-scene.is-cheering .finale-neighbour>b{opacity:1;animation:finale-cheer-spark .75s ease-out infinite;animation-delay:var(--cheer-delay)}
.finale-scene.is-cheering .near-arm{animation:finale-wave .48s ease-in-out infinite alternate}
.finale-scene.is-cheering .puppet-bloop .near-arm{animation-delay:-.2s}
.finale-confetti{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.finale-confetti>i{position:absolute;left:var(--confetti-x);top:28%;color:#ffe19a;text-shadow:0 2px #976423;font-style:normal;font-size:clamp(10px,2vw,25px);opacity:0}
.finale-confetti>i:nth-child(3n){color:#ef8ab9}.finale-confetti>i:nth-child(3n + 1){color:#8adbd8}
.finale-scene.is-cheering .finale-confetti>i{animation:finale-confetti 2.5s ease-out both;animation-delay:var(--confetti-delay)}
.finale-rival{position:absolute;z-index:7;right:3%;top:8%;width:15%;display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(-12px);transition:opacity .4s,transform .4s}
.finale-rival .portrait{width:75%;border-color:#95658c;border-width:3px;box-shadow:0 3px 6px #3d244655}
.finale-rival>span:last-child{font:800 clamp(9px,1.4vw,17px)/1.2 var(--head);background:#fff0ca;color:#573d60;border:2px solid #ad82a2;padding:7% 10%;border-radius:9px;white-space:nowrap;transform:rotate(4deg)}
.finale-scene.hyena-speaks .finale-rival{opacity:1;transform:none}
.finale-caption{margin:24px auto 15px;text-align:center;padding:18px 24px;max-width:840px;min-height:104px}
.finale-caption strong{font:900 20px var(--head);color:#a45e26}.finale-caption p{font:800 clamp(17px,2vw,24px)/1.35 var(--head);margin:4px 0 0}
.finale-controls{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 30px}.finale-controls [hidden]{display:none!important}
.finale-story{max-width:900px;margin:0 auto;text-align:center}.finale-story p{max-width:690px;margin:0 auto 18px}.finale-story h2{font-size:30px}.finale-moral{font-size:15px;color:#527079}
.finale-story .quest-end{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
@keyframes finale-procession{0%{transform:translateX(-85%)}100%{transform:translateX(0)}}
@keyframes finale-step{0%{transform:rotate(-24deg) translateY(-2%)}100%{transform:rotate(24deg) translateY(2%)}}
@keyframes finale-push{0%{transform:rotate(-12deg)}100%{transform:rotate(3deg)}}
@keyframes finale-tail{0%{transform:rotate(-8deg)}100%{transform:rotate(11deg)}}
@keyframes finale-tail-mirrored{0%{transform:scaleX(-1) rotate(-9deg)}100%{transform:scaleX(-1) rotate(9deg)}}
@keyframes finale-body-step{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-2%) rotate(1deg)}}
@keyframes finale-wing{0%{transform:rotate(-15deg)}100%{transform:rotate(-55deg)}}
@keyframes finale-other-wing{0%{transform:rotate(12deg)}100%{transform:rotate(48deg)}}
@keyframes finale-wheel{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes finale-cart-rattle{to{transform:translateY(-1.5%)}}
@keyframes finale-neighbour-cheer{to{transform:translateY(-10%) rotate(5deg)}}
@keyframes finale-cheer-spark{to{transform:translateY(-80%) scale(1.3);opacity:0}}
@keyframes finale-wave{from{transform:rotate(-25deg)}to{transform:rotate(-65deg)}}
@keyframes finale-confetti{0%{opacity:0;transform:translateY(0) rotate(0)}10%,70%{opacity:1}100%{opacity:0;transform:translateY(170px) rotate(230deg)}}
.finale-scene.reduced-finale .finale-parade{transform:none;animation:none!important}
.finale-scene.reduced-finale *,.still .finale-scene *{animation:none!important;transition:none!important}
.still .finale-parade{transform:none}
@media(max-width:760px){.finale-heading h1{font-size:30px}.finale-scene{border-width:4px;outline-width:1px;border-radius:14px}.finale-caption{margin-top:20px;padding:15px 13px;min-height:114px}.finale-caption strong{font-size:18px}.finale-controls{gap:10px;margin-bottom:24px}.finale-controls .button{font-size:15px;padding:10px 13px}.finale-story{padding:23px 18px}.finale-story h2{font-size:26px}.finale-story p{font-size:14px}.finale-rival .portrait{border-width:2px}.finale-rival>span:last-child{border-width:1px}.finale-story .quest-end .button{font-size:16px}.picnic-basket{border-width:1px}.picnic-basket:before{border-width:1px}.picnic-basket:after{background-size:5px 5px}}