/* A room-board demo: stable room numbers, meaningful state changes. */
[data-hotel-motion]{--hotel-ready:#7eb5d5;--hotel-occupied:#8aabff;--hotel-reserved:#ae97ce;--hotel-cleaning:#b9a17d}
html[data-theme="light"] [data-hotel-motion]{--hotel-ready:#2d6b8a;--hotel-occupied:#365da2;--hotel-reserved:#795698;--hotel-cleaning:#886a39}
[data-hotel-motion] .room-grid{grid-auto-rows:1fr}
[data-hotel-motion] .room{position:relative;min-width:0;transition:background-color .45s,border-color .45s}
[data-hotel-motion] :is(.room-0,[data-room-legend="0"]){--hotel-signal:var(--hotel-ready)}
[data-hotel-motion] :is(.room-1,[data-room-legend="1"]){--hotel-signal:var(--hotel-occupied)}
[data-hotel-motion] :is(.room-2,[data-room-legend="2"]){--hotel-signal:var(--hotel-reserved)}
[data-hotel-motion] :is(.room-3,[data-room-legend="3"]){--hotel-signal:var(--hotel-cleaning)}
[data-hotel-motion] .room>b{transition:color .45s}
[data-hotel-motion] .room>span{transition:opacity .14s,transform .14s,color .45s}
[data-hotel-motion] .room.is-room-changing>span{opacity:0;transform:translateY(-3px)}
[data-hotel-motion] .room:after{content:"";position:absolute;inset:-1px;border:1px solid var(--hotel-signal);border-radius:inherit;box-shadow:0 0 12px color-mix(in srgb,var(--hotel-signal) 18%,transparent);opacity:0;pointer-events:none}
[data-hotel-motion] .room.is-room-updating:after{animation:hotel-room-signal .95s ease-out both}
[data-hotel-ready="true"] .room{animation:hotel-room-enter .45s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--room-index)*45ms);animation-play-state:paused}
[data-hotel-motion].is-hotel-running .room{animation-play-state:running}
[data-hotel-motion] .mock-heading>span{display:inline-flex;align-items:center;gap:5px}
[data-hotel-motion] .mock-heading>span:before{content:"";width:4px;height:4px;border-radius:50%;flex-shrink:0;background:var(--accent);opacity:.45;transition:opacity .3s,box-shadow .3s}
[data-hotel-motion].is-hotel-updating .mock-heading>span:before{opacity:1;box-shadow:0 0 7px color-mix(in srgb,var(--accent) 40%,transparent)}
[data-hotel-motion] .mock-legend{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
[data-hotel-motion] .mock-legend>span{display:inline-flex;align-items:center;gap:5px;color:var(--hotel-signal)}
[data-hotel-motion] .mock-legend i{width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0}
[data-hotel-motion] .mock-legend b{font-family:var(--mono);font-size:10px;line-height:1;font-weight:500;font-variant-numeric:tabular-nums;min-width:1ch}
[data-hotel-motion].compact .mock-legend{gap:6px 9px;font-size:7px}
[data-hotel-motion].compact .mock-legend b{font-size:8px}
@keyframes hotel-room-enter{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hotel-room-signal{0%{opacity:0}25%{opacity:.85}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){[data-hotel-motion] .room,[data-hotel-motion] .room:after{animation:none!important;transform:none!important}[data-hotel-motion] :is(.room,.room>b,.room>span,.mock-heading>span:before){transition:none!important}[data-hotel-motion] .room>span{opacity:1;transform:none}}