/* Twinkle, the one sparkle (rt-twinkle; window.rtTwinkle in assets/js/twinkle.js).
   Add the class to anything a person or a PTA earned and small four-point stars
   (i.rt-twinkle-glint, sprinkled by the script) twinkle around its rim, each on
   its own beat. rt-twinkle--soft is the quieter version (fewer, smaller, dimmer,
   slower): earned, but not yet official. The star's color is --rt-twinkle-color
   and its halo --rt-twinkle-glow, so a Railcar themes them in its own CSS; the
   defaults read on light and dark grounds alike. Honors prefers-reduced-motion:
   the glints hold still at half strength. First rider: the Texas PTA award
   emblems on the membership tracker (FURIOPS-315, 10-30); the confetti badge,
   the Boo badge and the fundraiser glints adopt it when next touched. */
.rt-twinkle { position: relative; }
.rt-twinkle-glint { position: absolute; z-index: 3; width: 10px; height: 10px; margin: -5px 0 0 -5px; pointer-events: none;
	background: var(--rt-twinkle-color, #fff);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	filter: drop-shadow(0 0 3px var(--rt-twinkle-glow, rgba(255, 255, 255, .9))) drop-shadow(0 0 1px rgba(0, 0, 0, .3));
	opacity: 0; transform: scale(.3); animation: rt-twinkle-twinkle 2.2s ease-in-out infinite; }
.rt-twinkle--soft .rt-twinkle-glint { animation-name: rt-twinkle-twinkle-soft; }
@keyframes rt-twinkle-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1.25) rotate(45deg); } }
@keyframes rt-twinkle-twinkle-soft { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 50% { opacity: .55; transform: scale(.9) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) {
	.rt-twinkle-glint { animation: none; opacity: .5; transform: none; }
	.rt-twinkle--soft .rt-twinkle-glint { opacity: .3; }
}