@import '@utils/variable';

.end-background {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  padding: 5rem 15rem;
  backdrop-filter: blur(4px);
  background-color: #eeea;
  text-align: center;
}

.end-title {
  margin-bottom: 2em;
  font-size: xxx-large;
}

.end-grid {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  > div {
    display: flex;
    justify-content: space-around;
  }
}

.end-grid-item {
  flex-basis: 0;
  margin-bottom: 0.5em;
}
.end-grid-item:not(.end-grid-winner) {
  flex-grow: 1;
}
.end-grid-item.end-grid-winner {
  flex-grow: 1.5;
  > div {
    margin-top: 25%;

    animation: emphasizeDuck 1s cubic-bezier(0.19, 1, 0.22, 1);
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    filter: drop-shadow(0 0 10px $main-color);
    transform: scale(1.5);
    transform-origin: bottom;
  }
}

.end-ducks {
  align-items: flex-end;
}

.end-nicknames {
  align-items: center;
  font-size: x-large;
}

.end-scores {
  align-items: center;
  font-size: xxx-large;
}

.end-actions-wrapper {
  display: flex;
  align-self: flex-end;
  > * {
    margin-left: 1em;
  }
}

@keyframes emphasizeDuck {
  20% {
    transform: rotateZ(0) scale(1.5);
  }
  40% {
    transform: rotateZ(-8deg) scale(2) translate(0, -20%);
  }
  60% {
    transform: rotateZ(0) scale(1.5);
  }
  80% {
    transform: rotateZ(8deg) scale(2) translate(0, -20%);
  }
  100% {
    transform: rotateZ(0) scale(1.5);
  }
}
