/* The 3D drawing of the studio, on /join and /host. */
.space { position: relative; aspect-ratio: 2 / 1; max-block-size: 70svh; margin-inline: auto; touch-action: pan-y; }
.space[hidden] { display: none; }
.space canvas { display: block; inline-size: 100%; block-size: 100%; touch-action: pan-y; outline: none; }
.space-labels { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 700ms var(--ease-out); }
.space-labels.shown { opacity: 1; }
.space-label { position: absolute; inset-block-start: 0; inset-inline-start: 0; font-size: 12px; color: var(--faint); white-space: nowrap; }

/* The name of the chosen desk or seat, floating over it. */
.space-open {
  position: absolute; inset-block-start: 0; inset-inline-start: 0; margin-block-start: -6px;
  padding: 3px 10px; border-radius: 4px; background: var(--lamp); color: #2b2213; font-size: 12px; font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease-out);
}
.space-open.shown { opacity: 1; }
.space-open[hidden] { display: none; }
.space-open:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }
/* Name tags over taken desks and seats. */
.space-names { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 700ms var(--ease-out); }
.space-names.shown { opacity: 1; }
.space-name {
  position: absolute; inset-block-start: 0; inset-inline-start: 0; margin-block-start: -4px; padding: 1px 7px; border-radius: 4px;
  background: #0d1622e6; box-shadow: inset 0 0 0 1px #5b9be059; color: #b8d3f2; font-size: 11px; white-space: nowrap;
}
@media (max-width: 760px) { .space { aspect-ratio: 4 / 5; } .space-name { font-size: 10px; padding-inline: 5px; } }
@media (prefers-reduced-motion: reduce) { .space-labels, .space-open, .space-names { transition: none; } }
/* The room's insides fade in once its outline is there (on Home's way in, router.js draws the outline from Home's
   box first and holds this until the lines land). */
.space canvas, .space-labels, .space-names, .space-open { transition: opacity 600ms var(--ease-out); }
.space.is-arriving canvas, .space.is-arriving :is(.space-labels, .space-names, .space-open) { opacity: 0 !important; transition: none; }
/* Not there yet, so nothing to drag or pick until it has fully come in. */
.space:is(.is-arriving, .is-revealing) { pointer-events: none; }
/* Then its inside sweeps in from the entrance end, a soft edge running across. */
.space.is-revealing canvas { mask-image: linear-gradient(90deg, #000 42%, transparent 58%); mask-size: 240% 100%; mask-repeat: no-repeat; animation: room-sweep 600ms cubic-bezier(.22, 1, .36, 1) both; }
.space.is-revealing :is(.space-labels, .space-names, .space-open) { transition-delay: 250ms; }
@keyframes room-sweep { from { mask-position: 100% 0; } to { mask-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .space canvas, .space-labels, .space-names, .space-open { transition: none; } .space.is-revealing canvas { animation: none; mask-image: none; } }