/* The Crest logo's Sparkle effect: small gold stars twinkle on the logo tile's edge and on its check mark.
   crest-fx.js places each star; this file draws them. The logo itself never moves, tilts, or resizes. Visitors
   who ask for less motion see three still stars. Colors come from the page's tokens --gold and --glow-gold. */
.emblem {
  position: relative;
  aspect-ratio: 1;
  isolation: isolate;
}
.emblem img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.spark {
  position: absolute;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: twinkle 1.6s ease-in-out forwards;
}
.spark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: #fff3c4;
  filter: drop-shadow(0 0 2px var(--gold)) drop-shadow(0 0 6px var(--glow-gold));
}
.spark.still {
  animation: none;
  transform: translate(-50%, -50%) scale(0.85);
}
@keyframes twinkle {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-45deg);
    opacity: 0;
  }
  45% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0) rotate(45deg);
    opacity: 0;
  }
}