/* ===== PROMPT sparkle icon ===== */

.pv-sparkle-box {
  width: 36px; height: 36px; border-radius: 12px;
  position: relative;
  border: 1px solid rgba(124, 92, 240, 0.18);
  box-shadow: 0 2px 8px rgba(124, 92, 240, 0.18);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); box-sizing: border-box; flex-shrink: 0;
}
.pv-sparkle-svg { position: relative; z-index: 1; width: 24px; height: 24px; display: block; overflow: visible; }

/* Galaxy background: soft purple / lavender gradient, slow drifting nebula, twinkling dots */
.pv-galaxy {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 0;
  background:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, .80) 0, rgba(255, 255, 255, 0) 42%),
    radial-gradient(circle at 80% 82%, rgba(176, 140, 255, .50) 0, rgba(176, 140, 255, 0) 58%),
    radial-gradient(circle at 82% 16%, rgba(255, 186, 240, .38) 0, rgba(255, 186, 240, 0) 52%),
    linear-gradient(145deg, #f0eaff 0%, #e0d4ff 55%, #cfc0ff 100%);
}
.pv-galaxy::before {
  content: ""; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, rgba(167, 139, 250, 0) 0deg, rgba(167, 139, 250, .30) 70deg, rgba(244, 164, 255, 0) 150deg, rgba(129, 140, 248, .26) 240deg, rgba(167, 139, 250, 0) 330deg);
  filter: blur(6px);
  animation: pvNebula 14s linear infinite;
}
.pv-galaxy i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 3px 1px rgba(255, 255, 255, .9), 0 0 5px 1px rgba(150, 110, 255, .55);
  opacity: .25; animation: pvTwinkle 3.2s ease-in-out infinite;
}
.pv-galaxy i:nth-child(1) { left: 16%; top: 62%; animation-delay: 0s; }
.pv-galaxy i:nth-child(2) { left: 74%; top: 60%; width: 1.5px; height: 1.5px; animation-delay: .8s; }
.pv-galaxy i:nth-child(3) { left: 58%; top: 84%; animation-delay: 1.6s; }
.pv-galaxy i:nth-child(4) { left: 30%; top: 12%; width: 1.5px; height: 1.5px; animation-delay: 2.2s; }
.pv-galaxy i:nth-child(5) { left: 88%; top: 38%; width: 1.5px; height: 1.5px; animation-delay: 1.2s; }
@keyframes pvNebula  { to { transform: rotate(360deg); } }
@keyframes pvTwinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }
html.dark .pv-sparkle-box { border-color: rgba(167, 139, 250, .35); box-shadow: 0 2px 10px rgba(124, 92, 240, .35); }
html.dark .pv-galaxy {
  background:
    radial-gradient(circle at 26% 22%, rgba(196, 181, 253, .45) 0, rgba(196, 181, 253, 0) 45%),
    radial-gradient(circle at 80% 82%, rgba(139, 92, 246, .55) 0, rgba(139, 92, 246, 0) 60%),
    radial-gradient(circle at 82% 16%, rgba(236, 120, 220, .32) 0, rgba(236, 120, 220, 0) 52%),
    linear-gradient(145deg, #3b2f7a 0%, #2a2160 55%, #1f1850 100%);
}

.pv-sparkle-svg path {
  fill: url(#pvGrad); stroke: url(#pvGrad); filter: url(#pvPuff);
  stroke-linecap: round; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: center;
  animation-duration: 1.6s; animation-iteration-count: infinite; animation-timing-function: linear;
}
.star-big { stroke-width: 2.3; animation-name: bigStar; }
.star-tr  { stroke-width: 1.5; animation-name: starTR; }
.star-tl  { stroke-width: 1.5; animation-name: starTL; transform: scale(0); opacity: 0; }
.star-br  { stroke-width: 1.5; animation-name: starBR; transform: scale(0); opacity: 0; }

/* Big star: rests, tilts back, spins CCW while shrinking to ~0.5, then pops back with a small overshoot */
@keyframes bigStar {
  0%, 28.1% { transform: rotate(0deg)    scale(1); }
  31.3%     { transform: rotate(-20deg)  scale(0.95); }
  37.5%     { transform: rotate(-35deg)  scale(0.85); }
  43.8%     { transform: rotate(-45deg)  scale(0.72); }
  50%       { transform: rotate(-90deg)  scale(0.58); }
  56.3%     { transform: rotate(-135deg) scale(0.5); }
  62.5%     { transform: rotate(-180deg) scale(0.5); }
  68.8%     { transform: rotate(-225deg) scale(0.5); }
  75%       { transform: rotate(-270deg) scale(0.52); }
  81.3%     { transform: rotate(-330deg) scale(0.85); }
  84.4%     { transform: rotate(-352deg) scale(1.1); }
  87.5%     { transform: rotate(-372deg) scale(1.12); }
  90.6%     { transform: rotate(-366deg) scale(1.08); }
  93.8%     { transform: rotate(-361deg) scale(1.02); }
  96.9%, 100% { transform: rotate(-360deg) scale(1); }
}
/* Top-right star (resting): shrinks to a dot, vanishes, returns with an overshoot */
@keyframes starTR {
  0%, 28.1% { transform: rotate(0deg)   scale(1);    opacity: 1; }
  31.3%     { transform: rotate(-10deg) scale(0.85); opacity: 1; }
  34.4%     { transform: rotate(-20deg) scale(0.6);  opacity: 1; }
  37.5%     { transform: rotate(-30deg) scale(0.35); opacity: 1; }
  40.6%     { transform: rotate(-40deg) scale(0.15); opacity: 0.9; }
  43.8%     { transform: rotate(-45deg) scale(0.1);  opacity: 0.9; }
  46.9%, 75% { transform: rotate(-45deg) scale(0);   opacity: 0; }
  78.1%     { transform: rotate(60deg)  scale(0.1);  opacity: 0.9; }
  81.3%     { transform: rotate(45deg)  scale(0.35); opacity: 1; }
  84.4%     { transform: rotate(30deg)  scale(0.8);  opacity: 1; }
  87.5%     { transform: rotate(15deg)  scale(1.15); opacity: 1; }
  90.6%     { transform: rotate(5deg)   scale(1.25); opacity: 1; }
  93.8%     { transform: rotate(0deg)   scale(1.1);  opacity: 1; }
  96.9%, 100% { transform: rotate(0deg) scale(1);    opacity: 1; }
}
/* Top-left star: pops in while the big star is spinning small, then fades to a dot */
@keyframes starTL {
  0%, 37.5% { transform: rotate(30deg) scale(0);    opacity: 0; }
  40.6%, 43.8% { transform: rotate(30deg) scale(0.15); opacity: 0.9; }
  46.9%     { transform: rotate(35deg) scale(0.5);  opacity: 1; }
  56.3%     { transform: rotate(40deg) scale(0.85); opacity: 1; }
  59.4%, 62.5% { transform: rotate(45deg) scale(1); opacity: 1; }
  65.6%     { transform: rotate(55deg) scale(0.6);  opacity: 1; }
  68.8%     { transform: rotate(65deg) scale(0.3);  opacity: 1; }
  71.9%     { transform: rotate(75deg) scale(0.15); opacity: 0.9; }
  75%       { transform: rotate(75deg) scale(0.1);  opacity: 0.9; }
  78.1%     { transform: rotate(75deg) scale(0.08); opacity: 0.8; }
  81.3%, 100% { transform: rotate(75deg) scale(0);  opacity: 0; }
}
/* Bottom-right star: grows after the top-left one, then shrinks to a dot */
@keyframes starBR {
  0%, 56.3% { transform: rotate(0deg)  scale(0);    opacity: 0; }
  59.4%, 62.5% { transform: rotate(0deg) scale(0.12); opacity: 0.9; }
  65.6%     { transform: rotate(20deg) scale(0.85); opacity: 1; }
  68.8%     { transform: rotate(25deg) scale(0.9);  opacity: 1; }
  71.9%     { transform: rotate(30deg) scale(1);    opacity: 1; }
  75%       { transform: rotate(40deg) scale(0.75); opacity: 1; }
  78.1%     { transform: rotate(50deg) scale(0.4);  opacity: 1; }
  81.3%     { transform: rotate(60deg) scale(0.12); opacity: 0.9; }
  84.4%, 100% { transform: rotate(60deg) scale(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-sparkle-svg path { animation: none; }
  .star-tl, .star-br { opacity: 0; }
  .pv-galaxy::before, .pv-galaxy i { animation: none; }
  .pv-galaxy i { opacity: .8; }
}
/* Admin switch: add class "is-static" to .pv-sparkle-box to turn the animation OFF */
.pv-sparkle-box.is-static .pv-sparkle-svg path { animation: none; }
.pv-sparkle-box.is-static .pv-galaxy::before, .pv-sparkle-box.is-static .pv-galaxy i { animation: none; }
.pv-sparkle-box.is-static .pv-galaxy i { opacity: .8; }
