/* ---------- Portes ---------- */

.door {
  --w: 156px;
  position: absolute;
  width: var(--w);
  aspect-ratio: 160 / 280;
  transform: translate(-50%, -95.7%) scale(var(--s, 1));
  transform-origin: 50% 95.7%;
  pointer-events: none;
}

.door > svg,
.door > div {
  position: absolute;
}

.door-portal,
.door-frame {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.door-leaf {
  transform-origin: left center;
  transition: transform 1.9s cubic-bezier(.35, .05, .15, 1);
}
.door-leaf.right { transform-origin: right center; }
.door-leaf svg { display: block; width: 100%; height: 100%; }

.door.open .door-leaf.left { transform: perspective(calc(var(--w) * 2.2)) rotateY(76deg); }
.door.open .door-leaf.right { transform: perspective(calc(var(--w) * 2.2)) rotateY(-76deg); }
/* Le battant s'assombrit en s'ouvrant (fondu d'un calque noir, sans filtre) */
.door-leaf::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 1.9s ease;
}
.door.open .door-leaf::after { opacity: .58; }
.door.leaves-1.open .door-leaf.left { transform: perspective(calc(var(--w) * 2.6)) rotateY(78deg); }


/* Porte déjà ouverte pendant la session : estompée */
.door.opened { opacity: .42; }

/* Halo lumineux derrière la porte */
.door-halo {
  left: -30%;
  right: -30%;
  top: -12%;
  bottom: -6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 130, .55), rgba(255, 170, 80, .18) 55%, transparent);
  opacity: 0;
  transition: opacity .6s ease;
}
.door.chosen .door-halo { opacity: 1; animation: halo-pulse 1.4s ease-in-out infinite; }
.door.open .door-halo { opacity: 1; animation: none; }

@keyframes halo-pulse {
  0%, 100% { transform: scale(.94); opacity: .65; }
  50% { transform: scale(1.06); opacity: 1; }
}


/* Participants (mode TikTok) : un petit personnage par personne, devant la porte */
.door-crowd {
  position: absolute;
  z-index: 2000;
  transform: translate(-50%, -50%) scale(var(--s, 1));
  transform-origin: 50% 50%;
  pointer-events: none;
  width: max-content;
  display: flex;
  align-items: center;
  transition: left .35s ease, top .35s ease;
}
.door-crowd .figs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 3px;
}
.person {
  width: 19px;
  height: 27px;
  flex: none;
  animation: person-in .5s cubic-bezier(.2, 1.6, .4, 1) both;
}
.person svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: hsl(calc(38 + var(--h) * .06) 85% calc(66% + var(--h) * .03%));
  stroke: rgba(40, 20, 0, .85);
  stroke-width: 1.2px;
  paint-order: stroke;
}
.crowd-tag {
  flex: none;
  align-self: center;
  width: 26px;
  height: 26px;
  margin-right: 4px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2a1646;
  border: 1.5px solid var(--gold);
  color: var(--gold-light);
  font: 700 15px/1 var(--font-title);
}
.door-crowd .more {
  align-self: center;
  margin-left: 3px;
  font: 700 24px/1 var(--font-title);
  color: var(--gold-light);
  text-shadow: 0 0 8px rgba(0, 0, 0, .9), 0 0 6px rgba(255, 200, 110, .6);
}
@keyframes person-in { from { transform: translateY(8px) scale(.3); opacity: 0; } }