// Layout of project

// Container-devices
$container-xl: 1440px;
$container-l: 1268px;
$container-m: 960px;
$container-s: 620px;
$container-xs: 340px;
$gutter: 32px;

// Mixin of media-queries
@mixin responsive($device) {

  @if $device == xl {
    // For resolutions upper 1440px
    @media screen and (min-width: $container-xl) {
      @content;
    }
  } 

  @else if $device == ul {
    // For resolutions upper 1268px
    @media screen and (min-width: $container-l) {
      @content;
    }
  } 
  
  @else if $device == l {
    // For resolutions between 1440px and 1268px
    @media screen and (max-width: $container-xl) and (min-width: $container-l) {
      @content;
    }
  } 
  
  
  @else if $device == m {
    // For resolutions between 1268px and 620px
    @media screen and (max-width: $container-l) and (min-width: $container-s) {
      @content;
    }
  } 
  
  
  @else if $device == s {
    // For resolutions less than 960px
    @media screen and (max-width: $container-m) {
      @content;
    }
  } 
  
  
  @else if $device == xs {
    // For resolutions less than 340px
    @media screen and (max-width: $container-xs) {
      @content;
    }
  }
}


@function grid($col, $total: 12){
  @return ($col / $total) * 100%;
}


@for $i from 1 through 12{
  .grid-#{$i}{
      width: calc(#{grid($i)} - #{$gutter});
      margin: $gutter / 2;

      padding: 16px 0px;
      float: left;

      @include responsive(s){
          width: calc(100% - #{$gutter});
          float: none;
      }
  }
}

@for $i from 1 through 12{
  .grid-nobreak-#{$i}{
      width: calc(#{grid($i)} - #{$gutter});
      margin: $gutter / 2;

      padding: 16px 0px;
      float: left;
  }
}

.container {
  max-width: $container-l;
  margin: 0 auto;

  padding: 128px 24px;

  /*display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;*/
  //overflow: hidden;
  //position: sticky;

  // clearfix
  &::after{
    content: '';
    display: table;
    clear: both;
  }

  @include responsive(s) {
    flex-direction: column;

    padding: 96px 16px;
  }
}

.disappear{
  @include responsive(s){
    display: none;
  }
}

.hidden{
  overflow: hidden;
}

.zindex-1{
  z-index: -1;
}

.row{
  // clearfix
  &::after{
    content: '';
    display: table;
    clear: both;
  }
}

.h-100{
  height: 100vh;
}

.h-100p{
  height: 100%;
}


.flex {
  display: flex;
}

.flex-start-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;

}
.flex-end-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;

}
.flex-start-column {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center-column {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


.flex-space {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;

  @include responsive(s){
    //flex-direction: column;
    //align-items: flex-start;
  }
}

.flex-column {
  flex-direction: column;
}


.relative {
  position: relative;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-item-1 {
  flex: 1 1 360px;
}

.flex-item-2 {
  flex: 2 1 360px;
}

.flex-item-3 {
  flex: 3 1 360px;
}

.flex-item-4 {
  flex: 4 1 360px;
}

.flex-item-5 {
  flex: 5 1 360px;
}

.flex-auto {
  flex: 1 1 auto;
}

// Width's
.w-auto {
  width: auto;
}
.h-auto {
  height: auto !important;
}
.w-100 {
  width: 100%;
}
.w-75 {
  width: 75%;
}
.w-50 {
  width: 50%;
}
.w-25 {
  width: 25%;
}


.bb-black{
  border-bottom: 1px solid $black-light;
}

.bt-black{
  border-top: 1px solid $black-light;
}

.bl-black{
  border-left: 1px solid $black-light;
}

.br-black{
  border-right: 1px solid $black-light;
}


.bg-gray{
  background-color: $black-normal;
}

.bb-gray{
  border-bottom: 2px solid $black-normal;
}

.bt-gray{
  border-top: 2px solid $black-normal;
}

.bl-gray{
  border-left: 2px solid $black-normal;
}

.br-gray{
  border-right: 2px solid $black-normal;
}


//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////


.bg-hero{
  width: 100%;
  height: 100vh;

  position: absolute;
  top: 0;
  left: 0;

  transition: 1s ease;

  z-index: -1;

  &::after{
    content: '';

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: linear-gradient(180deg, 
    rgba(4, 12, 27, 0.99) 5%, 
    rgba(4, 12, 27, 0.75) 35%, 
    rgba(4, 12, 27, 0.99) 95%);
  }
}

.img-slider{
  width: 100%;

  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  transform: translate(-50%, -50%);

  transition: 1.4s ease;

  @include responsive(l){
    width: 140%;
  }

  @include responsive(m){
    width: 120%;
  }

  @include responsive(s){
    width: 300%;
  }

}

.text-spider{
  position: absolute;
  top: 32%;
  left: 50%;

  transform: translate(-50%, -50%);
  z-index: -1;

  @include responsive(s){
    top: 21%;
    left: 50%;
  }
}

.img-spider{
  display: block;

  transform: scale(1.4);
  transition: 1s ease;

  @include responsive(s){
    transform: scale(2.3);
  }
}

.div-spider{
  position: absolute;
  top: 16%;
  left: 0%;

  //transform: translate(-50%, -50%);

  @include responsive(s){
    top: 18%;
    left: 0%;
  }
}

.screen-loading{
  width: 100%;
  height: 100vh;
  background-color: $black-dark;
  z-index: 999;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  pointer-events: none;

  position: fixed;
  top: 0;
  left: 0;
}

.loader-spider{
  position: relative;
  //border: 1px solid pink;

  &::after{
    content: '';

    position: absolute;
    top: 50%;
    left: 0%;
    backdrop-filter: blur(0px);

    width: 100%;
    height: 300%;
    //border: 1px solid green;

    background: linear-gradient(180deg, rgba(4, 12, 27, 0) 0%, #040C1B 60%);
    
    animation: loader-spider 3s ease forwards;
  }
}

@keyframes loader-spider{
  0%{
    top: -150%;
    left: 0;
    backdrop-filter: blur(16px);
  }
  100%{
    top: 00%;
    left: 0%;
    backdrop-filter: blur(0px);
  }
}

.nav-points{
  position: absolute;
  top: 50%;
  left: 95%;
  transform: translate(-50%, -50%) rotate(90deg);

  display: flex;
  justify-content: center;
  align-items: center;

  @include responsive(s){
    top: 65%;
    left: 50%;

    transform: translate(-50%, -50%) rotate(0deg);
  }
}

.point{
  width: 36px;
  height: 36px;

  margin: 2px 16px;
  cursor: pointer;

  position: relative;

  &::after{
    content: '';

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 16%;
    height: 16%;
    border-radius: 50%;

    background-color: rgba(248, 251, 255, 0.3);
    transition: .4s ease;
  }

  &:hover{
    &::after{
      background-color: rgba(248, 251, 255, 0.65);
    }
  }
}

.active-point{
  &::after{

    width: 40%;
    height: 40%;

    background-color: rgba(248, 251, 255, 0.99);
  }
}

.cta{
  max-width: 360px;
  padding: 7px 0px;

  position: absolute;
  top: 60%;
  left: 27%;
  transform: translate(-50%, -50%);

  @include responsive(s){
    top: 84%;
    left: 50%;

    max-width: 300px;
  }

  &::before{
    content: '';

    position: absolute;
    top: 0;
    right: 0%;

    width: 75%;
    height: 100%;

    background: rgba(35, 44, 62, 0.6);
    backdrop-filter: blur(6px);
    border: 2px solid rgba(17, 25, 41, 0.4);

    border-radius: 4px;
    transform: skewX(-7deg);
    transition: .4s ease;
    box-shadow: 0px 4px 36px rgba(0, 0, 0, 0.4);
  }

  &:hover{
    &::before{
      backdrop-filter: blur(2px);
      transform: skewX(-7deg) scale(1.05);
    }
  }
}

.social{
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate(-50%, -50%);

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  img{
    padding: 4px;
    margin: 20px;
  }

  @include responsive(s){
    display: none;
  }
}

.div-ps{
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);

  display: flex;
  justify-content: center;
  align-items: center;

  @include responsive(s){
    top: 88%;
    left: 50%;
  }
}

.div-trailer{
  position: absolute;
  top: 57%;
  left: 51%;
  cursor: pointer;

  border: 5px solid green;

  @include responsive(s){
    top: 48%;
    left: 45%;
  }

  &:hover{

    #text-trailer{
      left: 80%;
    }

    .circle-play{
      backdrop-filter: blur(2px);
      transform: scale(1.25);
    }
  }
}

@media screen and (max-width: 960px) {
  .div-trailer{
    border: 5px solid red;

  }
}

#text-trailer{
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 75%;
  transform: translate(-0%, -50%) skewX(-7deg);
  transition: .4s ease;
}

.circle-play{
  width: 116px;
  height: 116px;
  display: block;

  border-radius: 50%;

  background: rgba(35, 44, 62, 0.6);
  backdrop-filter: blur(6px);
  border: 2px solid rgba(17, 25, 41, 0.5);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.4);

  transition: .4s ease;
  position: relative;

  &::after{
    content: '';

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 36px;
    height: 36px;

    background-image: url('../../svg/icon-play.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  @include responsive(s){
    width: 80px;
    height: 80px;

    &::after{
      width: 26px;
      height: 26px;
    }
  }
}

.icon-social{
  &:hover{
    img{
      transform: translate3d(0,-4px,0);
    }
  }
}


