/* Attention treatment for a call-to-action that has to be noticed: a pulsing
   ring plus a corner badge. Shared because the same action is offered from the
   homepage, the product overview and all six product detail pages, and copies
   would drift apart. Relies on the --primary token every page already defines. */

@keyframes attention-pulse {
  0%, 100% {
    background: var(--primary);
    box-shadow: 0 14px 30px rgba(1, 100, 228, 0.22), 0 0 0 0 rgba(1, 100, 228, 0.55);
    transform: scale(1);
  }
  30% {
    background: #2f8bf2;
    box-shadow: 0 14px 30px rgba(1, 100, 228, 0.3), 0 0 0 14px rgba(1, 100, 228, 0);
    transform: scale(1.028);
  }
  /* Collapses while still transparent, so the ring never appears to be sucked
     back into the pill before the next beat. */
  45% {
    background: var(--primary);
    box-shadow: 0 14px 30px rgba(1, 100, 228, 0.22), 0 0 0 0 rgba(1, 100, 228, 0);
    transform: scale(1);
  }
}

.attention-pulse {
  position: relative;
  /* Both shadow layers are restated in every keyframe: an animation replaces the
     whole box-shadow value, so dropping the base layer would make this pill read
     flatter than the ones beside it. */
  animation: attention-pulse 1.8s ease-in-out infinite;
}

/* A running animation outranks normal rules, so the pulse has to be dropped for
   the shared hover depth to show through. 0% is the resting look, so resuming
   after the pointer leaves does not jump. */
.attention-pulse:hover,
.attention-pulse:focus-visible {
  animation: none;
}

/* White on the blue pill is the strongest contrast available without bringing a
   second accent colour into the site. */
.attention-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  font-family: "Inter-Bold", Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .attention-pulse {
    animation: none;
  }
}