/* One brief meteor every ten seconds; the persistent backdrop owns the clock. */
.grain-backdrop__meteors {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}

.grain-backdrop__meteor {
  --flight-x: 350px;
  --flight-y: 202px;
  --flight-angle: 30deg;
  position: absolute;
  left: 12%;
  top: 14%;
  width: 150px;
  height: 1px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, var(--pink) 80%, var(--text));
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pink) 32%, transparent) 80%, color-mix(in srgb, var(--text) 64%, transparent));
  opacity: 0;
  pointer-events: none;
  transform-origin: 100% 50%;
  animation: tarot-meteor 20s linear 2s infinite;
}

.grain-backdrop__meteor::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text);
}

.grain-backdrop__meteor--alternate {
  --flight-x: 430px;
  --flight-y: 174px;
  --flight-angle: 22deg;
  left: 58%;
  top: 28%;
  animation-delay: 12s;
}

@keyframes tarot-meteor {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--flight-angle)); }
  .6% { opacity: .52; }
  4% { opacity: .4; }
  5%, 100% { opacity: 0; transform: translate3d(var(--flight-x), var(--flight-y), 0) rotate(var(--flight-angle)); }
}

html[data-page-visibility="hidden"] .grain-backdrop__meteor {
  animation-play-state: paused;
}

@media (max-width: 760px) {
  .grain-backdrop__meteor { --flight-x: 310px; --flight-y: 179px; left: -110px; top: 13%; }
  .grain-backdrop__meteor--alternate { --flight-x: 270px; --flight-y: 109px; left: -84px; top: 29%; }
}

@media (prefers-reduced-motion: reduce) {
  .grain-backdrop__meteors { display: none; }
  .grain-backdrop__meteor { animation: none; }
}