/* The house: walls, windows and rooms, roof details, porch. */

.scene { flex: 1; display: flex; align-items: flex-end; justify-content: center; position: relative; z-index: 1;
         min-height: 300px; padding-top: 24px; }
.scene svg { width: min(860px, 100%); height: auto; display: block; overflow: visible; }

/* ---- Structure ---- */
.plaster { fill: var(--plaster); stroke: var(--line); stroke-width: 2; transition: fill 2s; }
.wall    { fill: var(--wall);    stroke: var(--line); stroke-width: 2; transition: fill 2s; }
.ground  { fill: var(--ground);  transition: fill 2s; }
.shadow  { fill: #000; opacity: 0; transition: opacity 2s; }
.jali rect { fill: var(--line); opacity: .45; }
.chajja, .sill { fill: var(--wall); stroke: var(--line); stroke-width: 1.5; }
.frame { fill: none; stroke: var(--line); stroke-width: 3; }
.mull  { stroke: var(--line); stroke-width: 2.5; }
.door { fill: #6a3d27; stroke: var(--line); stroke-width: 2.5; }
.door-panel { fill: none; stroke: #4a2817; stroke-width: 2; }
.gate { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; }
.plate { fill: #c9a35a; stroke: #7d6230; stroke-width: 2; }
.plate-gu { font-family: "Anek Gurmukhi", sans-serif; font-weight: 800; font-size: 17px; fill: #3d2e12; }
.plate-en { font-weight: 600; font-size: 9px; fill: #3d2e12; letter-spacing: .04em; }

/* ---- Windows: sky reflection by day, rooms by night (switched by house.js) ---- */
.glass { fill: var(--glass); transition: fill .2s, filter .2s; }
.glass.on { fill: var(--lit); }
.night .glass.on, .dusk .glass.on { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--lit) 65%, transparent)); }
.shine { fill: url(#shine); opacity: 0; pointer-events: none; }
.day .shine, .dawn .shine { opacity: 1; }
.curtain { opacity: .9; }
.night .curtain, .dusk .curtain { opacity: .75; }
.person { fill: #3a2414; opacity: 0; }
.night .person, .dusk .person, .dawn .person { opacity: .55; }
.tv { fill: #9cc2ff; opacity: 0; }
.tv.on { animation: tv 3.7s steps(1) infinite; }
@keyframes tv { 0%{opacity:.55} 9%{opacity:.25} 17%{opacity:.6} 31%{opacity:.4} 44%{opacity:.65}
                52%{opacity:.3} 68%{opacity:.5} 79%{opacity:.2} 90%{opacity:.6} }

/* ---- Porch lamp and its moths ---- */
.lamp { fill: var(--lit); opacity: 0; transition: opacity 2s; }
.night .lamp, .dusk .lamp { opacity: 1; filter: drop-shadow(0 0 10px var(--lit)); }
.moth { opacity: 0; transform-box: view-box; transform-origin: 400px 336px; animation: orbit var(--r) linear infinite; }
.moth circle { fill: #f3e6c4; }
.night .moth, .dusk .moth { opacity: .9; }
@keyframes orbit { to { transform: rotate(360deg); } }

/* ---- Roof: water tank, plant, washing line (out by day, in at night) ---- */
.tank { fill: #1c1e23; }
.tank-top { fill: #2c2f36; }
.tank-ridge { stroke: #33363e; stroke-width: 2; }
.leaf { fill: #3f6b47; stroke: var(--line); stroke-width: 1.5; }
.pot  { fill: #a5583a; stroke: var(--line); stroke-width: 1.5; }
.plant { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 5s ease-in-out infinite alternate; }
.line-cord { fill: none; stroke: var(--line); stroke-width: 1.2; }
.pole { stroke: var(--line); stroke-width: 2.5; }
.laundry { opacity: 0; transition: opacity 1.5s; }
.day .laundry, .dawn .laundry { opacity: 1; }
.cloth { stroke: var(--line); stroke-width: 1.2; transform-box: fill-box; transform-origin: 50% 0;
         animation: sway 3.2s ease-in-out infinite alternate; }
.cloth.b { animation-duration: 2.6s; animation-delay: -1s; }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }