@import '../../../styles/_main';

$outline-regular: .35rem solid $c_blue-ribbon;
$outline-hovered: .26rem solid $c_blue-ribbon;

.AtlasDemo__video {
  position: relative;
  width: 88rem;
  height: 52.8rem;
  margin: 2rem 0;
  cursor: pointer;
  transform: scale(.625);
  box-sizing: border-box;
  transition: all 2s;

  &:hover,
  &--focused {
    width: 76rem;
    height: 52.8rem;
    transform: scale(1);
  }

  .absolute {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  &__logo-wrapper {
    @extend .absolute;

    z-index: 3;
    background-color: black;
    outline: $outline-hovered;
    outline-offset: -.1rem;
    opacity: 0;
    animation: fadeinandout 3s;
    animation-fill-mode: forwards;
  }

  &__logo {
    @extend .absolute;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    animation: fadeinandleavetop 2.5s;
    animation-fill-mode: forwards;

    p {
      margin-bottom: 1rem;
      font-size: 1.6rem;
      color: $c_light-gray;
      text-align: center;
    }

    svg {
      height: 6.4rem;
      color: $c_blue-ribbon;
    }
  }

  &__overlay {
    @extend .absolute;

    z-index: 2;
    background-color: black;
    outline: $outline-hovered;
    outline-offset: -.1rem;
    opacity: .7;
    animation: fadeintohalf 1s;
  }

  &__thumbnail {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100% 115%;
    outline: $outline-regular;
    transition: all 2s;
  }

  &__thumbnail--hovered {
    background-size: 100% 100%;
    outline: $outline-hovered;
    outline-offset: -.1rem;
  }

  &__thumbnail--disappeared {
    opacity: 0;
  }

  &__loader {
    @extend .absolute;

    z-index: 2;
    width: 20%;
    height: 20%;
    margin: auto;
    animation: fadein 2s;

    circle {
      stroke: #8583bf;
      stroke-opacity: 1;
    }
  }

  &__hide {
    @extend .absolute;

    background-color: black;
  }

  & > video {
    width: 100%;
    height: 100%;
    background-color: black;
    outline: $outline-hovered;
    outline-offset: -.1rem;
    box-sizing: border-box;
  }

  &__playbutton {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 3rem;
    left: 0;
    z-index: 2;
    height: 9rem;
    margin: auto;
    opacity: 0;
    transition: all 1.5s;
  }

  &__playbutton--hovered {
    bottom: 0;
    opacity: 1;
  }

  &__playbutton--playing {
    bottom: 0;
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
  }

  &__atlasbutton {
    @extend .absolute;

    z-index: 2;
    width: 12rem;
    height: 4rem;
    margin: auto;
    opacity: 0;
    animation: slidefrombottom 1.5s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
  }

  @media (max-width: 1250px) {
    width: 80rem;
    height: 48rem;

    &:hover,
    &--focused {
      width: 69.1rem;
      height: 48rem;
    }
  }

  @media #{$screen-max-lg} {
    width: 64.84rem;
    height: 38.8rem;

    &:hover,
    &--focused {
      width: 56rem;
      height: 38.8rem;
    }

    &__playbutton {
      height: 7rem;
    }
  }

  @media #{$screen-max-md} {
    width: 37.44rem;
    height: 26rem;
    margin: 3rem 0;
    transform: scale(1);

    &:hover,
    &--focused {
      width: 37.44rem;
      height: 26rem;
    }

    &__atlasbutton {
      width: 10rem;
      height: 3rem;
      padding: 0;
      font-size: 1.2rem;
    }

    &__overlay,
    & > video,
    &__thumbnail--hovered {
      outline: .15rem solid $c_blue-ribbon;
    }

    &__thumbnail {
      background-size: 100% 100%;
      outline: .15rem solid $c_blue-ribbon;
      outline-offset: -.1rem;
    }

    &__logo {
      p {
        margin-bottom: 1rem;
        font-size: 1.2rem;
        color: $c_light-gray;
        text-align: center;
      }

      svg {
        height: 4rem;
        color: $c_blue-ribbon;
      }
    }
  }

  @media #{$screen-max-sm} {
    width: 30.24rem;
    height: 21rem;

    &:hover,
    &--focused {
      width: 30.24rem;
      height: 21rem;
    }

    &__logo {
      p {
        font-size: 1rem;
      }

      svg {
        height: 3rem;
      }
    }

    &__playbutton {
      height: 5rem;
    }
  }

  @media (max-width: 550px) {
    width: 21.6rem;
    height: 15rem;

    &:hover,
    &--focused {
      width: 21.6rem;
      height: 15rem;
    }

    &__playbutton {
      height: 4rem;
    }
  }

  @media (max-width: 380px) {
    width: 17.28rem;
    height: 12rem;

    &:hover,
    &--focused {
      width: 17.28rem;
      height: 12rem;
    }

    &__logo {
      p {
        font-size: .7rem;
      }

      svg {
        height: 2rem;
      }
    }
  }
}

@keyframes slidefrombottom {
  from {
    top: 35%;
    opacity: 0;
  }

  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes fadeintohalf {
  from {
    opacity: 0;
  }

  to {
    opacity: .7;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeinandleavetop {
  0% {
    opacity: 0;
  }

  75% {
    bottom: 0;
    opacity: 1;
  }

  100% {
    bottom: 8rem;
    opacity: 0;
  }
}

@keyframes fadeinandout {
  0% {
    opacity: 0;
  }

  25%,
  80% {
    opacity: 1;
  }

  99% {
    z-index: 3;
    opacity: 0;
  }

  100% {
    z-index: 0;
  }
}
