/*
 * room.css — the room scene, lifted verbatim from Perch's own `ui/app.css`.
 *
 * The room in the app is not an image: it is a stack of positioned divs filled
 * with token colours — the window and its hills, the sill, the shelf and its
 * brackets, the beanbag, the basket, the plant, the lamp, the bowl, and the dust
 * drifting in the light. Reproducing it here means the room on this page is the
 * room in the app, down to the pixel, rather than a screenshot of it that goes
 * stale the moment a shelf moves.
 *
 * The seat coordinates the pets are placed on come from `js/perch/seats.js`,
 * which is the same file the app shares between its simulation and its window.
 *
 * Unchanged except for this header. Depends on the custom properties in
 * tokens.css.
 */

.scene {
  position: relative;
  width: 620px;
  height: 352px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--color-accent-100),
    color-mix(in srgb, var(--color-accent-200) 55%, var(--color-accent-100))
  );
}

.scene > div { position: absolute; }

.s-floor { left: 0; right: 0; top: 264px; bottom: 0; background: var(--color-accent-200); }

.s-floorline { left: 0; right: 0; top: 264px; height: 2px; background: var(--color-accent-300); opacity: 0.7; }

.s-shadow {
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-neutral-900) 15%, transparent);
  filter: blur(4px);
}

.s-glow {
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-neutral-900) 14%, transparent), transparent);
}

.s-window {
  left: 34px; top: 26px; width: 176px; height: 132px;
  border-radius: 14px;
  background: var(--color-accent-2-100);
  border: 7px solid var(--color-neutral-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.s-window > div { position: absolute; }

.s-sky { left: 0; right: 0; top: 0; height: 62%; background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent-2-200) 45%, #ffffff), var(--color-accent-2-100)); }

.s-sun { right: 16px; top: 12px; width: 26px; height: 26px; border-radius: 999px; background: color-mix(in srgb, var(--color-accent-300) 70%, #ffffff); }

.s-hill-a { left: -24px; bottom: -30px; width: 120px; height: 78px; border-radius: 999px; background: var(--color-accent-2-300); opacity: 0.85; }

.s-hill-b { right: -20px; bottom: -38px; width: 130px; height: 86px; border-radius: 999px; background: var(--color-accent-2-200); }

.s-mullion-v { left: 50%; top: 0; bottom: 0; width: 6px; transform: translateX(-50%); background: var(--color-neutral-100); }

.s-mullion-h { left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%); background: var(--color-neutral-100); }

.s-curtain { left: 196px; top: 20px; width: 26px; height: 150px; border-radius: 999px 999px 60% 60%; background: var(--color-accent-300); opacity: 0.8; }

.s-sill { left: 26px; top: 162px; width: 192px; height: 13px; border-radius: 999px; background: var(--color-neutral-300); }

.s-shelf { left: 262px; top: 120px; width: 298px; height: 13px; border-radius: 999px; background: var(--color-neutral-300); }

.s-bracket { top: 133px; width: 11px; height: 30px; border-radius: 0 0 999px 999px; background: var(--color-neutral-300); opacity: 0.55; }

.s-book { left: 300px; top: 44px; width: 52px; height: 44px; border-radius: 10px; background: var(--color-neutral-100); border: 4px solid var(--color-accent-2-200); }

.s-pot { left: 366px; top: 54px; width: 38px; height: 34px; border-radius: 999px; background: var(--color-accent-2-200); opacity: 0.7; }

.s-vase { left: 540px; top: 56px; width: 18px; height: 32px; border-radius: 999px; background: var(--color-accent-300); opacity: 0.55; }

.s-rug { left: 150px; top: 262px; width: 308px; height: 64px; border-radius: 999px; background: var(--color-accent-2-200); opacity: 0.7; }

.s-beanbag { left: 196px; top: 214px; width: 100px; height: 68px; border-radius: 999px 999px 62% 62%; background: var(--color-accent-300); box-shadow: var(--shadow-sm); }

.s-basket { left: 430px; top: 226px; width: 128px; height: 76px; border-radius: 999px; background: var(--color-accent-2-300); box-shadow: var(--shadow-sm); }

.s-basket-in { left: 444px; top: 240px; width: 100px; height: 44px; border-radius: 999px; background: var(--color-accent-2-200); }

.s-beanbag-front {
  left: 196px; top: 258px; width: 100px; height: 24px;
  border-radius: 0 0 62% 62%;
  background: var(--color-accent-300);
  z-index: 2;
}

.s-basket-front {
  left: 430px; top: 268px; width: 128px; height: 34px;
  border-radius: 0 0 999px 999px;
  background: var(--color-accent-2-300);
  z-index: 2;
}

.s-planter { left: 36px; top: 214px; width: 48px; height: 62px; border-radius: 8px 8px 999px 999px; background: var(--color-accent-400); }

.s-leaf-a { left: 40px; top: 176px; width: 16px; height: 44px; border-radius: 999px; background: var(--color-accent-2-400); transform: rotate(-16deg); }

.s-leaf-b { left: 56px; top: 168px; width: 14px; height: 52px; border-radius: 999px; background: var(--color-accent-2-300); }

.s-leaf-c { left: 66px; top: 182px; width: 15px; height: 40px; border-radius: 999px; background: var(--color-accent-2-400); transform: rotate(18deg); }

.s-lampshade { left: 110px; top: 186px; width: 44px; height: 26px; border-radius: 999px 999px 40% 40%; background: var(--color-accent-300); }

.s-lampstem { left: 130px; top: 212px; width: 4px; height: 64px; background: var(--color-neutral-300); }

.s-lampfoot { left: 116px; top: 274px; width: 32px; height: 9px; border-radius: 999px; background: var(--color-neutral-300); }

.s-bowl { left: 342px; top: 296px; width: 46px; height: 15px; border-radius: 999px; background: var(--color-neutral-300); }

.s-bowl-in { left: 348px; top: 299px; width: 34px; height: 8px; border-radius: 999px; background: var(--color-accent-400); opacity: 0.8; }

.s-mat { left: 96px; top: 300px; width: 56px; height: 11px; border-radius: 999px; background: var(--color-accent-2-300); opacity: 0.75; }

.s-mote {
  border-radius: 999px;
  background: var(--color-accent-400);
  opacity: 0.32;
  animation-name: mote;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes mote {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, -16px); }
}

.seat {
  position: absolute;
  width: 0;
  height: 0;
  cursor: pointer;
  -webkit-app-region: no-drag;
}

.figure {
  position: absolute;
  left: var(--fx, 0px);
  top: var(--fy, 0px);
  transform-origin: bottom center;
  animation: breathe 3.8s ease-in-out infinite;
}

.figure canvas { display: block; }

.seat.is-taken:hover .figure { animation-play-state: paused; }

.seat-name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}