:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.box-container{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden;cursor:pointer}.title{font-family:Playwrite CZ,cursive;transform:rotate(-90deg)}.card-container{width:clamp(200px,600px,600px);height:600px;pointer-events:none;position:relative}.box-wrapper{position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);z-index:200;pointer-events:auto}.card{aspect-ratio:1 / 1;border-radius:1vmin;position:absolute;background-position:center;background-size:cover;transition:transform .6s cubic-bezier(.18,.89,.32,1.28),opacity .5s ease-out;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5) rotate(0);opacity:0;pointer-events:none;z-index:50000}.card:nth-child(1){background-image:url(https://i.pinimg.com/1200x/12/08/2d/12082d516103bd912249a2b2e049a379.jpg)}.card:nth-child(2){background-image:url(https://i.pinimg.com/1200x/da/00/a2/da00a20145f37055446a9c7dadc67b1e.jpg)}.card:nth-child(3){background-image:url(https://i.pinimg.com/736x/93/eb/b2/93ebb2afd64f3a9f1a39005dc6265c3e.jpg)}.card:nth-child(4){background-image:url(https://i.pinimg.com/1200x/00/02/d1/0002d11fd45fc9180dc912525833768d.jpg)}.card:nth-child(5){background-image:url(https://i.pinimg.com/736x/41/57/33/415733230ddb3f1a7a635a92928dce7c.jpg)}.card-container--exploded .card{opacity:1;pointer-events:auto}.card-container--exploded .card:nth-child(1){width:clamp(50px,200px,200px);top:43%;left:20%;transform:translate(-50%,-50%) rotate(-20deg) scale(1)}.card-container--exploded .card:nth-child(2){width:clamp(80px,100px,100px);top:15%;left:30%;transform:translate(-50%,-50%) rotate(-10deg) scale(1)}.card-container--exploded .card:nth-child(3){width:clamp(80px,150px,150px);top:40%;left:45%;transform:translate(-50%,-50%) rotate(-15deg) scale(1)}.card-container--exploded .card:nth-child(4){width:clamp(100px,200px,200px);top:20%;left:60%;transform:translate(-50%,-50%) rotate(40deg) scale(1)}.card-container--exploded .card:nth-child(5){width:clamp(80px,150px,150px);top:45%;left:85%;transform:translate(-50%,-50%) rotate(35deg) scale(1)}.card:hover{background-size:105%;scale:1.05;transform:background-size .5s ease,scale .5s ease}:root{--box-size: 200px;--box-color: #dcb386;--flap-color: #cd9f6d;--inner-color: #bfa07a;--border-color: #a67c52}.box-container *{box-sizing:border-box}.scene{width:300px;height:300px;perspective:1500px;animation-delay:.3s;transform:scale3d(.6,.5,.6);background-color:transparent}.box-3d{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(-23deg) rotateY(50deg) translate3D(150px,100px,-150px)}.face{position:absolute;width:100%;height:100%;background-color:var(--box-color);border:2px solid var(--border-color)}.face-front{background-color:var(--box-color);transform:translateZ(150px)}.face-back{background-color:var(--inner-color);transform:rotateY(180deg) translateZ(150px)}.face-left{transform:rotateY(-90deg) translateZ(150px)}.face-right{background-color:var(--inner-color);transform:rotateY(90deg) translateZ(150px)}.face-bottom{transform:rotateX(-90deg) translateZ(150px)}.lid-layer{position:absolute;width:100%;height:100%;background:transparent;transform-style:preserve-3d;transform:rotateX(90deg) translateZ(150px)}.flap{position:absolute;border:1px solid var(--border-color);background-color:var(--flap-color)}.flap-left{width:50%;height:100%;transform-origin:left center}.flap-right{width:50%;height:100%;right:0;transform-origin:right center}.flap-top{width:100%;height:50%;transform-origin:center top}.flap-bottom{width:100%;height:50%;bottom:0;transform-origin:center bottom}.scene.scene--opened .flap-left{animation-name:flapOpen;animation-duration:1s;animation-timing-function:ease-in-out;animation-delay:.2s;animation-fill-mode:forwards}.scene.scene--opened .flap-right{animation-name:flapRight;animation-duration:1s;animation-timing-function:ease-in-out;animation-delay:.2s;animation-fill-mode:forwards}.scene.scene--opened .flap-top{animation-name:flapTop;animation-duration:1s;animation-timing-function:ease-in-out;animation-delay:.2s;animation-fill-mode:forwards}.scene.scene--opened .flap-bottom{animation-name:flapBottom;animation-duration:1s;animation-timing-function:ease-in-out;animation-delay:.2s;animation-fill-mode:forwards}@keyframes flapOpen{0%{transform:rotateY(0)}50%{transform:rotateY(-190deg)}70%{transform:rotateY(-150deg)}to{transform:rotateY(-190deg)}}@keyframes flapRight{0%{transform:rotateY(0)}50%{transform:rotateY(170deg)}70%{transform:rotateY(100deg)}to{transform:rotateY(140deg)}}@keyframes flapTop{0%{transform:rotateX(0)}50%{transform:rotateX(190deg)}70%{transform:rotateX(130deg)}to{transform:rotateX(140deg)}}@keyframes flapBottom{0%{transform:rotateX(0)}50%{transform:rotateX(-190deg)}70%{transform:rotateX(-150deg)}to{transform:rotateX(-190deg)}}