/* Keep source images sharp. Distortion is confined to a pointer-transparent preview overlay. */
.artwork-preview-frame { position: relative; }
.artwork-preview-overlay { position: absolute; z-index: 2; display: block; overflow: hidden;
  pointer-events: none; border-radius: inherit; contain: paint; }
.artwork-preview-overlay::before, .artwork-preview-overlay::after {
  content: ''; position: absolute; pointer-events: none; animation-play-state: paused; }
[data-artwork-preview='axtlan'] > .artwork-preview-overlay::before {
  inset: -12% 0; opacity: .22;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgb(250 184 105 / .4) 3px 4px);
  mask-image: linear-gradient(transparent 31%, #000 44% 54%, transparent 68%);
  animation: artwork-scan 16s ease-in-out infinite alternate paused; }
[data-artwork-preview='axtlan'] > .artwork-preview-overlay::after {
  inset: 0; opacity: .18; border-block-start: 1px solid #ffc482;
  background: linear-gradient(transparent 43%, rgb(115 221 238 / .17) 49%, transparent 57%);
  clip-path: inset(43% 0 43% 0); backdrop-filter: saturate(1.5) blur(.35px);
  animation: artwork-scan 21s ease-in-out infinite alternate-reverse paused; }
[data-artwork-preview='speclang'] > .artwork-preview-overlay::before {
  inset: -22%; opacity: .32;
  background: radial-gradient(ellipse at 23% 42%, rgb(198 236 243 / .5), transparent 34%),
    radial-gradient(ellipse at 68% 67%, rgb(240 185 154 / .36), transparent 38%);
  filter: blur(9px); animation: artwork-smoke 23s ease-in-out infinite alternate paused; }
[data-artwork-preview='speclang'] > .artwork-preview-overlay::after {
  inset: 0; border: 1px solid rgb(139 208 222 / .3); opacity: .48;
  background: linear-gradient(115deg, transparent 36%, rgb(217 242 245 / .17) 49%, transparent 62%);
  mask-image: radial-gradient(ellipse, transparent 45%, #000 90%);
  animation: artwork-smoke 29s ease-in-out infinite alternate-reverse paused; }
[data-preview-state='active'] > .artwork-preview-overlay::before,
[data-preview-state='active'] > .artwork-preview-overlay::after { animation-play-state: running; }
[data-preview-state='quiet'] > .artwork-preview-overlay { opacity: .3; }
[data-preview-state='off'] > .artwork-preview-overlay { display: none; }
@keyframes artwork-scan { from { transform: translateY(-26%); } to { transform: translateY(26%); } }
@keyframes artwork-smoke { from { transform: translate(-8%, -3%) scale(1); } to { transform: translate(9%, 7%) scale(1.08); } }
@media (prefers-reduced-motion: reduce), (forced-colors: active) { .artwork-preview-overlay { display: none !important; } }
@media print { .artwork-preview-overlay { display: none !important; } }
