/* ============================================================
   WARDROBE — cream bamboo doors
   Two leaves over the rail; a swipe either way (or a press) parts
   them and stays open.
   ============================================================ */

.wardrobe__room{position:relative}

.door{
  position:absolute;inset:0;z-index:6;
  display:flex;align-items:stretch;
  cursor:grab;touch-action:pan-y;outline:none;
  overflow:hidden;
  border:10px solid #d8c7a4;
  box-shadow:inset 0 0 0 1px rgba(120,96,58,.35), 0 18px 40px rgba(70,56,34,.18);
  background:#e9dcc0;
  transition:opacity .6s var(--ease);
}
.door:active{cursor:grabbing}
.door:focus-visible{outline:1px dashed rgba(10,20,24,.4);outline-offset:-10px}

.door__leaf{
  position:relative;width:50.2%;height:100%;
  border-top:8px solid #e2d3b2;
  border-bottom:8px solid #e2d3b2;
  /* vertical bamboo poles: rounded shading per pole, then node rings */
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0) 0 92px,
      rgba(126,100,58,.30) 92px 95px,
      rgba(255,255,255,.35) 95px 98px,
      rgba(255,255,255,0) 98px 190px),
    repeating-linear-gradient(90deg,
      #cdb894 0 3px,
      #eadfc6 3px 12px,
      #f7f0de 12px 30px,
      #e8dbc0 30px 40px,
      #c8b28c 40px 44px),
    linear-gradient(180deg,#f3ead6,#e4d6b8);
  box-shadow:inset 0 0 70px rgba(120,96,58,.22);
  transition:transform 1.05s cubic-bezier(.22,.61,.24,1);
  will-change:transform;
}
/* a gloss line down the middle of every pole */
.door__leaf::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,0) 0 17px,
    rgba(255,255,255,.55) 17px 20px,
    rgba(255,255,255,0) 20px 44px);
  opacity:.65;
  pointer-events:none;
}
/* stiles at the outer and inner edges */
.door__leaf::after{
  content:"";position:absolute;top:0;bottom:0;width:16px;
  background:linear-gradient(90deg,#c4ad87,#e6d9bb);
  pointer-events:none;
}
.door__leaf--left{box-shadow:inset -2px 0 0 rgba(110,88,52,.45), inset 0 0 70px rgba(120,96,58,.22), 10px 0 30px rgba(60,48,30,.22)}
.door__leaf--right{box-shadow:inset 2px 0 0 rgba(110,88,52,.45), inset 0 0 70px rgba(120,96,58,.22), -10px 0 30px rgba(60,48,30,.22)}
.door__leaf--left::after{right:0;background:linear-gradient(270deg,#c4ad87,#e6d9bb)}
.door__leaf--right::after{left:0}

.door__glow{
  position:absolute;left:50%;top:0;bottom:0;width:30px;transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(60,46,26,0),rgba(60,46,26,.28),rgba(60,46,26,0));
  pointer-events:none;transition:opacity .5s var(--ease);
}

.door__hint{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  margin:0;white-space:nowrap;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:#5a4a30;
  background:rgba(247,240,222,.86);
  border:1px solid rgba(120,96,58,.35);
  padding:12px 20px;
  display:flex;align-items:center;gap:14px;
  box-shadow:0 6px 18px rgba(70,56,34,.18);
  transition:opacity .5s var(--ease);
}
.door__hint span{opacity:.6}

/* open state */
.door.is-open{pointer-events:none;opacity:0;transition-delay:.25s}
.door.is-open .door__leaf--left{transform:translateX(-101%)}
.door.is-open .door__leaf--right{transform:translateX(101%)}
.door.is-open .door__glow,
.door.is-open .door__hint{opacity:0}

.door.is-dragging .door__leaf{transition:none}

@media (max-width:720px){
  .door{border-width:7px}
  .door__hint{font-size:8.5px;letter-spacing:.24em;padding:10px 16px}
}

@media (prefers-reduced-motion:reduce){
  .door__leaf{transition-duration:.45s}
}