/* Shared geometric treatment for the Wiki and Tools landing-page heroes. */
:is(.tests-home-hero, .wiki-home-hero) {
  --curated-geo-strong: #889cc5;
  --curated-geo-soft: #dfe8f3;
  --curated-geo-accent: #f09b9c;
  --curated-geo-opacity: 1;
  --curated-accent-opacity: 1;
}

:is(.tests-home-hero, .wiki-home-hero) > * {
  position: relative;
  z-index: 2;
  max-width: 64%;
}

:is(.tests-home-hero, .wiki-home-hero)::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 0 auto;
  width: 39%;
  opacity: var(--curated-geo-opacity);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0, var(--curated-geo-soft) 0 67%, transparent 67%) 4% 0 / 70% 30% no-repeat,
    radial-gradient(ellipse at 0 100%, var(--curated-geo-strong) 0 66%, transparent 66%) 100% 100% / 72% 45% no-repeat,
    linear-gradient(var(--curated-geo-strong), var(--curated-geo-strong)) 100% 0 / 43% 53% no-repeat;
}

:is(.tests-home-hero, .wiki-home-hero)::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 10%;
  right: 31%;
  bottom: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--curated-geo-accent);
  opacity: var(--curated-accent-opacity);
  pointer-events: none;
}

:is(.tests-home-search, .wiki-home-search) {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), background-color .28s ease;
}

:is(.tests-home-search, .wiki-home-search):focus-within {
  transform: translateY(-2px);
}

html[data-theme="light"] :is(.tests-home-hero, .wiki-home-hero) {
  --curated-geo-strong: #889cc5;
  --curated-geo-soft: #ffffff;
}

@media (max-width: 950px) {
  :is(.tests-home-hero, .wiki-home-hero) > * { max-width: 68%; }
  :is(.tests-home-hero, .wiki-home-hero)::before { width: 36%; }
}

@media (max-width: 800px) {
  :is(.tests-home-hero, .wiki-home-hero) > * { max-width: 100%; }

  :is(.tests-home-hero, .wiki-home-hero)::before {
    inset: auto -24px -38px auto;
    width: 240px;
    height: 205px;
  }

  :is(.tests-home-hero, .wiki-home-hero)::after {
    top: auto;
    right: 22px;
    bottom: 28px;
    width: 18px;
    height: 18px;
  }

  :is(.tests-home-hero, .wiki-home-hero) {
    --curated-geo-opacity: .14;
    --curated-accent-opacity: .4;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.tests-home-hero, .wiki-home-hero)::before {
    animation: curated-geometry-in .9s cubic-bezier(.22, 1, .36, 1) backwards;
  }

  :is(.tests-home-hero, .wiki-home-hero)::after {
    animation:
      curated-accent-in .72s .28s cubic-bezier(.22, 1, .36, 1) backwards,
      curated-accent-float 6s 1.1s ease-in-out infinite alternate;
  }

  :is(.tests-home-hero, .wiki-home-hero) > * {
    animation: curated-content-in .62s cubic-bezier(.22, 1, .36, 1) backwards;
  }

  :is(.tests-home-hero, .wiki-home-hero) > :nth-child(2) { animation-delay: .05s; }
  :is(.tests-home-hero, .wiki-home-hero) > :nth-child(3) { animation-delay: .1s; }
  :is(.tests-home-hero, .wiki-home-hero) > :nth-child(4) { animation-delay: .15s; }
  :is(.tests-home-hero, .wiki-home-hero) > :nth-child(5) { animation-delay: .2s; }
}

@keyframes curated-geometry-in {
  from { opacity: 0; transform: translate3d(24px, -8px, 0) scale(.985); }
  to { opacity: var(--curated-geo-opacity); transform: none; }
}

@keyframes curated-accent-in {
  from { opacity: 0; transform: translateY(-10px) scale(.65); }
  to { opacity: var(--curated-accent-opacity); transform: none; }
}

@keyframes curated-accent-float {
  from { transform: translateY(0); }
  to { transform: translateY(4px); }
}

@keyframes curated-content-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}