/* Shared visual studies for the two homepage directions. The original homepage stays intact. */
html[data-concept] .hero{background:#050408}
html[data-concept] .hero:before{inset:0;z-index:-2;filter:none;transform:none;animation:none}
html[data-concept] .hero:after{background:linear-gradient(90deg,#050407f2 0%,#050407ba 29%,transparent 64%),linear-gradient(0deg,#050407db,transparent 19%)}
html[data-concept] .streaks{opacity:0;animation:none}
html[data-concept] .photo-back img{animation:none!important}
html[data-concept] header{padding-top:23px}
html[data-concept] .hero-copy{max-width:min(54vw,850px);padding:clamp(72px,11vh,128px) 4vw 9vh;animation:concept-copy .95s .7s cubic-bezier(.2,.75,.25,1) both;transform:translate(var(--copy-x,0px),var(--copy-y,0px))}
html[data-concept] h1{font-size:clamp(70px,8.55vw,145px)}
html[data-concept] .intro{max-width:420px;margin-top:37px;color:#c4b8c9}
html[data-concept] .cabinet{left:73.5%;top:8%;width:min(45vw,700px);height:78%}
html[data-concept] .cabinet .wardrobe-art{transform:translate(var(--rack-x,0px),var(--rack-y,0px));transition:transform .25s ease-out}
html[data-concept] .cursor-sign{left:86%;width:18%}
html[data-concept] .runway{bottom:9.3%;opacity:.48;filter:drop-shadow(0 0 3px #a565d1)}
html[data-concept] .wardrobe-art{filter:drop-shadow(0 0 10px #a65acc44)}
html[data-concept] .wardrobe-art .rack{filter:drop-shadow(0 0 3px #ac65d28c)}
html[data-concept] .wardrobe-art .garment{filter:drop-shadow(0 0 3px #a75dd588)}
html[data-concept] .wardrobe-art .tag{filter:drop-shadow(0 0 7px #d365fbba)}
html[data-concept] .wardrobe-art #garments .cloth{transition:opacity .3s ease,filter .3s ease}
html[data-concept] .wardrobe-art #garments:not(:hover) .cloth:not(:nth-child(2)){opacity:.76;filter:brightness(.78)}
html[data-concept] .wardrobe-art #garments:not(:hover) .cloth:nth-child(2){filter:brightness(1.28) drop-shadow(0 0 12px #d28af296)}
html[data-concept] .wardrobe-art #garments:hover .cloth:not(:hover){opacity:.38;filter:brightness(.63)}
html[data-concept] .wardrobe-art #garments:hover .cloth:hover{opacity:1;filter:brightness(1.26) drop-shadow(0 0 13px #dfacfa)}
html[data-concept] .wardrobe-art .label{opacity:0;transition:opacity .65s ease 1.5s}
html[data-concept] .cabinet.move .wardrobe-art .label{opacity:1}
html[data-concept] .wardrobe-art #garments .cloth:hover .tag{stroke:#fff4ac;stroke-width:6}
html[data-concept] .wardrobe-art #garments .cloth:hover .tag-name{filter:drop-shadow(0 0 6px #fff9d6)}
html[data-concept] .wardrobe-art #garments .cloth:hover .garment{transform-box:fill-box;transform-origin:50% 5%;animation:concept-fabric .9s ease-in-out 2 alternate}
@keyframes concept-fabric{50%{transform:rotate(1.2deg)}}
html[data-concept] .concept-atmos{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;animation:concept-atmos-in 1.15s .1s ease-out forwards;transform:translate(var(--far-x,0px),var(--far-y,0px));transition:transform .3s ease-out}
html[data-concept] .concept-atmos:before,html[data-concept] .concept-atmos:after{content:"";position:absolute;inset:0;pointer-events:none}
html[data-concept] .concept-atmos:after{opacity:.11;mix-blend-mode:soft-light;background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".62" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity=".55"/%3E%3C/svg%3E')}
html[data-concept] .concept-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translate(var(--mid-x,0px),var(--mid-y,0px));transition:transform .32s ease-out;animation:concept-lines-in 1.1s .43s both}
html[data-concept] .concept-lines path,html[data-concept] .concept-lines circle,html[data-concept] .concept-lines rect{vector-effect:non-scaling-stroke}
html[data-concept] .concept-lines .atelier,html[data-concept] .concept-lines .digital{display:none}
html[data-concept] .fabric-shadow{position:absolute;pointer-events:none;transform:translate(var(--mid-x,0px),var(--mid-y,0px));transition:transform .32s ease-out}
html[data-concept] .concept-caption{position:absolute;z-index:4;right:4vw;bottom:5.2%;font-size:9px;letter-spacing:.24em;color:#bcaac3;white-space:nowrap;pointer-events:none}
@keyframes concept-atmos-in{from{opacity:0;filter:blur(18px)}to{opacity:1;filter:blur(0)}}
@keyframes concept-lines-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translate(0)}}
@keyframes concept-copy{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translate(var(--copy-x,0px),var(--copy-y,0px))}}

/* A — darkroom editorial: one photographic pool of light and faint cloth folds. */
html[data-concept="a"] .hero:before{background:radial-gradient(ellipse 33% 44% at 77% 47%,#68457f83,transparent 79%),radial-gradient(ellipse 24% 18% at 89% 9%,#432b54a8,transparent 76%),linear-gradient(110deg,#050407 35%,#130c18 75%,#050407)}
html[data-concept="a"] .photo-back{opacity:.24!important;mix-blend-mode:luminosity}
html[data-concept="a"] .photo-back img{filter:brightness(.32) contrast(1.35) saturate(.48);object-position:58% top}
html[data-concept="a"] .concept-atmos:before{background:radial-gradient(ellipse 19% 40% at var(--focus-x,72%) 53%,#e8c3f147,transparent 72%),radial-gradient(ellipse 11% 17% at 82% 31%,#f9e7ff38,transparent 72%);filter:blur(10px)}
html[data-concept="a"] .fabric-shadow{inset:-12% 28% 2% 31%;opacity:.34;background:repeating-linear-gradient(113deg,transparent 0 67px,#d4bbd217 70px 87px,transparent 99px 153px),linear-gradient(108deg,transparent 15%,#b28ba635 36%,transparent 52%,#a0809c24 66%,transparent 83%);filter:blur(16px);clip-path:polygon(26% 0,68% 0,100% 89%,79% 100%,48% 70%,4% 95%);transform:rotate(-9deg)}
html[data-concept="a"] .concept-lines .atelier{display:block;fill:none;stroke:#ba93bb34;stroke-width:1}
html[data-concept="a"] .concept-lines .atelier .dashed{stroke-dasharray:8 11;stroke:#d5adc04d}
html[data-concept="a"] .concept-caption:before{content:"●";color:#e9e646;margin-right:8px}
html[data-concept="a"] .wardrobe-art .sign-text{filter:drop-shadow(0 0 6px #bc63db)}
html[data-concept="a"] .cabinet:after{content:"";position:absolute;inset:11% 7% 8%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#e3b8ee1d,transparent 68%);filter:blur(24px);pointer-events:none}

/* B — stage installation: architectural frames, controlled beams, luminous nodes. */
html[data-concept="b"] .hero:before{background:radial-gradient(ellipse 28% 38% at 77% 47%,#56327493,transparent 73%),radial-gradient(ellipse 17% 20% at 59% 12%,#673b88a3,transparent 75%),linear-gradient(115deg,#050407 25%,#0e0919 63%,#07050d)}
html[data-concept="b"] .photo-back{opacity:.11!important;mix-blend-mode:screen}
html[data-concept="b"] .photo-back img{filter:brightness(.22) contrast(1.6) saturate(.5)}
html[data-concept="b"] .concept-atmos:before{background:conic-gradient(from 210deg at 75% 52%,transparent 0deg,#a468cc24 19deg,transparent 39deg,transparent 137deg,#e4e16d16 153deg,transparent 174deg),radial-gradient(ellipse 12% 14% at var(--focus-x,75%) 43%,#d6a3ee52,transparent 76%);filter:blur(5px)}
html[data-concept="b"] .concept-lines .digital{display:block;fill:none;stroke:#8f61b866;stroke-width:1.3}
html[data-concept="b"] .concept-lines .digital .active{stroke:#e3dd70b3;stroke-width:1.6;filter:drop-shadow(0 0 7px #ddda70)}
html[data-concept="b"] .concept-lines .digital .soft{stroke:#9664bc38}
html[data-concept="b"] .fabric-shadow{inset:8% 17% 8% 47%;opacity:.38;background:linear-gradient(119deg,transparent 16%,#8a55bc2c 34%,transparent 35%,transparent 68%,#c09bc52a 70%,transparent 71%),linear-gradient(40deg,transparent 47%,#9f6ece24 48%,transparent 49%);clip-path:polygon(23% 0,87% 0,100% 100%,0 100%)}
html[data-concept="b"] .runway{opacity:.72;filter:drop-shadow(0 0 7px #c171ef)}
html[data-concept="b"] .cabinet{left:74%;top:8%;width:min(45vw,700px)}
html[data-concept="b"] .concept-caption:before{content:"◇";color:#e9e646;margin-right:8px}
html[data-concept="b"] .cabinet .hint{border-color:#eadb6e8a;box-shadow:0 0 19px #dacb5455}

@media(max-width:900px){
  html[data-concept] .hero{min-height:880px}
  html[data-concept] .hero-copy{max-width:100%;padding:42px 4vw 0}
  html[data-concept] h1{font-size:clamp(64px,12vw,104px)}
  html[data-concept] .cabinet,html[data-concept="b"] .cabinet{top:43%;left:50%;width:min(94vw,700px);height:48%}
  html[data-concept] .hero:after{background:linear-gradient(#0504078c 0%,transparent 38%,#05040780 100%)}
  html[data-concept] .concept-caption{bottom:2%;right:4%}
}
@media(max-width:560px){
  html[data-concept] .hero{min-height:920px}
  html[data-concept] header{padding:18px}
  html[data-concept] .hero-copy{padding:32px 20px 0}
  html[data-concept] h1{font-size:clamp(62px,16.3vw,82px)}
  html[data-concept] .eyebrow{margin-bottom:23px}
  html[data-concept] .intro{max-width:330px;margin:14px 0 10px;line-height:1.65}
  html[data-concept] .actions{gap:16px}
  html[data-concept] .primary{gap:17px;padding:14px 12px}
  html[data-concept] .cabinet,html[data-concept="b"] .cabinet{top:50%;left:50%;width:92%;height:42%}
  html[data-concept] .cursor-sign{left:80%;width:16%}
  html[data-concept] .runway{bottom:5%}
  html[data-concept] .number{bottom:13px}
  html[data-concept] .concept-caption{display:none}
  html[data-concept] .concept-lines{opacity:.56}
  html[data-concept="b"] .concept-lines{top:33%;height:67%;opacity:.46}
  html[data-concept] .editor{right:8px;bottom:10px;padding:7px 9px;font-size:9px;background:#18101cbb}
}
@media(prefers-reduced-motion:reduce){
  html[data-concept] .concept-atmos,html[data-concept] .concept-lines,html[data-concept] .hero-copy{animation:none;opacity:1;transform:none}
  html[data-concept] .wardrobe-art .label{opacity:1;transition:none}
  html[data-concept] .cabinet .wardrobe-art{transition:none}
  html[data-concept] .wardrobe-art #garments .cloth:hover .garment{animation:none}
}