#garland{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  z-index: 999999;
  pointer-events: none;
  overflow: visible;
}

#garland .garland-row{
  position: absolute;
  top: -24px;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  padding: 0 8px;
  box-sizing: border-box;
}

#garland .bulb{
  position: relative;
  width: clamp(10px, 2.8vw, 16px);
  height: clamp(10px, 2.8vw, 16px);
  margin-top: 18px;
  border-radius: 50%;
  opacity: .05; 
  filter: brightness(.85);
  animation: garlandBlink 1.6s infinite ease-in-out;
  will-change: opacity, filter, transform;
  transform: translateZ(0);
}

#garland .bulb::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 2px;
  height: 18px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.28);
  border-radius: 2px;
}

#garland .bulb::after{
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
  opacity: 0;
  transition: opacity .2s linear;
  pointer-events: none;
}

@keyframes garlandBlink{
  0%, 100% { opacity: .01; filter: brightness(.75); transform: scale(.98); }
  45%      { opacity: 1;   filter: brightness(1.35); transform: scale(1.05); }
  60%      { opacity: .35; filter: brightness(.85); transform: scale(1.00); }
}

#garland .bulb.is-on::after{ opacity: 1; }

@media (max-width: 480px){
  #garland{ height: 62px; }
  #garland .bulb{ margin-top: 16px; }
  #garland .bulb::before{ height: 16px; }
}