/* Una sola apertura gobierna la hoja y el arco, incluso al invertir el hover. */
@property --door-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

.menu-dialog .room .door {
  --door-angle: 0deg;
  --door-length: 8.873239cqw; /* 63 px en el plano de 710 px */
  --wall-width: .56338cqw;   /* 4 px: mismo grosor que el muro */
  --sweep-fill: #f0dfd6;
  position: absolute;
  top: 15.352113cqw;
  bottom: auto;
  width: 0;
  height: var(--door-length);
  border: 0;
  border-radius: 0;
  background: none;
  transform: none;
  pointer-events: none;
  z-index: 1;
  transition: --door-angle var(--door-duration) var(--door-ease);
}

/* El origen está exactamente en el eje del muro, a media anchura del borde. */
.menu-dialog .room--left .door {
  left: auto;
  right: calc(var(--wall-width) / -2);
  --opening-direction: 1;
}
.menu-dialog .room--right .door {
  left: calc(var(--wall-width) / -2);
  right: auto;
  --opening-direction: -1;
}

/* Abre un hueco de 63 px sin mover el resto de la pared. */
.door::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(var(--wall-width) / -2);
  width: var(--wall-width);
  height: var(--door-length);
  background: var(--paper);
}

.door-panel {
  display: block;
  position: absolute;
  top: 0;
  left: calc(var(--wall-width) / -2);
  width: var(--wall-width);
  height: var(--door-length);
  background: var(--ink);
  transform-origin: 50% 0;
  transform: rotate(calc(var(--door-angle) * var(--opening-direction)));
  z-index: 2;
}

/* Sector circular y contorno: ambos se dibujan en CSS desde 0 hasta 90 grados.
   El centro del círculo coincide con la bisagra y su radio con la hoja. */
.door-arc {
  display: block;
  position: absolute;
  left: calc(-1 * var(--door-length));
  top: calc(-1 * var(--door-length));
  width: calc(2 * var(--door-length));
  height: calc(2 * var(--door-length));
  border-radius: 50%;
  background: conic-gradient(from 180deg, var(--sweep-fill) 0deg var(--door-angle), transparent var(--door-angle) 360deg);
  z-index: 1;
}
.door-arc::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 180deg, var(--ink) 0deg var(--door-angle), transparent var(--door-angle) 360deg);
  mask-image: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
}
.room--right .door-arc { transform: scaleX(-1); }

@media (hover:hover) {
  body[data-mode='hover'] .room:hover .door { --door-angle: 90deg; }
}
body[data-mode='hover'] .room:focus-visible .door,
body[data-mode='open'] .room .door,
body[data-mode='figma'] .room[data-figma-open='true'] .door { --door-angle: 90deg; }

@media (prefers-reduced-motion:reduce) {
  .menu-dialog .room .door { transition: none; }
}
.motion-paused .menu-dialog .room .door { transition: none; }