/* AC Bridge static pages -- the room plate (ACB-1254): the landing RoomHero in plain CSS.
 *
 * Linked only by the pages that show a room plate (now /claude-code-status-light), after legal.css
 * and docs.css, as /room-plate.css?v=<hash>. It is kept out of docs.css on purpose: docs.css runs
 * no motion and no colour of its own (design-tokens.test.ts), and the plate is the one place a static
 * page shows the agent states moving. Guards: the room-plate.css block of design-tokens.test.ts.
 *
 * The red still is the <img>; three plates cross-fade over it in 3.6s steps with a 1.4s fade (the
 * landing's usePhase clock and .room-layer easing; every delay is shifted so the first fade starts 1.2s
 * after load, as usePhase's first beat does, ACB-1277), and a state tag sits by the lamp with a 1px
 * leader rule and an anchor dot. On a phone the leader hides and the tag sits over the dot. The tags
 * are aria-hidden in the page: the still's alt and the caption name the states. Positions are % of
 * the 1600x940 frame, so the tag stays on the lamp at every width. No JavaScript. Colours are only the legal.css tokens: the four --ac-state-*
 * fills, each carrying white text at 4.5:1 or more (DESIGN.md state-tag). Under reduced motion the
 * layers are not drawn (so never fetched) and only the red tag shows: the still.
 */
.room-plate {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ac-border-strong);
  border-radius: var(--radius-md);
  background: var(--ac-surface);
}
/* the wrapper takes legal.css's figure border */
figure.media .room-plate img { display: block; border: 0; border-radius: 0; }

.room-plate-layer {
  position: absolute; inset: 0; z-index: 1;
  background-position: 50% 50%; background-size: cover;
  opacity: 0;
  animation: 14.4s cubic-bezier(0.16, 1, 0.3, 1) -2.4s infinite;
}
.room-plate-plan-ready { background-image: url(/media/landing/room-photo-violet-1600x940.webp); animation-name: room-plate-plan-ready; }
.room-plate-finished { z-index: 2; background-image: url(/media/landing/room-photo-green-1600x940.webp); animation-name: room-plate-finished; }
.room-plate-working { z-index: 3; background-image: url(/media/landing/room-photo-1600x940.webp); animation-name: room-plate-working; }

/* 14.4s = four 3.6s steps; 9.72% = the 1.4s fade */
@keyframes room-plate-plan-ready { 0%, 25% { opacity: 0; } 34.72%, 59.72% { opacity: 1; } 59.73%, 100% { opacity: 0; } }
@keyframes room-plate-finished { 0%, 50% { opacity: 0; } 59.72%, 84.72% { opacity: 1; } 84.73%, 100% { opacity: 0; } }
@keyframes room-plate-working { 0% { opacity: 1; } 9.72%, 75% { opacity: 0; } 84.72%, 100% { opacity: 1; } }
/* a tag switches at the middle of its fade, so it is never half there */
@keyframes room-plate-tag { 0%, 4.85% { opacity: 0; } 4.86%, 29.86% { opacity: 1; } 29.87%, 100% { opacity: 0; } }

.room-plate-tags { margin: 0; }
.room-plate-tag {
  position: absolute; z-index: 5; left: 72.4%; top: 42.1%;
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.45em 0.8em;
  border-radius: 999px;
  background: var(--ac-state-working);
  color: var(--ac-surface);
  font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap;
  opacity: 0;
  animation: room-plate-tag 14.4s linear infinite;
}
.room-plate-tag::before { content: ''; flex: none; width: 0.5em; height: 0.5em; border-radius: 999px; background: var(--ac-surface); }
.room-plate-tag-needs-permission { background: var(--ac-state-needs-permission); opacity: 1; animation-delay: -2.4s; }
.room-plate-tag-plan-ready { background: var(--ac-state-plan-ready); animation-delay: -13.2s; }
.room-plate-tag-finished { background: var(--ac-state-finished); animation-delay: -9.6s; }
.room-plate-tag-working { background: var(--ac-state-working); animation-delay: -6s; }

/* the leader: a 1px rule from the tag's lower-left corner down to the lamp head, and its anchor dot */
.room-plate::before {
  content: ''; position: absolute; z-index: 4; left: 72.9%; top: 44.9%; width: 2.1%; height: 1px;
  background: var(--ac-surface); transform-origin: 0 50%; transform: rotate(135.6deg);
}
.room-plate::after {
  content: ''; position: absolute; z-index: 4; left: 71.4%; top: 47.4%; width: 6px; height: 6px;
  margin: -3px 0 0 -3px; border-radius: 999px; background: var(--ac-surface);
}

@media (max-width: 767.98px) {
  .room-plate-plan-ready { background-image: url(/media/landing/room-photo-violet-960x564.webp); }
  .room-plate-finished { background-image: url(/media/landing/room-photo-green-960x564.webp); }
  .room-plate-working { background-image: url(/media/landing/room-photo-960x564.webp); }
}
/* on a phone the leader rule hides (as the landing RoomHero does below sm) and the tag sits centred
   over the anchor dot, clear of the lamp head it names */
@media (max-width: 639.98px) {
  .room-plate::before { content: none; }
  .room-plate-tag { top: auto; right: auto; bottom: calc(52.6% + 10px); left: 71.4%; transform: translateX(-50%); font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .room-plate-layer, .room-plate-tag { animation: none; }
  .room-plate-layer { background-image: none; }
}