/* Starlit text moments. Text remains present and readable without animation. */
.sdou-text-moment {
  --moment-accent: var(--studio-gold, var(--sdou-gold, #e8c58e));
  display: inline-block;
  position: relative;
  max-inline-size: 100%;
  color: var(--moment-accent);
  isolation: isolate;
}
.sdou-text-moment[data-moment="highlight"]::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0.04em;
  height: 0.13em;
  border-radius: 0.08em;
  background: currentColor;
  opacity: 0.22;
  transform-origin: left center;
}

/* Wait for the host to resolve saved motion preferences before starting. */
:is(html[data-sdou-a11y-motion="system"], html[data-moment-motion="system"])
  .sdou-text-moment {
  animation: sdou-word-arrive 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
:is(html[data-sdou-a11y-motion="system"], html[data-moment-motion="system"])
  .sdou-text-moment[data-moment="highlight"]::after {
  animation: sdou-gold-draw 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
:is(html[data-sdou-a11y-motion="system"], html[data-moment-motion="system"])
  .sdou-text-moment[data-moment="glow"] {
  animation: sdou-word-glow 1200ms ease-out both;
}
@keyframes sdou-word-arrive {
  from {
    transform: translateY(0.1em);
  }
  to {
    transform: none;
  }
}
@keyframes sdou-gold-draw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes sdou-word-glow {
  0% {
    text-shadow: 0 0 0 transparent;
  }
  45% {
    text-shadow: 0 0 0.16em currentColor;
  }
  100% {
    text-shadow: 0 0 0 transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sdou-text-moment,
  .sdou-text-moment::after {
    animation: none !important;
    transform: none !important;
    opacity: 1;
  }
  .sdou-text-moment[data-moment="highlight"]::after {
    opacity: 0.22;
  }
}
html[data-sdou-a11y-motion="reduce"] .sdou-text-moment,
html[data-sdou-a11y-motion="reduce"] .sdou-text-moment::after,
[data-sdou-a11y-motion="reduce"] .sdou-text-moment,
[data-sdou-a11y-motion="reduce"] .sdou-text-moment::after,
[data-moment-motion="reduce"] .sdou-text-moment,
[data-moment-motion="reduce"] .sdou-text-moment::after {
  animation: none !important;
  transform: none !important;
  opacity: 1;
}
html[data-sdou-a11y-motion="reduce"]
  .sdou-text-moment[data-moment="highlight"]::after,
[data-sdou-a11y-motion="reduce"] .sdou-text-moment[data-moment="highlight"]::after,
[data-moment-motion="reduce"]
  .sdou-text-moment[data-moment="highlight"]::after {
  opacity: 0.22;
}
@media (forced-colors: active) {
  .sdou-text-moment {
    color: CanvasText;
  }
  .sdou-text-moment[data-moment="highlight"]::after {
    background: Highlight;
    opacity: 1;
  }
}
@media print {
  .sdou-text-moment,
  .sdou-text-moment::after {
    animation: none !important;
    transform: none !important;
    opacity: 1;
  }
  .sdou-text-moment[data-moment="highlight"]::after {
    opacity: 0.22;
  }
}