*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#fff}body{overflow:hidden}main{height:100svh;display:grid;place-items:center}#banana{position:relative;display:block;width:min(90vw,700px,90svh);aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;transform-origin:50% 63%;perspective:1000px}#banana:focus-visible{outline:3px solid #d8ac00;outline-offset:5px;border-radius:20px}.base{width:100%;display:block}.hatch{position:absolute;left:40%;top:55%;width:20%;height:16%;perspective:500px;background:#171208;opacity:0}.peek{width:100%;height:100%;object-fit:cover;filter:brightness(.45)}.door{position:absolute;top:0;width:50%;height:100%;overflow:hidden;backface-visibility:hidden;transition:transform 1s cubic-bezier(.4,0,.2,1),filter 1s}.door img{position:absolute;width:1000%;height:625%;max-width:none;top:-343.75%}.left{left:0;transform-origin:left center}.left img{left:-400%}.right{right:0;transform-origin:right center}.right img{left:-500%}body.opening .hatch{opacity:1}body.opening .left{transform:rotateY(-110deg);filter:brightness(.65)}body.opening .right{transform:rotateY(110deg);filter:brightness(.65)}body.zooming #banana{transform:scale(14);transition:transform 1.4s cubic-bezier(.65,0,.3,1);pointer-events:none}#inside{position:fixed;inset:0;background:#090909;opacity:0;transition:opacity .45s;z-index:5}#inside:not([hidden]){display:grid;place-items:center}#inside.visible{opacity:1}#inside>img{width:100%;height:100svh;object-fit:contain}@media(prefers-reduced-motion:reduce){.door,body.zooming #banana,#inside{transition:none}}


body.revealed #banana{visibility:hidden}

.picket-sign{position:absolute;z-index:2;width:34%;height:auto;left:9%;bottom:5%;transform:rotate(-5deg);filter:drop-shadow(2px 5px 3px #0002);pointer-events:none}body.opening .picket-sign{opacity:0;transform:translateY(18%) rotate(-9deg);transition:opacity .3s,transform .4s}