/* ==========================================================
   Сценарии: фотографический дом в разрезе (js/house-photo.js)
   ========================================================== */
.stage { aspect-ratio: 3 / 2; background: #1d211d url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAgADADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDVg1e3iSCO4kXaVIZ8EAHsBn8RVTUPFlpaqVsrS4uX9dpVazIQZYjNIMlWwhJzt+laWnmB7cvNE8uT8hEm0Y/OjnYcpy+o+JtfvcxojwRn+GNcfr1o03xNr1hhHR54x/DIM8fzrVllie8cp5iqpxgk/lTLmdBcJPFviiZh8pJJA7ilzMdkbNj41imESz2M0LlwHJB2he56fpV3xHdQ3enxC1Zponf70Mijn0I6+tc7canDcLClnDIkgk2ShnPI/vCtOytoik7quJYpCxA4DfvWGTxk4p81xWsYFk8jQSh1XGQcY5qzGiSSMpCgrkY7nFZyXNshdklO98BmIPIpFubdDujl2NnJIU8/nWRSN+2t7SSHfJG+f9nA/OqZWE3qwmLKg8sO3t+uazxfRb9xmy/clTzR9sh8wOJyrDnhPwp3GbL2tuJo0MMhDfe2p0/wqpNcfY2Cq5EeGBHJB/evjNRvrPmSq7XZDL0Ij4qu9zZyyq80zuQGGAnBySxJH1NK4mf/2Q==") center / cover no-repeat; }
.house.ph { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; user-select: none; -webkit-user-select: none; }
.ph-layers, .ph-time, .ph-fx, .ph-tags, .ph-marks,
.ph-room, .ph-win, .ph-win-on, .ph-ext, .ph-tv, .ph-leak, .ph-nightlight { position: absolute; inset: 0; }
.house.ph, .ph-layers { isolation: isolate; z-index: 0; }
.ph-fx { z-index: 1; }
.ph-tags { z-index: 2; }
.ph-marks { z-index: 3; }
.stage .hud-clock { z-index: 2; }
.ph-layers { opacity: 0; transition: opacity .6s ease; }
.house.ready .ph-layers { opacity: 1; }
.ph-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }

/* время суток: верхний слой проявляется поверх предыдущего */
.ph-time { opacity: 0; transition: opacity var(--fade, 2.4s) ease; }

/* свет по комнатам и уличный свет */
.ph-room, .ph-win-on { opacity: 0; transition: opacity var(--fade, 1.1s) ease; }
.ph-ext { opacity: 0; transition: opacity 1.2s ease; -webkit-mask: url("../assets/scenes/ext-mask.png") 0 0 / 100% 100% no-repeat; mask: url("../assets/scenes/ext-mask.png") 0 0 / 100% 100% no-repeat; }
.house.outdoor .ph-ext { opacity: 1; }

/* рулонные шторы опускаются сверху вниз */
.ph-win { clip-path: var(--open); transition: clip-path 2s cubic-bezier(.55, 0, .25, 1); }
.ph-win.closed { clip-path: var(--closed); }

.ph-tv { opacity: 0; transition: opacity .45s ease; }
.house.tv .ph-tv { opacity: 1; }
.ph-nightlight { opacity: var(--nightlight, 0); transition: opacity 3s ease; }
.ph-leak { opacity: 0; clip-path: var(--from); transition: clip-path 3.2s cubic-bezier(.2, .6, .3, 1), opacity .5s ease; }
.house.leak .ph-leak { opacity: 1; clip-path: var(--box); }

/* эффекты поверх рендера */
.fx { position: absolute; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.fx-tvglow { width: 11%; height: 26%; background: radial-gradient(closest-side, rgba(150, 190, 255, .28), rgba(150, 190, 255, 0)); mix-blend-mode: screen; }
.house.tv .fx-tvglow { opacity: 1; animation: tvFlicker 3.8s steps(1) infinite; }
@keyframes tvFlicker { 0%, 100% { filter: brightness(1); } 23% { filter: brightness(.82); } 51% { filter: brightness(1.12); } 77% { filter: brightness(.92); } }
.fx-heat { width: 11%; height: 10%; background: radial-gradient(closest-side, rgba(255, 128, 52, .42), rgba(255, 128, 52, 0)); mix-blend-mode: screen; }
.house.heating .fx-heat { opacity: 1; animation: heatPulse 3.2s ease-in-out infinite; }
@keyframes heatPulse { 50% { transform: translate(-50%, -54%) scale(1.06); filter: brightness(1.15); } }
.fx-floorheat { width: 18%; height: 5%; background: radial-gradient(closest-side, rgba(255, 136, 64, .45), rgba(255, 136, 64, 0)); mix-blend-mode: screen; }
.house.floorheat .fx-floorheat { opacity: 1; }
.fx-steam { width: 2.6%; height: 7%; transform: translate(-50%, -100%); }
.fx-steam i { position: absolute; left: 50%; bottom: 0; width: 70%; aspect-ratio: 1; margin-left: -35%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); filter: blur(1.5px); animation: steamRise 2.6s ease-out infinite; }
.fx-steam i:nth-child(2) { animation-delay: .85s; margin-left: -20%; }
.fx-steam i:nth-child(3) { animation-delay: 1.7s; margin-left: -50%; }
@keyframes steamRise { 0% { transform: translateY(0) scale(.5); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(-170%) scale(1.5); opacity: 0; } }
.house.coffee .fx-steam-coffee, .house.kettle .fx-steam-kettle { opacity: 1; }
.fx-music { width: 3.4%; aspect-ratio: 1; }
.fx-music i { position: absolute; inset: 0; border: 1.5px solid rgba(214, 255, 50, .75); border-radius: 50%; animation: ring 2.4s ease-out infinite; }
.fx-music i:nth-child(2) { animation-delay: .8s; }
.fx-music i:nth-child(3) { animation-delay: 1.6s; }
.house.music .fx-music { opacity: 1; }
@keyframes ring { from { transform: scale(.35); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.fx-washer { width: 2.4%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 55%, rgba(255, 255, 255, .55) 72%, rgba(255, 255, 255, 0) 88%); mix-blend-mode: screen; }
.house.washer .fx-washer { opacity: 1; animation: drum .9s linear infinite; }
@keyframes drum { to { transform: translate(-50%, -50%) rotate(360deg); } }
.fx-vacuum { width: 4.2%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(214, 255, 50, .8); }
.house.vacuum .fx-vacuum { opacity: 1; animation: ringC 2s ease-out infinite; }
@keyframes ringC { from { transform: translate(-50%, -50%) scale(.35); opacity: .9; } to { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } }
.fx-headlights { left: 0; top: 78%; width: 34%; height: 24%; transform: translateY(-50%); background: radial-gradient(ellipse 100% 60% at 0% 60%, rgba(255, 226, 170, .38), rgba(255, 226, 170, 0) 70%); mix-blend-mode: screen; transition: opacity 1.2s ease; }
.house.headlights .fx-headlights { opacity: 1; }
.fx-sensor { width: 6px; height: 6px; border-radius: 50%; background: #d6ff32; box-shadow: 0 0 0 2px rgba(21, 23, 21, .55), 0 0 9px rgba(214, 255, 50, .9); transition: opacity .6s ease; }
.house.armed .fx-sensor { opacity: 1; animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }

.fx-water { width: 17%; height: 3.4%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(225, 240, 255, .5) 45%, rgba(255, 255, 255, 0) 60%) 0 0 / 220% 100%; mix-blend-mode: screen; border-radius: 50%; filter: blur(1px); }
.house.leak .fx-water { opacity: .8; animation: sheen 2.4s linear infinite; }
.house.leak:not(.flowing) .fx-water { opacity: .35; animation-duration: 7s; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: -120% 0; } }

/* подписи комнат и показания термостата */
.ph-tag { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; font: 600 10px/1.2 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #f2f1ec; background: rgba(21, 23, 21, .58); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ph-tag i { width: 6px; height: 6px; border-radius: 50%; background: #6c7268; transition: background .5s, box-shadow .5s; }
.ph-tag.on i { background: #ffd27a; box-shadow: 0 0 8px #ffc35c; }
.ph-temp { position: absolute; transform: translateY(-50%); padding: 3px 6px; font: 700 11px/1.2 Manrope, sans-serif; font-variant-numeric: tabular-nums; color: #f2f1ec; background: rgba(21, 23, 21, .72); border-left: 2px solid #6c7268; transition: border-color .5s; }
.house.heating .ph-temp { border-color: #ff9a52; }

/* подсказки у устройств */
.mk { position: absolute; width: 0; height: 0; z-index: 2; }
.mk-dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #d6ff32; box-shadow: 0 0 0 3px rgba(21, 23, 21, .55); opacity: 0; transform: scale(.4); transition: opacity .35s, transform .35s; }
.mk-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid currentColor; color: #d6ff32; opacity: 0; }
.mk-lbl { position: absolute; left: 0; bottom: 16px; transform: translate(-50%, 6px); padding: 7px 10px; white-space: nowrap; font: 600 12px/1.2 Manrope, sans-serif; color: #f2f1ec; background: rgba(21, 23, 21, .88); border-left: 2px solid #d6ff32; opacity: 0; transition: opacity .35s, transform .35s; }
.mk.al-l .mk-lbl { transform: translate(-12px, 6px); }
.mk.al-r .mk-lbl { transform: translate(calc(-100% + 12px), 6px); }
.mk.show .mk-dot { opacity: 1; transform: none; }
.mk.show .mk-dot::after { animation: mkPulse 1.4s ease-out 2; }
.mk.show .mk-lbl { opacity: 1; transform: translate(-50%, 0); }
.mk.al-l.show .mk-lbl { transform: translate(-12px, 0); }
.mk.al-r.show .mk-lbl { transform: translate(calc(-100% + 12px), 0); }
@keyframes mkPulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.mk.alert .mk-dot { background: #ff4b3e; }
.mk.alert .mk-dot::after { color: #ff4b3e; }
.mk.alert .mk-lbl { border-color: #ff4b3e; }
.mk.warm .mk-dot { background: #ffb15c; }
.mk.warm .mk-dot::after { color: #ffb15c; }
.mk.warm .mk-lbl { border-color: #ffb15c; }
/* постоянные метки: перекрытые краны и вода на полу */
.house.valve-closed .mk[data-mk="valves"] .mk-dot { opacity: 1; transform: none; background: #ffb15c; }
.house.leak .mk[data-mk="bathFloor"] .mk-dot { opacity: 1; transform: none; background: #ff4b3e; }

.house.instant, .house.instant * { transition: none !important; }

@media (max-width: 850px) {
  .ph-tag { font-size: 8px; padding: 3px 5px 3px 4px; gap: 4px; letter-spacing: .06em; }
  .ph-tag i { width: 5px; height: 5px; }
  .ph-temp { font-size: 9px; padding: 2px 4px; }
  .mk-lbl { font-size: 10px; padding: 5px 7px; bottom: 12px; }
  .mk-dot { left: -5px; top: -5px; width: 10px; height: 10px; }
}
@media (max-width: 520px) {
  .ph-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-time, .ph-room, .ph-win, .ph-win-on, .ph-ext, .ph-leak, .ph-nightlight, .fx, .mk-dot, .mk-lbl { transition: none !important; }
  .fx, .fx *, .mk-dot::after { animation: none !important; }
}