/* Wu Wear showroom: dark 3D theater */
.stage{position:relative;height:calc(100vh - 110px);min-height:560px;overflow:hidden;background:#050505;isolation:isolate;border-bottom:1px solid var(--line)}
.stage-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:
    radial-gradient(ellipse 34% 52% at 50% 40%, rgba(196,214,216,.95), rgba(150,172,178,.55) 45%, transparent 78%),
    linear-gradient(180deg,#0a0d10 0%,#1a2328 38%,#2a363b 52%,#0f1417 53%,#07090b 100%)}
/* distant misty ridges seen through the far doorway */
.ridge{position:absolute;left:50%;transform:translateX(-50%);bottom:47%;width:30%;height:26%;
  background:linear-gradient(180deg,rgba(120,142,148,.0),rgba(96,118,126,.75));
  clip-path:polygon(0 100%,0 62%,14% 38%,26% 56%,41% 24%,56% 50%,70% 30%,84% 54%,100% 40%,100% 100%);filter:blur(2px);opacity:.85}
.ridge.r2{width:38%;height:18%;bottom:46%;opacity:.55;filter:blur(4px);background:linear-gradient(180deg,transparent,rgba(170,190,194,.8))}
/* long hall: dark walls with lattice windows, stone floor */
.hall{position:absolute;inset:0;perspective:900px;perspective-origin:50% 42%}
.wall{position:absolute;top:-8%;bottom:6%;width:62%;
  background:
    linear-gradient(90deg,rgba(0,0,0,.0),rgba(0,0,0,.55)),
    repeating-linear-gradient(90deg,#05080a 0 5%,transparent 5% 30%),
    repeating-linear-gradient(90deg,rgba(176,196,200,.07) 0 1px,transparent 1px 18px),
    repeating-linear-gradient(0deg,rgba(176,196,200,.07) 0 1px,transparent 1px 18px),
    linear-gradient(180deg,#0c1114,#1b252a 45%,#0a0e10)}
.wall.l{left:-4%;transform-origin:0 50%;transform:rotateY(74deg)}
.wall.r{right:-4%;transform-origin:100% 50%;transform:rotateY(-74deg);background:
    linear-gradient(270deg,rgba(0,0,0,0),rgba(0,0,0,.55)),
    repeating-linear-gradient(90deg,#05080a 0 5%,transparent 5% 30%),
    repeating-linear-gradient(90deg,rgba(176,196,200,.07) 0 1px,transparent 1px 18px),
    repeating-linear-gradient(0deg,rgba(176,196,200,.07) 0 1px,transparent 1px 18px),
    linear-gradient(180deg,#0c1114,#1b252a 45%,#0a0e10)}
.floor{position:absolute;left:-30%;right:-30%;top:52%;height:120%;transform-origin:50% 0;transform:rotateX(74deg);
  background:
    repeating-linear-gradient(90deg,rgba(150,172,178,.09) 0 2px,transparent 2px 160px),
    repeating-linear-gradient(0deg,rgba(150,172,178,.09) 0 2px,transparent 2px 160px),
    linear-gradient(180deg,#27343a,#0b1013 60%)}
.haze{position:absolute;inset:0;background:radial-gradient(ellipse 40% 24% at 50% 52%, rgba(190,208,212,.55), transparent 75%)}
.beam{position:absolute;inset:-10% -10% 0;
  background:conic-gradient(from 180deg at 50% 38%, transparent 168deg, rgba(210,226,228,.05) 176deg, rgba(210,226,228,.12) 180deg, rgba(210,226,228,.05) 184deg, transparent 192deg);
  filter:blur(8px);opacity:.8;animation:beam 11s ease-in-out infinite alternate}
@keyframes beam{from{opacity:.5}to{opacity:.95}}
.smoke{position:absolute;width:90%;height:50%;border-radius:50%;filter:blur(55px);opacity:.55;
  background:radial-gradient(closest-side, rgba(170,192,198,.35), transparent)}
.smoke.s1{left:-25%;top:44%;animation:drift1 30s ease-in-out infinite alternate}
.smoke.s2{right:-25%;top:50%;animation:drift2 38s ease-in-out infinite alternate;background:radial-gradient(closest-side, rgba(130,156,164,.3), transparent)}
@keyframes drift1{to{transform:translate(38%,-4%) scale(1.15)}}
@keyframes drift2{to{transform:translate(-34%,6%) scale(1.1)}}

.persp{position:absolute;inset:0;z-index:1;perspective:900px;perspective-origin:50% 45%}
.scene{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.gar{position:absolute;left:0;top:0;margin:0;padding:0;border:0;background:none;cursor:pointer;
  transform-style:preserve-3d;will-change:transform,opacity;opacity:0;translate:-50% -50%;
  filter:saturate(.82) drop-shadow(0 0 1px rgba(220,235,238,.6)) drop-shadow(0 0 22px rgba(150,180,190,.28)) drop-shadow(0 30px 28px rgba(0,0,0,.75))}
.gar img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}
.gar:focus-visible{outline:2px solid var(--lime);outline-offset:6px}
.dust{position:absolute;left:0;top:0;width:3px;height:3px;border-radius:50%;background:#dfeaec;opacity:0;pointer-events:none;box-shadow:0 0 6px rgba(200,225,230,.7)}

.vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, transparent 34%, rgba(0,0,0,.6) 76%, #000 100%)}
.grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}

.hud{position:absolute;z-index:5;left:clamp(1.2rem,4vw,3rem);bottom:clamp(1.2rem,4vw,2.4rem);display:flex;flex-direction:column;gap:.9rem;pointer-events:none}
.hud-title{font-family:var(--serif);font-style:italic;font-size:clamp(1.8rem,5vw,3.4rem);line-height:.95;letter-spacing:-.02em}
.hud-sub{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.hud-links{display:flex;gap:.7rem;flex-wrap:wrap;pointer-events:auto}
.hud-links a{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;border:1px solid rgba(236,233,216,.35);padding:.7rem 1.1rem;background:rgba(0,0,0,.4);backdrop-filter:blur(4px)}
.hud-links a.primary{background:var(--lime);color:var(--bg);border-color:var(--lime);font-weight:700}
.hud-links a:hover{opacity:.85}
.scrollcue{position:absolute;z-index:5;right:clamp(1.2rem,4vw,3rem);bottom:clamp(1.2rem,4vw,2.4rem);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);pointer-events:none}

.card{position:absolute;z-index:6;left:50%;bottom:clamp(1rem,3vw,2rem);transform:translateX(-50%);display:flex;align-items:center;gap:1.2rem;
  background:rgba(8,8,8,.82);border:1px solid rgba(236,233,216,.3);backdrop-filter:blur(8px);padding:.9rem 1.2rem;max-width:min(92vw,520px)}
.card[hidden]{display:none}
.c-name{font-family:var(--serif);font-style:italic;font-size:1.25rem}
.c-sub{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:.2rem}
.c-go{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;background:var(--lime);color:var(--bg);padding:.7rem 1rem;font-weight:700;white-space:nowrap}
.c-close{background:none;border:0;color:var(--mute);font-family:var(--mono);font-size:1.1rem;cursor:pointer;padding:.2rem .4rem}

/* enter gate */
.gate{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;text-align:center;padding:1.5rem;
  background:rgba(4,4,4,.78);backdrop-filter:blur(10px);transition:opacity .9s ease}
.gate.open{opacity:0;pointer-events:none}
.gate[hidden]{display:none}
.gate .g-eyebrow{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.gate .g-title{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(3rem,12vw,7rem);line-height:.9;letter-spacing:-.02em}
.gate .g-note{font-size:.72rem;letter-spacing:.12em;color:var(--mute);max-width:36ch;line-height:1.7}
.gate .g-btn{background:var(--lime);color:var(--bg);border:0;font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;padding:1.1rem 2.6rem;cursor:pointer}
.gate .g-btn:hover{opacity:.88}
.gate .g-quiet{background:none;border:0;border-bottom:1px solid var(--line);color:var(--mute);font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:.2rem 0}
.gate .g-quiet:hover{color:var(--fg)}

/* mute button, fixed on the side */
.mute{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;align-items:center;gap:.7rem;
  background:rgba(8,8,8,.85);border:1px solid rgba(236,233,216,.3);border-right:0;color:var(--fg);font-family:var(--mono);cursor:pointer;padding:1rem .6rem}
.mute:hover{border-color:var(--lime)}
.mute .m-txt{writing-mode:vertical-rl;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase}
.mute .bars{display:flex;gap:2px;align-items:flex-end;height:16px}
.mute .bars i{display:block;width:3px;background:var(--lime);animation:eq 1s ease-in-out infinite}
.mute .bars i:nth-child(1){height:6px;animation-delay:-.2s}.mute .bars i:nth-child(2){height:14px;animation-delay:-.5s}.mute .bars i:nth-child(3){height:9px;animation-delay:-.8s}
.mute.off .bars i{animation:none;height:3px;background:var(--mute)}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.beam,.smoke,.mute .bars i{animation:none}}
@media (max-width:700px){.scrollcue{display:none}.card{flex-wrap:wrap}}

/* optional photo backdrop: drop a file at showroom/img/hall.jpg and it fades in behind the garments */
.hall-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.0;transition:opacity 1.4s ease;filter:saturate(.7) contrast(1.05) brightness(.8)}
.hall-photo.ok{opacity:1}
.stage.has-photo .hall,.stage.has-photo .ridge,.stage.has-photo .haze{display:none}
.hall-photo{filter:saturate(.85) contrast(1.05) brightness(1.25);object-position:50% 62%}
.stage.has-photo .vignette{background:radial-gradient(ellipse at 50% 48%, transparent 45%, rgba(0,0,0,.45) 82%, rgba(0,0,0,.8) 100%)}
.stage.has-photo .smoke{opacity:.22}
.stage.has-photo .beam{opacity:.5}