/* =================================================================
   house.css — VISUAL SKIN for the engine house (assets/svg/house-layers.svg)

   The engine (js/engine/house.js) writes only data-* attributes and CSS
   custom properties onto the sixteen <g> layer wrappers. Every colour,
   transition and animation the house shows is declared HERE, keyed off
   those hooks. Nothing in this file is read by the engine.

   All values resolve to --fb-* design tokens (css/framework/tokens.css).

   Hooks used, per layer:
     #house-sky        [data-condition] clear|hazy|overcast
     #house-sun        [data-state] normal|harsh|soft, --intensity
     #house-roof       [data-temperature] cool|warm|hot|extreme, [data-radiant-barrier]
     #house-attic      [data-temperature], [data-ventilated]
     #house-insulation --level (0-100), [data-level-name]
     #house-windows    [data-comfort] poor|fair|good|comfortable
     #house-energy-meter --speed
     #house-heat       [data-visible] true|false, [data-intensity]
     #house-airflow    [data-visible]
     #house-glow       [data-comfort]
   ================================================================= */

.fb-house-svg{ display:block; width:100%; height:auto; overflow:visible; }

/* ------------------------------------------------------------------
   BACKDROP
   ------------------------------------------------------------------ */
/* Gradient stops live inside <defs>, not inside the layer <g>, so they are
   targeted by class alone. The house's data-condition state lives on the
   #house-sky group, so we can't key sky recolour off it via descendant
   selectors — instead the whole SVG carries [data-sky-*] mirrors written by
   the wiring layer (js/dashboard-ui.js) for the few gradient-driven states. */
.sky-top{ stop-color:#4FB3EF; }
.sky-mid{ stop-color:#8ED5F8; }
.sky-bot{ stop-color:#EAF7FF; }
.fb-house-svg[data-sky="hazy"] .sky-top{ stop-color:#7FB8DA; }
.fb-house-svg[data-sky="hazy"] .sky-mid{ stop-color:#AFCEDD; }
.fb-house-svg[data-sky="overcast"] .sky-top{ stop-color:#9DB4C4; }
.fb-house-svg[data-sky="overcast"] .sky-mid{ stop-color:#C3D2DC; }
.sky-top, .sky-mid{ transition:stop-color var(--fb-duration-slow) var(--fb-ease-out); }

.sun-core{ stop-color:#FFF6D6; }
.sun-mid{ stop-color:var(--fb-amber-500); stop-opacity:.55; }
.sun-edge{ stop-color:var(--fb-amber-500); stop-opacity:0; }
#house-sun .sun-disc{ fill:#FFDE63; }
#house-sun .ray{ fill:#FFD34E; opacity:.85; transform-box:fill-box; transform-origin:center; }
#house-sun[data-state="harsh"] .sun-disc{ fill:#FFC22E; }
#house-sun[data-state="harsh"] .ray{ fill:#FFB020; opacity:1; }
#house-sun[data-state="soft"] .sun-disc{ fill:#FFE79A; }
#house-sun[data-state="soft"] .ray{ opacity:.5; }
#house-sun .sun-rays{ transform-box:fill-box; transform-origin:815px 150px; animation:fb-house-spin 90s linear infinite; }

#house-clouds .cloud ellipse{ fill:rgba(255,255,255,.85); }
#house-clouds .cloud-a{ animation:fb-house-drift-a 64s linear infinite; }
#house-clouds .cloud-b{ animation:fb-house-drift-b 92s linear infinite; }

/* ------------------------------------------------------------------
   GROUNDS
   ------------------------------------------------------------------ */
#house-lawn .lawn-fill{ fill:#8FD48A; }
#house-lawn .lawn-shadow{ fill:rgba(11,59,102,.10); }
#house-trees .trunk{ fill:#9A6A3C; }
#house-trees .leaves{ fill:#5BB56A; }
#house-trees .tree-l{ transform-box:fill-box; transform-origin:106px 574px; animation:fb-house-sway 7s ease-in-out infinite; }
#house-trees .tree-r{ transform-box:fill-box; transform-origin:901px 578px; animation:fb-house-sway 8.5s ease-in-out infinite reverse; }

/* ------------------------------------------------------------------
   STRUCTURE
   ------------------------------------------------------------------ */
.wall-top{ stop-color:#FBFDFF; }
.wall-bot{ stop-color:#E7F1F9; }
#house-walls .wall-edge{ fill:none; stroke:var(--fb-navy-500); stroke-width:5; }
#house-walls .foundation{ fill:var(--fb-navy-500); }

#house-attic .attic-cavity{ fill:#EFF6FC; }
#house-attic .vent{ fill:none; stroke:var(--fb-navy-400); stroke-width:3; opacity:.5; }
#house-attic .vent-slats{ stroke:var(--fb-navy-400); stroke-width:2.5; stroke-linecap:round; opacity:.5; }
#house-attic[data-ventilated="true"] .vent,
#house-attic[data-ventilated="true"] .vent-slats{ opacity:.9; stroke:var(--fb-blue-500); }

/* --- INSULATION: --level (0-100) drives fill height inside the attic --- */
.ins-top{ stop-color:#FFC79A; }
.ins-bot{ stop-color:var(--fb-orange-500); }
#house-insulation .ins-fill{
  /* attic floor sits at y=358 in the viewBox; full depth ~150 units.
     We translate the fill rect down when level is low, up when high. */
  transform: translateY(calc((100 - var(--level, 20)) * 1.5px));
  transition: transform var(--fb-duration-slow) var(--fb-ease-spring);
}
#house-insulation .ins-top-line{
  stroke:var(--fb-orange-700); stroke-width:3; stroke-dasharray:8 6;
  transform: translateY(calc((100 - var(--level, 20)) * 1.5px));
  transition: transform var(--fb-duration-slow) var(--fb-ease-spring);
  opacity: calc(var(--level, 20) / 40);
}
#house-insulation[data-state="none"] .ins-fill{ opacity:.35; }

/* --- ROOF: temperature bucket recolours the plane + drives shade ---
   Stops live in <defs>, so recolour keys off the SVG-root [data-roof] mirror
   (written alongside #house-roof[data-temperature] by the wiring layer). */
.roof-top{ stop-color:#E86A4A; }
.roof-bot{ stop-color:#C9422A; }
#house-roof .roof-shade{ fill:rgba(11,27,42,.16); }
#house-roof .roof-outline{ fill:none; stroke:var(--fb-navy-700); stroke-width:6; stroke-linejoin:round; }
#house-roof .ridge{ fill:var(--fb-navy-700); }
.roof-top, .roof-bot{ transition:stop-color var(--fb-duration-slow) var(--fb-ease-out); }
.fb-house-svg[data-roof="cool"] .roof-top{ stop-color:#69B0D8; }
.fb-house-svg[data-roof="cool"] .roof-bot{ stop-color:#3E86AE; }
.fb-house-svg[data-roof="warm"] .roof-top{ stop-color:#E9A85C; }
.fb-house-svg[data-roof="warm"] .roof-bot{ stop-color:#CE7C38; }
.fb-house-svg[data-roof="hot"] .roof-top{ stop-color:#E86A4A; }
.fb-house-svg[data-roof="hot"] .roof-bot{ stop-color:#C9422A; }
.fb-house-svg[data-roof="extreme"] .roof-top{ stop-color:#E23A1F; }
.fb-house-svg[data-roof="extreme"] .roof-bot{ stop-color:#A82611; }
/* radiant barrier: a silver sheen shown only when the package includes it */
#house-roof .radiant-sheen{ fill:#D8E6F0; opacity:0; transition:opacity var(--fb-duration-slow) var(--fb-ease-out); }
#house-roof[data-radiant-barrier="true"] .radiant-sheen{ opacity:.55; }

/* ------------------------------------------------------------------
   OPENINGS — windows warm/cool with comfort
   ------------------------------------------------------------------ */
#house-windows .win-frame{ fill:var(--fb-navy-500); }
#house-windows .win-glass{ fill:#BFE3F8; transition:fill var(--fb-duration-slow) var(--fb-ease-out); }
#house-windows .win-bar-v, #house-windows .win-bar-h{ stroke:var(--fb-navy-500); stroke-width:4; }
#house-windows[data-comfort="poor"] .win-glass{ fill:#F4C9BC; }
#house-windows[data-comfort="fair"] .win-glass{ fill:#F3E0C2; }
#house-windows[data-comfort="good"] .win-glass{ fill:#CDE8F6; }
#house-windows[data-comfort="comfortable"] .win-glass{ fill:#BFF0E4; }

#house-door .door-panel{ fill:var(--fb-orange-500); }
#house-door .door-knob{ fill:var(--fb-navy-700); }

/* ------------------------------------------------------------------
   INSTRUMENTS — meter needle spins faster with energy use
   ------------------------------------------------------------------ */
#house-energy-meter .meter-body{ fill:var(--fb-navy-500); }
#house-energy-meter .meter-face{ fill:#EAF3FA; }
#house-energy-meter .meter-needle{
  stroke:var(--fb-red-500); stroke-width:3; stroke-linecap:round;
  transform-box:fill-box; transform-origin:744px 440px;
  animation:fb-house-spin calc(6s / (var(--speed, .3) + .05)) linear infinite;
}

/* ------------------------------------------------------------------
   EFFECTS — heat + airflow, toggled by [data-visible]
   ------------------------------------------------------------------ */
#house-heat{ opacity:0; transition:opacity var(--fb-duration-base) var(--fb-ease-out); }
#house-heat[data-visible="true"]{ opacity:1; }
#house-heat .wave{ fill:none; stroke:var(--fb-red-500); stroke-width:3; stroke-linecap:round; opacity:.5; }
#house-heat .w1{ animation:fb-house-rise 2.4s ease-in-out infinite; }
#house-heat .w2{ animation:fb-house-rise 2.4s ease-in-out .3s infinite; }
#house-heat .w3{ animation:fb-house-rise 2.4s ease-in-out .6s infinite; }
#house-heat .w4{ animation:fb-house-rise 2.4s ease-in-out .9s infinite; }
#house-heat .arrow{ fill:none; stroke:var(--fb-red-500); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:.55; }
/* engine writes data-intensity as a number 0-100; fade arrows below 30 */
#house-heat[data-intensity="0"] .arrow,
#house-heat[data-intensity="5"] .arrow,
#house-heat[data-intensity="10"] .arrow,
#house-heat[data-intensity="15"] .arrow,
#house-heat[data-intensity="20"] .arrow,
#house-heat[data-intensity="25"] .arrow{ opacity:.25; }

#house-airflow{ opacity:0; transition:opacity var(--fb-duration-base) var(--fb-ease-out); }
/* airflow shows when the attic is NOT fully sealed (leaks present) */
#house-airflow[data-sealed="false"]{ opacity:.8; }
#house-airflow .flow{ fill:none; stroke:var(--fb-blue-500); stroke-width:3; stroke-dasharray:5 8; stroke-linecap:round;
  animation:fb-house-flow 1.6s linear infinite; }

/* ------------------------------------------------------------------
   GLOW — a success veil over the walls. The engine writes
   data-visible + data-reason (none|code|complete|upgrade) + --intensity.
   Comfort-tinted warmth is driven by the walls' data-comfort mirrored
   to the SVG root as [data-comfort] by the wiring layer.
   ------------------------------------------------------------------ */
#house-glow .glow-veil{ fill:transparent; transition:fill var(--fb-duration-slow) var(--fb-ease-out); }
.fb-house-svg[data-comfort="poor"] #house-glow .glow-veil{ fill:rgba(226,58,31,.12); }
.fb-house-svg[data-comfort="fair"] #house-glow .glow-veil{ fill:rgba(242,169,59,.10); }
.fb-house-svg[data-comfort="good"] #house-glow .glow-veil{ fill:rgba(43,184,222,.06); }
.fb-house-svg[data-comfort="comfortable"] #house-glow .glow-veil{ fill:rgba(47,169,107,.12); }
/* code-met adds a gentle green rim regardless of comfort */
#house-glow[data-reason="code"] .glow-veil,
#house-glow[data-reason="complete"] .glow-veil{ mix-blend-mode:multiply; }

/* ------------------------------------------------------------------
   AMBIENT KEYFRAMES (house-scoped so they never collide)
   ------------------------------------------------------------------ */
@keyframes fb-house-spin{ to{ transform:rotate(360deg); } }
@keyframes fb-house-sway{ 0%,100%{ transform:rotate(-2deg); } 50%{ transform:rotate(2deg); } }
@keyframes fb-house-rise{ 0%{ transform:translateY(6px); opacity:0; } 40%{ opacity:.5; } 100%{ transform:translateY(-14px); opacity:0; } }
@keyframes fb-house-flow{ to{ stroke-dashoffset:-26; } }
@keyframes fb-house-drift-a{ from{ transform:translateX(-120px); } to{ transform:translateX(1120px); } }
@keyframes fb-house-drift-b{ from{ transform:translateX(1120px); } to{ transform:translateX(-120px); } }

/* Respect reduced motion + the framework's .fb-calm opt-out */
@media (prefers-reduced-motion: reduce){
  .fb-house-svg *{ animation:none !important; }
}
.fb-calm .fb-house-svg *{ animation:none !important; }