/* Kill Date: decorative hanging bulb. Drops in once on load, fizzles softly, dies, then sways.
   Colours: Ink #16181D, Signal Red #E5482F, Cream #F6F4EF, Slate #2A2D35, Fog #9BA0A8.
   The BASE styles below are the finished state (dead bulb, hanging still). Every animation only
   describes how it gets there, so reduced-motion and no-JS visitors just see the dead bulb.
   Photosensitivity: brightness only changes in soft ramps (150 ms or longer), at most about
   2 changes a second, on a small element, never a hard strobe. */

.bulb{position:absolute;top:0;left:50%;width:46px;margin-left:-23px;z-index:1;pointer-events:none;user-select:none}
.bulb-drop,.bulb-swing{display:block}
.bulb-swing{transform-origin:50% 0}
.bulb-svg{display:block;width:100%;height:auto;overflow:visible}

/* cold parts (always drawn) */
.b-cord{stroke:#4a4f59;stroke-width:1.6;stroke-linecap:round}
.b-crimp{fill:#3a3e48}
.b-socket{fill:var(--slate);stroke:#4a4f59;stroke-width:1}
.b-ring{fill:none;stroke:#3a3e48;stroke-width:1.2}
.b-glass{fill:rgba(155,160,168,.09);stroke:var(--fog);stroke-opacity:.55;stroke-width:1.2}
.b-glint{fill:none;stroke:var(--fog);stroke-opacity:.3;stroke-width:1.4;stroke-linecap:round}
.b-post{fill:none;stroke:#6b707a;stroke-width:1}
.b-fil{fill:none;stroke:#5a5f69;stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round}

/* hot parts (opacity 0 = cold); animation drives these */
.b-halo,.b-glass-hot,.b-fil-hot,.b-spark{opacity:0}
.b-fil-hot{fill:none;stroke:var(--cream);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.b-spark{fill:none;stroke:var(--red);stroke-width:1.3;stroke-linecap:round}
.b-glass-hot{pointer-events:none}

@media (min-width:900px){
  .bulb{width:58px;margin-left:-29px}
}
/* very narrow phones: the header has no free gap, so skip the bulb rather than overlap the button */
@media (max-width:359px){
  .bulb{display:none}
}

@media (prefers-reduced-motion:no-preference){
  .bulb-drop{animation:bulb-drop 1.5s cubic-bezier(.33,0,.4,1) .4s both}
  .bulb-swing{animation:bulb-settle 4.4s ease-in-out 1s both,bulb-sway 7s ease-in-out 5.4s infinite}
  .b-halo,.b-glass-hot,.b-fil-hot{animation:bulb-flicker 5.4s ease-in-out 1.2s both}
  .b-spark{animation:bulb-spark 5.4s linear 1.2s both}
  /* if the tab was in the background at load, bulb.js pauses everything until it is visible */
  .bulb-wait,.bulb-wait *{animation-play-state:paused!important}
}

/* lowered in from above the page on its cord, with a small bounce */
@keyframes bulb-drop{
  0%{transform:translateY(-115%)}
  45%{transform:translateY(5%)}
  65%{transform:translateY(-3%)}
  82%{transform:translateY(1%)}
  100%{transform:translateY(0)}
}
/* swing from the drop dies down into the slow pendulum */
@keyframes bulb-settle{
  0%{transform:rotate(0deg)}
  16%{transform:rotate(9deg)}
  36%{transform:rotate(-7deg)}
  54%{transform:rotate(5deg)}
  70%{transform:rotate(-4deg)}
  85%{transform:rotate(3.4deg)}
  100%{transform:rotate(3deg)}
}
@keyframes bulb-sway{
  0%,100%{transform:rotate(3deg)}
  50%{transform:rotate(-3deg)}
}
/* soft, irregular fizzle; ends at 0 (dead). Dips happen at about 0.7 s, 1.9 s, 3.5 s and 5.0 s. */
@keyframes bulb-flicker{
  0%{opacity:1}
  8.3%{opacity:1}
  13.3%{opacity:.3}
  20%{opacity:.85}
  31.7%{opacity:.85}
  35%{opacity:.15}
  41.7%{opacity:.15}
  45%{opacity:.7}
  50%{opacity:1}
  60%{opacity:.9}
  65%{opacity:.25}
  73.3%{opacity:.55}
  80%{opacity:.5}
  85%{opacity:.9}
  93.3%{opacity:.08}
  100%{opacity:0}
}
/* three small electric sparks at the socket, each a soft 0.4 s blip at the start of a dip */
@keyframes bulb-spark{
  0%,11.5%{opacity:0}
  13.5%{opacity:.9}
  17%,33%{opacity:0}
  35%{opacity:.8}
  38.5%,63%{opacity:0}
  65%{opacity:.9}
  69%,100%{opacity:0}
}