.text-show-layer {
  position: fixed;
  inset: 0;
  z-index: 26;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint;
}
.text-show-item {
  position: absolute;
  display: grid;
  justify-items: center;
  width: max-content;
  max-width: min(86vw, 680px);
  color: #fffbdc;
  font: 1000 var(--text-show-size, 36px)/.92 Impact, "Arial Black", sans-serif;
  letter-spacing: -.025em;
  text-align: center;
  text-shadow: 0 3px 0 #74266e, 0 0 15px #ff6cc8, 0 0 28px #fff1a7;
  opacity: 0;
  filter: blur(0);
  transform-origin: 50% 50%;
  will-change: transform, opacity, clip-path, filter;
}
.text-show-item strong { display: block; max-width: inherit; }
.text-show-item small { display: block; margin-top: .18em; font: 900 .3em/1 sans-serif; letter-spacing: .05em; }
.text-show-item[data-kind="record"] { padding: .18em .48em .22em; border: 2px solid #fff6cf; border-radius: 999px; background: linear-gradient(110deg, #ef3c96, #7635da 52%, #ffb52d); box-shadow: 0 4px 0 #70245e, 0 0 22px #ff9ad8; }
.text-show-item.is-static { opacity: 1; animation: none !important; transform: none; filter: none; }
.text-show-item.is-entering[data-motion="scroll"] { animation: text-show-scroll var(--text-show-duration) linear var(--text-show-delay) both; }
.text-show-item.is-entering[data-motion="swing"] { animation: text-show-swing var(--text-show-duration) linear var(--text-show-delay) both; }
.text-show-item.is-entering[data-motion="rolling"] { animation: text-show-rolling var(--text-show-duration) linear var(--text-show-delay) both; }
.text-show-item.is-entering[data-motion="zoomout"] { animation: text-show-zoomout var(--text-show-duration) linear var(--text-show-delay) both; }
@keyframes text-show-static { from { opacity: 0; } to { opacity: 1; } }
@keyframes text-show-scroll { 0% { opacity: 0; transform: translate(0, 0) rotate(var(--text-show-angle)) scale(.82); } 16% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } 45% { opacity: 1; transform: translate(calc(var(--text-show-exit-x) * .06), calc(var(--text-show-exit-y) * .04)) rotate(1deg) scale(1.02); } 78% { opacity: 1; transform: translate(calc(var(--text-show-exit-x) * .32), calc(var(--text-show-exit-y) * .22)) rotate(2deg) scale(1.03); } 100% { opacity: 0; transform: translate(var(--text-show-exit-x), var(--text-show-exit-y)) rotate(calc(var(--text-show-angle) * -1)) scale(.96); } }
@keyframes text-show-swing { 0% { opacity: 0; transform: translate(0, 0) rotate(var(--text-show-angle)) scale(.86); } 16% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } 42% { opacity: 1; transform: translate(calc(var(--text-show-exit-x) * .04), calc(var(--text-show-exit-y) * .04)) rotate(calc(var(--text-show-angle) * -1)) scale(1.06); } 78% { opacity: 1; transform: translate(calc(var(--text-show-exit-x) * .3), calc(var(--text-show-exit-y) * .25)) rotate(var(--text-show-angle)) scale(1); } 100% { opacity: 0; transform: translate(var(--text-show-exit-x), var(--text-show-exit-y)) rotate(calc(var(--text-show-angle) * -1)) scale(.9); } }
@keyframes text-show-rolling { 0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.86); } 16% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } 46% { opacity: 1; transform: translate(calc(var(--text-show-exit-x) * .08), calc(var(--text-show-exit-y) * .08)) rotate(140deg) scale(1.02); } 80% { opacity: 1; transform: translate(calc(var(--text-show-exit-x) * .34), calc(var(--text-show-exit-y) * .34)) rotate(300deg) scale(.98); } 100% { opacity: 0; transform: translate(var(--text-show-exit-x), var(--text-show-exit-y)) rotate(540deg) scale(.84); } }
@keyframes text-show-zoomout { 0% { opacity: 0; transform: translate(0, 0) rotate(var(--text-show-angle)) scale(1.18); } 16% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } 50% { opacity: 1; transform: translate(calc(var(--text-show-exit-x) * .06), calc(var(--text-show-exit-y) * .06)) rotate(calc(var(--text-show-angle) * -.3)) scale(.86); } 82% { opacity: 1; transform: translate(calc(var(--text-show-exit-x) * .26), calc(var(--text-show-exit-y) * .26)) rotate(calc(var(--text-show-angle) * -.6)) scale(.56); } 100% { opacity: 0; transform: translate(var(--text-show-exit-x), var(--text-show-exit-y)) rotate(calc(var(--text-show-angle) * -1)) scale(.12); } }
@media (prefers-reduced-motion: reduce) { .text-show-item.is-entering { animation: none !important; opacity: 1; transform: none; filter: none; } }
.manual-reduced-motion .text-show-item.is-entering { animation: none !important; opacity: 1; transform: none; filter: none; }
