.home-bulbs {
  position: relative;
  height: clamp(270px, 25vw, 360px);
  margin: 0 0 -1px;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  touch-action: pan-y;
  --bulb-line: #5681aa;
}
:root[data-theme="dark"] .home-bulbs { --bulb-line: #b0cbe2; }
.home-bulbs .home-bulb {
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 86.4px;
  height: 129.6px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 45%;
  background: transparent;
  color: var(--bulb-line);
  box-shadow: none;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  transition: none;
  transform-origin: 50% 50%;
}
.home-bulb svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; stroke-linecap: round; stroke-linejoin: round; }
.home-bulb svg path { fill: none; stroke: currentColor; }
.home-bulb .bulb-glass { stroke-width: 1.15; }
.home-bulb .bulb-filament { stroke-width: .85; opacity: .78; }
.home-bulb .bulb-stem { stroke-width: .9; }
.home-bulb .bulb-thread { stroke-width: .8; }
.home-bulb .bulb-crack { stroke-width: 1.1; opacity: 0; }
.home-bulb .bulb-shards { stroke-width: .8; opacity: 0; }
.home-bulb.is-cracked .bulb-glass { opacity: .48; }
.home-bulb.is-cracked .bulb-filament { opacity: .22; }
.home-bulb.is-cracked .bulb-crack { opacity: .9; }
.home-bulb.is-cracked .bulb-shards { animation: bulb-shatter .45s ease-out both; }
.home-bulbs .home-bulb:focus-visible { outline: 2px solid var(--ui-action, #5cabff); outline-offset: 2px; z-index: 2; }
@media (hover: hover) { .home-bulb:not(.is-cracked):hover .bulb-glass { stroke-width: 1.7; } }
@keyframes bulb-shatter { 0% { opacity: 0; transform: scale(.85); transform-origin: center; } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(1.25); transform-origin: center; } }
@media (prefers-reduced-motion: reduce) { .home-bulb.is-cracked .bulb-shards { animation: none; } }
