/* Character layers share one proportional world plane, even when the view crops. */
.zone-scene{--scene-height:clamp(210px,26vw,340px);height:var(--scene-height);isolation:isolate}
.zone-world{position:absolute;width:max(100%,calc(var(--scene-height)*2.78114));aspect-ratio:2300/827;left:50%;top:50%;transform:translate(-50%,-50%)}
.zone-world .zone-plate,.zone-world .nest-front{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill}
.scene-actor,.scene-koala,.scene-spider,.scene-gecko,.scene-chick,.scene-web{position:absolute;aspect-ratio:1;transform-origin:center;filter:drop-shadow(0 5px 5px #14251a50)}
.scene-actor{z-index:5;width:18%}
.zone-world :is(.scene-actor,.scene-koala,.scene-spider,.scene-gecko,.scene-chick,.scene-web)>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain}
.pose-idle{opacity:0}.pose-react{opacity:1}
.is-waiting .pose-idle{opacity:1}.is-waiting .pose-react{opacity:0}
.zone-number{z-index:8}
.zone-a .scene-actor{left:44%;top:30%}
.zone-b .scene-actor{left:45%;top:13%;transform:translate(22%,14%) rotate(220deg)}
.zone-c .scene-koala{width:40%;aspect-ratio:1600/1120;left:30%;top:20%;z-index:2}
.zone-c .scene-actor{left:38%;top:21%}
.zone-d .scene-web{width:48%;aspect-ratio:1400/1000;left:24%;top:2%;z-index:2;filter:none}
.zone-d .scene-spider{width:15%;left:57%;top:30%;z-index:4}
.zone-d .scene-actor{left:40%;top:6%}
.zone-e .scene-chick{width:20%;left:40%;top:27%;z-index:2;transform-origin:50% 70%}
.zone-world .nest-front{z-index:3;clip-path:polygon(32% 70%,63% 66%,66% 88%,30% 90%)}
.zone-e .scene-actor{width:17%;left:54%;top:12%;transform:translateY(-15%) rotate(20deg)}
.zone-f .scene-actor{width:24%;left:36%;top:27%}
.zone-f .scene-gecko{width:17%;left:58%;top:40%;z-index:4}
.zone-g .scene-actor{width:min(38%,400px);aspect-ratio:800/612;left:31%;top:20%}
.leaf-fleck{position:absolute;width:2.4%;opacity:0;z-index:4}
.fleck-1{left:36%;top:20%}.fleck-2{left:43%;top:38%}.fleck-3{left:56%;top:17%}.fleck-4{left:59%;top:45%}
.landing-dust{position:absolute;left:35%;top:50%;width:28%;opacity:0;z-index:3}

/* Default/no-JS view is complete. A's departure remains visible when motion is off. */
.zone-a.is-complete .scene-actor{transform:translateY(220%) rotate(32deg);opacity:0}
.is-playing .pose-idle{animation:idle-pose var(--duration) steps(1,end) both}
.is-playing .pose-react{animation:react-pose var(--duration) steps(1,end) both}
.zone-a{--duration:1.6s}.zone-b{--duration:1.4s}.zone-c{--duration:1.4s}.zone-d{--duration:1.6s}.zone-e{--duration:1.2s}.zone-f,.zone-g{--duration:1.6s}
.zone-a.is-waiting .scene-actor{transform:translateY(-20%)}
.zone-b.is-waiting .scene-actor{transform:translate(-40%,-45%) rotate(135deg)}
.zone-c.is-waiting .scene-actor{transform:translateY(-95%) rotate(166deg)}
.zone-d.is-waiting .scene-actor{transform:translateY(-75%) rotate(164deg)}
.zone-e.is-waiting .scene-actor{transform:translate(-18%,-70%) rotate(162deg)}
.zone-f.is-waiting .scene-actor{transform:translate(-30%,-22%) rotate(-12deg)}
.zone-g.is-waiting .scene-actor{transform:translateY(-60%) rotate(-10deg)}
.zone-a.is-playing .scene-actor{animation:canopy-slip 1.6s ease-in both}
.zone-b.is-playing .scene-actor{animation:wind-carry 1.4s ease-out both}
.zone-b.is-playing .leaf-fleck{animation:fleck-drift 1.4s ease-out both}
.zone-c.is-playing .scene-actor{animation:tummy-bounce 1.4s ease-out both}
.zone-d.is-playing .scene-actor{animation:web-bounce 1.6s ease-out both}
.zone-d.is-playing .scene-web{animation:web-stretch 1.6s ease-out both}
.zone-d.is-playing .scene-spider{animation:spider-greet 1.6s ease-out both}
.zone-e.is-playing .scene-actor{animation:nest-bounce 1.2s ease-out both}
.zone-e.is-playing .scene-chick{animation:chick-follow 1.2s ease-out both}
.zone-f.is-playing .scene-actor{animation:root-slide 1.6s ease-out both}
.zone-g.is-playing .scene-actor{animation:moss-land 1.6s ease-out both}
.zone-g.is-playing .landing-dust{animation:dust-settle 1.6s ease-out both}
.zone-g .resting{animation:rest-breath 4s ease-in-out infinite}
.zone-g.is-waiting .resting,.zone-g.is-playing .resting{animation:none}

@keyframes idle-pose{0%,42%{opacity:1}43%,100%{opacity:0}}
@keyframes react-pose{0%,42%{opacity:0}43%,100%{opacity:1}}
@keyframes canopy-slip{0%{transform:translateY(-20%) rotate(-3deg);opacity:1}25%{transform:translateY(-20%) rotate(3deg);opacity:1}44%{transform:translateY(-18%) rotate(-5deg);opacity:1}65%{transform:translateY(10%) rotate(15deg);opacity:1}100%{transform:translateY(220%) rotate(32deg);opacity:0}}
@keyframes wind-carry{0%{transform:translate(-40%,-45%) rotate(135deg)}60%{transform:translate(0,5%) rotate(195deg)}100%{transform:translate(22%,14%) rotate(220deg)}}
@keyframes fleck-drift{0%{transform:translate(-50%,-30%) rotate(-30deg);opacity:0}15%{opacity:.8}100%{transform:translate(380%,100%) rotate(80deg);opacity:0}}
@keyframes tummy-bounce{0%{transform:translateY(-95%) rotate(166deg)}44%{transform:translateY(4%) scale(1.05,.92) rotate(0)}63%{transform:translateY(-15%) scale(1)}100%{transform:translateY(0)}}
@keyframes web-bounce{0%{transform:translateY(-75%) rotate(164deg)}45%{transform:translateY(14%) scale(1.04,.93)}68%{transform:translateY(-10%)}100%{transform:translateY(0)}}
@keyframes web-stretch{0%,30%,100%{transform:scaleY(1)}48%{transform:scaleY(1.12)}72%{transform:scaleY(.97)}}
@keyframes spider-greet{0%,42%,100%{transform:rotate(0)}62%{transform:rotate(-6deg)}78%{transform:rotate(0)}}
@keyframes nest-bounce{0%{transform:translate(-18%,-70%) rotate(162deg)}44%{transform:translateY(20%) rotate(4deg) scale(1.04,.94)}70%{transform:translateY(-28%) rotate(14deg)}100%{transform:translateY(-15%) rotate(20deg)}}
@keyframes chick-follow{0%,100%{transform:rotate(0)}40%{transform:rotate(-5deg)}70%{transform:rotate(5deg)}}
@keyframes root-slide{0%{transform:translate(-30%,-22%) rotate(-12deg)}45%{transform:translate(-14%,-12%) rotate(-7deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes moss-land{0%{transform:translateY(-60%) rotate(-10deg)}50%{transform:translateY(4%) scale(1.03,.95)}75%{transform:translateY(-4%)}100%{transform:none}}
@keyframes dust-settle{0%,35%{opacity:0;transform:scale(.55)}54%{opacity:.32;transform:scale(.7)}100%{opacity:0;transform:scale(1)}}
@keyframes rest-breath{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* Full character silhouettes remain contained in cards; short hover cues never loop. */
.cast-strip a:hover img{transform:none}
[data-friend]{transform-origin:center 80%}
@media(hover:hover){
  .cast-strip [data-friend="koala"]:hover img,.friend-card img[data-friend="koala"]:hover{animation:friend-tilt .6s ease-out}
  .cast-strip [data-friend="spider"]:hover img,.friend-card img[data-friend="spider"]:hover{animation:friend-nudge .6s ease-out}
  .cast-strip [data-friend="chick"]:hover img,.friend-card img[data-friend="chick"]:hover{animation:friend-hop .7s ease-out}
  .cast-strip [data-friend="gecko"]:hover img,.friend-card img[data-friend="gecko"]:hover{animation:friend-creep .6s ease-out}
  .cast-strip [data-friend="fatafly"]:hover img,.friend-card img[data-friend="fatafly"]:hover{animation:wing-flutter .8s ease-out}
  .cast-strip [data-friend="fatapiller"]:hover img,.friend-card img[data-friend="fatapiller"]:hover{animation:friend-rock .6s ease-out}
  .cast-strip [data-friend="brandy"]:hover img,.friend-card img[data-friend="brandy"]:hover{animation:friend-tilt .6s ease-out}
  .cast-strip [data-friend="elephant"]:hover img,.friend-card img[data-friend="elephant"]:hover{animation:elephant-nod .6s ease-out}
  .feeling-choices label:hover span{transform:none;background:#fff5dd}
  [data-feeling="quiet"]:hover img{animation:quiet-nod .6s ease-out}
  [data-feeling="wiggly"]:hover img{animation:wiggle .8s ease-out}
  [data-feeling="big"]:hover img{animation:big-feeling .6s ease-out}
  [data-feeling="huge"]:hover img{animation:huge-feeling .6s ease-out}
}
@keyframes friend-tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
@keyframes friend-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes friend-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes friend-creep{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes wing-flutter{0%,50%,100%{transform:scaleX(1)}25%,75%{transform:scaleX(.95)}}
@keyframes friend-rock{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg)}}
@keyframes elephant-nod{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes quiet-nod{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-2deg)}65%{transform:rotate(2deg)}}
@keyframes big-feeling{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes huge-feeling{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

@media(max-width:650px){.zone-scene{--scene-height:230px}}
.motion-reduced .zone-a.is-complete .scene-actor{transform:none;opacity:1}
.motion-static .zone-a.is-complete .scene-actor{transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .zone-a.is-complete .scene-actor{transform:none;opacity:1}
  .is-waiting .pose-idle{opacity:0}.is-waiting .pose-react{opacity:1}
  .is-waiting .scene-actor{transform:none}
  .leaf-fleck,.landing-dust{display:none}
  .button:hover,.book-card:hover,.cast-strip a:hover img,.feeling-choices label:hover span{transform:none}
}