/* The same artwork geometry is used by the scenery and its character particles. */
.hero::after {
  background-image: url('../img/hero-v30.1.png');
  background-image: image-set(url('../img/hero-v30.1.webp') type('image/webp'), url('../img/hero-v30.1.png') type('image/png'));
}
.character-effects { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; contain: layout paint; }
.character-spark { position: absolute; pointer-events: none; opacity: 0; animation-timing-function: linear; animation-iteration-count: infinite; animation-play-state: paused; }
.character-effects.is-playing .character-spark { animation-play-state: running; }
.character-spark.warrior { border-radius: 65% 35%; background: #ff8c36; box-shadow: 0 0 8px #e65322; animation-name: warrior-ember; }
.character-spark.elf { border-radius: 50%; background: #eedcdb; box-shadow: 0 0 7px #b72c47; animation-name: elf-wisp; }
.character-spark.arrow { border-radius: 50%; background: #ffc6c7; box-shadow: 0 0 8px #ef2341; animation-name: arrow-spark; }
.arrow-energy { position: absolute; pointer-events: none; opacity: 0; transform: rotate(-11.3deg); transform-origin: left center; background: radial-gradient(ellipse, rgb(255 166 175 / .8), rgb(235 28 56 / .45) 28%, transparent 72%); mix-blend-mode: screen; animation: arrow-charge 4s ease-in-out infinite paused; }
.character-effects.is-playing .arrow-energy { animation-play-state: running; }
@keyframes arrow-charge {
  0%, 100% { opacity: .22; }
  50% { opacity: .72; }
}
@keyframes arrow-spark {
  0% { opacity: 0; transform: translate3d(14px, 2px, 0) scale(.9); }
  30% { opacity: .75; }
  100% { opacity: 0; transform: translate3d(-60px, 9px, 0) scale(.6); }
}
@keyframes warrior-ember {
  0% { opacity: 0; transform: translate3d(0, 20px, 0) rotate(-12deg); }
  20% { opacity: .8; }
  70% { opacity: .35; }
  100% { opacity: 0; transform: translate3d(18px, -95px, 0) rotate(25deg); }
}
@keyframes elf-wisp {
  0% { opacity: 0; transform: translate3d(18px, 8px, 0) scale(.9); }
  25% { opacity: .6; }
  75% { opacity: .25; }
  100% { opacity: 0; transform: translate3d(-55px, -28px, 0) scale(1.1); }
}
.drop-search-field .drop-input { font-size: .875rem !important; }
.drop-search-field .drop-input::placeholder { font-size: inherit; }
@media (prefers-reduced-motion: reduce) { .character-effects { display: none; } }