/* Her portrait, alive in the bedroom (room-sitter.js, Room chat, 31 October night; her slips, Portrait chat, 31 October
   night). On her own sheet just in front of the vanity wall, at the frame's angle: her clip in the opening, the brass plate
   on the bottom rail (the portrait page's plate, worn on the wall) and her question slips sticking out from under the
   frame's left side, in the paper of the Paradox Box's fortune ticket (lots/paradox/site/style.css, .cabinet.under .card).
   sitter.css styles her page; the page's card is never shown in the room. Nothing inside the room uses opacity (the TRAP in
   skin-marble.css: it paints the left wall black). */
.sitter.roomsitter { position: fixed; inset: 0; z-index: 35; background: none; overflow: visible; pointer-events: none; }
.sitter.roomsitter .slot { display: none; }
.stage.holding .turn { visibility: hidden; }   /* while she holds the view (room.js RoomView) the arrows would do nothing */

/* the touches, bigger than what they cover (room-sitter.js): flat over the room with the hotspots, nothing to see */
.hots .roomsitter-pad { position: absolute; display: block; cursor: pointer; background: none; }
.hots .roomsitter-pad[hidden] { display: none; }

/* her sheet: the vanity wall's touch sheet, laid flat over the room in its perspective (room-sitter.js sets its size and,
   each frame, its matrix; since 1 November, when inside the turning room it flickered behind the wall) */
.roomsitter-flat { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.roomsitter-sheet { position: absolute; left: 50%; top: 50%; margin: 0; transform-origin: 0 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
.roomsitter-sheet .roomsitter-mark { position: absolute; width: 0; height: 0; visibility: hidden; }
.roomsitter-sheet .roomsitter-film, .roomsitter-sheet .roomsitter-plaque { position: absolute; left: 0; top: 0; width: 300px; height: 400px; transform-origin: 0 0; }
.roomsitter-sheet .roomsitter-film { display: block; object-fit: fill; border: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 97%, transparent);
  mask-composite: intersect; }
.roomsitter-sheet .roomsitter-film[hidden] { display: none; }
/* the plate: the portrait page's brass (sitter.css .plate), on the rail just under the opening, in the box's own pixels */
.roomsitter-sheet .roomsitter-plaque > span { position: absolute; left: 50%; top: 103.5%; transform: translate(-50%, -50%); padding: 3px 11px;
  font: italic 600 17px / 1.1 Lora, Georgia, serif; letter-spacing: .02em; white-space: nowrap; color: #3b2606;
  background: linear-gradient(180deg, #f3d98c, #c79a3e 55%, #a77a26); border: 1px solid #6e4b12; border-radius: 2px;
  box-shadow: inset 0 1px 0 #fff6, 0 1px 2px #0008; }
.roomsitter-sheet .roomsitter-plaque.rap > span { animation: roomsitter-rap .18s; }
@keyframes roomsitter-rap { 0%, 100% { translate: 0 0; } 30% { translate: -2px 1px; } 60% { translate: 2px -1px; } }   /* as sitter.css's knock */

/* her slips, tucked under the frame's left side, in the box's own pixels (the opening is 300 by 400; the gilt's outer edge
   is about 75 to its left). Each slides out from underneath the frame and back under it: as it moves right it is cut on
   the right by as much (clip-path, in step with the transform), so it always ends at the gilt's edge. No box with
   overflow hidden holds them (her walk, 31 October: they vanished as the room moved on her phone). One question to a slip, her order from the top; a glint wakes on each now and then. .roomsitter-rest marks where a
   slip rests when it is out, for its touch. */
.roomsitter-sheet .roomsitter-tuck { position: absolute; left: -262px; top: 0; width: 188px; height: 410px; }
.roomsitter-sheet .roomsitter-slip, .roomsitter-sheet .roomsitter-rest { position: absolute; right: 4px; top: calc(6px + var(--i) * 66px); width: 172px; height: 58px; box-sizing: border-box; }
.roomsitter-sheet .roomsitter-rest { visibility: hidden; }
.roomsitter-sheet .roomsitter-slip.long { font-size: 15px; }   /* her longer questions (1 November) fit the slip in three lines */
.roomsitter-sheet .roomsitter-slip { display: flex; align-items: center; padding: 4px 10px 4px 12px;
  font: 17px / 1.08 "Crimson Pro", Georgia, serif; color: #2a1a10; border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, #0002, transparent 10%, transparent 82%, #0004), linear-gradient(180deg, #e9d2a6, #f3e2bd 35%, #e2c793);
  box-shadow: 2px 4px 5px #0007; transform-origin: 100% 50%; visibility: hidden;
  transform: translateX(100%) rotate(var(--lean, -1.5deg)); -webkit-clip-path: inset(-12px 100% -12px -12px); clip-path: inset(-12px 100% -12px -12px);
  transition: transform .5s cubic-bezier(.5, 0, .7, .4), clip-path .5s cubic-bezier(.5, 0, .7, .4), -webkit-clip-path .5s cubic-bezier(.5, 0, .7, .4), visibility 0s .5s; }
.roomsitter-sheet .roomsitter-slip:nth-of-type(even) { --lean: 1.2deg; }
.roomsitter-sheet .roomsitter-slip.out { visibility: visible; transform: translateX(0) rotate(var(--lean, -1.5deg)); -webkit-clip-path: inset(-12px 0 -12px -12px); clip-path: inset(-12px 0 -12px -12px);
  transition: transform .9s cubic-bezier(.3, .8, .4, 1) calc(var(--i) * .12s), clip-path .9s cubic-bezier(.3, .8, .4, 1) calc(var(--i) * .12s), -webkit-clip-path .9s cubic-bezier(.3, .8, .4, 1) calc(var(--i) * .12s), visibility 0s calc(var(--i) * .12s); }
.roomsitter-sheet .roomsitter-slip span { display: block; }
.roomsitter-sheet .roomsitter-slip .glint { position: absolute; left: -9px; top: -10px; width: 26px; height: 26px; transform: scale(0);
  background: radial-gradient(circle, #fff 0 14%, #fffa 26%, transparent 62%);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }
.roomsitter-sheet .roomsitter-slip.out .glint { animation: roomsitter-glint 4.2s ease-in-out calc(1.4s + var(--i) * .7s) infinite; }
@keyframes roomsitter-glint { 0%, 80%, 100% { transform: scale(0) rotate(0); } 88% { transform: scale(1.15) rotate(45deg); } 94% { transform: scale(.6) rotate(80deg); } }
@media (prefers-reduced-motion: reduce) { .roomsitter-sheet .roomsitter-slip { transition: none !important; } .roomsitter-sheet .roomsitter-slip .glint { animation: none !important; } }