/* Warcry. The vignette is fixed to the viewport; the rings and glyphs follow the
   Knight and are positioned by the module. */
.exp-warcry-host { position: absolute; pointer-events: none; z-index: 7; }

.exp-warcry-ring {
  position: absolute; width: 280px; height: 140px;
  margin-left: -140px; margin-bottom: -40px;
  background: url('/assets/skills/knight/fx/roar-ring.webp') center/contain no-repeat;
  transform-origin: center center;
  will-change: transform, opacity;
}

.exp-warcry-glyph {
  position: absolute;
  margin-left: -9px;
  font-size: 20px; font-weight: 900; line-height: 1;
  color: #ffb454;
  text-shadow: 0 0 8px rgba(255, 90, 40, .9);
  will-change: transform, opacity;
}

.exp-warcry-vignette {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 40;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255,0,0,0) 52%, rgba(190,20,10,1) 100%);
  transition: opacity 160ms linear;
}