$o-intro-bp1:                   840;
$o-intro-bp2:                   $bp-max;
$o-intro-bp-max:                1680;
$o-intro-image-clip-path-val:   polygon(26.2596899% 0%, 0% 100%, 100% 100%, 100% 0%);
$o-intro-image-stage-ratio:     61.4285714%;

.o-intro {
  position: relative;
  overflow: hidden;
}


.o-intro__main {
  @include contain;

  @include mq($o-intro-bp1) {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}


.o-intro__content {
  position: relative;
  padding-top: space(4);
  padding-bottom: space(4);

  @include mq($max: $o-intro-bp1) {
    margin-left: column(-1);
    margin-right: column(-1);
    padding-left: column(1);
    padding-right: column(1);
    background-color: palette(secondary, 100);
  }

  @include mq($o-intro-bp1) {
    padding-right: column(0.5);
  }

  @include mq($o-intro-bp2) {
    max-width: column(4);
    padding-top: space(7);
    padding-bottom: space(7);
  }

  &::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    right: -7vw; //magic value
    left: -100vw; // push all the way out of view
    background-color: palette(secondary, 100);
    transform: skew($site-skew-angle);
    transform-origin: bottom right;
  }
}


.o-intro__title {
  @include vspacing(
    'margin-bottom' 0.5833
  );
  color: palette(tertiary, 400);
}


.o-intro__stage {
  position: relative;

  @include mq($max: $o-intro-bp1) {
    margin-left: column(-1);
    margin-right: column(-1);
  }

  @include mq($o-intro-bp1) {
    flex: 0 0 calc(#{column(6)} + #{column(1)});
  }

  @include mq($max: $o-intro-bp2) {
    margin-right: column(-1);
  }

  @include mq($o-intro-bp2, $o-intro-bp-max) {
    $offset: "((100vw - #{$site-max-width}px) / -2)";
    margin-right: calc(#{$offset});
    flex-basis: calc(#{column(8)} - #{$offset}); // aspect ratio
  }

  @include mq($o-intro-bp-max) {
    $offset: "((#{$site-max-width}px - #{$o-intro-bp-max}px) / 2)";
    margin-right: calc(#{$offset});
    flex-basis: calc(#{column(8)} - #{$offset}); // aspect ratio
  }
}


.o-intro__image,
.o-intro__video {
  background-color: #bbb;

  @include mq($o-intro-bp1) {
    clip-path: $o-intro-image-clip-path-val;

    @supports (clip-path: $o-intro-image-clip-path-val) {
      // do we need to do something special here?
    }
  }
}


.o-intro__video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 100ms linear;

  &::before {
    $video-button-icon-size: 48px;
    content: '';
    position: absolute;
    top: calc(50% - #{halve($video-button-icon-size)});
    left: calc(50% - #{halve($video-button-icon-size)});
    width: $video-button-icon-size;
    height: $video-button-icon-size;
    background-image: url('/img/icons/play.svg');
    transition: all 100ms ease-in-out;
    filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.3));
  }

  &:hover {
    background-color: rgba(palette(secondary, 300), 0.1);

    &::before {
      transform: scale(1.3);
      filter: drop-shadow(0px 0px 8px rgba(0,0,0,0.7));
    }
  }
}


.o-intro__scroll {
  border: none;
  width: 40px;
  height: 82px;
  margin-top: space(7);
  background: transparent url(/img/icons/mouse-scroll.svg);
  animation: mouseScroll 2s infinite;

  &:focus {
    outline: none;
  }
}


.o-intro__action {
  @include vspacing(
      'margin-top' 0.5833
  );
}


@keyframes mouseScroll {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translateY(10px);
  }
  40% {
    transform: translate(0, 0);
  }
}