.discovery {
  --world-tint: #efe6f4;
  --world-accent: var(--ajeb-grape);
  --world-smoke: rgba(111, 63, 160, 0.18);
  padding: var(--ajeb-space-xl) 0;
  background: var(--world-tint);
  transition: background-color 700ms var(--ajeb-ease);
  overflow: hidden;
}

.discovery__shell {
  width: min(100% - (var(--ajeb-pad) * 2), var(--ajeb-wide));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  min-height: 78vh;
}

.discovery__kicker {
  color: var(--world-accent);
}

.discovery h2 {
  font-size: var(--ajeb-fs-h1);
  max-width: 10ch;
  margin: 0.8rem 0 1.2rem;
}

.discovery__copy {
  max-width: 34ch;
  color: var(--ajeb-muted);
  min-height: 4.5em;
}

.discovery__worlds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 2rem;
}

.world-chip {
  min-height: 2.5rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid color-mix(in oklch, var(--ajeb-text) 16%, transparent);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
}

.world-chip.is-active {
  background: var(--ajeb-charcoal);
  color: var(--ajeb-on-dark);
  border-color: var(--ajeb-charcoal);
}

.discovery__stage {
  position: relative;
  min-height: 36rem;
  display: grid;
  place-items: center;
}

.discovery__well {
  width: min(100%, 34rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in oklch, var(--ajeb-porcelain) 80%, transparent), transparent 68%),
    var(--ajeb-porcelain);
  border: 1px solid color-mix(in oklch, var(--world-accent) 18%, var(--ajeb-line));
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.discovery__smoke {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle, var(--world-smoke), transparent 62%);
  pointer-events: none;
}

.discovery__fruit,
.discovery__product {
  position: absolute;
}

.discovery__fruit {
  width: 46%;
  right: -4%;
  top: 8%;
  mix-blend-mode: multiply;
}

.discovery__product {
  width: 48%;
  bottom: 8%;
  filter: drop-shadow(0 18px 18px oklch(0.3 0.02 55 / 0.18));
}

.discovery__caption {
  position: absolute;
  left: 8%;
  bottom: 10%;
  z-index: 2;
  font-family: var(--ajeb-font-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -0.05em;
}

@media (max-width: 900px) {
  .discovery__shell {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .discovery__stage {
    min-height: 28rem;
  }
}
