@use "animatewithsass/animate";

.jumbotron {
  position: relative;
  height: 150vw;
  max-height: 90vh;

  @media (min-width: map-get($grid-breakpoints, sm)) {
    height: 56.5vw;
  }
  @media (min-width: map-get($grid-breakpoints, lg)) {
    min-height: 500px;
    height: 42.5vw;
  }
  @media (min-width: map-get($grid-breakpoints, xl)) {
    //height: 37.5vw;
  }

  @media (min-width: map-get($grid-breakpoints, xxl)) {
    min-height: 600px;
    height: 35vw;

  }

  h1 {

    margin-top: 0;
    margin-bottom: .25em;
    animation-delay: .3s;

    background-color: $primary;
    color: #fff;
    display: inline;
    padding: $spacer;
    box-decoration-break: clone;
    line-height: 2.1;

  }

  .intro {
    background-color: $white;
    padding: $spacer;
    animation-delay: .6s;
    max-width: 500px;

    p {
      margin: 0;
    }
  }

  .btn {
    animation-delay: .9s;

  }

}


// Heroslider

.seq-fallback {
  overflow: hidden;
}


.seq-canvas {
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


.seq-preloader {
  z-index: inherit !important;
  background-color: $gray-200 !important;
}


.seq-preload-circle {
  fill: $primary !important;
}


.seq-next,
.seq-prev {
  background: rgba(0, 0, 0, .3);
  color: $white;
  cursor: pointer;
  text-align: center;
  position: absolute;
  z-index: 22;
  top: 50%;
  //z-index: 1000;
  height: 37px;
  width: 37px;
  line-height: 37px;
  transform: translateY(-50%);
  opacity: .5;
  transition: all .2s linear;

  &:hover, &:focus {
    background: rgba(255, 255, 255, 1);
    color: $primary;
    opacity: 1;
  }

  @include media-breakpoint-down(sm) {
    display: none;
  }

}


.seq-prev {
  left: 0%;
}


.seq-next {
  right: 0%;
}


.seq-pagination {
  z-index: 21;
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  gap: 5px;
  list-style: none;
  margin: $spacer;

  li {

    &::before {
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0);
      border: 1px solid rgba(255, 255, 255, .5);
      transition: all .5s ease-in-out;
    }
  }

  li.seq-current {
    &::before {
      background-color: rgba(255, 255, 255, .75);
      border: 1px solid rgba(255, 255, 255, .75);
    }

  }
}


.seq-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}


.seq-slide--content {
  @extend .container;
  height: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding-bottom: $spacer * 2;

  @include media-breakpoint-up(sm) {
    align-items: center;
    padding-bottom: 0;
  }
}


.seq-slide--content-inner {

  @for $i from 1 through 6 {
    :nth-child(0n + #{$i}) {
      transition-delay: 300ms * $i;
    }
  }
}


.seq-slide--links {
  display: flex;
  gap: .5em
}


.seq-slide--bgimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top:0;
  left: 0;
}


.seq-slide--actor {
  position: absolute;
  max-height: 100%;
  height: 100%;
  width: auto;
  bottom: 0;
}


.seq-slide--inner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  will-change: opacity;
  transition-duration: 500ms;
  transition-property: opacity;
  transition-timing-function: ease-out;

  &, .seq-out & {
    opacity: 0;
  }

  .seq-in & {
    opacity: 1;
  }

}


.fadeRightBig {
  .seq-in & {
    @include animate.fadeInRightBig();
  }

  .seq-out & {
    @include animate.fadeOutLeftBig();
  }
}


.fadeRightSmall {
  .seq-in & {
    @include animate.fadeInLeft();
  }

  .seq-out & {
    @include animate.fadeOutRight();
  }
}
