* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: url("data:image/svg+xml,%3Csvg opacity='0.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Ccircle id='circle' r='1' fill='hsl(0, 0%25, 100%25)' /%3E%3C/defs%3E%3Cuse href='%23circle' x='50' y='50' /%3E%3Cuse href='%23circle' x='150' y='50' /%3E%3Cuse href='%23circle' x='50' y='150' /%3E%3Cuse href='%23circle' x='150' y='150' /%3E%3Cuse href='%23circle' transform='translate(100 100) scale(2.5)' /%3E%3C/svg%3E"),
    hsl(0, 0%, 0%);
  background-size: 50px, 100%;
}

label {
  position: relative;
}
label input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
label input + svg {
  height: 25px;
  width: auto;
  display: block;
  color: hsl(200, 100%, 60%);
  filter: drop-shadow(4px 0 8px hsla(200, 100%, 50%, 0));
  transition: filter 0.25s ease-in-out;
}

label input + svg #bands {
  transition: opacity 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
}

label input:hover + svg,
label input:focus + svg {
  filter: drop-shadow(4px 0 8px hsla(200, 100%, 50%, 0.4));
}

label input:hover + svg #bands,
label input:focus + svg #bands {
  opacity: 1;
}

label input + svg #saber {
  transition: stroke-dashoffset 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
label input + svg #text {
  transition: transform 0.5s cubic-bezier(0.645, 0.1, 0.355, 1.05);
}

label input:checked + svg #saber {
  stroke-dashoffset: 0;
}
label input:checked + svg #text {
  transform: translateX(0);
}
