/* public/app/css/signal.css
 * Synopsis: Module signal.
 * Objectif: Rôle de public/app/css/signal.css.
 */

.signal {
  display: flex;
  gap: .45rem;
  height: 8rem;
  opacity: .9;
  position: absolute;
  right: var(--edge);
  top: 5rem;
  transform: rotate(9deg);
}

.signal span {
  animation: pulse 1.8s ease-in-out infinite alternate;
  animation-play-state: paused;
  background: var(--signal);
  width: clamp(.7rem, 1.3vw, 1.4rem);
}

.signal.is-visible span {
  animation-play-state: running;
}

html.motion-paused .signal span {
  animation-play-state: paused;
}

.signal span:nth-child(1) {
  height: 35%;
}

.signal span:nth-child(2) {
  animation-delay: -.8s;
  height: 100%;
}

.signal span:nth-child(3) {
  animation-delay: -.3s;
  height: 62%;
}

.signal span:nth-child(4) {
  animation-delay: -1.2s;
  height: 18%;
}

@keyframes pulse {
  to {
    transform: scaleY(.35);
  }
}

@media (max-width: 640px) {
  .signal {
    height: 4rem;
    top: 2rem;
  }
}