.quiz-header-btn {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}

.quiz-header-btn a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 22px;

  width: fit-content;
  min-width: 0;

  height: 74px;

  background: linear-gradient(
    180deg,
    #ffe96a 0%,
    #ffd91f 45%,
    #f7c500 100%
  );

  border-radius: 999px;

  padding: 0 34px 0 88px;

  text-decoration: none;

  overflow: hidden;

  cursor: pointer;

  box-shadow:
    0 10px 26px rgba(0,0,0,0.12),
    inset 0 -4px 0 rgba(0,0,0,0.08),
    inset 0 4px 16px rgba(255,255,255,0.5);

  transition:
    box-shadow .25s ease,
    filter .25s ease;

  /* smooth pulse */
  animation:
    pulseButton 3.2s infinite cubic-bezier(0.4, 0, 0.2, 1);

  will-change: transform;
}

/* shine */
.quiz-header-btn a .shine {
  position: absolute;

  top: -40px;
  left: -120px;

  width: 70px;
  height: 180px;

  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.15) 30%,
    rgba(255,255,255,0.9) 50%,
    rgba(255,255,255,0.15) 70%,
    rgba(255,255,255,0) 100%
  );

  transform: rotate(24deg);

  /* slower = less GPU load */
  animation: shineMove 4.5s infinite linear;

  z-index: 1;

  pointer-events: none;
}

/* dot */
.quiz-header-btn a::before {
  content: "";

  position: absolute;

  left: 22px;
  top: 50%;
  transform: translateY(-50%);

  width: 18px;
  height: 18px;

  background: #000;
  border-radius: 50%;

  z-index: 3;
}

/* dashed */
.quiz-header-btn a::after {
  content: "";

  position: absolute;

  left: 56px;
  top: 12px;

  width: 3px;
  height: 50px;

  background-image:
    repeating-linear-gradient(
      to bottom,
      #000 0,
      #000 7px,
      transparent 7px,
      transparent 14px
    );

  z-index: 3;
}

.quiz-sale {
  position: relative;
  z-index: 3;

  font-size: 54px;
  font-weight: 900;
  color: #df0000;
  line-height: 1;

  text-shadow:
    0 3px 0 rgba(255,255,255,0.35);

  backface-visibility: hidden;
  transform: translateZ(0);

  transition: transform .25s ease;
}

.quiz-text {
  position: relative;
  z-index: 3;

  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;

  color: #d40000;

  max-width: 170px;

  backface-visibility: hidden;
  transform: translateZ(0);

  transition: transform .25s ease;
}

/* HOVER EFFECT */
.quiz-header-btn a:hover {

  filter: brightness(1.05);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.18),
    0 0 18px rgba(255,215,0,0.25),
    inset 0 -4px 0 rgba(0,0,0,0.08),
    inset 0 4px 18px rgba(255,255,255,0.65);
}

.quiz-header-btn a:hover .quiz-sale {
  transform: scale(1.06);
}

.quiz-header-btn a:hover .quiz-text {
  transform: translateX(3px);
}

/* ACTIVE CLICK */
.quiz-header-btn a:active {
  transform: scale(0.98);
}

/* shine animation */
@keyframes shineMove {

  0% {
    left: -120px;
  }

  100% {
    left: 520px;
  }
}

/* smooth pulse */
@keyframes pulseButton {

  0% {
    transform: scale3d(1,1,1);

    box-shadow:
      0 10px 26px rgba(0,0,0,0.12),
      0 0 0 rgba(255,215,0,0),
      inset 0 -4px 0 rgba(0,0,0,0.08),
      inset 0 4px 16px rgba(255,255,255,0.5);
  }

  25% {
    transform: scale3d(1.012,1.012,1);
  }

  50% {
    transform: scale3d(1.025,1.025,1);

    box-shadow:
      0 16px 38px rgba(0,0,0,0.18),
      0 0 18px rgba(255,215,0,0.25),
      inset 0 -4px 0 rgba(0,0,0,0.08),
      inset 0 4px 18px rgba(255,255,255,0.6);
  }

  75% {
    transform: scale3d(1.012,1.012,1);
  }

  100% {
    transform: scale3d(1,1,1);

    box-shadow:
      0 10px 26px rgba(0,0,0,0.12),
      0 0 0 rgba(255,215,0,0),
      inset 0 -4px 0 rgba(0,0,0,0.08),
      inset 0 4px 16px rgba(255,255,255,0.5);
  }
}

/* MOBILE */
@media (max-width: 980px) {

  .quiz-header-btn {
    position: relative;

    top: auto;
    left: auto;

    transform: none;

    display: flex;
    justify-content: center;

    margin: 8px auto 14px;
  }

  .quiz-header-btn a {
    width: fit-content;
    height: 62px;

    padding: 0 18px 0 68px;

    gap: 12px;

    /* disable pulse on mobile */
    animation: none;
  }

  .quiz-header-btn a::before {
    left: 18px;

    width: 14px;
    height: 14px;
  }

  .quiz-header-btn a::after {
    left: 42px;

    height: 40px;
    top: 11px;
  }

  .quiz-sale {
    font-size: 42px;
  }

  .quiz-text {
    font-size: 12px;
    max-width: 120px;
  }
}