/* Card art window. Only .cs-art-* names live here; nothing in styles.css is touched. */

.cs-art-frame {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 9px 9px 5px 5px;
  background: #0b0a0a;
  box-shadow:
    inset 0 0 26px rgb(0 0 0 / 62%),
    inset 0 0 0 1px rgb(255 255 255 / 6%);
}

.card-art.has-art::before,
.card-art.has-art::after {
  display: none;
}

.card-art.has-art .cs-art-frame {
  position: absolute;
  inset: 0;
}

.card-art.has-art .card-signal {
  right: 9px;
  bottom: 7px;
  left: 9px;
  padding: 4px 6px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 999px;
  background: rgb(4 7 9 / 72%);
  backdrop-filter: blur(4px);
}

/* Hairline scanline wash so the flat vector art reads as a lit panel. */
.cs-art-frame::after {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / 4%) 0 1px, transparent 1px 4px);
  content: "";
  opacity: 0.5;
  pointer-events: none;
}

.cs-art {
  display: block;
  width: 100%;
  height: 100%;
}

.cs-art-grid {
  opacity: 0.9;
}

.cs-art-glow {
  filter: drop-shadow(0 0 6px currentcolor);
  animation: cs-art-breathe 3.6s ease-in-out infinite;
}

.cs-art-sweep {
  transform-box: view-box;
  transform-origin: 44px 112px;
  animation: cs-art-scan 5.2s linear infinite;
}

.cs-art-pulse {
  transform-box: view-box;
  transform-origin: 108px 64px;
  animation: cs-art-turn 9s linear infinite;
}

@keyframes cs-art-breathe {
  50% {
    opacity: 0.72;
  }
}

@keyframes cs-art-scan {
  from {
    transform: rotate(-8deg);
  }

  to {
    transform: rotate(-96deg);
  }
}

@keyframes cs-art-turn {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-art-glow,
  .cs-art-sweep,
  .cs-art-pulse {
    animation: none;
  }

  .cs-art-sweep {
    transform: rotate(-52deg);
  }
}