/* Blue appears first; red and gold unfold from behind it in sequence. */
.wardrobe-faces{height:clamp(460px,70svh,800px);width:100%;margin:35px auto 0;overflow:hidden}
.wardrobe-faces.mask-procession-active>.study-face{visibility:hidden}
.mask-procession-layer{position:absolute;inset:0;z-index:2;pointer-events:none;perspective:1200px;opacity:0}
.procession-face{position:absolute;transform-origin:50% 50%;backface-visibility:hidden;filter:drop-shadow(0 18px 22px #000b);will-change:transform,opacity}
.procession-red .face-surface{background-position:0% 0}
.procession-red{z-index:1}.procession-gold{z-index:2}
.procession-blue{z-index:3}.procession-blue .face-surface{background-position:50% 0}
.procession-gold .face-surface{background-position:100% 0}
@media(max-width:760px){
 .wardrobe-faces{height:clamp(380px,55svh,520px);margin-top:20px}
}
@media(prefers-reduced-motion:reduce),(scripting:none){
 .mask-procession-layer{display:none}
 .wardrobe-faces.mask-procession-active>.study-face{visibility:visible}
 .wardrobe-faces{height:430px}.wardrobe-faces .study-face{will-change:auto}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce),(max-width:760px) and (scripting:none){
 .wardrobe-faces{height:300px}
}