/* Decorative stars are real animation layers, separate from the painted artwork. */
.haven-glints {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  border-radius: inherit;
}
.haven-glint {
  --spark-duration: 4.2s;
  position: absolute;
  left: var(--spark-x, 50%);
  top: var(--spark-y, 50%);
  width: var(--spark-size, 24px);
  height: var(--spark-size, 24px);
  color: rgb(var(--c-white));
  opacity: .4;
  transform: translate(-50%, -50%) scale(.74);
  filter: drop-shadow(0 0 3px rgb(var(--c-white))) drop-shadow(0 0 9px rgb(var(--c-violet-300-6))) drop-shadow(0 0 15px rgb(var(--c-violet-400-7)));
  animation: haven-star-shimmer var(--spark-duration) ease-in-out var(--spark-delay, 0s) infinite;
  pointer-events: none;
}
.haven-glint:nth-child(2n) { --spark-duration: 3.8s; }
.haven-glint:nth-child(3n) { --spark-duration: 4.8s; }
.haven-glint::before, .haven-glint::after {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  clip-path: polygon(50% 0, 58% 40%, 100% 50%, 58% 60%, 50% 100%, 42% 60%, 0 50%, 42% 40%);
}
.haven-glint::after { inset: 20%; transform: rotate(45deg); opacity: .45; }
@keyframes haven-star-shimmer {
  0%, 100% { opacity: .25; transform: translate(-50%, -50%) scale(.6); }
  28% { opacity: .5; transform: translate(-50%, -50%) scale(.86); }
  51% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  73% { opacity: .48; transform: translate(-50%, -50%) scale(.8); }
}
.sparkle-toggle {
  position: relative;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  padding: .45rem .8rem;
  border: 1px solid rgb(var(--c-violet-400-5));
  border-radius: 999px;
  background: rgb(var(--c-ink) / 0.902);
  color: rgb(var(--c-violet-100));
  font: .8rem/1.3 var(--lh-sans);
  cursor: pointer;
}
.sparkle-toggle:hover { color: rgb(var(--c-violet-100-2)); background: rgb(var(--c-violet-700-3)); }
.sparkle-toggle:focus-visible { outline-color: rgb(var(--c-violet-200)); }
.sparkle-toggle[aria-pressed='false'] { background: rgb(var(--c-bg-2)); color: rgb(var(--c-surface-deep)); }
html[data-sparkles='off'] .moon-star,
html[data-sparkles='off'] .haven-glint,
html[data-sparkles='off'] .specimen-spark { animation: none !important; }
html[data-sparkles='off'] .moon-star { opacity: .65; transform: none; }
html[data-sparkles='off'] .specimen-spark { opacity: .65; }
html[data-sparkles='off'] .haven-glint { opacity: .55; transform: translate(-50%, -50%) scale(.74); }
@media (prefers-reduced-motion: reduce) {
  .moon-star, .haven-glint, .specimen-spark { animation: none !important; }
  .haven-glint { opacity: .55; transform: translate(-50%, -50%) scale(.74); }
  /* Only the explicit sparkle control can opt these decorative stars back in. */
  html[data-sparkles='on'] .moon-star { animation: moon-twinkle var(--spark-duration, 5.8s) ease-in-out infinite !important; }
  html[data-sparkles='on'] .haven-glint { animation: haven-star-shimmer var(--spark-duration) ease-in-out var(--spark-delay, 0s) infinite !important; }
  html[data-sparkles='on'] .specimen-spark { animation: moon-glint 6.6s ease-in-out infinite !important; }
  html[data-sparkles='on'] .moon-stars > .moon-star:nth-child(1) { animation-delay: -1.6s !important; }
  html[data-sparkles='on'] .moon-stars > .moon-star:nth-child(2) { animation-delay: -3.2s !important; }
  html[data-sparkles='on'] .moon-stars > .moon-star:nth-child(3) { animation-delay: -.7s !important; }
  html[data-sparkles='on'] .moon-stars > .moon-star:nth-child(4) { animation-delay: -4.1s !important; }
  html[data-sparkles='on'] .moon-stars > .moon-star:nth-child(5) { animation-delay: -2.3s !important; }
  html[data-sparkles='on'] .moon-stars > .moon-star:nth-child(6) { animation-delay: -5.2s !important; }
}
@media print { .haven-glints, .sparkle-toggle { display: none !important; } }