/* ==========================================================================
   Glowmigos — The house + the Glow Board switch plate
   The house is mounted by house-art.js. Every lighting layer keys off a
   data-attribute on the <svg>, and every material keys off a custom property
   that swaps between day and night, so the same drawing can be a sunny
   "before" and a lit "after" anywhere on the site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Materials. Night is the default; [data-time="day"] repaints in place.
   -------------------------------------------------------------------------- */
.house {
  --h-int: 1;
  --h-win: var(--l-warm);

  --h-ground: #061537;  --h-walk: #0D2148;  --h-drive: #0B1D40;
  --h-post: #0E2549;    --h-beam: #1A3A6E;  --h-slat: #0A1B3C;
  --h-wall: #12305F;    --h-wall2: #163869; --h-fascia: #20488C; --h-roof: #102A57;
  --h-glass: #081A3C;   --h-garage: #0E2B5C; --h-garage-line: #2A5391;
  --h-plant: #0D2B48;   --h-foliage: #0A2038; --h-trunk: #0D2B48; --h-stem: #16264A;
  --h-snow: #F4F7FF;

  display: block; inline-size: 100%; block-size: auto;
  transition: filter 900ms var(--e-out);
}
.house[data-time="day"] {
  --h-ground: #7C9E5A;  --h-walk: #CFC7B7;  --h-drive: #B9B3A7;
  --h-post: #8C7A63;    --h-beam: #A5917A;  --h-slat: #7E6C57;
  --h-wall: #E8E0D2;    --h-wall2: #DCD2C1; --h-fascia: #F7F3EC; --h-roof: #5B6572;
  --h-glass: #7FA3C4;   --h-garage: #D7CFC1; --h-garage-line: #BFB6A8;
  --h-plant: #5C8E3E;   --h-foliage: #4E8A3A; --h-trunk: #6B4F35; --h-stem: #7E7462;
}
.house[data-time="dusk"] {
  --h-ground: #33465A;  --h-walk: #5F6577;  --h-drive: #4E5568;
  --h-post: #3E3C50;    --h-beam: #4D4B62;  --h-slat: #2F2E42;
  --h-wall: #6B6C86;    --h-wall2: #5E6079; --h-fascia: #7B7D96; --h-roof: #33364C;
  --h-glass: #2E4066;   --h-garage: #5A5C74; --h-garage-line: #6E7089;
  --h-plant: #2F4A3A;   --h-foliage: #29422F; --h-trunk: #3A3229; --h-stem: #3A3F58;
}
/* Every material eases between palettes, so a time change is a sunset. */
.house * { transition: fill 900ms var(--e-out), opacity var(--d-slow) var(--e-out), stroke 900ms var(--e-out); }

.h-ground { fill: var(--h-ground); } .h-walk { fill: var(--h-walk); } .h-drive { fill: var(--h-drive); }
.h-post { fill: var(--h-post); } .h-beam { fill: var(--h-beam); } .h-slat { fill: var(--h-slat); opacity: .8; }
.h-wall { fill: var(--h-wall); } .h-wall2 { fill: var(--h-wall2); } .h-fascia { fill: var(--h-fascia); } .h-roof { fill: var(--h-roof); }
.h-glass { fill: var(--h-glass); opacity: .92; }
.h-garage { fill: var(--h-garage); } .h-garage-line { stroke: var(--h-garage-line); stroke-width: 2; fill: none; }
.h-plant { fill: var(--h-plant); } .h-foliage { fill: var(--h-foliage); } .h-trunk { fill: var(--h-trunk); } .h-stem { fill: var(--h-stem); }

/* Snow + wreath: Christmas scene furniture, off unless asked for. */
.h-snow { fill: var(--h-snow); opacity: 0; }
.house[data-snow="on"] .h-snow { opacity: .95; }
.h-wreath { opacity: 0; }
.h-wreath circle { fill: #2E7A3A; } .h-wreath .h-wreath-hole { fill: var(--h-wall); } .h-wreath .h-bow { fill: var(--c-red); }
.house[data-snow="on"] .h-wreath { opacity: 1; }

/* --- Shared bulb atoms (generated into the SVG by JS) ------------------- */
.hb, .cb { --i: 0; }
.hb__ring, .hb__mid, .cb__halo {
  opacity: 0;
  transition: opacity var(--d-slow) var(--e-out), fill var(--d-mid) var(--e-out);
  transition-delay: calc(var(--i) * 14ms);
}
.hb__core, .cb__body {
  fill: #16264A;
  transition: fill var(--d-slow) var(--e-out);
  transition-delay: calc(var(--i) * 14ms);
}
.house[data-time="day"] .hb__core { fill: #AFA89A; }
.house[data-time="day"] .cb__body { fill: #C9C3B6; }
.hb__ring, .hb__mid { fill: var(--bc, var(--l-white)); }
.cb__halo { fill: var(--bc, var(--c-red)); }

/* Layer on -> its bulbs light, staggered left to right. */
.lit .hb__ring  { opacity: calc(0.10 * var(--h-int)); }
.lit .hb__mid   { opacity: calc(0.24 * var(--h-int)); }
.lit .hb__core  { fill: var(--bc, var(--l-white)); }
.lit .cb__halo  { opacity: calc(0.28 * var(--h-int)); }
.lit .cb__body  { fill: var(--bc, var(--c-red)); }

/* Windows */
.house__win-glow { fill: var(--h-win); opacity: 0; }
.house[data-interior="on"] .house__win-glow { opacity: calc(0.92 * var(--h-int)); }
.house[data-interior="on"] .house__win-glow:nth-of-type(2n) { opacity: calc(0.74 * var(--h-int)); }
.house__win-spill { fill: var(--g-spill); opacity: 0; }
.house[data-interior="on"] .house__win-spill { opacity: calc(0.55 * var(--h-int)); }
/* In daylight the glow reads as a warm tint through glass, not a lamp. */
.house[data-time="day"][data-interior="on"] .house__win-glow { opacity: .28; }
.house[data-time="day"] .house__win-spill { opacity: 0 !important; }

/* Landscape */
.house__cone { fill: var(--g-cone); opacity: 0; transform-origin: bottom center;
               transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); transform: scaleY(0.72); }
.house[data-landscape="on"] .house__cone { opacity: calc(0.62 * var(--h-int)); transform: scaleY(1); }
.house__pool { fill: var(--g-pool); opacity: 0; }
.house[data-landscape="on"] .house__pool { opacity: calc(0.75 * var(--h-int)); }
.house__foliage-lit { fill: #FFD9A0; opacity: 0; }
.house[data-landscape="on"] .house__foliage-lit { opacity: 1; }
.house__pathlight circle { fill: #16264A; }
.house[data-landscape="on"] .house__pathlight circle { fill: var(--l-warm); }
.house[data-time="day"] .house__cone, .house[data-time="day"] .house__pool { opacity: 0 !important; }

/* Per-fixture solo: a landscape page can light one fixture group at a time. */
.house[data-fx-mode="solo"] .hs-landscape > * { opacity: 0 !important; transform: scaleY(0.72); }
.house[data-fx-mode="solo"] .hs-landscape > .is-fx { opacity: .75 !important; transform: none; }
.house[data-fx-mode="solo"] .hs-landscape > .house__pathlight.is-fx circle { fill: var(--l-warm); }

/* Patio */
.house__patio-pool { fill: var(--g-pool); opacity: 0; }
.house[data-patio="on"] .house__patio-pool { opacity: calc(0.8 * var(--h-int)); }
.house[data-time="day"] .house__patio-pool { opacity: 0 !important; }
.house__string-wire { stroke: rgba(160, 190, 240, 0.32); stroke-width: 1.4; fill: none; }

/* Daylight flattens every glow: bulbs read as hardware, not light. */
.house[data-time="day"] .lit .hb__ring, .house[data-time="day"] .lit .hb__mid,
.house[data-time="day"] .lit .cb__halo { opacity: 0; }

/* Idle twinkle once lit — very restrained. */
@media (prefers-reduced-motion: no-preference) {
  .house[data-christmas="on"] .cb { animation: cb-twinkle 4.6s var(--e-inout) infinite; animation-delay: calc(var(--i) * -180ms); }
  @keyframes cb-twinkle { 0%, 100% { opacity: 1; } 46% { opacity: 0.62; } }
}

/* --------------------------------------------------------------------------
   The frame the house sits in. Sky is the frame; it changes with the house.
   -------------------------------------------------------------------------- */
.house-frame {
  --sky-a: #061634; --sky-b: #030B1F;
  position: relative;
  border-radius: var(--r-lg);
  background:
    radial-gradient(115% 80% at 50% 118%, rgba(255, 181, 17, calc(0.05 + var(--glow) * 0.1)), transparent 60%),
    linear-gradient(180deg, var(--sky-a), var(--sky-b));
  border: 1px solid var(--hairline);
  overflow: hidden;
  transition: background 900ms var(--e-out);
}
.house-frame[data-time="day"]  { --sky-a: #9CD3FF; --sky-b: #E6F3FF; }
.house-frame[data-time="dusk"] { --sky-a: #2B2E66; --sky-b: #E0743F; }
.house-frame::after { /* faint vignette so the light reads brighter */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(100% 78% at 50% 46%, transparent 52%, rgba(3, 11, 31, 0.7));
  transition: opacity 900ms var(--e-out);
}
.house-frame[data-time="day"]::after { opacity: 0.18; }
/* A sun and a moon: cheap, and they sell the time of day. */
.house-frame::before {
  content: ""; position: absolute; z-index: 0;
  inset-inline-start: 12%; inset-block-start: 9%;
  inline-size: clamp(2.4rem, 6%, 4rem); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #FFF9E3, #FFD52A 62%, rgba(255, 213, 42, 0) 72%);
  opacity: 0; transform: translateY(40%);
  transition: opacity 900ms var(--e-out), transform 900ms var(--e-out);
}
.house-frame[data-time="day"]::before { opacity: 1; transform: none; }
.house-frame[data-time="dusk"]::before { opacity: .9; transform: translateY(160%) scale(1.3); background: radial-gradient(circle at 40% 40%, #FFE6A8, #FF8A3C 62%, rgba(255, 138, 60, 0) 72%); }
.house-frame .house { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   The switch plate — a real wall plate in warm off-white.
   -------------------------------------------------------------------------- */
.plate {
  position: relative;
  padding: clamp(1rem, 0.7rem + 1.2vw, 1.6rem);
  border-radius: 18px;
  background: linear-gradient(168deg, var(--s-cream), var(--s-cream-2));
  box-shadow:
    0 26px 60px -30px #000,
    inset 0 -3px 0 rgba(120, 96, 56, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.9);
  color: var(--t-onCream);
}
.plate::before, .plate::after {
  content: ""; position: absolute; inset-inline: 50%;
  inline-size: 11px; block-size: 11px; border-radius: 50%; translate: -50% 0;
  background: radial-gradient(circle at 40% 34%, #F4EDDD, #B9AC91);
  box-shadow: inset 0 0 0 1px rgba(120, 96, 56, 0.35);
}
.plate::before { inset-block-start: 0.5rem; }
.plate::after  { inset-block-end: 0.5rem; }

.plate__title {
  font-family: var(--f-display); font-weight: 800; font-size: 0.7rem;
  letter-spacing: var(--tr-wider); text-transform: uppercase;
  color: #8A7752; text-align: center;
  margin-block: 0.55rem 1rem;
}
.plate__rockers {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.3rem, 0.15rem + 0.6vw, 0.7rem);
}

/* --- The master: one big rocker above the five ------------------------- */
.plate__master {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.9rem;
  padding: 0.6rem 0.75rem; margin-block-end: 0.9rem;
  border-radius: 12px;
  background: rgba(120, 96, 56, 0.08);
  border: 1px solid rgba(120, 96, 56, 0.2);
  text-align: start;
}
.plate__master .rocker__slot { max-inline-size: 2.5rem; aspect-ratio: 5 / 8; }
.plate__master-text { display: grid; gap: 0.1rem; }
.plate__master-name { font-family: var(--f-display); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-onCream); }
.plate__master-state { font-size: 0.72rem; color: #8A7752; }
.plate__master[aria-pressed="true"] .plate__master-state { color: #3C6B1F; }

/* --- One rocker switch -------------------------------------------------- */
.rocker {
  display: grid; justify-items: center; gap: 0.5rem;
  padding: 0.35rem 0.1rem 0.2rem;
  border-radius: var(--r-md);
  min-block-size: 44px;
}
.rocker__slot {
  position: relative;
  inline-size: 100%; max-inline-size: 3.1rem; aspect-ratio: 5 / 9;
  border-radius: 7px;
  background: linear-gradient(180deg, #C9BDA2, #E3D9C2);
  box-shadow: inset 0 0 0 1px rgba(120, 96, 56, 0.3);
  padding: 3px;
}
.rocker__paddle {
  position: relative; inline-size: 100%; block-size: 100%;
  border-radius: 5px;
  background: linear-gradient(180deg, #FFFDF7, #E7DFCD);
  box-shadow: 0 2px 4px rgba(90, 72, 40, 0.28);
  transform-origin: center;
  transition: box-shadow var(--d-mid) var(--e-out);
  overflow: hidden;
}
.rocker__paddle::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 50%;
  background: linear-gradient(180deg, rgba(96, 78, 44, 0.3), rgba(96, 78, 44, 0.05));
  transition: transform var(--d-mid) var(--e-pop);
}
[aria-pressed="true"] > .rocker__slot .rocker__paddle::after,
.rocker[aria-pressed="true"] .rocker__paddle::after { transform: translateY(100%) scaleY(-1); }
[aria-pressed="true"] > .rocker__slot .rocker__paddle,
.rocker[aria-pressed="true"] .rocker__paddle {
  box-shadow: 0 1px 2px rgba(90, 72, 40, 0.2),
              0 0 22px -4px color-mix(in srgb, var(--rk, var(--c-gold)) 85%, transparent);
}
.rocker__led {
  position: absolute; inset-inline: 50%; inset-block-end: 0.42rem;
  translate: -50% 0;
  inline-size: 0.4rem; block-size: 0.4rem; border-radius: 50%;
  background: #A99C81;
  transition: background var(--d-mid) var(--e-out), box-shadow var(--d-mid) var(--e-out);
}
[aria-pressed="true"] > .rocker__slot .rocker__led,
.rocker[aria-pressed="true"] .rocker__led {
  background: var(--rk, var(--c-gold));
  box-shadow: 0 0 9px 1.5px color-mix(in srgb, var(--rk, var(--c-gold)) 80%, transparent);
}
.rocker__label {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(0.5rem, 0.44rem + 0.2vw, 0.62rem);
  letter-spacing: 0.01em; text-transform: uppercase;
  color: #6E5C3C; text-align: center; line-height: 1.2;
  inline-size: 100%; overflow-wrap: normal; hyphens: none;
  transition: color var(--d-mid) var(--e-out);
}
.rocker[aria-pressed="true"] .rocker__label { color: var(--t-onCream); }
.rocker:hover .rocker__paddle { box-shadow: 0 3px 8px rgba(90, 72, 40, 0.34); }
.rocker:focus-visible { outline-offset: 4px; }

.plate__readout {
  margin-block-start: 1.05rem; padding-block-start: 0.9rem;
  border-block-start: 1px dashed rgba(120, 96, 56, 0.35);
  font-size: var(--fs-small); line-height: 1.5; color: var(--t-onCreamSoft);
  min-block-size: 4.2em;
}
.plate__readout b { color: var(--t-onCream); font-weight: 700; }

/* --- Scenes row under the plate ---------------------------------------- */
.scene-row { display: grid; gap: 0.6rem; margin-block-start: 1rem; }
.scene-row__label { font-size: 0.66rem; font-weight: 800; letter-spacing: var(--tr-wider); text-transform: uppercase; color: #8A7752; }
.scene-row__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
@media (min-width: 30rem) { .scene-row__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.scene { justify-content: center; white-space: nowrap; }
.scene {
  --sc: var(--c-gold);
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-block-size: 2.1rem; padding: 0.3rem 0.75rem 0.3rem 0.5rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(120, 96, 56, 0.28);
  background: #FFFDF7;
  font-family: var(--f-display); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.04em;
  color: #5A4A2E;
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-mid) var(--e-out), color var(--d-fast) var(--e-out);
}
.scene__dots { display: inline-flex; gap: 2px; }
.scene__dots i { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--d); box-shadow: 0 0 5px var(--d); }
.scene:hover { border-color: var(--sc); color: var(--t-onCream); }
.scene[aria-pressed="true"] { border-color: var(--sc); color: var(--t-onCream); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sc) 40%, transparent), 0 0 18px -6px var(--sc); }

/* --------------------------------------------------------------------------
   Glow Board layout
   -------------------------------------------------------------------------- */
.glowboard { position: relative; }
.glowboard__stage {
  display: grid; gap: clamp(1.4rem, 1rem + 2.2vw, 2.6rem);
  align-items: center;
}
@media (min-width: 68rem) {
  .glowboard__stage { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); }
}

/* --- Legend under the house -------------------------------------------- */
.house-legend {
  display: flex; flex-wrap: wrap; gap: 0.55rem 1.15rem;
  padding: 0.9rem clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
  border-block-start: 1px solid var(--hairline);
  font-size: var(--fs-micro); color: var(--t-dim);
  position: relative; z-index: 1;
}
.house-legend__item { display: inline-flex; align-items: center; gap: 0.5rem; transition: color var(--d-mid) var(--e-out); }
.house-legend__item.is-on { color: var(--t-bright); }
.house-legend__time { margin-inline-start: auto; font-family: var(--f-display); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-sun); }

/* --- OFF. / ON. — the giant typographic switch moment ------------------ */
.flip { display: grid; gap: clamp(1rem, 0.5rem + 2vw, 2rem); }
.flip__words {
  display: grid; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: clamp(0.6rem, 2vw, 1.6rem);
  font-family: var(--f-display); font-weight: 800; letter-spacing: -0.04em; line-height: 0.9;
  font-size: clamp(3.4rem, 2rem + 9vw, 9rem);
}
.flip__off { color: var(--t-dim); transition: color var(--d-slow) var(--e-out), opacity var(--d-slow) var(--e-out); }
.flip__on {
  color: var(--t-bright);
  text-shadow: 0 0 calc(10px + var(--glow) * 30px) rgba(255, 213, 42, 0.0);
  transition: text-shadow var(--d-slow) var(--e-out), color var(--d-slow) var(--e-out);
}
.flip[data-on="true"] .flip__off { opacity: .35; }
.flip[data-on="true"] .flip__on { color: var(--c-sun); text-shadow: 0 0 34px rgba(255, 213, 42, 0.65), 0 0 90px rgba(255, 181, 17, 0.35); }
.flip[data-on="false"] .flip__on { opacity: .35; }