/* Real materials, soft light and a shared floating 3D treatment. */
.course-visual{height:280px;perspective:850px;overflow:hidden}
.sourcing-orbit{position:relative;width:100%;height:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:center;padding:0 12px;isolation:isolate}
.course:hover .sourcing-orbit{transform:none}
.floating-piece{position:relative;min-width:0;width:100%;filter:drop-shadow(2px 7px 5px #0003);animation:garmentFloat 7s ease-in-out infinite;transform-origin:center}
.floating-piece img{display:block;width:100%!important;height:auto!important;object-fit:contain;transform:none!important;animation:none!important}
.float-blue{--tilt:-3deg;animation-delay:-1.4s}
.float-denim{--tilt:0deg;animation-delay:-3s}
.float-red{--tilt:3deg;animation-delay:-5s}
.source-ground,.parcel-ground{position:absolute;left:18%;right:18%;height:27px;bottom:15px;border-radius:50%;background:radial-gradient(ellipse,#0005,transparent 70%);pointer-events:none}
.render-blue{clip-path:polygon(41.7% 8.9%,46.5% 9.3%,50.3% 9.3%,56.7% 8.9%,58.9% 13.7%,66% 17%,74% 21.9%,80% 27.1%,85% 33.5%,90% 43.5%,95% 56%,95.6% 68%,93.1% 81.8%,88.1% 80.6%,83% 78.4%,80.5% 71.2%,79.6% 81%,79.9% 85.6%,69% 85.9%,56% 85.6%,48.8% 86.1%,38% 86.1%,30% 85.6%,19.7% 85.2%,20.3% 75.1%,17.2% 78.3%,9.3% 80.5%,6.3% 75.5%,5% 67.5%,4.5% 57%,7.5% 47%,10% 42.5%,17.2% 34%,18.5% 27%,23.5% 21%,29% 17.5%,35% 14.9%,39.4% 13.3%)}
.render-red{clip-path:polygon(46.5% 9.5%,54% 9.7%,61% 12%,63% 16%,64% 20.5%,70% 24%,75% 30%,80% 37%,84% 43%,88% 53%,90% 59%,92% 68%,92% 75%,90.7% 80.8%,87.5% 83%,80% 81.5%,79% 79%,78% 75%,75% 81%,75% 84%,64% 83%,50% 83%,35% 84.5%,33% 81%,31% 77%,31% 74%,29% 75%,22% 78%,18% 75%,12% 75%,9% 69%,8% 64%,8.4% 57%,10% 49%,16% 40%,22% 30%,27% 24%,33% 20%,40% 16%,44% 14%)}
.render-denim{clip-path:polygon(35% 3.5%,42% 2.7%,51% 3.2%,58% 4.4%,63.2% 5.8%,64.8% 12%,67.2% 21%,70.8% 29%,75.2% 38%,76.1% 42%,74.8% 44.8%,78% 56.7%,79.8% 61.5%,78.9% 66.7%,80.4% 72.8%,78.9% 76.3%,77.8% 84.5%,79% 91%,78.7% 94.5%,73% 95%,63% 92.3%,52.2% 89.6%,55% 77.2%,55.2% 70.1%,58.6% 66%,56.4% 62.4%,57.7% 56%,55.5% 53%,56.2% 44.8%,54.9% 38.9%,52.7% 31.8%,50.5% 26.7%,48.7% 32.9%,47% 38%,45.8% 43%,44.2% 46.4%,45.5% 47.4%,44.9% 54.7%,42.1% 62.8%,42% 67.7%,44.6% 71.2%,47% 81.4%,47.2% 87.8%,49.2% 90%,47.4% 92.7%,41% 94.7%,24% 97.2%,23% 97.1%,22% 91.7%,20.7% 87.8%,20.5% 82.3%,18% 68%,19.6% 62.8%,22.5% 55.5%,24% 52%,22.5% 47%,22.8% 44.5%,25.3% 39%,24.8% 36%,27.6% 25%,31% 17%,33.5% 10.5%)}
@keyframes garmentFloat{0%,100%{transform:translateY(3px) rotate(var(--tilt))}50%{transform:translateY(-3px) rotate(var(--tilt))}}

.supplier-people{margin-top:48px}
.supplier-flag{position:absolute;top:-34px;left:20px;width:47px;height:30px;border-radius:5px;box-shadow:inset 0 0 0 1px #ffffff45,0 4px 0 #0003,0 10px 15px #0003;z-index:3;transform:rotateY(-12deg) rotate(-5deg)}
.supplier-flag:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,#fff4,transparent 42%,#0002 73%,#fff1)}
.flag-france{background:linear-gradient(90deg,#0055a4 33.33%,#fff 33.33% 66.66%,#ef4135 66.66%)}
.flag-spain{background:linear-gradient(#aa151b 25%,#f1bf00 25% 75%,#aa151b 75%)}
.flag-spain>i{position:absolute;left:13px;top:11px;width:5px;height:9px;border-radius:0 0 3px 3px;background:#a42528;box-shadow:2px 0 #df9c32}
.flag-ukraine{background:linear-gradient(#0057b7 50%,#ffd700 50%)}
.fake-piece-art{position:relative;width:275px;height:262px;animation:fakePieceFloat 7s ease-in-out infinite;filter:drop-shadow(8px 17px 12px #0005);perspective:700px}
.fake-garment{position:absolute;top:7px;left:0;width:100%!important;height:auto!important;transform:none!important;animation:none!important}
.attached-tag{position:absolute;left:55%;top:42px;width:106px;height:139px;transform-origin:9px 2px;animation:attachedTagSwing 5s ease-in-out infinite}
.attached-tag svg{position:absolute;left:0;top:0;width:80px;height:110px;fill:none;stroke:#c6b8b9;stroke-width:1.5;filter:drop-shadow(1px 1px 1px #000)}
.garment-fake-tag{position:absolute;left:30px;top:67px;width:90px;height:52px;background:linear-gradient(130deg,#fa7580,#e6374c 45%,#b31631);border-radius:8px 5px 5px 8px;box-shadow:1px 2px #8d172c,2px 3px #701127,6px 11px 10px #0005,inset 1px 1px #ffb6ba66;display:grid;place-items:center;transform:rotate(9deg) rotateY(-10deg)}
.garment-fake-tag>i{position:absolute;width:5px;height:5px;top:8px;left:7px;border-radius:50%;background:#27212b;box-shadow:0 1px #fff4}
.garment-fake-tag>b{font:750 22px Manrope,sans-serif;color:#fff;letter-spacing:1px;margin-left:6px}
@keyframes fakePieceFloat{0%,100%{transform:translateY(4px) rotateY(-6deg)}50%{transform:translateY(-4px) rotateY(5deg)}}
@keyframes attachedTagSwing{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(9deg)}}
.studio-scene{width:100%;height:100%;position:relative;animation:studioCameraOrbit 8s ease-in-out infinite;transform-style:preserve-3d}
.studio-base{position:absolute;left:0;top:1%;width:100%!important;height:98%!important;object-fit:contain;transform:none!important;animation:none!important}
.studio-focus{position:absolute;left:42%;top:46%;width:17%;height:15%;border:1px solid #e9dcff;border-radius:3px;transform:rotateX(32deg) rotateZ(-22deg);box-shadow:0 0 5px #c99bff;animation:studioFocus 8s ease-in-out infinite}
.studio-shutter{position:absolute;left:58.7%;top:38.6%;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 10px 5px #fff,0 0 27px 11px #eee5ff;animation:studioSnap 8s linear infinite}
.studio-light{position:absolute;border-radius:50%;background:radial-gradient(ellipse,#fff9,transparent 65%);width:50px;height:70px;animation:studioSnap 8s linear infinite;mix-blend-mode:screen}
.light-left{left:26%;top:31%;transform:rotate(-22deg)}.light-right{left:61%;top:24%;transform:rotate(-27deg)}
.studio-capture{position:absolute;right:6%;bottom:6%;width:88px;padding:5px;background:#fff;border-radius:8px;box-shadow:2px 3px #c7b8d2,5px 11px 15px #0005;animation:studioCapture 8s ease-in-out infinite;transform-origin:20% 30%}
.studio-capture>img{width:100%!important;height:auto!important;display:block;border-radius:4px;transform:none!important;animation:none!important}
.studio-capture>span{font-size:7px;line-height:1.6;display:flex;align-items:center;justify-content:center;gap:3px;color:#235a45;padding-top:4px}.studio-capture svg{width:9px;height:9px}
@keyframes studioCameraOrbit{0%,100%{transform:rotateY(-5deg) rotateX(2deg) translateY(2px)}45%,65%{transform:rotateY(4deg) rotateX(-1deg) translateY(-3px)}}
@keyframes studioFocus{0%,15%,68%,100%{opacity:0;scale:1.2}25%,38%{opacity:1;scale:1}43%,58%{opacity:0;scale:1}}
@keyframes studioSnap{0%,39%,44%,100%{opacity:0}40.5%,41.5%{opacity:.95}}
@keyframes studioCapture{0%,43%{opacity:0;transform:translate(-47px,-30px) scale(.35) rotate(-5deg)}54%,78%{opacity:1;transform:translate(0,0) scale(1) rotate(7deg)}90%,100%{opacity:0;transform:translateY(10px) scale(.95) rotate(7deg)}}
.real-parcel{width:100%;height:100%;position:relative;perspective:800px}
.parcel-floating{position:absolute;inset:10%;transform-style:preserve-3d;animation:realParcelFloat 8s ease-in-out infinite}
.parcel-pose{position:absolute;width:100%;height:100%;inset:0;background-image:url('assets/parcel-poses-3d.png');background-repeat:no-repeat;background-size:200% auto;background-position:0 52%;filter:drop-shadow(7px 14px 10px #0005)}
.parcel-open{background-position:100% 52%;animation:parcelPoseOpen 8s ease-in-out infinite}
.parcel-closed{animation:parcelPoseClosed 8s ease-in-out infinite}
@keyframes realParcelFloat{0%,100%{transform:translateY(4px) rotateX(3deg) rotateY(-6deg)}50%{transform:translateY(-4px) rotateX(-2deg) rotateY(4deg)}}
@keyframes parcelPoseOpen{0%,22%,86%,100%{opacity:0}38%,70%{opacity:1}}
@keyframes parcelPoseClosed{0%,22%,86%,100%{opacity:1}38%,70%{opacity:0}}
.sold-listings{width:100%;height:100%;position:relative;perspective:950px;isolation:isolate}
.sold-listing{position:absolute;top:56px;width:30%;border-radius:10px;background:#fff;overflow:hidden;box-shadow:1px 2px #cfccd5,2px 4px #b6afc0,7px 15px 16px #0004;animation:soldListingFloat 7s ease-in-out infinite;transform-origin:center;--rotate:0deg;--lift:0px}
.sold-listing.listing-0{left:3%;--rotate:-7deg;--lift:9px;animation-delay:-1s;z-index:1}.sold-listing.listing-1{left:35%;top:43px;--rotate:2deg;--lift:0px;animation-delay:-3s;z-index:3}.sold-listing.listing-2{right:3%;--rotate:7deg;--lift:12px;animation-delay:-5s;z-index:2}
.listing-photo{width:100%;aspect-ratio:1;background:#f8f8f6;display:grid;place-items:center;overflow:hidden}.listing-photo>img{width:100%!important;height:100%!important;object-fit:contain;animation:none!important;transform:none!important;clip-path:none!important}
.listing-sold{background:#25865c;color:#fff;font-size:10px;line-height:1;padding:7px 8px;white-space:nowrap;position:relative;overflow:hidden}.listing-sold:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent,#ffffff32,transparent);animation:soldShine 7s ease-in-out infinite}
.sold-listing>strong{display:block;padding:7px 8px 9px;font:550 11px 'DM Sans',sans-serif;color:#181c1a;letter-spacing:-.2px}
@keyframes soldListingFloat{0%,100%{transform:translateY(var(--lift)) rotateY(-9deg) rotateZ(var(--rotate))}50%{transform:translateY(calc(var(--lift) - 8px)) rotateY(4deg) rotateZ(calc(var(--rotate) + 2deg))}}
@keyframes soldShine{0%,35%{transform:translateX(-110%)}65%,100%{transform:translateX(110%)}}
@media(max-width:640px){.course-visual{height:275px}.sold-listing{top:56px}.sold-listing.listing-1{top:43px}}
@media(prefers-reduced-motion:reduce){.course-visual *{animation:none!important}.floating-piece{transform:rotate(var(--tilt))}.attached-tag{transform:rotate(-5deg)}.studio-focus,.studio-shutter,.studio-light{opacity:0}.studio-capture{opacity:1;transform:rotate(6deg)}.parcel-open{opacity:1}.parcel-closed{opacity:0}.sold-listing{transform:rotate(var(--rotate))}.listing-sold:after{display:none}}

/* Three real garments share the same floor, phone and saved-photo timeline. */
.studio-scene{position:absolute;left:0;top:50%;width:100%;height:auto;aspect-ratio:1.5;transform:translateY(-50%);animation:none;transform-style:flat}
.studio-base{top:0;width:100%!important;height:100%!important;mask:url('assets/course-studio-mask.svg') center / 100% 100% no-repeat}
.studio-piece-cycle{position:absolute;inset:0;pointer-events:none}
.studio-floor-piece{position:absolute;left:36.5%;top:33%;width:25%;aspect-ratio:1;filter:drop-shadow(2px 4px 2px #0005);animation:studioPiecePlace 15s ease-in-out infinite;animation-delay:var(--photo-delay)}
.studio-floor-piece>img{width:100%!important;height:100%!important;object-fit:contain;transform:none!important;animation:none!important}
.cutout-marseille{clip-path:none;mask:url('assets/photo-marseille-mask.svg') center / 100% 100% no-repeat}
.cutout-ralph{clip-path:none;mask:url('assets/photo-ralph-mask.svg') center / 100% 100% no-repeat}
.cutout-denim{clip-path:none;mask:url('assets/photo-denim-mask.svg') center / 100% 100% no-repeat}
.studio-phone-piece{position:absolute;left:58.4%;top:39.5%;width:2.1%!important;height:3%!important;object-fit:contain;background:#eae5de;transform:rotate(-13deg)!important;animation:studioPhonePiece 15s ease infinite!important;animation-delay:var(--photo-delay)!important}
.studio-capture{right:2%;bottom:3%;width:26%;padding:5px;z-index:5;animation:studioSavedPiece 15s ease-in-out infinite;animation-delay:var(--photo-delay)}
.studio-capture>span{font-size:7px}.studio-focus{left:39%;top:42%;width:21%;height:20%;animation:studioFocusBatch 5s ease infinite}.studio-shutter,.studio-light{animation:studioSnapBatch 5s linear infinite}
@keyframes studioPiecePlace{0%{opacity:0;transform:translate(34%,-20%) rotateX(45deg) rotateZ(-14deg)}3%,26%{opacity:1;transform:translate(0,0) rotateX(48deg) rotateZ(-18deg)}31%{opacity:0;transform:translate(-38%,18%) rotateX(48deg) rotateZ(-23deg)}33.333%,100%{opacity:0;transform:translate(-38%,18%) rotateX(48deg) rotateZ(-23deg)}}
@keyframes studioPhonePiece{0%,2%{opacity:0}3%,26%{opacity:1}31%,100%{opacity:0}}
@keyframes studioSavedPiece{0%,13%{opacity:0;transform:translate(-35px,-20px) scale(.3) rotate(-4deg)}16%,26%{opacity:1;transform:translate(0,0) scale(1) rotate(6deg)}31%,100%{opacity:0;transform:translateY(9px) scale(.95) rotate(6deg)}}
@keyframes studioFocusBatch{0%,12%,40%,100%{opacity:0;scale:1.15}21%,32%{opacity:1;scale:1}}
@keyframes studioSnapBatch{0%,34%,39%,100%{opacity:0}35.5%,36.5%{opacity:.95}}
@media(prefers-reduced-motion:reduce){.studio-piece-cycle{display:none}.studio-item-0{display:block}.studio-floor-piece{opacity:1;transform:rotateX(48deg) rotateZ(-18deg)}.studio-phone-piece,.studio-capture{opacity:1}.studio-capture{transform:rotate(6deg)}}
.course:not(.assets-ready) .course-visual *{background-image:none!important}

@media(prefers-reduced-motion:reduce){.studio-phone-piece{animation:none!important}}