.portas {
  position: fixed;
  inset: 0;
  z-index: 90;              
  overflow: hidden;
  pointer-events: none;
}
.porta {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 50.5%;
  background: #4A294B;
  border: 2px solid #713773;
  animation-duration: 1100ms;
  animation-timing-function: cubic-bezier(.7, 0, .2, 1);
  animation-delay: 200ms;
  animation-fill-mode: both;
}
.porta::before {
  content: "";
  position: absolute;
  inset: 7% 9%;
  border: 2px solid rgba(241, 239, 241, 0.10);
  border-radius: 6px;
}
.porta--esq { left: -0.5%;  animation-name: abrePortaEsq; }
.porta--dir { left: 50%;    animation-name: abrePortaDir; }
.puxa-v {
  position: absolute;
  top: 50%;
  width: 11px;
  height: 84px;
  margin-top: -42px;
  border-radius: 6px;
  background: rgba(241, 239, 241, 0.30);
  box-shadow: inset 0 0 0 1px rgba(241, 239, 241, 0.22);
}
.porta--esq .puxa-v { right: 26px; }
.porta--dir .puxa-v { left: 26px; }
.portas-marca {
  position: absolute;
  left: 50%;
  
  top: 34%;
  display: flex;
  gap: 9px;
  animation: marcaArmario 640ms ease-out 120ms both;
}
.portas-marca i { display: block; width: 15px; height: 15px; border-radius: 50%; }
.portas-marca i:nth-child(1) { background: #3A1E3C; box-shadow: 0 0 0 2px rgba(241, 239, 241, 0.55); }
.portas-marca i:nth-child(2) { background: #3F4BA0; }
.portas-marca i:nth-child(3) { background: #4FC08A; }
.portas-marca i:nth-child(4) { background: #D63BC8; }
@keyframes abrePortaEsq {
  0%   { transform: translateX(0); }
  16%  { transform: translateX(1.6%); }
  100% { transform: translateX(-101%); }
}
@keyframes abrePortaDir {
  0%   { transform: translateX(0); }
  16%  { transform: translateX(-1.6%); }
  100% { transform: translateX(101%); }
}
@keyframes marcaArmario {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
  38%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}
html.sem-portas .portas { display: none; }
@media (prefers-reduced-motion: reduce) {
  .portas { display: none; }
}