/* One continuous room and one shared, pausable 22-second story. */
.resell-steps{display:block;padding-top:60px}.steps-copy{display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:50px;margin-bottom:32px}.steps-copy h2{font-size:44px;margin:0}.steps-list{margin:0}.step-button{padding:16px 0}
.story-stage{width:100%;max-width:none;height:auto;aspect-ratio:1.7;border:1px solid var(--line);background:var(--surface);contain:layout paint}
.story-interior,.story-outside{position:absolute;inset:0 0 49px;overflow:hidden}.story-interior{animation:storyInterior 22s ease infinite paused}
.story-world{position:absolute;left:0;top:50%;width:112%;aspect-ratio:2;transform-origin:0 50%;animation:storyCamera 22s cubic-bezier(.4,0,.25,1) infinite paused;will-change:transform}
.story-workshop{position:absolute;width:100%;height:100%;inset:0;object-fit:cover}
.story-photographer,.story-walker,.story-packer{position:absolute;width:32%;aspect-ratio:1;z-index:3;pointer-events:none;transform-origin:50% 100%}
.story-photographer{left:12%;top:26%;animation:storyPhotographer 22s ease infinite paused}.story-walker{left:17%;top:26%;animation:storyWalk 22s linear infinite paused}.story-packer{left:44%;top:26%;animation:storyPacker 22s ease infinite paused}
.story-photographer>span,.story-walker>span,.story-packer>span{position:absolute;inset:0;background:url('assets/story-workshop-actor.png') 0 center / 300% auto no-repeat;filter:drop-shadow(0 5px 3px #0003)}
.story-walker>span{background-position:50% center;animation:storyStride .48s ease-in-out infinite paused}.story-packer>span{background-position:100% center}
.story-focus{position:absolute;left:19%;top:50%;width:13%;height:15%;border:1px solid #e4d0fc;border-radius:4px;transform:perspective(500px) rotateX(53deg);animation:storyFocus 22s ease infinite paused;z-index:4}
.story-flash{position:absolute;left:28%;top:36%;width:9px;height:9px;border-radius:50%;background:white;box-shadow:0 0 15px 8px #fff,0 0 40px 20px #eee5ff70;animation:storyFlash 22s linear infinite paused;z-index:5}
.story-found,.story-sold,.story-pack-label,.story-delivered{position:absolute;z-index:7;display:flex;align-items:center;gap:7px;white-space:nowrap;background:#1a151fef;border:1px solid #a780eb70;border-radius:10px;padding:10px 14px;box-shadow:0 9px 20px #0002;color:#f4edf9;font-size:12px}
.story-found{left:13%;top:11%;animation:storyFound 22s ease infinite paused}.story-found svg,.story-pack-label svg,.story-delivered svg{width:14px;height:14px;color:#c5a2f9}
.story-sold{left:35%;top:14%;align-items:flex-start;flex-direction:column;gap:3px;border-color:#57be8c88;animation:storySold 22s ease infinite paused}.story-sold small{font-size:11px;color:#d7d0dd}.story-sold b{font-size:27px;font-weight:600;color:#76e2ab;letter-spacing:-.6px}
.story-packed-piece{position:absolute;left:62%;bottom:43%;width:21%;aspect-ratio:1;z-index:5;animation:storyInsert 22s ease-in-out infinite paused;transform-origin:50% 100%;filter:drop-shadow(0 5px 3px #0005)}
.story-folded,.story-frosted{position:absolute;inset:0;background:url('assets/story-polo-bag.png') 0 center / 200% auto no-repeat}
.story-folded{animation:storyFolded 22s ease infinite paused}.story-frosted{background-image:url('assets/story-kv-bag.png');background-position:100% center;clip-path:polygon(19.4% 11%,94% 20%,84.5% 94%,.8% 81%);animation:storyFrosted 22s ease infinite paused}
.story-zip-line{position:absolute;left:19%;right:4%;top:17%;height:3px;background:#faf6ff;transform:rotate(7deg);transform-origin:left;animation:storyZip 22s ease infinite paused}
.story-box{position:absolute;left:73%;bottom:41%;width:24%;aspect-ratio:1;animation:storyBox 22s ease infinite paused;transform-origin:50% 85%;filter:drop-shadow(0 4px 3px #0004)}.story-box-back{z-index:4}.story-box-front{z-index:6;filter:none}
.story-box-open,.story-box-closed{position:absolute;inset:0;background:url('assets/parcel-poses-3d.png') 100% center / 200% auto no-repeat}.story-box-open{animation:storyBoxOpen 22s ease infinite paused}.story-box-front .story-box-open{clip-path:polygon(4% 44%,61% 64%,96% 42%,90% 69%,60% 93%,5% 68%)}.story-box-closed{background-position:0 center;animation:storyBoxClosed 22s ease infinite paused}
.story-pack-label{left:63%;top:14%;animation:storyPacked 22s ease infinite paused}
.story-outside{display:grid;place-items:center;animation:storyOutside 22s ease infinite paused}.story-room{position:relative;width:90%;aspect-ratio:1.6}.story-setting{position:absolute;width:94%;height:auto;left:3%;top:50%;transform:translateY(-50%);mask:url('assets/story-street-mask.svg') center / 100% 100% no-repeat}
.story-cycle{position:absolute;width:20%;aspect-ratio:1;left:18%;top:41%;animation:storyCycle 22s linear infinite paused;z-index:3}.story-cycle>span{position:absolute;inset:0;background:url('assets/story-actor.png') 100% center / 300% auto no-repeat;filter:drop-shadow(0 5px 3px #0003)}
.story-arrival{position:absolute;width:12%;aspect-ratio:1;left:65%;top:37%;z-index:4;animation:storyArrival 22s ease infinite paused}.story-arrival>span{position:absolute;inset:0;background:url('assets/story-actor.png') 0 center / 300% auto no-repeat}.story-arrival>img{position:absolute;left:47%;top:31%;width:35%;transform:rotate(-12deg)}
.story-delivered{left:47%;top:12%;animation:storyDelivered 22s ease infinite paused}
.story-caption{position:absolute;left:20px;right:55px;bottom:20px;height:18px;text-align:center;font-size:12px;color:var(--muted)}.story-caption>span{position:absolute;inset:0;white-space:nowrap}.caption-photo{animation:storyCaptionPhoto 22s ease infinite paused}.caption-pack{animation:storyCaptionPack 22s ease infinite paused}.caption-post{animation:storyCaptionPost 22s ease infinite paused}
@keyframes storyCamera{0%,13%{transform:translate(0,-50%)}27%,99%{transform:translate(-10.714286%,-50%)}99.1%,100%{transform:translate(0,-50%)}}
@keyframes storyInterior{0%,65%{opacity:1}68%,98%{opacity:0}100%{opacity:1}}
@keyframes storyOutside{0%,65%{opacity:0}69%,96%{opacity:1}99%,100%{opacity:0}}
@keyframes storyPhotographer{0%,12%{opacity:1;transform:rotate(0)}5%{transform:rotate(-.8deg)}14%,99%{opacity:0}100%{opacity:1}}
@keyframes storyFound{0%,2%{opacity:1;transform:translateY(0)}4%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes storyFocus{0%{opacity:0;scale:1.1}1.5%,4.2%{opacity:1;scale:1}5%,100%{opacity:0;scale:1}}
@keyframes storyFlash{0%,4.5%,5.7%,100%{opacity:0}4.8%,5.1%{opacity:1}}
@keyframes storySold{0%,6%{opacity:0;transform:translateY(15px) scale(.9)}7.5%,12.5%{opacity:1;transform:translateY(0) scale(1)}15%,100%{opacity:0;transform:translateY(-18px) scale(.98)}}
@keyframes storyWalk{0%,12.5%{opacity:0;transform:translateX(0)}14%{opacity:1;transform:translateX(0)}25%{opacity:1;transform:translateX(84.375%)}27%,100%{opacity:0;transform:translateX(84.375%)}}
@keyframes storyStride{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-3px) rotate(.6deg)}}
@keyframes storyPacker{0%,25%{opacity:0;transform:translateX(-8px)}27%,62%{opacity:1;transform:translateX(0)}66%,100%{opacity:0;transform:translateX(0)}}
@keyframes storyFolded{0%,26%{opacity:0}29%,33%{opacity:1}37%,100%{opacity:0}}
@keyframes storyFrosted{0%,33%{opacity:0}37%,49%{opacity:1}53%,100%{opacity:0}}
@keyframes storyInsert{0%,26%{transform:translate(0,0) scaleY(.55)}30%,44%{transform:translate(0,0) scaleY(.62)}46%{transform:translate(12%,-40%) scaleY(.75)}51%,100%{transform:translate(68%,-32%) scale(.63,.38)}}
@keyframes storyZip{0%,37%{opacity:0;scale:0 1}38%{opacity:1;scale:0 1}40%{opacity:1;scale:1 1}42%,100%{opacity:0;scale:1 1}}
@keyframes storyBox{0%,39%{opacity:0;transform:translateX(10%) scale(.94)}43%,66%{opacity:1;transform:translateX(0) scale(1)}69%,100%{opacity:0;transform:translateX(0) scale(1)}}
@keyframes storyBoxOpen{0%,52%{opacity:1}55%,100%{opacity:0}}
@keyframes storyBoxClosed{0%,52%{opacity:0}55%,100%{opacity:1}}
@keyframes storyPacked{0%,55%{opacity:0;transform:translateY(8px)}57%,63%{opacity:1;transform:translateY(0)}66%,100%{opacity:0;transform:translateY(-5px)}}
@keyframes storyCycle{0%,67%{opacity:0;transform:translate(0,0)}70%{opacity:1;transform:translate(0,0)}76%{opacity:1;transform:translate(65%,-12%)}82%{opacity:1;transform:translate(125%,-28%)}88%{opacity:1;transform:translate(190%,-47%)}91%,100%{opacity:0;transform:translate(190%,-47%)}}
@keyframes storyArrival{0%,88%{opacity:0;transform:translate(-10px,4px)}91%,96%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(0,0)}}
@keyframes storyDelivered{0%,88%{opacity:0;transform:translateY(8px)}91%,96%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-6px)}}
@keyframes storyCaptionPhoto{0%,14%{opacity:1}18%,100%{opacity:0}}
@keyframes storyCaptionPack{0%,17%{opacity:0}23%,64%{opacity:1}68%,100%{opacity:0}}
@keyframes storyCaptionPost{0%,67%{opacity:0}71%,96%{opacity:1}100%{opacity:0}}
@media(max-width:1100px){.steps-copy{gap:30px}.steps-copy h2{font-size:37px}.story-stage{aspect-ratio:1.75}.story-sold b{font-size:22px}.story-found,.story-pack-label,.story-delivered{font-size:10px;padding:8px 11px}}
@media(max-width:760px){.steps-copy{display:block;margin-bottom:25px}.steps-copy h2{font-size:35px}.steps-list{margin-top:22px}.story-stage{aspect-ratio:1.05;border-radius:18px}.story-world{width:185%}.story-sold{left:32%;top:9%;padding:7px 10px}.story-sold b{font-size:21px}.story-found{font-size:9px;left:7%;top:8%}.story-pack-label{left:67%;top:8%;font-size:9px}.story-caption{font-size:9px;left:7px;right:39px;bottom:20px}.story-room{width:116%}.story-delivered{font-size:10px;left:40%}.steps-pause{right:10px;bottom:11px}
@keyframes storyCamera{0%,13%{transform:translate(0,-50%)}27%,99%{transform:translate(-45.945946%,-50%)}99.1%,100%{transform:translate(0,-50%)}}}
@media(prefers-reduced-motion:reduce){.story-stage *{animation:none!important}.story-interior{opacity:1}.story-outside{opacity:0}.story-world{transform:translate(0,-50%)}.story-stage[data-step="1"] .story-world{transform:translate(-10.714286%,-50%)}.story-stage[data-step="2"] .story-interior{opacity:0}.story-stage[data-step="2"] .story-outside{opacity:1}.story-walker,.story-flash,.story-focus,.story-sold,.story-zip-line,.story-folded,.story-box-open,.story-cycle{display:none}.story-packer,.story-packed-piece,.story-box,.story-pack-label{opacity:0}.story-stage[data-step="1"] .story-packer,.story-stage[data-step="1"] .story-packed-piece,.story-stage[data-step="1"] .story-box,.story-stage[data-step="1"] .story-pack-label{opacity:1}.story-stage[data-step="1"] .story-photographer,.story-stage[data-step="1"] .story-found{opacity:0}.story-packed-piece{transform:scaleY(.62)}.story-box-closed,.story-arrival,.story-delivered{opacity:1}.story-caption>span{opacity:0}.story-stage[data-step="0"] .caption-photo,.story-stage[data-step="1"] .caption-pack,.story-stage[data-step="2"] .caption-post{opacity:1}}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.story-stage[data-step="1"] .story-world{transform:translate(-45.945946%,-50%)}}
.story-photo-piece{position:absolute;left:14.5%;top:31%;width:22%;aspect-ratio:1;z-index:2;transform:rotateX(54deg) rotate(-5deg);filter:drop-shadow(1px 4px 2px #0004);animation:storyPhotoPiece 22s ease infinite paused}.story-photo-piece img{display:block;width:100%;height:100%;object-fit:contain;mask:url('assets/story-polo-mask.svg') center / 100% 100% no-repeat}
@keyframes storyPhotoPiece{0%,12%{opacity:1}14%,99%{opacity:0}100%{opacity:1}}
.story-stage:not(.assets-ready) *{background-image:none!important}
@media(prefers-reduced-motion:reduce){.story-photo-piece{opacity:1}.story-stage[data-step="1"] .story-photo-piece{opacity:0}}

/* On arrival at the bench, cut to a large orthographic view of the same packing work. */
.story-overhead{position:absolute;inset:0 0 49px;overflow:hidden;z-index:8;pointer-events:none;animation:storyOverhead 22s steps(1,end) infinite paused;background:#8c5933}
.story-overhead-world{position:absolute;left:0;top:0;width:100%;aspect-ratio:1.5;transform:none;transform-origin:center}
.story-overhead-desk{display:block;width:100%;height:100%;object-fit:cover}
.story-top-box{position:absolute;left:51%;top:26%;width:38%;aspect-ratio:1;isolation:isolate}
.story-top-base,.story-top-flap,.story-top-closed{position:absolute;inset:0;background:url('assets/story-overhead-box.png') left center / 200% 100% no-repeat}
.story-top-base{clip-path:polygon(28.6% 23.1%,81.7% 23.1%,81.7% 74.9%,28.6% 74.9%);z-index:0;filter:drop-shadow(0 4px 2px #0004)}
.story-top-flap{z-index:3;backface-visibility:visible}
.flap-left{clip-path:polygon(10.2% 23%,28.6% 23.3%,28.6% 74.8%,10.2% 75.1%);transform-origin:28.6% 49%;animation:storyFlapLeft 22s ease-in-out infinite paused}
.flap-right{clip-path:polygon(81.8% 23.3%,99.8% 23%,99.8% 75.1%,81.8% 74.8%);transform-origin:81.8% 49%;animation:storyFlapRight 22s ease-in-out infinite paused}
.flap-top{clip-path:polygon(28.5% 4.4%,81.8% 4.4%,81.8% 23.2%,28.5% 23.2%);transform-origin:55% 23.2%;animation:storyFlapTop 22s ease-in-out infinite paused}
.flap-bottom{clip-path:polygon(28.5% 75%,81.8% 75%,81.8% 93.5%,28.5% 93.5%);transform-origin:55% 75%;animation:storyFlapBottom 22s ease-in-out infinite paused}
.story-top-closed{background-position:right center;clip-path:polygon(20.3% 23.3%,20.7% 22.8%,78.1% 22.8%,78.7% 23.4%,78.7% 74.9%,78.1% 75.4%,20.8% 75.4%,20.3% 74.9%);transform:translate(5.7%,-.1%) scaleX(.905);z-index:4;animation:storyTopClosed 22s ease infinite paused}
.story-top-bag{--insert-x:146%;--insert-y:0%;--insert-scale:.67;position:absolute;left:17%;top:33%;width:28%;aspect-ratio:1;z-index:2;transform-origin:center;filter:drop-shadow(0 7px 5px #0004);animation:storyTopInsert 22s cubic-bezier(.4,0,.2,1) infinite paused}
.story-top-bag img{position:absolute;inset:0;display:block;width:100%;height:100%;animation:storyTopFrosted 22s ease infinite paused;mask:url('assets/story-overhead-bag-mask.svg') center / 100% 100% no-repeat}
/* The bag sits between the box interior and flaps during insertion. */
.story-top-box{isolation:auto}.story-top-base{z-index:1}.story-top-flap{z-index:3}.story-top-closed{z-index:4}
.story-top-packed{position:absolute;left:61%;top:22%;display:flex;gap:7px;align-items:center;z-index:5;background:#1a151ff5;color:#f4edf9;border:1px solid #a780eb70;padding:9px 14px;border-radius:10px;box-shadow:0 6px 20px #0003;font-size:12px;animation:storyPacked 22s ease infinite paused}
.story-top-packed svg{width:15px;height:15px;color:#c5a2f9}
@keyframes storyOverhead{0%{opacity:0}27%{opacity:1}67%,100%{opacity:0}}

@keyframes storyTopInsert{0%,37%{transform:translate(0,0);opacity:1}44%,53%{transform:translate(var(--insert-x),var(--insert-y)) scale(var(--insert-scale));opacity:1}55%,100%{transform:translate(var(--insert-x),var(--insert-y)) scale(var(--insert-scale));opacity:0}}
@keyframes storyFlapLeft{0%,47%{transform:rotateY(0)}50%,100%{transform:rotateY(180deg)}}
@keyframes storyFlapRight{0%,48%{transform:rotateY(0)}51%,100%{transform:rotateY(-180deg)}}
@keyframes storyFlapTop{0%,50%{transform:rotateX(0)}54%,100%{transform:rotateX(180deg)}}
@keyframes storyFlapBottom{0%,51%{transform:rotateX(0)}55%,100%{transform:rotateX(-180deg)}}
@keyframes storyTopClosed{0%,53%{opacity:0}55%,100%{opacity:1}}
@media(min-width:761px) and (max-width:1100px){.story-top-box{top:24%;width:35%}.story-top-bag{top:28.8%;--insert-x:140%;--insert-y:0%;--insert-scale:.60}}
@media(max-width:760px){.story-overhead-world{width:120%;left:-10%}.story-top-box{left:46%;top:29%;width:45%}.story-top-bag{left:8%;top:38%;width:32%;--insert-x:146%;--insert-y:0%;--insert-scale:.67}.story-top-packed{left:50%;top:29%;font-size:10px;padding:7px 10px}}
@media(prefers-reduced-motion:reduce){.story-overhead{opacity:0}.story-stage[data-step="1"] .story-overhead{opacity:1}.story-overhead-world{transform:none}.story-top-bag{transform:translate(var(--insert-x),var(--insert-y)) scale(var(--insert-scale));opacity:0}.story-top-closed,.story-top-packed{opacity:1}.story-top-flap{display:none}}

.story-top-folded{position:absolute;inset:5% 10%;background:url('assets/story-polo-bag.png') left center / 200% 100% no-repeat;clip-path:polygon(27.8% 18.8%,38.1% 19%,41.6% 16%,47% 13.3%,56% 14%,62% 16.7%,68% 17.4%,78% 17.6%,82% 23%,85.2% 26%,92% 28%,94% 33%,96% 36%,94% 58%,86% 86%,82.8% 91.3%,13% 78.5%,9.8% 76%,9.8% 71%);transform:rotate(-7deg);animation:storyTopFolded 22s ease infinite paused}
@keyframes storyTopFolded{0%,30%{opacity:1}34%,100%{opacity:0}}
@keyframes storyTopFrosted{0%,30%{opacity:0}34%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.story-top-folded{display:none}.story-top-bag img{opacity:1}}