/* Word cast. the still shape of a person's words in tonight's light.
   one seeded static SVG, a single opacity fade, nothing that loops. */

.word-cast {
  border-radius: 12px;
  overflow: hidden;
  background: var(--evening, #12160F);
  /* a soft vignette in the ritual, not a framed product: no hard border or drop shadow */
  border: 0;
  margin: 4px auto 0;
  max-width: 300px;
  -webkit-mask-image: radial-gradient(120% 130% at 50% 40%, #000 72%, transparent 100%);
  mask-image: radial-gradient(120% 130% at 50% 40%, #000 72%, transparent 100%);
}

.word-cast .wc-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 100 / 62;
  line-height: 0;
  background: var(--evening, #12160F);
}
@supports not (aspect-ratio: 1 / 1) {
  .word-cast .wc-frame { height: 0; padding-bottom: 62%; }
}

.word-cast .wc-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  animation: wc-fade 1.2s ease-out both;
}

@keyframes wc-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.word-cast.wc-reduced .wc-scene { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .word-cast .wc-scene { animation: none; opacity: 1; }
}