/* V36: the portrait stays crisp; only independent painted accents move. */

.shop .customer .character-ambient {
  position: absolute;
  z-index: 1;
  display: block;
  width: 29%;
  height: 29%;
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none;
  opacity: .22;
  transform-origin: center;
}

@media (min-width: 721px) and (min-height: 500px) {
  .shop .customer .alien-art {
    z-index: 2;
  }

  .shop .customer:is(
    .guest-lotus,
    .guest-ink,
    .guest-jade,
    .guest-opera,
    .guest-silver,
    .guest-guardian
  ):not(.preview):not(.urgent):not(.mismatch):not(.serve-ready):not(.served) .alien-art {
    animation: none;
  }

  .shop .customer.guest-lotus:not(.preview) .ambient-lotus {
    left: 35%;
    top: 22%;
    animation: v36-lotus-glow 4.8s ease-in-out infinite;
  }

  .shop .customer.guest-ink:not(.preview) .ambient-ink {
    left: 38%;
    top: 28%;
    width: 25%;
    height: 25%;
    animation: v36-ink-ripple 7.2s linear infinite;
  }

  .shop .customer.guest-jade:not(.preview) .ambient-jade {
    left: 31%;
    top: 46%;
    width: 24%;
    height: 24%;
    animation: v36-jade-orbit 5.4s ease-in-out infinite;
  }

  .shop .customer.guest-opera:not(.preview) .ambient-opera {
    left: 42%;
    top: 20%;
    width: 27%;
    height: 27%;
    animation: v36-opera-flame 2.9s steps(4, end) infinite;
  }

  .shop .customer.guest-silver:not(.preview) .ambient-silver {
    left: 36%;
    top: 18%;
    width: 26%;
    height: 26%;
    animation: v36-silver-star 6.2s ease-in-out infinite;
  }

  .shop .customer.guest-guardian:not(.preview) .ambient-guardian {
    left: 38%;
    top: 48%;
    width: 20%;
    height: 20%;
    animation: v36-guardian-orb 3.6s ease-in-out infinite;
  }
}

@keyframes v36-lotus-glow {
  0%, 100% { opacity: .15; transform: translateY(0); }
  50% { opacity: .32; transform: translateY(-5px); }
}

@keyframes v36-ink-ripple {
  0% { opacity: .13; transform: rotate(0deg); }
  45% { opacity: .25; }
  100% { opacity: .13; transform: rotate(360deg); }
}

@keyframes v36-jade-orbit {
  0%, 100% { opacity: .13; transform: translate(-4px, 2px) rotate(-5deg); }
  50% { opacity: .28; transform: translate(5px, -3px) rotate(8deg); }
}

@keyframes v36-opera-flame {
  0%, 100% { opacity: .16; transform: translateY(1px) rotate(-2deg); }
  50% { opacity: .31; transform: translateY(-4px) rotate(3deg); }
}

@keyframes v36-silver-star {
  0%, 62%, 100% { opacity: .12; transform: rotate(-4deg); }
  74% { opacity: .34; transform: rotate(4deg); }
}

@keyframes v36-guardian-orb {
  0%, 100% { opacity: .15; transform: translateY(2px); }
  36% { opacity: .30; transform: translateY(-3px); }
  54% { opacity: .20; transform: translateY(0); }
}

@media (max-width: 720px), (max-height: 499px) {
  .shop .customer .character-ambient {
    left: 39%;
    top: 25%;
    width: 22%;
    height: 22%;
    opacity: .12;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .character-ambient {
    animation: none !important;
    opacity: .14;
    transform: none !important;
  }
}