@keyframes vibrate {
  0%,
  100% {
    scale: 1;
    transform: rotate(0deg);
  }
  20%,
  40%,
  60%,
  80% {
    transform: rotate(5deg);
  }

  20% {
    scale: 0.95;
  }

  50% {
    scale: 1.05;
  }

  80% {
    scale: 0.95;
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: rotate(-5deg);
  }
}

.ticket {
  display: inline-flex;
}

a:not([disabled]):hover > .ticket svg,
.ticket:not(a[disabled] .ticket):hover svg {
  animation: vibrate 0.5s forwards;
}

.ticket:not(a[disabled] .ticket):hover svg path:not(.dot),
a:not([disabled]):hover > .ticket svg path:not(.dot) {
  fill: var(--color-season);
  stroke: var(--color-season);
}
a.to-blank:hover > .ticket svg path:not(.dot) {
  fill: #fff;
  stroke: #fff;
}

.ticket:not(a[disabled] .ticket):hover svg path.dot,
a:not([disabled]):hover > .ticket svg path.dot {
  fill: #fff;
}
a.to-blank:hover > .ticket svg path.dot {
  fill: var(--color-season);
}