/* Tactile cloud wings and little stage props. All meaningful artwork stays visible. */
.cloud-theatre{position:absolute;inset:0;pointer-events:none;user-select:none;overflow:hidden;z-index:1;border-radius:inherit}
.cloud-theatre *{pointer-events:none!important}
.cloud-theatre img{display:block;width:100%;height:auto;max-width:none;object-fit:contain}
.cloud-theatre [hidden]{display:none!important}
.garden-scene.cloud-theatre-ready>picture{display:block;width:100%;height:100%;transform-origin:50% 50%}
.garden-scene.cloud-theatre-ready>.world-hero-drawing{display:none}
.garden-scene.cloud-theatre-ready .garden-sign{z-index:3;box-shadow:0 3px 0 #d8c1d046,0 8px 20px #72567a16}
.cloud-theatre-arch{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:50% 100%}
.cloud-theatre-arch path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.theatre-arch-shadow{stroke:#8c668747;stroke-width:8}
.theatre-arch-light{stroke:#fff8e6;stroke-width:7}
.theatre-arch-stitch{stroke:#e7c48d;stroke-width:1.3;stroke-dasharray:3 6}
.theatre-cloud-plane{position:absolute;width:52%;transform-origin:50% 80%}
.theatre-cloud-left{left:-29%;bottom:-33%;transform:translateX(-35%) rotate(-8deg)}
.theatre-cloud-right{right:-29%;bottom:-39%;transform:translateX(35%) rotate(13deg)}
.theatre-cloud-right img{transform:scaleX(-1)}
.theatre-cloud-high{width:31%;left:-20%;top:-22%;transform:translate(-34%,-18%) rotate(150deg);opacity:.84}
.theatre-star-thread{position:absolute;right:9.9%;top:-4%;height:20%;width:1px;background:linear-gradient(#b8937b,#efdcac);transform:rotate(-7deg);transform-origin:top}
.theatre-hanging-star{position:absolute;right:4%;top:9%;width:12%;max-width:86px;transform:rotate(-8deg);transform-origin:50% -100%}
.theatre-foreground{position:absolute;left:0;bottom:-1px;width:100%;height:13%;overflow:visible}

/* The whole edge moves a sixth of the image width. The centre remains open. */
html.world-motion-ready[data-motion=on] .garden-scene.cloud-theatre-ready>picture{transform:translateY(calc((1 - var(--world-p)) * 12px)) scale(calc(1 + (1 - var(--world-p)) * .07))}
html.world-motion-ready[data-motion=on] .cloud-theatre--hero .theatre-cloud-left{transform:translateX(calc(var(--world-p) * -35%)) rotate(calc(-1deg - var(--world-p) * 7deg))}
html.world-motion-ready[data-motion=on] .cloud-theatre--hero .theatre-cloud-right{transform:translateX(calc(var(--world-p) * 35%)) rotate(calc(4deg + var(--world-p) * 9deg))}
html.world-motion-ready[data-motion=on] .cloud-theatre--hero .theatre-cloud-high{transform:translate(calc(var(--world-p) * -34%),calc(var(--world-p) * -18%)) rotate(calc(140deg + var(--world-p) * 10deg))}
html.world-motion-ready[data-motion=on] .cloud-theatre-arch{transform:perspective(900px) translateY(calc((1 - var(--world-p)) * 18px)) rotateX(calc((1 - var(--world-p)) * 17deg));opacity:calc(.6 + var(--world-p) * .4)}
html.world-motion-ready[data-motion=on] .theatre-hanging-star{transform:translateY(calc((1 - var(--world-p)) * -35px)) rotate(calc(12deg - var(--world-p) * 20deg))}
html.world-motion-ready[data-motion=on] .theatre-star-thread{transform:rotate(calc(8deg - var(--world-p) * 15deg))}
html.world-motion-ready[data-motion=on] .theatre-foreground{transform:translateY(calc((1 - var(--world-p)) * 12px))}
html[data-motion=on] .cloud-answer-flourish .theatre-cloud-left img{animation:theatre-cloud-flap-left 640ms cubic-bezier(.2,.75,.25,1) both}
html[data-motion=on] .cloud-answer-flourish .theatre-cloud-right img{animation:theatre-cloud-flap-right 680ms cubic-bezier(.2,.75,.25,1) both}
html[data-motion=on] .cloud-answer-flourish .theatre-hanging-star img{animation:theatre-star-nod 660ms ease-out both}
@keyframes theatre-cloud-flap-left{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-16px) rotate(5deg)}68%{transform:translateY(3px) rotate(-1deg)}}
@keyframes theatre-cloud-flap-right{0%,100%{transform:scaleX(-1) translateY(0) rotate(0)}40%{transform:scaleX(-1) translateY(-12px) rotate(4deg)}68%{transform:scaleX(-1) translateY(2px) rotate(-1deg)}}
@keyframes theatre-star-nod{0%,100%{transform:rotate(0)}32%{transform:rotate(12deg)}67%{transform:rotate(-5deg)}}

/* Topic scenes change around the still conversation; only authored props arrive. */
.world-visual.cloud-theatre-ready{--theatre-tint:#a2b5a4;--theatre-light:#f4efd5}
.world-visual[data-cloud-theme=space]{--theatre-tint:#a38fac;--theatre-light:#eee1ca}
.world-visual[data-cloud-theme=music]{--theatre-tint:#c390ad;--theatre-light:#f4e0b4}
.world-visual[data-cloud-theme=building]{--theatre-tint:#afa57e;--theatre-light:#f4e6b9}
.world-visual[data-cloud-theme=stories]{--theatre-tint:#c89eab;--theatre-light:#fff0d1}
.cloud-theatre--topics{z-index:0;border-radius:inherit;box-shadow:inset 0 0 0 6px var(--theatre-light),inset 0 0 0 8px var(--theatre-tint)}
.cloud-theatre--topics:before{content:'';position:absolute;inset:13px;border:1px solid var(--theatre-light);border-radius:12px;opacity:.8}
.theatre-props{display:block;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}
.theatre-piece{transform-box:fill-box;transform-origin:50% 100%}
.world-visual.cloud-theatre-ready .wompy-reaction,.world-visual.cloud-theatre-ready .world-caption{z-index:2}
.world-visual.cloud-theatre-ready #workshop-notice{z-index:3}
.world-visual.cloud-theatre-ready #hat-fallback{z-index:4}
html[data-motion=on] .cloud-topic-arriving .theatre-props:not([hidden]) .theatre-piece{animation:theatre-prop-arrives 540ms cubic-bezier(.18,.8,.3,1) both}
html[data-motion=on] .cloud-topic-arriving .theatre-props:not([hidden]) .theatre-piece-right{animation-name:theatre-prop-from-right;animation-delay:45ms}
html[data-motion=on] .cloud-topic-arriving .theatre-props:not([hidden]) .theatre-piece-high{animation-name:theatre-prop-from-high;animation-delay:90ms}
html[data-motion=on] .cloud-topic-arriving .theatre-props:not([hidden]) .theatre-piece-low{animation-delay:125ms}
@keyframes theatre-prop-arrives{from{transform:translate(-36px,60px) rotate(-12deg) scale(.76);opacity:.15}70%{transform:translate(2px,-4px) rotate(1deg) scale(1.01);opacity:1}to{transform:translate(0,0) rotate(0) scale(1);opacity:1}}
@keyframes theatre-prop-from-right{from{transform:translate(52px,50px) rotate(14deg) scale(.78);opacity:.15}70%{transform:translate(-3px,-3px) rotate(-1deg) scale(1.01);opacity:1}to{transform:translate(0,0) rotate(0) scale(1);opacity:1}}
@keyframes theatre-prop-from-high{from{transform:translate(20px,-65px) rotate(22deg) scale(.8);opacity:.15}70%{transform:translate(-2px,3px) rotate(-2deg) scale(1.01);opacity:1}to{transform:translate(0,0) rotate(0) scale(1);opacity:1}}

@media(max-width:680px){
 .theatre-cloud-left{bottom:-44%;left:-29%;width:51%}
 .theatre-cloud-right{bottom:-50%;right:-30%;width:51%}
 .theatre-cloud-high{top:-29%;left:-20%;width:29%}
 .theatre-hanging-star{right:3%;top:10%;width:11%}
 .theatre-star-thread{right:8.4%;height:18%}
 .theatre-foreground{height:11%}
 .theatre-arch-light{stroke-width:4}
 .theatre-arch-shadow{stroke-width:5}
 .theatre-arch-stitch{stroke-width:.9;stroke-dasharray:2 5}
 html.world-motion-ready[data-motion=on] .garden-scene.cloud-theatre-ready>picture{transform:translateY(calc((1 - var(--world-p)) * 6px)) scale(calc(1 + (1 - var(--world-p)) * .06))}
 .cloud-theatre--topics{box-shadow:inset 0 0 0 4px var(--theatre-light),inset 0 0 0 5px var(--theatre-tint)}
 .cloud-theatre--topics:before{inset:9px;border-radius:8px}
}
html[data-motion=off] .cloud-theatre *,html[data-motion=off] .cloud-theatre:before{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){
 .cloud-theatre *,.cloud-theatre:before{animation:none!important;transition:none!important}
 .garden-scene.cloud-theatre-ready{--world-p:1!important}
}
@media print{.cloud-theatre{display:none}.garden-scene.cloud-theatre-ready>picture{transform:none!important}}