/* The approved gold treatment decorates the frame, never the original artwork. */
@property --mutation-gold-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

.runtime-skill-art.is-mutated {
  --mutation-gold: conic-gradient(from var(--mutation-gold-angle, 0deg), #fbe6a1, #d99a32, #fff2bc, #b67827, #f7d681, #fff9db, #fbe6a1);
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: linear-gradient(#28203e, #28203e) padding-box, var(--mutation-gold) border-box;
  border: 3px solid transparent;
  box-shadow: 0 0 12px #ffd3789e, 0 0 22px #dba64d46;
  animation: mutation-gold-flow 5.6s linear infinite;
}

/* Atlas coordinates and the foreground bitmap remain exactly as before. */
.runtime-skill-art.skill-art.is-mutated {
  background-image: url('../assets/skills/skill-atlas.png'), linear-gradient(#28203e, #28203e), var(--mutation-gold);
  background-size: 400% 300%, 100% 100%, 100% 100%;
  background-position: calc(var(--skill-x)*100%/3) calc(var(--skill-y)*100%/2), center, center;
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
  background-repeat: no-repeat;
}

.runtime-skill-art.is-mutated > img {
  position: relative;
  z-index: 1;
}

.runtime-skill-art.is-mutated::before { content: none; }
.runtime-skill-art.is-mutated::after {
  content: '✦';
  position: absolute;
  z-index: 5;
  right: -6px;
  top: -7px;
  color: #fff2b1;
  font-size: 12px;
  line-height: 1;
  text-shadow: 0 0 4px #ffec90, 0 0 9px #d9a34d;
  pointer-events: none;
  animation: mutation-gold-star 2.6s ease-in-out infinite alternate;
}

.mutation-decoration {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
}
.mutation-decoration * { pointer-events: none; }
.mutation-aura {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 11px 3px #e6b65d6b;
  opacity: .65;
  animation: mutation-gold-breathe 3.6s ease-in-out infinite alternate;
}
.mutation-trail { position: absolute; inset: -3px; border-radius: inherit; }
.mutation-star {
  position: absolute;
  left: 0;
  top: 0;
  color: #fff3ca;
  font-size: 11px;
  line-height: 1;
  text-shadow: 0 0 4px #fff7b4, 0 0 8px #e8c776;
  transform: translate(-50%, -50%);
  animation: mutation-gold-patrol 5.2s linear infinite;
}
.mutation-star-second { color: #e5fff6; animation-delay: -2.6s; }
.mutation-mote {
  position: absolute;
  left: var(--mutation-x);
  top: var(--mutation-y);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff6d8;
  box-shadow: 0 0 4px #f3d99b, 0 0 7px #d6afff80;
  opacity: .65;
  animation: mutation-gold-motes 3.2s ease-in-out infinite;
  animation-delay: var(--mutation-delay);
}
.mutation-mote:nth-child(even) { box-shadow: 0 0 4px #fff2b7, 0 0 7px #acfff480; }

.skill-dialog-art.is-mutated .mutation-star { font-size: 16px; }
.skill-dialog-art.is-mutated::after { font-size: 18px; right: -8px; top: -10px; }
.pc-skill-art:has(> .runtime-skill-art.is-mutated) { border-color: transparent; }
.pc-skill-grid:has(.is-mutated) { padding-top: 12px; }

/* Battle ribbons retain their existing trigger animation and 32px footprint. */
.classic-battle .cb-ribbon .runtime-skill-art.is-mutated {
  border-color: transparent;
  overflow: visible;
}
.cb-ribbon .runtime-skill-art.is-mutated::after { font-size: 9px; right: -5px; top: -5px; }
.cb-ribbon .mutation-star { font-size: 8px; }
.hatch-skill .runtime-skill-art.is-mutated::after { font-size: 10px; }

@keyframes mutation-gold-flow { to { --mutation-gold-angle: 360deg; } }
@keyframes mutation-gold-breathe {
  from { transform: scale(.96); opacity: .45; }
  to { transform: scale(1.07); opacity: .8; }
}
@keyframes mutation-gold-star {
  from { transform: scale(.85) rotate(-6deg); opacity: .7; }
  to { transform: scale(1.08) rotate(6deg); opacity: 1; }
}
@keyframes mutation-gold-patrol {
  0%, 100% { left: 0; top: 0; }
  25% { left: 100%; top: 0; }
  50% { left: 100%; top: 100%; }
  75% { left: 0; top: 100%; }
}
@keyframes mutation-gold-motes {
  0%, 100% { transform: translate(0, 2px) scale(.45); opacity: .2; }
  50% { transform: translate(var(--mutation-drift), -3px) scale(1); opacity: .9; }
}

.reduce-motion .runtime-skill-art.is-mutated,
.reduce-motion .runtime-skill-art.is-mutated::after,
.reduce-motion .mutation-decoration * { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .runtime-skill-art.is-mutated,
  .runtime-skill-art.is-mutated::after,
  .mutation-decoration * { animation: none; }
}