.opening-stage{background:#d0d0d0}
.opening-stage .outfit-assembly{display:none!important}
.studio-shot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;visibility:hidden;pointer-events:none;overflow:hidden}
.shot-art{position:relative;height:100%;aspect-ratio:1086/1448;flex-shrink:0;transform-origin:50% 12%;mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent),linear-gradient(0deg,transparent,#000 5%,#000 98%,transparent);mask-composite:intersect}
.shot-art>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain}
.shot-face .shot-art,.shot-feet .shot-art{height:110%}
.shot-reveal .shot-art,.shot-hat .shot-art{height:94%;align-self:flex-start;margin-top:3svh}
.hat-flying{position:absolute;inset:0}.hat-flying img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;clip-path:polygon(49% 23.3%,53% 23.3%,54% 24.1%,59% 25%,63% 27%,65.5% 30%,66.5% 35%,66.2% 38%,63% 38.2%,56% 35%,48% 34.6%,42% 36%,35% 39%,33.8% 38%,34% 34%,36% 29%,40% 26%,48% 24%)}
.studio-glint{position:absolute;left:79.3%;top:54%;width:8%;aspect-ratio:1;opacity:0;background:white;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 4px white)}
.opening-stage .outfit-choices{z-index:12}
.opening-stage .opening-hint{z-index:13;bottom:2%;text-shadow:0 1px 8px #fff}
.masthead{z-index:40}
.studio-opening .masthead{position:fixed;opacity:1!important;visibility:visible!important;transform:none!important;text-shadow:0 1px 10px #ffffff90;background:linear-gradient(#dededec9,transparent)}
@media(max-width:700px){
 .shot-face .shot-art,.shot-feet .shot-art{height:100%;width:auto;aspect-ratio:1086/1448}
 .shot-face .shot-art{height:auto;width:118vw;left:-3vw}
 .shot-reveal .shot-art,.shot-hat .shot-art{height:74svh;width:auto;max-height:none;margin-top:5svh;aspect-ratio:1086/1448}
 .opening-stage .outfit-choices a:first-child,.opening-stage .outfit-choices a:last-child{bottom:4%;width:47%}
}
@media(prefers-reduced-motion:reduce){
 .studio-shot{display:none}.shot-hat{display:flex;visibility:visible}.hat-flying,.hat-before{display:none}.hat-finished{opacity:1}.opening-stage .outfit-choices a{opacity:1;visibility:visible}
}

/* Separate prop layers keep hovering alive when scrolling stops. */
.loose-sock{position:absolute;left:0;top:67%;width:33%;transform:rotate(-17deg)}
.loose-sock img,.end-sock img{display:block;width:100%;height:auto}
.shot-feet.is-active .loose-sock{animation:studio-float 3.5s ease-in-out infinite}
.end-accessories{position:absolute;inset:0;z-index:5;pointer-events:none;visibility:hidden}
.end-accessories>div{position:absolute;will-change:transform}
.end-pearl{right:21%;top:24%;width:8%}
.end-hehe{left:17%;top:42%;width:12%}
.end-sock{right:18%;top:53%;width:10%;transform:rotate(12deg)}
.end-accessories.is-active>div{animation:studio-float 4.5s ease-in-out infinite}
.end-accessories.is-active .end-hehe{animation-delay:-1.6s}.end-accessories.is-active .end-sock{animation-delay:-3s}
.shot-face.is-active .studio-glint{animation:pearl-shimmer 1.8s ease-in-out infinite}
@keyframes studio-float{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -18px;rotate:3deg}}
@keyframes pearl-shimmer{0%,100%{scale:.55;filter:drop-shadow(0 0 3px white)}45%{scale:1.2;filter:drop-shadow(0 0 10px white)}65%{scale:.8}}
@media(max-width:700px){.end-pearl{right:5%;top:25%;width:14%}.end-hehe{left:2%;top:40%;width:19%}.end-sock{right:2%;top:53%;width:17%}}
@media(prefers-reduced-motion:reduce){.loose-sock,.end-accessories>div,.studio-glint{animation:none!important}.end-accessories{visibility:visible}}
/* Feather only photographs, never accessory or sparkle layers. */
.shot-art{mask-image:none}
.shot-art>img{mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent),linear-gradient(0deg,transparent,#000 5%,#000 98%,transparent);mask-composite:intersect}
.shot-face .shot-art>img,.shot-feet .shot-art>img{mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(0deg,transparent,#000 3%,#000 98%,transparent)}
.shot-reveal .shot-art,.shot-hat .shot-art{height:89%;margin-top:7svh}
@media(max-width:700px){.shot-reveal .shot-art,.shot-hat .shot-art{height:74svh;margin-top:6svh}}

/* R27 high-key product studio */
.opening-stage{background:#fbfdfc}
.studio-opening .masthead{background:linear-gradient(#fbfdfcc9,transparent)}
