/* The product's own face, for the room inside the workspace window only. */
@font-face {
  font-family: "Martian Grotesk";
  src: url("./room/martian.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
.workspace-window { overflow: hidden; }
.workspace-shot {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

/* Till lands in the room header (hero-avatar.js dock), not on the window's centre line. */
.workspace-window::after { display: none; }
.hero[data-pill-docked] .hero-goal-visual { transition: transform .36s cubic-bezier(.22, 1, .36, 1); }
/* Landed, the headline's Till hands over to the room's own: the pill's key then works the way the product's does. */
.hero[data-pill-handed] .hero-goal-visual { opacity: 0; transition: opacity .35s ease, transform .36s cubic-bezier(.22, 1, .36, 1); }

/* A calmer frame for the room: 16:10. */
.workspace-window { aspect-ratio: 16 / 10; }
/* Phones show the feed alone at its own size, in a taller frame so more of the conversation shows; the glow follows the frame. */
@media (max-width: 560px) {
  .workspace-window { aspect-ratio: 3 / 4; }
  .workspace-glow { aspect-ratio: auto; inset: 16px 0 -24px; }
}
/* The demo window stops growing at 1080px; the glow keeps the same margin around it as on smaller screens. */
.workspace-window { max-width: 1080px; }
.workspace-glow { left: 50%; right: auto; width: min(100%, 1202px); translate: -50% 0; }