:root{--cobalt: #2546c9;--gut: 48px;--key: #121211;--mute: #5b5a57}@media(max-width:760px){:root{--gut: 18px}}.unbox img{max-width:none}.unbox{height:620vh;position:relative;view-timeline-name:--unbox;view-timeline-axis:block}.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:center}.scene{height:100%;display:grid;place-items:center;perspective:2400px;perspective-origin:50% 35%}.box{--u: clamp(22px, 3.7vw, 56px);--rx: 56deg;--rz: -28deg;--ty: .5;position:relative;width:calc(var(--u) * 10);height:calc(var(--u) * 8);transform-style:preserve-3d;transform:translateY(calc(var(--u) * var(--ty))) rotateX(var(--rx)) rotate(var(--rz))}.box>div{position:absolute;transform-style:preserve-3d}.box img{width:100%;height:100%;object-fit:cover}.base{left:0;top:0;width:100%;height:100%;background:#e9e9e7}.wall .out,.wall .in,.lid .out,.lid .in{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.wall .in{transform:rotateY(180deg);background:#dededb}.lid .in{transform:rotateY(180deg);background:#f0f0ee}.back{left:0;top:0;width:calc(var(--u) * 10);height:calc(var(--u) * 2);transform-origin:50% 0;transform:rotateX(90deg)}.front{left:0;top:calc(var(--u) * 6);width:calc(var(--u) * 10);height:calc(var(--u) * 2);transform-origin:50% 100%;transform:rotateX(-90deg)}.left{left:0;top:0;width:calc(var(--u) * 2);height:calc(var(--u) * 8);transform-origin:0 50%;transform:rotateY(-90deg)}.right{left:calc(var(--u) * 8);top:0;width:calc(var(--u) * 2);height:calc(var(--u) * 8);transform-origin:100% 50%;transform:rotateY(90deg)}.wall .out,.lid .out{overflow:hidden}.lid{--open: 0deg;left:0;top:0;width:calc(var(--u) * 10);height:calc(var(--u) * 8);transform-origin:50% 0;transform:translateZ(calc(var(--u) * 2)) rotateX(var(--open))}.box .tape{position:absolute;width:calc(var(--u) * 2.81);height:auto;left:calc(var(--u) * 3.3)}.box .lid .tape{top:calc(var(--u) * 5.2);height:calc(var(--u) * 2.8);object-fit:cover;object-position:50% 0}.box .front .tape{top:0;height:calc(var(--u) * 1.3);object-fit:cover;object-position:50% 100%}.tee{left:calc(var(--u) * .3);top:calc(var(--u) * .3);width:calc(var(--u) * 9.4);height:calc(var(--u) * 7.4);transform:translateZ(calc(var(--u) * .4))}.tissue{top:calc(var(--u) * .15);width:calc(var(--u) * 6);height:calc(var(--u) * 7.7)}.tissue img{opacity:.96}.tl{left:calc(var(--u) * .1);transform-origin:0 50%;transform:translateZ(calc(var(--u) * 1.3)) rotateY(0)}.tr{left:calc(var(--u) * 3.9);transform-origin:100% 50%;transform:translateZ(calc(var(--u) * 1.38)) rotateY(0)}.tissue .seal{position:absolute;width:calc(var(--u) * 1.5);height:calc(var(--u) * 1.5);left:calc(var(--u) * -.25);top:calc(var(--u) * 3.1);opacity:1;transform:translateZ(1px)}.steps{list-style:none;margin:0;padding:0 var(--gut) 0 0;display:grid}.steps li{grid-area:1 / 1;max-width:30em}.steps h1{font-family:Equity Text A,Georgia,serif;font-weight:400;font-size:clamp(56px,6.4vw,104px);line-height:.95;letter-spacing:-.02em;margin:0 0 22px}.steps h2{font-family:Equity Text A,Georgia,serif;font-weight:400;font-size:clamp(30px,3vw,46px);line-height:1.05;margin:0 0 16px}.steps p{margin:0;font-size:18px}.steps .w{font-style:normal;white-space:nowrap}@supports not (animation-timeline: view()){.lid{--open: 116deg}.tl{transform:translateZ(calc(var(--u) * 1.3)) rotateY(-128deg)}.tr{transform:translateZ(calc(var(--u) * 1.38)) rotateY(128deg)}}.steps li+li{display:none}@supports (animation-timeline: view()){.steps li+li{display:block}.box,.lid,.tl,.tr,.steps li{animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--unbox;animation-range:contain 0% contain 100%;animation-duration:auto}.box{animation-name:turn}.lid{animation-name:lid}.tl{animation-name:tl}.tr{animation-name:tr}.s0{animation-name:s0}.s1{animation-name:s1}.s2{animation-name:s2}.s3{animation-name:s3}.s4{animation-name:s4}}@keyframes turn{0%{transform:translateY(calc(var(--u) * var(--ty))) rotateX(50deg) rotate(-38deg)}14%{transform:translateY(calc(var(--u) * var(--ty))) rotateX(54deg) rotate(-20deg)}30%{transform:translateY(calc(var(--u) * var(--ty))) rotateX(56deg) rotate(-28deg)}to{transform:translateY(calc(var(--u) * var(--ty))) rotateX(56deg) rotate(-28deg)}}@keyframes lid{0%,30%{transform:translateZ(calc(var(--u) * 2)) rotateX(0)}52%,to{transform:translateZ(calc(var(--u) * 2)) rotateX(116deg)}}@keyframes tl{0%,52%{transform:translateZ(calc(var(--u) * 1.3)) rotateY(0)}68%,to{transform:translateZ(calc(var(--u) * 1.3)) rotateY(-128deg)}}@keyframes tr{0%,58%{transform:translateZ(calc(var(--u) * 1.38)) rotateY(0)}74%,to{transform:translateZ(calc(var(--u) * 1.38)) rotateY(128deg)}}@keyframes s0{0%,6%{opacity:1;transform:none}9%,to{opacity:0;transform:translateY(-12px)}}@keyframes s1{0%,8%{opacity:0;transform:translateY(12px)}11%,14%{opacity:1;transform:none}17%,to{opacity:0;transform:translateY(-12px)}}@keyframes s2{0%,16%{opacity:0;transform:translateY(12px)}19%,45%{opacity:1;transform:none}48%,to{opacity:0;transform:translateY(-12px)}}@keyframes s3{0%,48%{opacity:0;transform:translateY(12px)}51%,72%{opacity:1;transform:none}77%,to{opacity:0;transform:translateY(-12px)}}@keyframes s4{0%,76%{opacity:0;transform:translateY(12px)}82%,to{opacity:1;transform:none}}.piece{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 56px;padding:96px var(--gut) 24px;border-top:1px solid var(--rule);align-items:start}.piece figure{margin:0}.piece .wide img{width:100%}.steps li.s0:only-child{animation:none;opacity:1;transform:none}@media(max-width:760px){.stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:stretch}.steps{padding:0 var(--gut) calc(28px + env(safe-area-inset-bottom))}.steps h1{font-size:56px;margin-bottom:14px}}
/*# sourceMappingURL=/cdn/shop/t/28/assets/together-parcel.css.map */