/* Independent visual planes share the 1536 × 1024 room coordinate system. */
.room-world { width: min(2100px, max(100vw, 150svh)); height: min(1400px, max(66.6667vw, 100svh)); }
.visual-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translate(var(--layer-x, 0px), var(--layer-y, 0px));
}
.layer-background { z-index: 0; }
.layer-wall { z-index: 1; }
.layer-desk { z-index: 2; }
.layer-character { z-index: 3; }
.layer-ambient { z-index: 4; }
.object-hotspots { z-index: 5; }
.room-layers { transform: scale(1.015); }
.scene-camera { transition: transform .58s var(--ease); }
.panel-is-open .scene-camera { filter: none; }
.room-art { object-fit: cover; }
.monitor-display {
  left: 45%;
  top: 29.2%;
  width: 22.5%;
  height: 17.2%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform-origin: top left;
  transform: skewY(2deg);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The original illustration supplies silhouettes; only clean, small crops move. */
.character-hand { animation: none; }
.character-head {
  position: absolute;
  left: 47.5%; top: 40.5%; width: 11%; height: 16%;
  background: url('/assets/room/studio.jpg') 53.3708% 48.2143% / 909.0909% 625%;
  mask-image: radial-gradient(ellipse at 53% 45%, #000 18%, transparent 69%);
  filter: brightness(.83) saturate(.83);
  transform-origin: 84% 95%;
}
body[data-developer="typing"] .character-hand { animation: hand-tap .38s ease-in-out infinite alternate; }
body[data-developer="mouse"] .character-hand { transform: translate(1.1px, .5px) rotate(.28deg); }
body[data-developer="thinking"] .character-head { animation: head-thought 1.5s ease-in-out both; }
body[data-developer="idle"] .character-hand { transform: none; }
body[data-monitor="idle"] .screen-cursor { animation-duration: 2.25s; }
body[data-monitor="coding"] .keyboard-light { opacity: .2; }
body[data-monitor="preview"] .monitor-display .screen-dot { background: #d7b583; }
body[data-monitor="building"] .monitor-display .screen-dot { background: #a9bc94; box-shadow: 0 0 5px #a9bc9466; }
.keyboard-light {
  position: absolute; left: 55%; top: 54.1%; width: 8.3%; height: 2.1%;
  border-radius: 50%; background: radial-gradient(ellipse at center, #cad9bb55, transparent 72%);
  opacity: 0; transition: opacity .4s;
}
@keyframes hand-tap {
  from { transform: translateY(.15px) rotate(0); }
  to { transform: translateY(-1.35px) rotate(.48deg); }
}
@keyframes head-thought {
  0%, 100% { transform: rotate(0); }
  55% { transform: rotate(-.45deg) translateX(-.5px); }
}

/* Responses belong to the physical objects, rather than one shared hover effect. */
.hotspot { width: max(48px, var(--w, 48px)); height: max(48px, var(--h, 48px)); cursor: pointer; }
.hotspot-dot { pointer-events: none; }
.camera-focus {
  position: absolute; left: 29.2%; top: 49.9%; width: 2%; aspect-ratio: 1;
  border: 1px solid #f1ddacaa; border-radius: 50%; opacity: 0;
  box-shadow: 0 0 0 2px #222b273d inset;
  transform: scale(.85); transition: opacity .26s, transform .26s;
}
.room-layers:has(.spot-camera:is(:hover, :focus-visible)) .camera-focus { opacity: .65; transform: scale(1); }
.game-light {
  position: absolute; left: 78.4%; top: 54.3%; width: 4.3%; height: 2%;
  background: radial-gradient(ellipse, #f8d69a55, transparent 70%);
  opacity: 0; transition: opacity .28s;
}
.room-layers:has(.spot-games:is(:hover, :focus-visible)) .game-light { opacity: .8; }
.note-corner {
  position: absolute; left: 71.8%; top: 32.1%; width: 1.5%; height: 1.6%;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  background: #efd9a760; opacity: 0; transform-origin: top left;
  transition: opacity .3s, transform .3s;
}
.room-layers:has(.spot-notes:is(:hover, :focus-visible)) .note-corner { opacity: .6; transform: rotate(2deg); }
.room-layers:has(.spot-books:is(:hover, :focus-visible)) .spot-books:before { opacity: .65; transform: scale(1); }
.room-layers:has(.spot-monitor:is(:hover, :focus-visible)) .monitor-display { text-shadow: 0 0 9px #b9d4c375; }
.room-layers:has(.spot-phone:is(:hover, :focus-visible)) .phone-light { opacity: 1; }
.phone-notify .phone-light { opacity: .9; background: #e9d2ab79; }

/* Light is localized to the window, lamp, screen, and artwork. */
.window-stars { position: absolute; left: 16%; top: 0; width: 24%; height: 34%; opacity: 0; transition: opacity 1.4s; }
.window-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #e9e9cf; box-shadow: 0 0 5px #fcf1d7; }
.window-stars i:first-child { left: 29%; top: 19%; animation: star-breathe 7.7s ease-in-out infinite alternate; }
.window-stars i:nth-child(2) { left: 68%; top: 8%; animation: star-breathe 11.3s -4s ease-in-out infinite alternate; }
[data-time="night"] .window-stars { opacity: .52; }
.room-art, .character-head, .character-hand, .cat-breath { filter: brightness(.86) saturate(.87); }
[data-time] .cat-breath { filter: brightness(.86) saturate(.87); }
.room-art { transition: none; }
.window-light { mix-blend-mode: multiply; transition: background 1.3s, opacity 1.3s; }
[data-time="morning"] .window-light { background: #ddd8ba; opacity: .18; }
[data-time="day"] .window-light { background: #b3cfda; opacity: .1; }
[data-time="sunset"] .window-light { background: #b77966; opacity: .2; }
[data-time="night"] .window-light { background: #1b2646; opacity: .55; }
.desk-light, .monitor-light { animation: none; transition: opacity 1.2s; }
[data-time="night"] .desk-light { opacity: .82; }
[data-time="night"] .monitor-light { opacity: .8; }
[data-time="sunset"] .desk-light { opacity: .54; }
[data-time="sunset"] .monitor-light { opacity: .57; }
[data-time="day"] .desk-light, [data-time="morning"] .desk-light { opacity: .16; }
[data-time="day"] .monitor-light, [data-time="morning"] .monitor-light { opacity: .3; }
@keyframes star-breathe { from { opacity: .3; } to { opacity: .9; } }
.cat-twitch .cat-breath { animation: cat-stretch 1s ease-out both; }
.cat-awake .cat-breath { animation: cat-stretch 1.4s ease both; }
.is-away .visual-layer, .motion-off .visual-layer { transform: none; }

/* Main destinations grow from the selected object into a full page in the room. */
.scene-content {
  position: fixed; inset: 0; z-index: 12; overflow: auto;
  color: var(--paper); background: #191e1b;
  overscroll-behavior: contain; scrollbar-color: #656b5b transparent; scrollbar-width: thin;
  --portal-x: 50%; --portal-y: 50%;
}
.scene-content[hidden] { display: none; }
.scene-content.is-entering { animation: scene-reveal .36s var(--ease) both; }
.scene-content.is-leaving { animation: scene-reveal .3s var(--ease) reverse both; pointer-events: none; }
.scene-content[data-focus="phone"] { background: #1b201d; }
.scene-content[data-focus="camera"] { background: #171d1d; }
.scene-content[data-focus="books"] { background: #1c201b; }
.scene-content .panel-topbar { padding: 10px max(34px, calc((100vw - 1050px) / 2)); }
.scene-content #panel-content { max-width: 1050px; margin: auto; padding: 54px 34px 100px; }
.scene-content .content-heading h1 { max-width: 800px; }
.scene-content .featured-project { max-width: 970px; }
.scene-content[data-focus="camera"] #panel-content { max-width: 1130px; }
.scene-content[data-focus="camera"] .content-heading { max-width: 650px; }
@keyframes scene-reveal {
  from { opacity: .62; clip-path: circle(1% at var(--portal-x) var(--portal-y)); }
  to { opacity: 1; clip-path: circle(150% at var(--portal-x) var(--portal-y)); }
}
/* The terminal stays secondary, as a dialog. */
#secondary-content { padding: 40px 58px 56px; }
.room-dialog { height: min(620px, calc(100svh - 64px)); }
.scene-debug { position: fixed; bottom: 85px; right: 20px; z-index: 30; width: 190px; padding: 12px;
  color: #e5e7d2; background: #17201de8; font: 10px/1.5 ui-monospace, monospace; white-space: pre-line; }
.debug-scene .hotspot { outline: 1px dashed #dfc890a8; border-radius: 4px; }
.debug-scene .hotspot:after { content: attr(data-target); position: absolute; top: 100%; left: 0; font: 9px ui-monospace, monospace; color: #fff; }

@media (max-width: 650px) {
  .room-home { min-height: 0; height: 100svh; }
  .room-world { width: 1080px; height: 720px; }
  .scene-content .panel-topbar { padding: 10px 22px; }
  .scene-content #panel-content { padding: 38px 24px 75px; }
  .room-layers { transform: scale(1); }
  .dust-motes { display: none; }
  .window-stars { display: none; }
  .scene-content .featured-project { max-width: none; }
  #secondary-content { padding: 28px 24px 42px; }
}
@media (min-width: 651px) and (max-width: 1000px) {
  .room-world { width: max(100vw, 130svh); height: max(66.6667vw, 86.6667svh); }
}
@media (min-width: 651px) and (max-height: 500px) {
  .room-home { min-height: 0; height: 100svh; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-content.is-entering, .scene-content.is-leaving { animation: none; }
  .visual-layer, .character-head, .character-hand { transform: none !important; animation: none !important; }
}
.motion-off .scene-content.is-entering, .motion-off .scene-content.is-leaving { animation: none; }
.motion-off .character-head, .motion-off .character-hand { animation: none !important; }