/* The window the workspace sits in, on the same backdrop as the homepage's other pictures. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("./inter-latin-wght-normal.woff2") format("woff2-variations");
}

/* Clipped, not just hidden: an overflow-hidden box can still be scrolled, and a drawer that
   takes focus while it sits off to the side would scroll the whole app sideways. */
html,
body {
  margin: 0;
  background: #d0c7b9;
  overflow: clip;
}

.ws-scene {
  position: relative;
  width: 1456px;
  height: 984px;
}

.ws-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ws-window {
  position: absolute;
  top: 72px;
  left: 88px;
  width: 1280px;
  height: 840px;
  overflow: clip;
  border-radius: 12px;
  background: #f5f5f5;
  box-shadow:
    0 0 0 1px rgba(38, 38, 43, 0.1),
    0 24px 64px rgba(38, 38, 43, 0.22),
    0 4px 12px rgba(38, 38, 43, 0.08);
}

.ws-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.ws-lights {
  position: absolute;
  left: 18px;
  top: 50%;
  display: flex;
  gap: 8px;
  transform: translateY(-50%);
}

.ws-lights i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d9d9dc;
}

.ws-address {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 400px;
  height: 26px;
  border-radius: 6px;
  background: #e9e9ec;
  color: #6f6f77;
  font:
    13px / 1 "Inter Variable",
    Inter,
    system-ui,
    sans-serif;
  letter-spacing: -0.006em;
}

.ws-address svg {
  width: 12px;
  height: 12px;
}

/* The app's fixed panels place themselves against this box, not the scene. */
.ws-stage {
  position: relative;
  width: 1280px;
  height: 800px;
  overflow: clip;
  background: #fff;
  transform: translate(0);
}

.ws-stage > * {
  height: 100%;
}

/* Shown once, when the scene first comes into view and nobody has touched it yet. */
.ws-pulse {
  animation: ws-pulse 1.8s ease-out 1;
}

@keyframes ws-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(38, 38, 43, 0.3);
  }
  60% {
    box-shadow: 0 0 0 10px rgba(38, 38, 43, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(38, 38, 43, 0);
  }
}