/* Esconde-esconde: seis esconderijos grandes em três camadas; o bicho fica num "buraco"
   entre a arte de trás (base) e a da frente (cover), com a pontinha aparecendo. */
.play-esconde .toy-scene{--u:min(1cqw,.5cqh);background:#c9ecfb;overflow:clip}
.play-esconde .es-art{display:block;width:100%;height:100%;overflow:visible}
.es-fence{position:absolute;left:0;right:0;top:34%;height:6%;z-index:2;pointer-events:none}
.es-spot{position:absolute;padding:0;margin:0;border:0;background:transparent;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
.es-spot::before{content:"";position:absolute;inset:-4%}
.es-base,.es-cover{position:absolute;inset:0;pointer-events:none;transform-origin:50% 100%}
.es-base{z-index:0}.es-hole{position:absolute;z-index:1;pointer-events:none}.es-cover{z-index:2}
.es-hider{position:relative;display:block;width:100%;aspect-ratio:1}
.es-pic{position:absolute;inset:0;aspect-ratio:1}
.es-runner{position:absolute;z-index:20;aspect-ratio:1;transform-origin:0 0;pointer-events:none}
.es-critter{position:absolute;z-index:21;aspect-ratio:1;pointer-events:none}
.es-critter .art-img{width:100%;height:100%;object-fit:contain}
.es-peek-top .es-pic{animation:es-peek 2.2s ease-in-out infinite}
.es-peek-side .es-pic{animation:es-peek-side 2.4s ease-in-out infinite}
.es-tree-top{transform-origin:80px 120px;animation:es-sway 5s ease-in-out infinite alternate}

/* celeiro: o bicho fica atrás da meia-porta de baixo */
.es-barn{left:-2%;top:11%;width:calc(60*var(--u));aspect-ratio:200/170;z-index:3}
.es-barn .es-cover{inset:auto;left:28%;top:65.9%;width:44%;height:34.1%}
.es-barn .es-hole{left:30%;bottom:5%;width:40%}
/* árvore: o bicho fica atrás do tronco, com o rabo para fora */
.es-tree{right:-6%;top:5%;width:calc(54*var(--u));aspect-ratio:160/200;z-index:3}
.es-tree .es-cover{inset:auto;left:33.75%;top:50%;width:32.5%;height:50%}
.es-tree .es-hole{left:42%;bottom:0;width:40%}
/* feno e moita */
.es-hay{left:1%;bottom:34%;width:calc(48*var(--u));aspect-ratio:4/3;z-index:5}
.es-hay .es-hole{left:21%;bottom:36%;width:58%}
.es-bush{right:1%;bottom:35%;width:calc(48*var(--u));aspect-ratio:4/3;z-index:5}
.es-bush .es-hole{left:21%;bottom:40%;width:58%}
/* bebedouro */
.es-trough{left:2%;bottom:10%;width:calc(50*var(--u));aspect-ratio:160/90;z-index:7}
.es-trough .es-hole{left:24%;bottom:25%;width:52%}
/* lago: o bicho fica atrás das taboas e das folhas */
.es-pond{right:-4%;bottom:0;width:calc(60*var(--u));aspect-ratio:1.05;z-index:7}
.es-pond .es-base{top:auto;height:50%}
.es-pond .es-cover{inset:auto;left:18%;bottom:14%;width:64%;height:60%}
.es-pond .es-hole{left:26%;bottom:13%;width:48%}

@keyframes es-peek{0%,55%,100%{translate:0 0;rotate:0deg}70%{translate:0 -9%;rotate:-4deg}85%{translate:0 -6%;rotate:4deg}}
@keyframes es-peek-side{0%,55%,100%{translate:0 0;rotate:0deg}72%{translate:10% 0;rotate:5deg}88%{translate:7% 0;rotate:-3deg}}
@keyframes es-sway{from{rotate:-2deg}to{rotate:2deg}}

@container (orientation:landscape){
  .play-esconde .toy-scene>*{--u:.95cqh}
  .es-fence{top:36%;height:8%}
  .es-barn{left:0;top:8%;width:calc(52*var(--u))}
  .es-tree{right:auto;left:62%;top:-2%;width:calc(50*var(--u))}
  .es-trough{left:1%;bottom:3%;width:calc(46*var(--u))}
  .es-hay{left:22%;bottom:3%;width:calc(46*var(--u))}
  .es-bush{right:auto;left:57%;bottom:2%;width:calc(46*var(--u))}
  .es-pond{right:-1%;bottom:-4%;width:calc(56*var(--u))}
  .play-esconde .sc-sun{width:10%!important}
  .play-esconde .sc-cloud{width:15%!important}
}
@media (prefers-reduced-motion:reduce){.es-pic,.es-tree-top{animation:none!important}}