$logo-width: 350px;
$avatar-width: 100px;
$icon-width: 50px;

.logo-container {
  position: relative;
  width: 100%;
  height: 70%;
  transition: opacity 500ms ease-in-out;
  background: #FFF;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: top center;

  &:before {
    content: '「 🍺 Cheers! 」';
    position: absolute;
    top: 50%;
    display: block;
    width: 100%;
    height: 100%;
    color: #FFF;
    font-size: 2em;
    text-align: center;
    opacity: 0;
  }

  &:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .55);
    opacity: 0;
  }
}

.logo-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.9);
  width: $logo-width;
  height: $logo-width;
  opacity: 1;

  &.switch {
    opacity: 0;
  }

  path {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: dash 6s linear forwards;
  }

  circle {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: dash 2s linear forwards;
  }

}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}


@media screen and (max-height: 500px) {
  .logo-svg {
    transform: translate(-50%, -50%) scale(.55);
  }
  .logo-container {
    height: 63%;
  }
}


