/* Full-bleed page: #viewport fills the window; #bg is a blurred cover copy of the scene, #hero (1280x720 stage) is translated+scaled by
   src/main.js so the whole scene (and the tablet glass) stays aligned and visible at every size. */
:root { --amber: #ffb347; --mute: #b9a898; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #120d0a; color: #eadfd2; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }

#viewport { position: fixed; inset: 0; overflow: hidden; background: #120d0a; }
#bg { position: absolute; inset: -60px; background: #120d0a url(assets/hero-b7.webp) center / cover no-repeat; filter: blur(28px) brightness(.8) saturate(1.1); }
.hero { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; overflow: hidden; --k: 1; --fx: 0px; --fy: 0px; will-change: transform; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fx), #000 calc(100% - var(--fx)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--fy), #000 calc(100% - var(--fy)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fx), #000 calc(100% - var(--fx)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--fy), #000 calc(100% - var(--fy)), transparent 100%);
  mask-composite: intersect; }
.foot { position: fixed; left: 10px; bottom: 6px; margin: 0; font-size: 11px; color: rgba(234, 223, 210, .75); text-shadow: 0 1px 3px #000; z-index: 5; max-width: calc(100% - 20px); }
.foot a { color: var(--amber); }

#dash { overflow: hidden; background: #0d1822; }
#panel { display: block; width: 960px; height: 600px; border: 0; background: #0d1822; }

/* ---- props (1280x720 image space; the stage itself is scaled) ---- */
/* One Hue zone = one glow prop: colour --glow and strength --a (opacity) come from the mock zone state. */
@property --glow { syntax: '<color>'; inherits: true; initial-value: #ffd08a; }
#props { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; pointer-events: none; }
.prop { position: absolute; }
.p-lamp, .p-garage, .p-reading, .p-entrance, .p-house { --glow: #ffd08a; --a: 0; opacity: var(--a); transition: opacity .6s ease, --glow .6s ease; }
.p-lamp.syncing, .p-house.syncing, .p-reading.syncing { transition: none; }   /* Hue sync drives these every frame: a CSS transition would lag */

/* Garage interior (x 727-883, y 336-500). */
.p-garage { left: 727px; top: 336px; width: 156px; height: 164px; mix-blend-mode: screen; filter: blur(6px);
  background: radial-gradient(ellipse 60% 58% at 50% 55%, var(--glow) 0%, transparent 100%); }
/* Entrance lantern beside the garage (919,359). */
.p-entrance { left: 879px; top: 319px; width: 80px; height: 80px; mix-blend-mode: screen; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent 100%); }
/* Reading lamp by the armchair, right edge (1269,367). */
.p-reading { left: 1199px; top: 307px; width: 140px; height: 120px; mix-blend-mode: screen; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent 100%); }
/* House window / TV room (x 1040-1250, y 300-420). */
.p-house { left: 1040px; top: 300px; width: 210px; height: 120px; mix-blend-mode: screen; filter: blur(8px);
  background: radial-gradient(ellipse 60% 58% at 50% 50%, var(--glow) 0%, transparent 100%); }

/* Desk lamp: bulb (289,34) + light cone down-left. */
.p-lamp { left: 0; top: 0; width: 1280px; height: 330px; pointer-events: none; }
.lamp-bulb { position: absolute; left: 229px; top: -26px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent); mix-blend-mode: screen; }
.lamp-cone { position: absolute; left: 100px; top: 40px; width: 260px; height: 280px; mix-blend-mode: screen;
  clip-path: polygon(52% 0, 84% 0, 72% 100%, 0 100%); filter: blur(6px);
  background: linear-gradient(to bottom, var(--glow), transparent 100%); opacity: .6; }

/* Toy car in the garage (centre 800,438; box 160x120): warm glow + airflow wisps while climate is on. */
.garage-spin { position: absolute; left: 722px; top: 378px; width: 156px; height: 120px; pointer-events: auto; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity .45s ease; }
.garage-spin.hit { opacity: 0; }   /* idle: invisible but still grabbable */
.garage-spin.spinning { opacity: 1; transition-duration: .12s; cursor: grabbing; }
.garage-spin img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, #000 52%, transparent 100%); }
.p-car { left: 720px; top: 378px; width: 160px; height: 120px; opacity: 0; transition: opacity 1.2s ease; }
.p-car.on { opacity: 1; }
/* Warm glow fills the garage interior (x727-883, y336-500 = box offset 7,-42 156x164), clipped to it so it never washes the room. */
.car-glow { position: absolute; left: 7px; top: -42px; width: 156px; height: 164px; mix-blend-mode: screen; filter: blur(3px);
  background: radial-gradient(ellipse 62% 56% at 47% 59%, rgba(255, 178, 70, .95) 0%, rgba(255, 140, 40, .62) 38%, rgba(255, 100, 20, .22) 72%, transparent 100%); }
.car-warm { position: absolute; left: 7px; top: -42px; width: 156px; height: 164px; mix-blend-mode: soft-light; opacity: .9;
  background: radial-gradient(ellipse 58% 52% at 47% 59%, #ffb050 0%, rgba(255, 150, 60, .6) 55%, transparent 100%); }
.car-spill { position: absolute; left: 2px; top: 96px; width: 166px; height: 34px; mix-blend-mode: screen; filter: blur(5px);
  background: radial-gradient(ellipse 50% 50% at 50% 40%, rgba(255, 190, 100, .9), rgba(255, 140, 50, .35) 60%, transparent 100%); }
.car-glow, .car-warm, .car-spill { opacity: 0; transition: opacity 1.2s ease; }
.p-car.on .car-glow, .p-car.on .car-warm, .p-car.on .car-spill { opacity: 1; }
.p-car.on .car-glow { animation: breathe 3.6s ease-in-out infinite; }
.p-car.on .car-spill { animation: breathe 3.6s ease-in-out -1.2s infinite; }
.car-air { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 4px rgba(255, 170, 70, .9)); }
.car-air .w { fill: none; stroke: rgba(255, 225, 170, .95); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 30 66; mix-blend-mode: screen; }
.p-car.on .w { animation: wisp 2.6s linear infinite; }
.p-car.on .w2 { animation-duration: 3.1s; animation-delay: -1s; }
.p-car.on .w3 { animation-duration: 2.8s; animation-delay: -1.8s; }
@keyframes wisp { from { stroke-dashoffset: 96; opacity: 0; } 20% { opacity: 1; } 80% { opacity: .8; } to { stroke-dashoffset: 0; opacity: 0; } }
@keyframes breathe { 50% { opacity: .72; } }

/* Snow behind the window: one canvas over the full 1280x720 stage, cut to the visible glass by the hand-built alpha mask. */
.snow { position: absolute; display: block; pointer-events: none; }
#snow { left: 0; top: 0; width: 1280px; height: 720px;
  -webkit-mask-image: url(assets/snow-mask.png); mask-image: url(assets/snow-mask.png);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0; }

/* Toy speaker (centre 1219,375, r ~30): pulse rings + floating notes while music plays. */
.p-speaker { left: 1189px; top: 345px; width: 60px; height: 60px; opacity: 0; transition: opacity .5s ease; }
.p-speaker.on { opacity: 1; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 224, 170, .75); box-shadow: 0 0 10px rgba(255, 200, 120, .55); }
.p-speaker.on .ring { animation: pulse 1.6s ease-out infinite; }
.p-speaker.on .r2 { animation-delay: -.8s; }
@keyframes pulse { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.note { position: absolute; left: 24px; top: 6px; width: 14px; height: 18px; fill: #ffe6b8; opacity: 0; filter: drop-shadow(0 0 4px rgba(255, 200, 120, .8)); }
.p-speaker.on .note { animation: float 3.2s ease-out infinite; }
.p-speaker.on .n2 { animation-delay: -1.1s; left: 10px; }
.p-speaker.on .n3 { animation-delay: -2.2s; left: 38px; }
@keyframes float { 0% { transform: translate(0, 10px) rotate(-8deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(14px, -62px) rotate(12deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .p-car.on .car-glow, .p-car.on .w, .p-speaker.on .ring, .p-speaker.on .note { animation: none; }
  .p-car.on .w { stroke-dashoffset: 40; }
  .p-speaker.on .note { opacity: .9; }
}

.lab-link{position:fixed;right:12px;bottom:10px;z-index:5;font:12px/1.2 system-ui,sans-serif;color:rgba(255,255,255,.55);text-decoration:none;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.25)}
.lab-link:hover,.lab-link:focus-visible{color:#fff;background:rgba(0,0,0,.45)}