.ape-highlight-card {
  position: relative;
  display: flex;
  aspect-ratio: 1 / 1;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  border-radius: 28px;
  padding: 28px;
  text-align: center;
}

.ape-highlight-card::before {
  content: '';
  position: absolute;
  inset: -48%;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.ape-highlight-card-title {
  position: relative;
  z-index: 1;
  max-width: 86%;
  color: #fff;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
}

.ape-highlight-card--flows {
  background-color: #f07838;
}

.ape-highlight-card--flows::before {
  background-color: #c9b6d6;
  background-image:
    radial-gradient(95% 80% at 8% 0%, #d7c4ea 0%, rgba(215, 196, 234, 0) 52%),
    radial-gradient(90% 75% at 88% 8%, #b48bc4 0%, rgba(180, 139, 196, 0) 48%),
    radial-gradient(80% 70% at 18% 42%, #e08ab0 0%, rgba(224, 138, 176, 0) 50%),
    radial-gradient(85% 80% at 92% 58%, #ff8a4a 0%, rgba(255, 138, 74, 0) 50%),
    radial-gradient(100% 90% at 42% 100%, #ff5c1f 0%, rgba(255, 92, 31, 0) 56%),
    radial-gradient(70% 60% at 8% 88%, #ffb35c 0%, rgba(255, 179, 92, 0) 46%),
    linear-gradient(165deg, #cbb3e0 0%, #d48bb0 28%, #f08a62 58%, #ff6a28 82%, #ff4e14 100%);
  animation: ape-gradient-orbit 8s ease-in-out infinite reverse;
}

.ape-highlight-card--mesh {
  background-color: #2a4148;
}

.ape-highlight-card--mesh::before {
  background-color: #2a4148;
  background-image:
    radial-gradient(120% 90% at 8% 0%, #f6d3b4 0%, rgba(246, 211, 180, 0) 46%),
    radial-gradient(95% 80% at 100% 6%, #8ec9d4 0%, rgba(142, 201, 212, 0) 44%),
    radial-gradient(90% 85% at 78% 100%, #e56b38 0%, rgba(229, 107, 56, 0) 52%),
    radial-gradient(70% 60% at 18% 88%, #c47a52 0%, rgba(196, 122, 82, 0) 48%),
    linear-gradient(165deg, #cbb0a4 0%, #6d8b8f 46%, #2d474d 100%);
  animation: ape-gradient-orbit 10s ease-in-out infinite;
}

.ape-highlight-card--flows::after,
.ape-highlight-card--expressive::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 55% at 50% 48%,
    transparent 46%,
    rgba(12, 20, 24, 0.16) 100%
  );
}

.ape-highlight-card--mesh::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 55% at 50% 48%,
    transparent 40%,
    rgba(12, 20, 24, 0.28) 100%
  );
}

.ape-highlight-card--expressive {
  background-color: #163024;
}

.ape-highlight-card--expressive::before {
  background-color: #d7e4ea;
  background-image:
    radial-gradient(110% 85% at 20% 0%, #e7f1f5 0%, rgba(231, 241, 245, 0) 50%),
    radial-gradient(90% 70% at 92% 12%, #9ec4c8 0%, rgba(158, 196, 200, 0) 48%),
    radial-gradient(80% 65% at 8% 48%, #7fb08c 0%, rgba(127, 176, 140, 0) 50%),
    radial-gradient(95% 85% at 78% 62%, #2f6a40 0%, rgba(47, 106, 64, 0) 52%),
    radial-gradient(110% 95% at 50% 100%, #0c2416 0%, rgba(12, 36, 22, 0) 58%),
    radial-gradient(70% 55% at 12% 90%, #1a4a2c 0%, rgba(26, 74, 44, 0) 46%),
    linear-gradient(180deg, #d8e6ec 0%, #a9c8b4 28%, #5d8f68 52%, #2a5a38 76%, #0e2318 100%);
  animation: ape-gradient-orbit 7s ease-in-out infinite;
}

.ape-highlight-card--photo {
  background-color: #12161e;
}

.ape-highlight-card--photo::before {
  display: none;
}

.ape-highlight-card--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 13, 18, 0.12) 20%, rgba(10, 13, 18, 0.55) 100%);
}

.ape-highlight-card-photo {
  object-fit: cover;
  z-index: 0;
}

@keyframes ape-gradient-orbit {
  0%,
  100% {
    transform: translate3d(-10%, -6%, 0) rotate(0deg) scale(1.12);
  }
  25% {
    transform: translate3d(8%, -10%, 0) rotate(10deg) scale(1.2);
  }
  50% {
    transform: translate3d(10%, 8%, 0) rotate(18deg) scale(1.14);
  }
  75% {
    transform: translate3d(-8%, 10%, 0) rotate(6deg) scale(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ape-highlight-card::before {
    inset: 0;
    animation: none;
    will-change: auto;
    transform: none;
  }
}