/* Only a gesture in progress moves; the illustrations rest between interactions. */
.motion-figure{display:block;position:relative;border:0;padding:0;background:transparent;color:inherit;isolation:isolate;line-height:0;overflow:visible;user-select:none}
.hero-photo .motion-lady{width:44%;max-width:330px;pointer-events:auto;aspect-ratio:1149/1369;filter:drop-shadow(0 8px 8px #12120f1a)}
.lady-portrait,.monkey-actor{position:relative;display:block;width:100%;height:100%}
.portrait-canvas{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.lady-eye{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.motion-figure button{appearance:none;padding:0;border:0;background:transparent;box-shadow:none;cursor:pointer;color:inherit;line-height:0;touch-action:manipulation;pointer-events:auto}
.motion-figure button:focus-visible{outline:2px solid var(--olive);outline-offset:5px;border-radius:50%;background:#c7e4dd33}
.motion-hotspot{position:absolute;z-index:3;min-width:24px;min-height:24px}
.zone-arms,.zone-monkey{z-index:1}.zone-eye,.zone-smile{z-index:10}
.living-butterfly{position:absolute;width:23%;aspect-ratio:3/2;transform:translate(-50%,-50%);z-index:9;min-width:36px}
.butterfly-wings{position:relative;display:block;width:100%;height:100%;perspective:250px;transform-style:preserve-3d}
.butterfly-wings img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transform-origin:50% 50%}
.wing-left{clip-path:polygon(0 0,50.5% 0,50.5% 100%,0 100%)}.wing-right{clip-path:polygon(49.5% 0,100% 0,100% 100%,49.5% 100%)}
.butterfly-thorax{position:absolute;left:49.3%;top:41%;width:1.6%;height:36%;border-radius:50%;background:#28291f;pointer-events:none}
.insect{position:absolute;width:8%;min-width:26px;aspect-ratio:64/88;transform:translate(-50%,-50%);z-index:8}
.insect-ear{width:8.8%;min-width:26px}
.beetle-art{width:100%;height:100%;overflow:visible;pointer-events:none}
.beetle-leg{transform-box:view-box;transform-origin:32px 43px}
.beetle-shell-left,.beetle-shell-right,.membrane-left,.membrane-right{transform-box:view-box;transform-origin:32px 22px}
.motion-dock{position:fixed;left:18px;bottom:18px;z-index:48;max-width:calc(100vw - 36px);display:flex;align-items:center;gap:8px;padding:12px 17px;border:1px solid var(--olive);border-radius:30px;background:var(--paper);color:var(--ink);box-shadow:0 4px 18px #12120f18;min-height:46px;font-size:15px;font-weight:500;line-height:1.3}
.motion-dock:hover{background:var(--mint)}.motion-dock-icon{font-size:14px;min-width:16px;text-align:center}
.gathering .motion-monkey{bottom:8px;aspect-ratio:1173/1341;pointer-events:auto;overflow:visible}
.monkey-table{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.monkey-actor{transform-origin:52% 81%;z-index:2}
.monkey-body{position:absolute;left:7%;top:.5%;width:86%;height:86%;object-fit:fill;pointer-events:none}
.monkey-jump-frames{position:absolute;left:14%;bottom:12%;width:91%;height:auto;pointer-events:none;opacity:0}
.monkey-key{position:absolute;left:20%;top:3%;width:20%;height:48%;transform-origin:50% 94%;z-index:5}
.key-image{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;filter:drop-shadow(1px 2px 1px #12120f30)}
.monkey-shadow{position:absolute;left:35%;top:78%;width:39%;height:4%;border-radius:50%;background:#16110b;opacity:.14;filter:blur(4px);pointer-events:none}
.monkey-apple{position:absolute;left:7.34%;top:63.25%;width:19.22%;height:21.86%;transform-origin:50% 50%;z-index:4}
.monkey-apple svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.monkey-butterfly{width:19%;min-width:36px}
.motion-figure{pointer-events:auto}
.motion-lady{aspect-ratio:1149/1369}
.motion-monkey{aspect-ratio:1173/1341}
.illustrated-heading .motion-figure.heading-art{height:auto;max-height:none;width:100%;max-width:235px;justify-self:center}
.motion-figure.intro-signature{width:100%;padding-right:0}
.vignette-base{display:block;width:100%;height:100%;pointer-events:none;object-fit:contain}
.butterfly-wings>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform-origin:50% 50%;overflow:visible}
.vignette-butterfly{width:22%;min-width:36px}
.buffon-eye{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.motion-figure button:disabled{cursor:default}
.motion-figure button:focus-visible{z-index:12}
@media(max-width:900px) and (min-width:641px){.gathering{padding-left:38%}}
@media(max-width:640px){
 .illustrated-heading .motion-figure.heading-art{width:200px;max-width:65vw;justify-self:end;margin-top:8px}
 .hero-photo .motion-lady{width:48%;max-width:270px;right:-7%;bottom:-10px}
 .zone-eye{top:20%!important;height:9%!important}
 .motion-dock{bottom:calc(89px + env(safe-area-inset-bottom));left:12px;padding:10px 14px;font-size:14px;min-height:44px;max-width:calc(100vw - 24px)}
 .gathering .motion-monkey{position:relative;left:auto;bottom:auto;width:285px;max-width:91%;margin:48px auto -48px}
}

/* The reserved illustration box also contains departing creatures. */
.motion-ibis,.motion-buffon,.motion-sommeil,.motion-baleine{overflow:hidden}
.living-butterfly[data-state="absent"]{visibility:hidden!important;pointer-events:none!important}
.ibis-bird{position:absolute;left:29%;top:28%;width:51%;height:auto;transform-origin:52% 90%;pointer-events:none}
.zone-character{z-index:1}.zone-buffon-eye{z-index:5}
.zone-swimmer-0,.zone-swimmer-1,.zone-swimmer-2{z-index:4}
.motion-figure.pool-art{height:auto;aspect-ratio:920/456}

.motion-figure.pool-art{width:min(320px,100%)}
@media(max-width:640px){.motion-figure.pool-art{width:min(280px,100%)}}

@media(max-width:1200px){
 #navigation .motion-dock{position:static;left:auto;bottom:auto;z-index:auto;display:flex;width:100%;max-width:none;margin:12px 0 0;padding:15px 0 3px;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent;min-height:44px;font-size:16px;text-align:left}
 #navigation .motion-dock:hover{color:var(--olive)}
}

/* v5: separate high-definition actors, continuous movement and reserved space. */
.monkey-body{left:14%;top:0;width:81%;height:83%;object-fit:contain}.monkey-actor{transform-origin:53% 80%}
.motion-figure.pool-art{width:min(520px,100%);aspect-ratio:640/360;overflow:hidden}.whale-actor{position:absolute;left:5%;top:43%;width:90%;height:auto;aspect-ratio:2120/742;transform-origin:45% 50%;pointer-events:none}.whale-actor canvas{width:100%;height:100%;overflow:visible}
.pool-water{position:absolute;left:9%;top:74%;width:79%;height:20%;background:repeating-linear-gradient(166deg,#24bbc3aa 0 10px,#98e3e288 12px 14px,#24bbc3aa 16px 26px);transform:perspective(240px) rotateX(35deg);border-radius:45% 20% 32% 12%;opacity:.68}.pool-water i{position:absolute;left:14%;top:30%;width:65%;height:35%;border:1px solid #fff8;border-radius:50%}.pool-water i:nth-child(2){transform:translate(15%,-40%)}.pool-water i:nth-child(3){transform:translate(-10%,65%)}
.air-swimmer{position:absolute!important;width:28%;aspect-ratio:1536/341;transform:translate(-50%,-50%);z-index:5;min-height:28px}.air-swimmer svg{display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}.whale-jet{position:absolute;left:25%;top:43%;opacity:0;pointer-events:none}.whale-jet i{position:absolute;width:5px;height:11px;border-radius:60%;background:#3ab4c0}
.buffon-actor{position:absolute;inset:3% 3% 0;width:94%;height:97%;transform-origin:44% 87%}.buffon-parrot{position:absolute!important;left:3%;top:12%;width:18%;height:45%;z-index:4;transform-origin:50% 90%}.buffon-parrot svg{display:block;width:100%;height:100%;pointer-events:none}
@media(max-width:640px){.motion-figure.pool-art{width:min(410px,100%)}.air-swimmer{min-height:24px}}