/*
 RadioTrallaCity – Halloween Fledermäuse sichtbar
 Feste Bild-URL, dadurch unabhängig vom Ordner der CSS-Datei.
 Erste Fledermaus nach ca. 3 Sekunden, danach nur gelegentlich.
*/

.chat-body .messages{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate;
}

.chat-body .messages > *{
  position:relative;
  z-index:2;
}

.chat-body .messages::before,
.chat-body .messages::after{
  content:"";
  position:absolute;
  width:78px;
  height:42px;
  z-index:1;
  pointer-events:none;
  background:url("https://schnegge.de.cool/chatcss/helloween/bat-glow.png") center/contain no-repeat;
  opacity:0;
  will-change:left,top,opacity,transform;
  filter:
    drop-shadow(0 0 1px rgba(120,58,20,.55))
    drop-shadow(0 0 3px rgba(165,76,24,.45))
    drop-shadow(0 0 6px rgba(105,48,18,.28));
}

.chat-body .messages::before{
  animation:rtcBatVisibleA 900s linear infinite;
}

.chat-body .messages::after{
  width:58px;
  height:32px;
  animation:rtcBatVisibleB 900s linear infinite;
}

@keyframes rtcBatVisibleA{
  0%, .29%, .95%, 19.9%, 20.7%, 44.9%, 45.7%, 69.9%, 70.7%, 89.9%, 90.7%, 100%{
    opacity:0;
  }

  .30%{left:12%;top:18%;opacity:1;transform:rotate(-10deg) scale(1)}
  .48%{opacity:.18}
  .65%{opacity:1;transform:rotate(7deg) scale(1.08)}
  .88%{opacity:0}

  20.0%{left:74%;top:27%;opacity:1;transform:rotate(8deg)}
  20.25%{opacity:.18}
  20.45%{opacity:1;transform:rotate(-6deg) scale(1.08)}
  20.65%{opacity:0}

  45.0%{left:28%;top:67%;opacity:1;transform:rotate(-7deg)}
  45.25%{opacity:.18}
  45.45%{opacity:1;transform:rotate(6deg) scale(1.08)}
  45.65%{opacity:0}

  70.0%{left:80%;top:64%;opacity:1;transform:rotate(9deg)}
  70.25%{opacity:.18}
  70.45%{opacity:1;transform:rotate(-6deg) scale(1.08)}
  70.65%{opacity:0}

  90.0%{left:46%;top:36%;opacity:1;transform:rotate(-5deg)}
  90.25%{opacity:.18}
  90.45%{opacity:1;transform:rotate(7deg) scale(1.08)}
  90.65%{opacity:0}
}

@keyframes rtcBatVisibleB{
  0%, 11.9%, 12.7%, 34.9%, 35.7%, 58.9%, 59.7%, 81.9%, 82.7%, 100%{
    opacity:0;
  }

  12.0%{left:62%;top:13%;opacity:.95;transform:rotate(7deg)}
  12.25%{opacity:.15}
  12.45%{opacity:.95;transform:rotate(-7deg) scale(1.1)}
  12.65%{opacity:0}

  35.0%{left:16%;top:47%;opacity:.95;transform:rotate(-8deg)}
  35.25%{opacity:.15}
  35.45%{opacity:.95;transform:rotate(6deg) scale(1.1)}
  35.65%{opacity:0}

  59.0%{left:58%;top:74%;opacity:.95;transform:rotate(8deg)}
  59.25%{opacity:.15}
  59.45%{opacity:.95;transform:rotate(-5deg) scale(1.08)}
  59.65%{opacity:0}

  82.0%{left:83%;top:42%;opacity:.95;transform:rotate(-7deg)}
  82.25%{opacity:.15}
  82.45%{opacity:.95;transform:rotate(7deg) scale(1.08)}
  82.65%{opacity:0}
}

@media(max-width:760px){
  .chat-body .messages::before{width:60px;height:33px}
  .chat-body .messages::after{width:46px;height:26px}
}

@media(prefers-reduced-motion:reduce){
  .chat-body .messages::before,
  .chat-body .messages::after{
    display:none!important;
  }
}