.association-values-section .association-value {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 310px;
  padding: 28px 30px 32px;
  background:
    radial-gradient(circle at 82% 10%, rgba(156, 44, 255, .2), transparent 34%),
    radial-gradient(circle at 8% 100%, rgba(244, 17, 114, .11), transparent 42%),
    linear-gradient(145deg, rgba(10, 14, 43, .97), rgba(4, 7, 25, .94));
  transition: transform .35s ease, filter .35s ease;
}

.association-values-section .association-value::after {
  position: absolute;
  z-index: -1;
  top: 22px;
  right: 22px;
  width: 72px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--az-pink), var(--az-orange));
  box-shadow: 0 0 14px rgba(244, 17, 114, .65);
  opacity: .8;
}

.association-values-section .association-value__number {
  position: relative;
  display: inline-block;
  min-width: 1.45em;
  color: var(--az-pink);
  font-family: var(--az-font-display);
  font-size: clamp(5rem, 6vw, 6.8rem);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: .78;
  text-indent: -.04em;
  background: linear-gradient(145deg, var(--az-orange) 8%, var(--az-pink) 52%, var(--az-purple) 92%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 8px rgba(244, 17, 114, .32))
    drop-shadow(0 8px 22px rgba(115, 31, 255, .2));
  transform-origin: left bottom;
}

.association-values-section .association-value__number::after {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 46%;
  width: .9em;
  aspect-ratio: 1;
  border: 1px solid rgba(244, 17, 114, .2);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 9px rgba(156, 44, 255, .035),
    0 0 32px rgba(244, 17, 114, .18);
}

.association-values-section .association-value h3 {
  margin: 34px 0 12px;
  font-size: clamp(1.35rem, 1.6vw, 1.6rem);
}

.association-values-section .association-value p {
  max-width: 30rem;
  font-size: .88rem;
  line-height: 1.65;
}

@media (hover: hover) {
  .association-values-section .association-value:hover {
    transform: translateY(-5px);
    filter: brightness(1.08);
  }

  .association-values-section .association-value:hover .association-value__number {
    filter:
      drop-shadow(0 0 11px rgba(255, 138, 0, .4))
      drop-shadow(0 10px 25px rgba(244, 17, 114, .3));
  }
}

.association-values-grid.is-enhanced .association-value {
  opacity: 0;
  transform: translateY(28px) scale(.975);
}

.association-values-grid.is-enhanced .association-value.is-visible {
  animation: association-value-reveal .7s cubic-bezier(.2, .82, .25, 1) forwards;
}

.association-values-grid.is-enhanced .association-value__number {
  opacity: .35;
  transform: translateY(10px) scale(.92);
}

.association-values-grid.is-enhanced .association-value.is-visible .association-value__number {
  opacity: 1;
  transform: none;
  transition:
    opacity .28s ease .13s,
    transform .52s cubic-bezier(.2, 1.45, .35, 1) .13s;
}

.association-values-grid.is-enhanced .association-value__number.is-counted {
  animation: association-number-pulse .58s cubic-bezier(.2, 1.55, .35, 1);
}

@keyframes association-value-reveal {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(.975);
  }

  70% {
    opacity: 1;
    transform: translateY(-4px) scale(1.006);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes association-number-pulse {
  0%,
  100% {
    filter:
      drop-shadow(0 0 8px rgba(244, 17, 114, .32))
      drop-shadow(0 8px 22px rgba(115, 31, 255, .2));
    transform: scale(1);
  }

  55% {
    filter:
      drop-shadow(0 0 16px rgba(255, 138, 0, .62))
      drop-shadow(0 12px 30px rgba(244, 17, 114, .42));
    transform: scale(1.08) rotate(-1deg);
  }
}

@media (max-width: 640px) {
  .association-values-section .association-value {
    min-height: 270px;
    padding: 26px 26px 30px;
  }

  .association-values-section .association-value__number {
    font-size: clamp(5.4rem, 27vw, 7.2rem);
  }

  .association-values-section .association-value h3 {
    margin-top: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .association-values-grid.is-enhanced .association-value,
  .association-values-grid.is-enhanced .association-value__number {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}
