.giftbox-scene-root{container-type:size;perspective:100cqmin;display:grid;place-items:center;aspect-ratio:1;width:100%}.giftbox-scene-root *,.giftbox-scene-root :after,.giftbox-scene-root :before{box-sizing:border-box;transform-style:preserve-3d}.giftbox-scene-root{--face-1:#be8e64;--face-2:#dba776;--face-3:#e7b37e;--face-4:#f3bf86;--face-5:#eab37b;--face-6:#7d3712;--tape:#b07c54;--packaged:0;--steps:23;--delay:0.2;--speed:0.2;--height:40;--width:40;--depth:40}.giftbox-scene-root[data-size=sm]{--height:20;--width:40;--depth:40}.giftbox-scene-root[data-size=md]{--height:40;--width:40;--depth:40}.giftbox-scene-root[data-size=lg]{--height:40;--width:60;--depth:40}.giftbox-scene-root[data-size=xl]{--height:60;--width:40;--depth:60}.giftbox-scene-root[data-open=true]{--packaged:1}.giftbox-scene-root[data-open=true] .package__side--main>.package__flap--top:before{--bg-step:9}.giftbox-scene-root[data-open=true] .package__side--extra{--step:0}.giftbox-scene-root[data-open=true] .package__side--tabbed{--step:1}.giftbox-scene-root[data-open=true] .package__side--flipped,.giftbox-scene-root[data-open=true] .package__side--tabbed:after{--step:2}.giftbox-scene-root[data-open=true] .package__side--extra>.package__flap--bottom{--step:3}.giftbox-scene-root[data-open=true] .package__side--tabbed>.package__flap--bottom{--step:4}.giftbox-scene-root[data-open=true] .package__side--main>.package__flap--bottom{--step:5}.giftbox-scene-root[data-open=true] .package__side--flipped>.package__flap--bottom{--step:6}.giftbox-scene-root[data-open=true] .package__tape--bottom{--step:7}.giftbox-scene-root[data-open=true] .package__wrapper{--step:8}.giftbox-scene-root[data-open=true] .package,.giftbox-scene-root[data-open=true] .package__shadow{--step:9}.giftbox-scene-root[data-open=true] .package__side--extra>.package__flap--top{--step:16}.giftbox-scene-root[data-open=true] .package__side--tabbed>.package__flap--top{--step:17}.giftbox-scene-root[data-open=true] .package__side--main>.package__flap--top{--step:18}.giftbox-scene-root[data-open=true] .package__side--flipped>.package__flap--top{--step:19}.giftbox-scene-root[data-open=true] .package__tape--top{--step:20}.giftbox-scene-root[data-open=true] .package__branding,.giftbox-scene-root[data-open=true] .package__branding--shadow,.giftbox-scene-root[data-open=true] .package__label,.giftbox-scene-root[data-open=true] .package__label--shadow{--step:21}.giftbox-scene-root[data-open=true] .package__label:after{--step:22}.giftbox-scene-root[data-open=true] .package__label:before{--step:23}.package,.package__branding,.package__branding--shadow,.package__flap,.package__flap--bottom,.package__flap--top,.package__label,.package__label--shadow,.package__label:after,.package__label:before,.package__shadow,.package__side,.package__side:after,.package__tape--bottom,.package__tape--top,.package__wrapper{--delay:0.2;--speed:0.2;transition:transform calc(var(--speed, .2) * 1s) calc((var(--step, 1) * var(--delay, 1)) * 1s),opacity .1s calc(((var(--step, 1) * var(--delay, 1)) + ((var(--speed) - .1) * (1 - var(--packaged)))) * 1s),height calc(var(--speed, .2) * 1s),width calc(var(--speed, .2) * 1s);transition-timing-function:ease-in-out}.package__side--extra{--step:23}.package__side--tabbed{--step:22}.package__side--tabbed:after{--step:21}.package__side--flipped{--step:20}.package__side--extra>.package__flap--bottom{--step:19}.package__side--tabbed>.package__flap--bottom{--step:18}.package__side--main>.package__flap--bottom{--step:17}.package__side--flipped>.package__flap--bottom{--step:16}.package__tape--bottom{--step:15}.package__wrapper{--step:14}.package,.package__shadow{--step:13}.package__side--extra>.package__flap--top{--step:5}.package__side--tabbed>.package__flap--top{--step:4}.package__side--main>.package__flap--top{--step:3}.package__side--flipped>.package__flap--top{--step:2}.package__tape--top{--step:1}.package__branding,.package__branding--shadow,.package__label,.package__label--shadow{--step:0}.package__label:after,.package__label:before{--step:5}.scene{transform:rotateX(-24deg) rotateY(-32deg) rotateX(90deg)}.package{height:calc(var(--depth) * 1cqmin);width:calc(var(--width) * 1cqmin);transform-origin:50% 0;transform:rotateX(calc((1 - var(--packaged, 0)) * 90deg))}.package__shadow{background:#595959;opacity:.75;position:absolute;height:99%;width:99%;top:0;left:50%;transform-origin:50% 0;transform:translate(-50%) scaleY(var(--packaged))}.package__tape{background:var(--tape);height:8cqmin;width:94%;left:50%;position:absolute;transform-origin:0 50%;transform:translate3d(-50%,var(--offset-y),2px) scaleX(var(--packaged,0))}.package__tape--bottom{--offset-y:50%;bottom:100%}.package__tape--top{--offset-y:-50%;top:100%}.package__wrapper{transform:translate3d(0,calc(((1 - var(--packaged, 0)) * var(--height)) * 1cqmin),calc(var(--height) * -.5cqmin))}.package__label{height:20%;width:30%;background:#fafafa;position:absolute;right:10%;bottom:20%;border-radius:5%;opacity:var(--packaged);-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotate(180deg) translateZ(calc((1 - (var(--packaged, 0))) * 10cqmin));overflow:hidden;display:flex;align-items:center;justify-content:center}.package__label--shadow{transform:rotate(180deg) translateZ(0) scale(var(--packaged));background:#1a1a1a}.package__label:after,.package__label:before{content:"";position:absolute;height:20%;width:var(--line-length,70%);top:var(--line,20%);left:10%;background:#1a1a1a;transform-origin:0 50%;transform:scaleX(var(--packaged,0))}.package__label--has-content:after,.package__label--has-content:before{display:none}.package__label:before{--line:50%;--line-length:40%}.package__direction{display:inline-flex;align-items:center;font-family:sans-serif;font-weight:700;font-size:3.5cqmin;transform:rotate(180deg) translateZ(1px);position:absolute;top:0;right:0;padding:5%;justify-content:flex-end;color:#1a1a1a;backface-visibility:hidden;-webkit-backface-visibility:hidden}.package__direction svg{fill:currentColor;width:8%;min-width:4cqmin}.package__content{width:calc(min(var(--height), var(--width)) * 1cqmin);height:calc(var(--height) * 1cqmin);position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;transform:translate(-50%) rotateX(-90deg) rotateY(45deg)}.package__content-children{position:absolute;top:50%;left:50%;width:40%;transform:translate(-50%,-50%) translate3d(0,calc((((1 - var(--packaged, 0)) * 1.5 * (max(var(--height), var(--depth), var(--width))))) * -1cqmin),0);opacity:var(--packaged);transition:transform calc(var(--speed, .2) * 1s) calc((10 * var(--delay, .2)) * 1s),opacity .1s calc(((10 * var(--delay, .2)) + ((var(--speed) - .1) * (1 - var(--packaged)))) * 1s);transition-timing-function:ease-in-out}.package__flap{width:99.5%;height:49.5%;background:var(--face-4);position:absolute;left:50%}.package__flap--bottom{transform-origin:50% 100%;bottom:100%;transform:translate(-50%) rotateX(calc(var(--packaged, 0) * 90deg))}.package__flap--top{top:100%;transform-origin:50% 0;transform:translate(-50%) rotateX(calc(var(--packaged, 0) * -90deg))}.package__side{background:hsla(var(--hue,0),30%,30%,.3);height:calc(var(--height) * 1cqmin);position:absolute;top:50%}.package__side--main>.package__flap--top:before{--bg-step:13;content:"";height:100%;width:100%;position:absolute;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--face-2);opacity:var(--packaged);transition:opacity calc(var(--speed, .2) * 1s) calc((var(--bg-step, 1) * var(--delay, 1)) * 1s);transition-timing-function:ease-in-out}.package__side--extra>.package__flap--top,.package__side--tabbed>.package__flap--top{top:99%}.package__side--extra>.package__flap--bottom,.package__side--tabbed>.package__flap--bottom{bottom:99%}.package__side--extra>.package__flap.package__flap--bottom,.package__side--extra>.package__flap.package__flap--top,.package__side--tabbed>.package__flap.package__flap--bottom{background:var(--face-3)}.package__side--flipped>.package__flap.package__flap--bottom,.package__side--main>.package__flap.package__flap--top{background:var(--face-4)}.package__side--main{--hue:2;background:var(--face-5);left:50%;transform:translate(-50%,-50%) rotateX(90deg) rotateY(0deg) translateZ(calc(var(--depth) * .5cqmin)) translateY(50%);width:calc(var(--width) * 1cqmin)}.package__side--main>.package__flap{height:calc(var(--depth) * .495cqmin)}.package__side--tabbed{--hue:90;top:0;left:100%;background:var(--face-2);width:calc(var(--depth) * 1cqmin);transform-origin:0 50%;transform:rotateY(calc(var(--packaged, 0) * 90deg))}.package__side--tabbed>.package__flap{height:calc(var(--width) * .495cqmin);background:var(--face-3)}.package__side--tabbed:after{content:"";position:absolute;left:99.5%;top:0;height:100%;width:10%;background:var(--face-3);clip-path:polygon(0 0,100% 20%,100% 80%,0 100%);-webkit-clip-path:polygon(0 0,100% 20%,100% 80%,0 100%);transform-origin:0 50%;transform:rotateY(calc(var(--packaged, 0) * 91deg))}.package__side--extra{--hue:120;right:100%;top:0;background:var(--face-2);width:calc(var(--depth) * 1cqmin);transform-origin:100% 50%;transform:rotateY(calc(var(--packaged, 0) * -90deg))}.package__side--extra>.package__flap{height:calc(var(--width) * .495cqmin);background:var(--face-3)}.package__side--flipped{--hue:320;background:var(--face-3);top:0;right:100%;width:calc(var(--width) * 1cqmin);transform-origin:100% 50%;transform:rotateY(calc(var(--packaged, 0) * -90deg))}.package__side--flipped>.package__flap{height:calc(var(--depth) * .495cqmin);background:var(--face-4)}