/* ==========================================================================
   Glowmigos — The Glow Board: switch plate + the interactive house
   Every lighting layer is driven by a data-attribute on .house, so the
   whole demo is controllable from CSS, JS, or a plain <noscript> default.
   ========================================================================== */

.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); }
}

/* --------------------------------------------------------------------------
   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);
}
/* Mounting screws — the kind of detail that sells the object. */
.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);
}

/* --- 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;
}
/* The shaded half flips from top to bottom when switched on. */
.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);
}
.rocker[aria-pressed="true"] .rocker__paddle::after { transform: translateY(100%) scaleY(-1); }
.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);
}
/* Indicator LED set into the paddle. */
.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);
}
.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; }

/* --------------------------------------------------------------------------
   The house
   -------------------------------------------------------------------------- */
.house-frame {
  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, #061634, #030B1F);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.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));
}
.house { display: block; inline-size: 100%; block-size: auto; }

/* --- 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);
  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);
}
.hb__ring, .hb__mid { fill: var(--bc, var(--l-white)); }
.cb__halo { fill: var(--bc, var(--c-red)); }
.cb__body { fill: #16264A; }

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

/* --- Layer visibility --------------------------------------------------- */
.house__layer { opacity: 0; transition: opacity var(--d-slow) var(--e-out); pointer-events: none; }
.house__layer.lit { opacity: 1; }

/* Windows */
.house__win-glow { fill: var(--l-warm); opacity: 0; transition: opacity var(--d-slow) var(--e-out); }
.house[data-interior="on"] .house__win-glow { opacity: 0.92; }
.house[data-interior="on"] .house__win-glow:nth-of-type(2n) { opacity: 0.74; }
.house__win-spill { fill: url(#gm-spill); opacity: 0; transition: opacity var(--d-slow) var(--e-out); }
.house[data-interior="on"] .house__win-spill { opacity: 0.55; }

/* Landscape */
.house__cone { fill: url(#gm-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: 0.62; transform: scaleY(1); }
.house__pool { fill: url(#gm-pool); opacity: 0; transition: opacity var(--d-slow) var(--e-out); }
.house[data-landscape="on"] .house__pool { opacity: 0.75; }
.house[data-landscape="on"] .house__foliage-lit { opacity: 1; }
.house__foliage-lit { opacity: 0; transition: opacity var(--d-slow) var(--e-out); }

.house__pathlight circle { fill: #16264A; transition: fill var(--d-slow) var(--e-out); }
.house[data-landscape="on"] .house__pathlight circle {
  fill: var(--l-warm);
}

/* Patio */
.house__patio-pool { fill: url(#gm-pool); opacity: 0; transition: opacity var(--d-slow) var(--e-out); }
.house[data-patio="on"] .house__patio-pool { opacity: 0.8; }
.house__string-wire { stroke: rgba(160, 190, 240, 0.32); stroke-width: 1.4; fill: none; }

/* 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; } }
}

/* --- 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);
}
.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); }