/* =============================================================
   PK-SPOTS — V38 Stage K polish-kit. Sizing + animation styles
   for the spot-illustration factories in pk-spots.js. Animation
   class names mirror the trust-kit convention (tk-p-anim-*) under
   a pk-spot-anim-* namespace so both libraries can sit on the
   same page without colliding.
   ============================================================= */
.pk-spot {
  display: inline-block;
  line-height: 0;
}
.pk-spot svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Square icon-scale spots — spec range 40-120px. */
.pk-spot--sm { width: 48px; }
.pk-spot--md { width: 72px; }
.pk-spot--lg { width: 120px; }

/* Wide scene spots (pool-vs-person and similar 480x220-ish
   viewBoxes) — fills its column up to a sane cap instead of a
   fixed square. */
.pk-spot--wide {
  width: 100%;
  max-width: 480px;
}

/* Optional card chrome for a spot sitting alone in a `.shc-split`
   right column (matches `.tk-p-card`'s scene-tile treatment
   without the whole card). Opt in with `.pk-spot-tile`. */
.pk-spot-tile {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(20px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pk-spot-anim-spark {
  transform-origin: center;
  animation: pkSpotSpark 4s ease-in-out infinite;
}
@keyframes pkSpotSpark {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: .65; }
  50%      { transform: translateY(-4px) rotate(8deg); opacity: 1; }
}

.pk-spot-anim-dash {
  stroke-dasharray: 4 5;
  animation: pkSpotDash 12s linear infinite;
}
@keyframes pkSpotDash { to { stroke-dashoffset: -100; } }

.pk-spot-anim-pulse {
  transform-origin: center;
  animation: pkSpotPulse 2.4s ease-in-out infinite;
}
@keyframes pkSpotPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .pk-spot-anim-spark,
  .pk-spot-anim-dash,
  .pk-spot-anim-pulse { animation: none; }
}