/* ============================================================================
   THE BULB — the switch on a lamp's own photograph.
   The site itself always stays lit; only the piece turns on and off.
   ========================================================================== */

.bulb{
  position:absolute; right:14px; bottom:14px; z-index:4;
  display:inline-flex; align-items:center; gap:7px;
  height:38px; padding:0 13px;
  background:rgba(255,255,255,.92); border:1px solid var(--line); color:var(--muted);
  font:inherit; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  cursor:pointer; backdrop-filter:blur(6px);
  box-shadow:0 6px 18px -10px rgba(34,28,22,.5);
  transition:color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bulb:hover{ border-color:var(--ink-dark); color:var(--text); }
.bulb svg{ display:block; }
/* off: the rays are not there at all — a dark bulb */
.bulb .bulb-rays{ opacity:0; transition:opacity .25s ease; }

/* on: the bulb warms, the rays come out, and the button glows a little */
.bulb.on{
  background:#FFF7E8; border-color:#E7C98C; color:#8A6A2F;
  box-shadow:0 6px 22px -8px rgba(214,168,80,.75);
}
.bulb.on .bulb-rays{ opacity:1; }

/* the photograph itself sits in a faint pool of warm light while the lamp is on */
.pd-stage{ position:relative; }
#pdlg.lit .pd-stage::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(52% 40% at 50% 42%, rgba(255,196,110,.20), transparent 70%);
  mix-blend-mode:screen;
}

@media (max-width:640px){
  .bulb{ right:10px; bottom:10px; height:34px; padding:0 10px; font-size:10px; gap:6px; }
  .bulb svg{ width:17px; height:17px; }
}
@media (prefers-reduced-motion:reduce){
  .bulb, .bulb .bulb-rays{ transition:none; }
}