/* React Bits PixelCard adaptation for the three main-site feature cards only. */
.pixel-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: .65;
}


.feature-card[data-pixel-card] {
  isolation: isolate;
}

.feature-card[data-pixel-card]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: auto;
  aspect-ratio: 1;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(9, 9, 11, .84), transparent 85%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms cubic-bezier(.5, 1, .89, 1);
}

.feature-card[data-pixel-card].pixel-card--active::after,
.feature-card[data-pixel-card]:hover::after,
.feature-card[data-pixel-card]:focus-within::after {
  opacity: 1;
}

.feature-card[data-pixel-card] > .feature-top,
.feature-card[data-pixel-card] > .feature-copy {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.feature-card[data-pixel-card] > .feature-card-link {
  z-index: 3;
}

.feature-card[data-pixel-card] > .feature-bottom {
  position: relative;
  z-index: 4;
}

.feature-card[data-pixel-card] .feature-details,
.feature-card[data-pixel-card] .small-action {
  z-index: 5;
}

@media (hover: none), (pointer: coarse) {
  .feature-card[data-pixel-card]::after {
    transition-duration: 420ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-card[data-pixel-card]::after {
    transition-duration: 1ms;
  }
}

html[data-motion='reduced'] .feature-card[data-pixel-card]::after {
  transition-duration: 1ms;
}