@font-face{font-family:Display;src:url('assets/display.woff2') format('woff2');font-display:swap}@font-face{font-family:Body;src:url('assets/body.woff2') format('woff2');font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:#151518;color:#151518;font-family:Body,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #f24741;outline-offset:5px}::selection{background:#ef453e;color:#fff}h1,h2,p{margin:0}.red{color:#e93733}.eyebrow{font-size:11px;letter-spacing:.13em;font-weight:600}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}.skip:focus{position:fixed;z-index:100;background:white;padding:20px}.nav{position:absolute;z-index:20;top:0;left:0;width:100%;padding:25px 3.8%;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:9px;font-family:Display;font-size:21px;letter-spacing:-1px}.brand img{border-radius:50%;width:35px;height:35px}.nav nav{display:flex;align-items:center;gap:24px;font-size:18px;font-weight:600}.nav nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 10px;line-height:1.3}.nav-pill{background:#151518;color:#fff;border-radius:50px;padding:14px 24px;font-size:12px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;border:0;border-radius:7px;padding:20px 26px;font-size:13px;font-weight:600;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}.dark{color:#fff;background:#151518}.yellow{background:#ffd126;color:#151518}.opening{height:270svh;background:#ffd126}.studio{height:100svh;min-height:620px;position:sticky;top:0;overflow:hidden;isolation:isolate;--p:0;background:radial-gradient(ellipse at 50% 38%,#ffe98a 0,#ffd126 65%)}.studio-grain{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:.1;background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".75" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" opacity=".3" filter="url(%23n)"/%3E%3C/svg%3E')}.masthead{font-family:Display;position:absolute;z-index:1;top:11%;left:3.4%;font-size:clamp(120px,24vw,390px);line-height:1;letter-spacing:-.06em;white-space:nowrap;transform:translateY(calc(var(--p)*-190px)) rotate(calc(var(--p)*-8deg));opacity:calc(1 - var(--p)*2.7)}.masthead span{color:#e93733;font-size:.42em;display:inline-block;vertical-align:top;padding-top:.15em;letter-spacing:-.03em}.portal{position:absolute;width:53vw;height:53vw;border:38px solid #ffe985;border-radius:50%;top:23%;left:28%;box-shadow:15px 25px 0 #e9b616;transform:rotateX(26deg);opacity:.7}.stage-floor{position:absolute;bottom:-33%;left:-30%;width:160%;height:65%;background:repeating-conic-gradient(#ebbf29 0% 25%,#f8d757 0% 50%) 0/100px 100px;transform:perspective(600px) rotateX(62deg);border-radius:50%}.renderer{position:absolute;inset:0;z-index:4;touch-action:pan-y}.renderer canvas{display:block;width:100%;height:100%}.poster{position:absolute;inset:17% 18% 6% 22%;z-index:3;pointer-events:none;transition:opacity .5s}.poster img{width:100%;height:100%;object-fit:contain;animation:poster-rock 5s ease-in-out infinite;filter:drop-shadow(15px 32px 20px #8e650e44)}.model-ready .poster,.model-ready .portal,.model-ready .stage-floor{opacity:0}.hero-copy{position:absolute;z-index:5;left:4%;bottom:12%;transform:translateY(calc(var(--p)*-30px));opacity:calc(1 - var(--p)*3);pointer-events:none}.hero-copy h2{font-family:Display;font-size:clamp(24px,3.1vw,52px);line-height:1.08;letter-spacing:-.05em;margin:15px 0}.hero-copy>p:last-child{font-size:14px;line-height:1.6}.hero-actions{position:absolute;z-index:6;right:4%;bottom:12%;text-align:right;opacity:calc(1 - var(--p)*2.3)}.hero-actions p{font-size:11px;padding:12px 2px}.scroll-cue{position:absolute;bottom:4%;left:4%;z-index:6;font-size:12px}.scroll-cue span{display:inline-block;margin-left:22px;animation:arrow 2s ease-in-out infinite}.story-words{position:absolute;left:5%;top:20%;z-index:2;font-family:Display;line-height:.96;font-size:clamp(55px,10vw,170px);letter-spacing:-.06em;transform:translateY(calc(120px - var(--p)*120px));opacity:clamp(0,calc((var(--p) - .22)*4),1)}.story-words span{display:block}.impact{position:absolute;right:5%;top:42%;z-index:7;font-family:Display;font-size:clamp(45px,9vw,145px);color:#e93733;pointer-events:none;opacity:0;transform:rotate(-12deg);-webkit-text-stroke:2px #151518}.world{height:150svh;background:#10131c;color:#fff}.city-frame{height:100svh;min-height:580px;position:sticky;top:0;overflow:hidden;--p:0}.city-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.055 - var(--p)*.04)) translateY(calc(var(--p)*-10px));filter:saturate(1.12)}.city-shade{position:absolute;inset:0;background:linear-gradient(180deg,#06071488,transparent 40%,#08090ac9)}.city-title{position:absolute;left:4%;top:8%;transform:translateY(calc(var(--p)*-28px))}.city-title h2{font-family:Body;font-size:16px;font-weight:600;line-height:1.3;letter-spacing:.08em;text-shadow:0 2px 15px #0008}.city-note{position:absolute;bottom:8%;right:5%;text-align:right}.city-note p{font-size:22px;line-height:1.4;margin-bottom:20px}.text-link{font-size:12px;border-bottom:1px solid currentColor;padding-bottom:6px}.friends{background:#ede9dc;min-height:110svh;position:relative;overflow:hidden;padding:80px 4%;isolation:isolate;--p:0}.friend-title{position:relative;z-index:2}.friend-title h2{font-family:Display;font-size:clamp(62px,13.2vw,200px);line-height:.95;letter-spacing:-.06em;margin-top:25px;transform:translateX(calc(var(--p)*-35px))}.friend-title h2 span{color:#e93733}.friend-ribbon{position:absolute;z-index:1;left:-20%;top:48%;width:145%;background:#ffd126;border-top:2px solid #151518;border-bottom:2px solid #151518;padding:17px;white-space:nowrap;font-family:Display;font-size:42px;transform:rotate(-9deg) translateX(calc(var(--p)*80px))}.friend-art{position:relative;margin:-12% 2% -5% 27%;height:66vw;max-height:780px;z-index:3;transform:translateY(calc(40px - var(--p)*70px)) rotate(calc(3deg - var(--p)*5deg))}.friend-art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(10px 30px 18px #34302333)}.friend-disc{position:absolute;inset:15% 8% 9%;border-radius:50%;background:#e3ddcc;z-index:-1}.friend-copy{position:relative;z-index:4;margin-top:-10%;max-width:350px}.friend-copy p{font-size:19px;line-height:1.6;margin-bottom:25px}@keyframes poster-rock{50%{transform:translateY(-15px) rotate(3deg)}}@keyframes arrow{50%{transform:translateY(5px)}}@media(min-width:1700px){.hero-copy{bottom:10%}}@media(max-width:700px){.nav{padding:20px 5%}.nav nav{display:none}.brand{font-size:19px}.nav-pill{padding:12px 16px}.opening{height:240svh}.studio{min-height:590px}.masthead{top:16%;left:3%;font-size:27vw}.portal{top:30%;width:90vw;height:90vw;left:4%;border-width:22px}.poster{inset:27% -6% 19%}.hero-copy{left:6%;bottom:9%;max-width:45%}.hero-copy h2{font-size:27px}.hero-copy .eyebrow{font-size:8px;letter-spacing:.05em}.hero-copy>p:last-child{font-size:11px}.hero-actions{right:5%;bottom:10%;max-width:43%}.hero-actions .button{font-size:11px;padding:16px;gap:10px}.hero-actions p{font-size:9px}.scroll-cue{bottom:3%;left:6%;font-size:10px}.story-words{top:18%;left:5%;font-size:14vw}.impact{top:60%;font-size:16vw}.world{height:auto}.city-image{object-position:47% 50%}.city-title{top:6%;left:6%}.city-title h2{font-size:14px}.city-note{bottom:6%;right:6%}.city-note p{font-size:16px}.friends{min-height:0;padding:60px 5% 50px}.friend-title h2{font-size:15vw}.friend-title .eyebrow{font-size:9px}.friend-ribbon{top:35%;font-size:26px}.friend-art{margin:0 -14% -5%;height:105vw}.friend-copy{margin-top:0;max-width:100%}.friend-copy p{font-size:16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.opening{height:100svh}.story-words{display:none}.world{height:100svh}.friend-art{transform:none}}
@media(min-width:701px){.story-words{font-size:clamp(60px,8.8vw,150px);top:24%}}

@media(max-width:700px){.city-frame{height:125vw;min-height:0;max-height:600px;position:relative}.city-image{object-position:38% 50%;transform:scale(1.015)}.story-words{top:14%;font-size:12vw}}

.model-ready .poster{visibility:hidden}

@media(max-width:700px){}


.footer-cat{display:block;pointer-events:none}

/* The poster moves immediately; the 3D scene continues the same energy. */
.masthead>.hero-word{font-size:1em;color:inherit;padding:0;vertical-align:baseline;letter-spacing:inherit;animation:hero-word-in .8s cubic-bezier(.2,1.3,.3,1) both}
.masthead>.hero-punctuation{animation:hero-punctuation-in .75s .15s cubic-bezier(.2,1.5,.3,1) both;transform-origin:50% 85%}
.poster img{animation:poster-play 3.4s ease-in-out infinite}
.model-ready .renderer{animation:renderer-enter .7s cubic-bezier(.2,1.2,.3,1) both}
.hero-copy>p:last-child{font-size:15px}.hero-actions p{font-size:13px}
@keyframes hero-word-in{from{opacity:0;transform:translateY(55px) rotate(-5deg)}to{opacity:1;transform:none}}
@keyframes hero-punctuation-in{0%{opacity:0;transform:scale(.4) rotate(-15deg)}65%{opacity:1;transform:scale(1.16) rotate(4deg)}100%{transform:none}}
@keyframes poster-play{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-24px) rotate(4deg)}}
@keyframes renderer-enter{from{opacity:1;transform:translateY(42px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:700px){.hero-copy .eyebrow{font-size:10px}.hero-copy>p:last-child{font-size:13px}.hero-actions p{font-size:12px}.hero-actions .button{font-size:12px}.scroll-cue{font-size:12px}}

/* Separate wrappers keep scroll, entrance and ambient transforms independent. */
.motion-section:not(.is-active) *,body.motion-paused .motion-section *{animation-play-state:paused!important}
.model-ready .poster img{animation-play-state:paused!important}
.reaction-burst{position:absolute;left:52%;top:46%;width:0;height:0;z-index:8;pointer-events:none}
.reaction-burst span{position:absolute;display:block;color:#e93733;font-family:Display;font-size:44px;line-height:1;opacity:0;text-shadow:1px 2px #151518}
.reaction-burst span:nth-child(even){color:#ffd126}
.renderer:focus-visible{outline:3px dashed #e93733;outline-offset:-8px}
.world{height:calc(min(100svh,78vw) + 50svh)}
.city-frame{height:min(100svh,78vw);min-height:0;isolation:isolate;--mx:0;--my:0}
.city-camera{position:absolute;inset:-2%;transform:translate3d(calc(var(--mx)*-16px),calc(var(--my)*-10px),0);transition:transform .5s ease-out}
.city-orbit{position:absolute;inset:0;animation:city-drift 11s ease-in-out infinite}
.city-image{transform:scale(calc(1.075 - var(--p)*.04)) translateY(calc(15px - var(--p)*30px))}
.city-sky{position:absolute;inset:0 0 43%;overflow:hidden;pointer-events:none}
.beam{position:absolute;left:8%;bottom:-74%;width:53%;height:160%;transform-origin:50% 100%;background:linear-gradient(0deg,#e6efff00,#d8e8ff32);clip-path:polygon(48% 100%,2% 0,98% 0);animation:searchlight 8s ease-in-out infinite alternate}
.beam-two{left:40%;bottom:-84%;animation-duration:11s;animation-delay:-5s;opacity:.65}
.beam-three{left:59%;bottom:-80%;width:40%;animation-duration:9s;animation-delay:-3s;opacity:.6}
.meteor{position:absolute;width:140px;height:2px;left:75%;top:14%;background:linear-gradient(90deg,transparent,#dceeff);border-radius:50%;animation:meteor 8s linear infinite}
.sky-sparks i{position:absolute;left:28%;top:76%;width:3px;height:3px;background:#ffd126;border-radius:50%;animation:sky-spark 3.6s ease-out infinite}
.sky-sparks i:nth-child(2){left:42%;top:84%;animation-delay:-1s}.sky-sparks i:nth-child(3){left:60%;top:66%;animation-delay:-2.4s}.sky-sparks i:nth-child(4){left:75%;top:85%;animation-delay:-1.8s}.sky-sparks i:nth-child(5){left:88%;top:70%;animation-delay:-.6s}.sky-sparks i:nth-child(6){left:14%;top:57%;animation-delay:-2.8s}
.city-flash{position:absolute;inset:0;opacity:0;background:#fff3c4;pointer-events:none;z-index:3}
.city-shade{pointer-events:none;background:linear-gradient(180deg,#06071466,transparent 43%,#08090aa8)}
.scene-action{position:absolute;top:7%;right:4%;z-index:4;display:flex;align-items:center;gap:14px;border:1px solid #ffffff55;border-radius:50px;padding:12px 18px;background:#10131cab;color:#fff;font-size:14px;transition:background .2s,transform .2s}
.scene-action:hover,.city-frame.is-reacting .scene-action{background:#ffd126;color:#151518;transform:rotate(-2deg)}
.city-frame.is-reacting .beam{animation-duration:1.2s}
.city-note .text-link{font-size:14px}
.world.is-seen .city-title{animation:scene-title-in .7s ease-out both}
.friend-line{display:block;transform-origin:0 100%}.friend-title h2 .friend-line:first-child{color:#151518}
.friends.is-seen .friend-line{animation:friend-line-in .85s cubic-bezier(.2,1.15,.3,1) both}
.friends.is-seen .friend-line:last-child{animation-delay:.12s}
.friend-art{transform:translateY(calc(55px - var(--p)*85px)) rotate(calc(4deg - var(--p)*7deg))}
.friend-toy{display:block;position:relative;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.friend-float{width:100%;height:100%;transform-origin:50% 82%;animation:duo-sway 3.6s ease-in-out infinite}
.friend-toy img{display:block}
.friend-toy:hover .friend-float{animation-duration:2.3s}
.friend-disc{background:conic-gradient(from 0deg,#e3ddcc 0deg 55deg,#e937331c 55deg 70deg,#e3ddcc 70deg 180deg,#ffd12699 180deg 202deg,#e3ddcc 202deg 360deg);border:2px solid #15151818;animation:disc-spin 22s linear infinite}
.friend-disc::after{content:"";position:absolute;inset:7%;border:2px dashed #15151820;border-radius:50%}
.friend-ribbon{width:145%;padding:17px 0;overflow:hidden}
.ribbon-track{display:flex;width:max-content;animation:ribbon-run 16s linear infinite}
.ribbon-track span{flex-shrink:0;padding-right:24px}
.friend-copy .play{background:#e93733;color:#fff;margin:0 12px 16px 0}
.friend-copy>.button.dark{font-size:13px;margin-bottom:16px}
.friend-art .reaction-burst{left:50%;top:48%}
.footer-character{position:relative;display:block;width:100%;max-width:300px;justify-self:end;padding:0;border:0;background:none;transform:translateY(calc(20px - var(--p)*30px)) rotate(calc(3deg - var(--p)*5deg));cursor:pointer}
.footer-float{width:100%;animation:footer-bob 3.2s ease-in-out infinite;transition:scale .3s}
.footer-cat{max-width:none;pointer-events:none}
.is-perked .footer-float{scale:1.05}
.footer-character .reaction-burst{left:50%;top:40%}
@keyframes city-drift{0%,100%{transform:translate3d(-7px,4px,0)}50%{transform:translate3d(7px,-4px,0)}}
@keyframes searchlight{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
@keyframes meteor{0%,72%{opacity:0;transform:rotate(-35deg) translateX(0)}75%{opacity:.8}90%,100%{opacity:0;transform:rotate(-35deg) translateX(-440px)}}
@keyframes sky-spark{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:.7}100%{opacity:0;transform:translate(-12px,-42px) scale(1)}}
@keyframes scene-title-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(calc(var(--p)*-20px))}}
@keyframes friend-line-in{from{opacity:0;transform:translateY(35px) rotate(3deg)}to{opacity:1;transform:none}}
@keyframes duo-sway{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(2deg)}}
@keyframes disc-spin{to{transform:rotate(360deg)}}
@keyframes ribbon-run{to{transform:translateX(-50%)}}
@keyframes footer-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@media(max-width:700px){
 .world{height:auto}.city-frame{height:105vw;max-height:640px;position:relative}
 .city-image{object-position:37% 50%;transform:scale(calc(1.04 - var(--p)*.015)) translateY(calc(4px - var(--p)*8px))}
 .scene-action{right:5%;top:5%;font-size:12px;padding:11px 13px;gap:8px}.city-title{top:7%}
 .city-title h2{font-size:13px;letter-spacing:.03em}.city-note{bottom:6%}.city-note .text-link{font-size:13px}
 .reaction-burst span{font-size:30px}.friend-copy .button{padding:17px 20px}
 .footer-character{max-width:230px}.friend-art{transform:translateY(calc(20px - var(--p)*35px)) rotate(calc(3deg - var(--p)*5deg))}
 .friend-title .eyebrow{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .world{height:auto}.city-frame{position:relative}.city-camera,.city-orbit,.city-image,.friend-art,.friend-float,.footer-character,.footer-float,.ribbon-track,.city-title{transform:none!important}
 .beam,.meteor,.sky-sparks,.reaction-burst{display:none}.footer-float{scale:1}
 .scene-action:hover,.city-frame.is-reacting .scene-action{transform:none}
}

/* Clip scene art without creating a scrollable inner viewport. */
.studio,.city-frame,.friends{overflow:clip}
.city-sky{bottom:59%}
.city-sky{mask-image:linear-gradient(180deg,#000 0%,#000 55%,transparent 100%)}
.beam{clip-path:none;background:conic-gradient(from -12deg at 50% 100%,transparent 0deg,#d8e8ff08 3deg,#d8e8ff24 11deg,#d8e8ff08 21deg,transparent 24deg,transparent 360deg);mask-image:linear-gradient(0deg,transparent,#000 35%,#000 80%,transparent);opacity:.75}

/* Reversible scroll choreography: every scene has its own travel and landing. */
.studio{--story:0;--landing:0}
.story-words{opacity:var(--story);transform:translate3d(calc((1 - var(--story))*-70px),calc((1 - var(--story))*65px),0) rotate(calc((1 - var(--story))*-5deg));font-size:clamp(50px,7.2vw,122px);top:22%;pointer-events:none}
.scroll-cue{opacity:calc(1 - var(--p)*2)}
.hero-actions[inert],.scroll-cue[inert]{pointer-events:none}
.poster{transform:translate3d(calc(var(--p)*18vw),calc(sin(var(--p)*180deg)*-50px),0) rotate(calc(var(--p)*20deg))}
.world{height:calc(min(100svh,78vw) + 100svh)}
.city-frame{--push:0;--streak:0}
.city-image{transform-origin:40% 62%;transform:translate3d(calc(var(--p)*-2%),calc(var(--push)*-1%),0) scale(calc(1.03 + var(--push)*.09))}
.city-sky{transform:translate3d(0,calc(var(--p)*-35px),0)}
.beam{animation:none;transform:rotate(calc(-28deg + var(--p)*68deg));opacity:calc(.65 + var(--push)*.35)}
.beam-two{transform:rotate(calc(30deg - var(--p)*72deg))}.beam-three{transform:rotate(calc(-8deg + var(--p)*44deg))}
.meteor{animation:none;opacity:calc(var(--streak)*.9);transform:rotate(-35deg) translateX(calc(var(--p)*-70vw))}
.world.is-seen .city-title{animation:none;transform:translate3d(calc(var(--p)*32px),calc(var(--push)*-12px),0)}
.city-title h2{font-family:Display;font-size:clamp(26px,3.8vw,58px);letter-spacing:-.045em;line-height:1}
.friends{height:200svh;min-height:0;padding:0;overflow:clip;--arrive:1;--settle:1;--hop:0;--turn:0;--squash:0}
.friend-stage{height:100svh;min-height:620px;position:sticky;top:0;padding:0 4%;overflow:clip;isolation:isolate}
.friend-title{position:absolute;top:9%;left:4%;z-index:4}
.friend-title h2{font-size:clamp(62px,8.6vw,140px);margin-top:20px;transform:none}
.friends.is-seen .friend-line{animation:none}
.friend-line:first-child{transform:translate3d(calc((1 - var(--arrive))*-22vw + (1 - var(--settle))*-8vw),0,0) rotate(calc((1 - var(--settle))*-6deg))}
.friend-line:last-child{transform:translate3d(calc((1 - var(--arrive))*24vw + (1 - var(--settle))*12vw),0,0) rotate(calc((1 - var(--settle))*5deg))}
.friend-art{position:absolute;top:13%;right:-1%;width:65%;height:82%;max-height:none;margin:0;transform-origin:50% 80%;transform:translate3d(calc((1 - var(--settle))*24vw),calc((1 - var(--arrive))*90px + (1 - var(--settle))*55px - var(--hop)*95px),0) rotate(calc((1 - var(--settle))*12deg + var(--turn)*7deg)) scale(calc(.86 + var(--settle)*.14));z-index:3}
.friend-toy{transform:scale(calc(1 + var(--squash)*.5),calc(1 - var(--squash)))}
.friend-disc{inset:13% 4% 4%;animation:none;transform:rotate(calc(var(--p)*210deg)) scale(calc(.8 + var(--settle)*.2))}
.friend-ribbon{top:49%;transform:rotate(calc(-13deg + var(--p)*14deg)) translate3d(calc(var(--p)*-25vw),0,0);width:175%;z-index:1;mask-image:linear-gradient(90deg,transparent 0%,transparent 29%,#000 41%)}
.ribbon-track{animation:none;transform:translate3d(calc(var(--p)*-360px),0,0)}
.friend-copy{position:absolute;bottom:7%;left:4%;margin:0;max-width:38%;z-index:5;transform:translate3d(0,calc((1 - var(--arrive))*45px),0)}
.friend-copy p{font-size:18px;margin-bottom:20px}
footer{overflow:clip;--p:1}
.footer-character{transform:translate3d(calc((1 - var(--p))*60px),calc((1 - var(--p))*95px - sin(var(--p)*180deg)*22px),0) rotate(calc((1 - var(--p))*18deg)) scale(calc(.72 + var(--p)*.28))}
@media(max-width:700px){
 .story-words{font-size:12vw;top:6%}
 .poster{transform:translate3d(calc(var(--p)*8vw),calc(sin(var(--p)*180deg)*-35px),0) rotate(calc(var(--p)*8deg))}
 .world{height:auto}.city-frame{position:relative;height:105vw;max-height:640px}
 .city-image{transform:translate3d(calc(var(--p)*-1%),0,0) scale(calc(1.02 + var(--push)*.04));transform-origin:37% 65%}
 .city-title h2{font-size:24px}.city-title{top:6%}
 .city-note{bottom:5%;left:5%;right:auto;text-align:left}.scene-action{top:auto;bottom:4%;right:5%}
 .friends{height:195svh}.friend-stage{min-height:650px}
 .friend-title{top:6%;left:5%}.friend-title h2{font-size:15vw;margin-top:14px}
 .friend-art{top:26%;right:-4%;width:108%;height:53%;transform:translate3d(calc((1 - var(--settle))*18vw),calc((1 - var(--arrive))*50px + (1 - var(--settle))*25px - var(--hop)*40px),0) rotate(calc((1 - var(--settle))*8deg + var(--turn)*5deg)) scale(calc(.9 + var(--settle)*.1))}
 .friend-ribbon{top:47%;font-size:28px;mask-image:none}
 .friend-copy{left:5%;bottom:4%;max-width:90%;width:90%}.friend-copy p{font-size:15px;line-height:1.5;margin-bottom:12px}
 .friend-copy .button{font-size:12px;padding:14px 16px;margin-bottom:8px;gap:12px}
 .footer-character{transform:translate3d(0,calc((1 - var(--p))*65px),0) rotate(calc((1 - var(--p))*15deg)) scale(calc(.8 + var(--p)*.2))}
}
@media(prefers-reduced-motion:reduce){
 .opening{height:100svh}.studio{position:relative}
 .world,.friends{height:auto}.friend-stage{position:relative}
 .friend-line,.friend-title h2,.friend-disc,.friend-ribbon,.friend-toy,.friend-copy{transform:none!important}
 .friend-art,.poster{transform:none!important}.city-sky{display:none}.scroll-cue{opacity:1}
}

/* Character films and shared skeletal models replace the flat picture loops. */
.film{position:absolute;inset:0;overflow:hidden}
.film video,.film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.film video{display:block;transform:translateZ(0)}
.film-poster{opacity:1;transition:opacity .3s;pointer-events:none}
.film-ready .film-poster{opacity:0}
.city-camera{inset:0;transform:none;transition:none}
.city-orbit{inset:0;animation:none;transform:none}
.city-image,.city-video{transform:none;filter:none;object-position:42% 50%}
.city-sky{display:none}
.city-shade{background:linear-gradient(180deg,#06071455,transparent 26%,transparent 70%,#08090a77)}
.world.is-seen .city-title{transform:translateY(calc(var(--push)*-10px))}
.city-title{z-index:3}.city-note{z-index:3;left:4%;right:auto;text-align:left;bottom:6%}
.scene-action{top:auto;bottom:5%;right:4%}
.friends,.friend-stage{background:#ffdc29}
.friend-cinema{z-index:1}
.friend-title{z-index:4;top:8%}.friend-title h2{font-size:clamp(62px,6.8vw,112px);margin-top:0}
.friend-art{inset:5% 0 8% 39%;width:auto;height:auto;transform:none!important;z-index:2}
.friend-toy{transform:none!important;cursor:pointer}
.friend-copy{max-width:33%;bottom:7%}
.friend-copy p{font-size:18px;text-shadow:0 1px 5px #ffdc29}
.friend-copy .play{margin-right:8px}
.friend-film-poster{filter:none}
.footer-character{height:340px;max-width:320px}
.footer-float{height:100%;position:relative;animation:none;transition:none}
.footer-cat{height:100%;object-fit:contain;transition:opacity .2s}
.footer-renderer{position:absolute;inset:0;opacity:0;transition:opacity .2s;pointer-events:none}
.footer-renderer canvas{display:block;width:100%;height:100%}
.footer-model-ready .footer-renderer{opacity:1}
.footer-model-ready .footer-cat{opacity:0;visibility:hidden}
@media(max-width:700px){
 .city-video,.city-image{object-position:42% 50%;transform:none}
 .city-title h2{font-size:24px}.city-note{left:5%;bottom:5%}.scene-action{bottom:4%;right:5%}
 .friend-title{top:6%}.friend-title h2{font-size:15vw}
 .friend-cinema{inset:auto;left:-30%;top:27%;width:142%;height:auto;aspect-ratio:16/9;mask-image:linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent)}
 .friend-cinema video,.friend-cinema .film-poster{object-fit:contain}
 .friend-art{inset:27% 0 auto 0;height:45%;width:100%}
 .friend-copy{max-width:90%;bottom:4%}.friend-copy p{font-size:15px}
 .footer-character{height:270px;max-width:320px;justify-self:center;margin-top:-10px}
}
@media(prefers-reduced-motion:reduce){.film-ready .film-poster{opacity:1}.film video{visibility:hidden}.friend-cinema{mask-image:none}}

/* The final scene is a character stage, with one community invitation. */
footer.closing{padding:0;background:#111315;color:#eee}
.closing-stage{position:relative;height:100svh;min-height:700px;overflow:clip;isolation:isolate}
.closing-glow{position:absolute;inset:-8%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 58%,#ffd1261a,transparent 53%);animation:closing-light 8s ease-in-out infinite}
.closing-title{position:absolute;inset:0;z-index:1;margin:0;font-family:Display;line-height:1;letter-spacing:-.06em;pointer-events:none}
.closing-lead{position:absolute;top:7%;left:0;right:0;text-align:center;font-size:clamp(52px,7.5vw,104px);transform:translateY(calc((1 - var(--p))*35px))}
.closing-words{position:absolute;top:38%;left:4%;right:4%;display:flex;justify-content:space-between;gap:18%;font-size:clamp(94px,17vw,246px);line-height:1}
.closing-words>span:first-child{transform:translateX(calc((1 - var(--p))*-60px))}
.closing-words>span:last-child{color:#ffd126;transform:translateX(calc((1 - var(--p))*60px))}
.closing .footer-character{position:absolute;top:16%;left:50%;width:min(56vw,760px);height:70%;max-width:none;max-height:700px;margin:0;padding:0;border:0;background:transparent;z-index:3;transform:translateX(-50%) translateY(calc((1 - var(--p))*70px));cursor:pointer}
.closing .footer-float{width:100%;height:100%;animation:none}
.closing .footer-cat{width:100%;max-width:none;height:100%;object-fit:contain;filter:drop-shadow(0 16px 14px #0005)}
.closing .footer-character .reaction-burst{left:50%;top:30%}
.closing-actions{position:absolute;left:0;right:0;bottom:6%;display:flex;justify-content:center;z-index:5;transform:translateY(calc((1 - var(--p))*24px))}
.closing-actions .button{min-height:62px;padding:20px 30px;font-size:16px;gap:36px;border-radius:9px;box-shadow:0 6px 0 #9d7610;transition:transform .2s,box-shadow .2s,background .2s}
.closing-actions .button:hover{background:#ffe36d;transform:translateY(-3px);box-shadow:0 9px 0 #9d7610}
.closing-actions .button:active{transform:translateY(4px);box-shadow:0 2px 0 #9d7610}
.closing-actions .button span{font-size:23px}
@keyframes closing-light{50%{opacity:.65;transform:scale(1.08)}}
@media(max-width:700px){
 .closing-stage{min-height:730px}
 .closing-lead{top:6%;font-size:clamp(34px,10vw,52px)}
 .closing-words{top:13%;left:5%;right:5%;justify-content:center;gap:12px;font-size:clamp(48px,16.5vw,74px);letter-spacing:-.055em;white-space:nowrap}
 .closing .footer-character{top:23%;width:min(112vw,560px);height:60%;max-height:none}
 .closing-actions{bottom:5%}
 .closing-actions .button{min-height:60px;font-size:16px;padding:18px 26px;gap:28px}
}
@media(prefers-reduced-motion:reduce){
 .closing .footer-character{transform:translateX(-50%)!important}
 .closing-lead,.closing-words>span,.closing-actions{transform:none}
 .closing-glow{animation:none}
}

/* Reveal the completed opening rather than the temporary poster composition. */
html[data-startup] .model-ready .renderer{animation:none}
.startup-word i{display:inline-block;font-style:normal;transform-origin:50% 85%;animation:startup-bounce 1.1s ease-in-out infinite}
.startup-word i:nth-child(2){animation-delay:.12s}.startup-word i:nth-child(3){animation-delay:.24s}
@keyframes startup-bounce{0%,65%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-12px) rotate(7deg)}}
@media(prefers-reduced-motion:reduce){.startup-word i{animation:none}.startup-fill{transition:none}}