.avc-hero-card {
  --avc-page-bg: #0a0d12;
  --avc-ring: rgba(255, 255, 255, 0.075);
  background-color: var(--avc-page-bg);
}

.avc-ring-inset {
  box-shadow: inset 0 0 0 0.5px var(--avc-ring);
}

.avc-hero-prompt {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Preview Original tile: light brand gradient. */
.avc-original-field {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 90% at 12% 16%, #ffffff 0%, transparent 56%),
    radial-gradient(75% 85% at 92% 88%, #b9a3ff 0%, transparent 60%),
    linear-gradient(135deg, #eef1f6 0%, #c9d2ff 52%, #d8c8ff 100%);
}

.avc-original-tile:hover .avc-original-field {
  filter: brightness(0.96);
}

/* Preview Clone tile: drifting colour field instead of the source shader. */
.avc-clone-field {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 22% 28%, #7c5cff 0%, transparent 62%),
    radial-gradient(55% 65% at 78% 24%, #ff5ca8 0%, transparent 60%),
    radial-gradient(70% 80% at 62% 82%, #2ad4ff 0%, transparent 62%),
    linear-gradient(140deg, #3b2a8c 0%, #171a2b 100%);
  filter: saturate(1.05);
  animation: avc-clone-drift 14s ease-in-out infinite alternate;
}

@keyframes avc-clone-drift {
  0% {
    transform: scale(1.06) translate3d(-1.5%, -1%, 0);
  }
  50% {
    transform: scale(1.12) translate3d(1.5%, 1.5%, 0);
  }
  100% {
    transform: scale(1.06) translate3d(-1%, 2%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .avc-clone-field {
    animation: none;
  }
}

.avc-preview-bar {
  transition: transform 120ms linear;
}