/* The loading and reveal interaction belongs only to the ropa floor. */
.garment-view #wardrobe .floor-hotspot {
 backdrop-filter:blur(2.8px)!important;
 -webkit-backdrop-filter:blur(2.8px)!important;
 background:#ffffff03!important;
 transition:backdrop-filter .45s,background .35s!important;
 cursor:crosshair;
}
.garment-view #wardrobe .floor-hotspot.active,
.garment-view #wardrobe .floor-hotspot:focus-visible {
 backdrop-filter:blur(0)!important;
 -webkit-backdrop-filter:blur(0)!important;
 background:#ffffff0c!important;
}
.garment-view #wardrobe .floor-hotspot:focus-visible {background:#f9c7e329!important;}
.garment-view #wardrobe .wardrobe-spinner,
.garment-view #garment-flight .wardrobe-spinner {
 position:absolute;left:50%;top:50%;display:block;width:30px;height:30px;
 opacity:.95;transform:translate(-50%,-50%);filter:drop-shadow(0 0 1px #222);
 animation:wardrobe-spinner-turn 1s steps(12) infinite;
 transition:opacity .35s;pointer-events:none;
}
.garment-view #wardrobe .wardrobe-spinner>i,
.garment-view #garment-flight .wardrobe-spinner>i {
 position:absolute;left:47%;top:0;width:2px;height:7px;border-radius:2px;background:#fff;
 transform-origin:1px 15px;transform:rotate(calc(var(--i)*30deg));opacity:calc(.2 + var(--i)*.065);
}
.garment-view #wardrobe .floor-hotspot.active .wardrobe-spinner {opacity:0;}
.garment-view #garment-flight .wardrobe-float,
.garment-view #garment-flight .wardrobe-reveal {width:100%;height:100%;}
.garment-view #garment-flight .wardrobe-float {animation:wardrobe-float 8.8s ease-in-out infinite;}
.garment-view #garment-flight .wardrobe-reveal>img {display:block;width:100%;height:100%;object-fit:contain;}
.garment-view #garment-flight .flight-loading {display:block!important;opacity:0;pointer-events:none;}
.garment-view #garment-flight.wardrobe-revealing .wardrobe-reveal {animation:wardrobe-reveal .7s both;}
.garment-view #garment-flight.wardrobe-revealing .flight-loading {animation:wardrobe-loader-disappear .7s forwards;}
@media(hover:hover) and (pointer:fine) {
 .garment-view #wardrobe .floor-hotspot:hover {
  backdrop-filter:blur(0)!important;-webkit-backdrop-filter:blur(0)!important;background:#ffffff0c!important;
 }
}
@media(max-width:760px) {
 .garment-view #wardrobe .wardrobe-spinner {scale:.78;transform-origin:center;}
}
@keyframes wardrobe-spinner-turn {to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes wardrobe-reveal {
 0%{filter:blur(12px);opacity:.25;transform:scale(.86);}
 70%{filter:blur(0);opacity:1;}
 100%{filter:blur(0);opacity:1;transform:scale(1);}
}
@keyframes wardrobe-loader-disappear {0%,55%{opacity:1;}100%{opacity:0;}}
@keyframes wardrobe-float {
 0%,100%{transform:translateY(0) rotate(0);}
 25%{transform:translateY(9px) rotate(2deg);}
 75%{transform:translateY(-9px) rotate(-2deg);}
}
@media(prefers-reduced-motion:reduce) {
 .garment-view #wardrobe .floor-hotspot {transition:none!important;}
 .garment-view #wardrobe .wardrobe-spinner,
 .garment-view #garment-flight .wardrobe-spinner,
 .garment-view #garment-flight .wardrobe-float,
 .garment-view #garment-flight.wardrobe-revealing .wardrobe-reveal {animation:none!important;}
 .garment-view #garment-flight .flight-loading {display:none!important;}
}
/* Direct manipulation stays inside the clothing photo; the rest of the page can scroll. */
.garment-view #wardrobe .floor-photo,
.garment-view #wardrobe .floor-hotspots,
.garment-view #wardrobe .floor-hotspot{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.garment-view #garment-flight{pointer-events:none}
@media(min-width:761px) and (max-width:1050px){
 .garment-view #garment-flight{left:calc(185px + min(48vw,calc(100svh - 240px)) + 12px);right:18px}
}
@media(max-width:760px){
 .garment-view #wardrobe .floor-photo{width:min(100%,clamp(230px,calc(100svh - 510px),390px))}
 .garment-view #garment-flight{left:18px;right:18px;top:auto;bottom:90px;height:clamp(125px,20svh,165px);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;filter:none}
 .garment-view #garment-flight[hidden]{display:none}
 .garment-view #garment-flight .flight-art{height:100%;width:auto;max-width:46%;aspect-ratio:1;flex-shrink:0}
 .garment-view #garment-flight>h2{max-width:46%;margin:0;padding:0;font-size:22px;line-height:1.08;background:transparent;text-align:left}
 .garment-view #wardrobe .floor-hint{max-width:390px;margin:9px auto 0}
}
@media(max-width:760px) and (max-height:700px) and (orientation:portrait){
 .garment-view #wardrobe{left:12px;right:12px}
 .garment-view #wardrobe .floor-photo{width:230px;margin-left:0}
 .garment-view #wardrobe .floor-hint{max-width:230px;margin-left:0}
 .garment-view #garment-flight{left:calc(12px + 230px + 9px);right:12px;top:215px;bottom:auto;height:230px;flex-direction:column;gap:7px;justify-content:center}
 .garment-view #garment-flight .flight-art{width:100%;height:auto;max-width:130px}
 .garment-view #garment-flight>h2{max-width:100%;font-size:17px;text-align:center}
}
@media(min-width:500px) and (max-width:1050px) and (max-height:500px) and (orientation:landscape){
 .garment-view #wardrobe{left:160px;right:20px;top:70px;bottom:18px;overflow-y:auto;pointer-events:auto}
 .garment-view #wardrobe>h1{font-size:30px;margin-bottom:10px}
 .garment-view #wardrobe .floor-photo{width:max(230px,min(38vw,calc(100svh - 130px)));margin:0}
 .garment-view #wardrobe .floor-hint{width:max(230px,min(38vw,calc(100svh - 130px)));text-align:left;font-size:8px;margin:7px 0 0}
 .garment-view #garment-flight{left:calc(160px + max(230px,min(38vw,calc(100svh - 130px))) + 12px);right:12px;top:95px;bottom:20px;height:auto;flex-direction:column;gap:5px;justify-content:center}
 .garment-view #garment-flight .flight-art{width:100%;height:auto;max-width:min(230px,calc(100svh - 150px))}
 .garment-view #garment-flight>h2{max-width:100%;font-size:20px;text-align:center;margin:0}
}