/* -------------------------------- 

File#: _1_video-feature
Title: Video Feature
Descr: A CTA box over a background video
Usage: codyhouse.co/license

-------------------------------- */
.padding-top-xxxxl{
    padding-top: 360px;
}
.video-feature {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.video-feature__box-wrapper {
  position: relative;
  z-index: 2;
}

.video-feature__box {
  background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.98);
}
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .video-feature__box {
  background-color: rgb(255 255 255 / 21%) !important;
  background-image: radial-gradient(circle at 25%, hsl(0deg 0% 0% / 10%), rgb(0 0 0 / 0%) 96%) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  }
}

.video-feature__video-wrapper {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.video-feature__video-wrapper img, .video-feature__video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
}
.video-feature__video-wrapper img {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .video-feature__video-wrapper video {
    visibility: hidden;
  }
  .video-feature__video-wrapper img {
    display: block;
  }
}

.video-feature__link {
  --transition-duration: .4s;
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-accent-darker);
  border-radius: inherit;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  color: var(--color-contrast-higher);
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: var(--transition-duration);
}
.video-feature__link > * {
  position: relative;
  z-index: 2;
}
.video-feature__link::before {
  content: "";
  position: absolute;
  bottom: -20%;
  left: -5%;
  width: 110%;
  height: 140%;
  background-color:var(--color-accent-dark);
  will-change: transform;
  -webkit-transform: scaleY(0) skewY(10deg);
          transform: scaleY(0) skewY(10deg);
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  transition: -webkit-transform var(--transition-duration) var(--ease-in-out);
  transition: transform var(--transition-duration) var(--ease-in-out);
  transition: transform var(--transition-duration) var(--ease-in-out), -webkit-transform var(--transition-duration) var(--ease-in-out);
}
.video-feature__link:hover {
  color: var(--color-bg);
}
.video-feature__link:hover::before {
  -webkit-transform: scaleY(1) skewY(0deg);
          transform: scaleY(1) skewY(0deg);
}
.video-feature__link:hover .video-feature__link-icon > *:first-child {
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
.video-feature__link:hover .video-feature__link-icon > *:last-child {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.video-feature__link-icon > * {
  will-change: transform;
  transition: -webkit-transform var(--transition-duration) var(--ease-in-out);
  transition: transform var(--transition-duration) var(--ease-in-out);
  transition: transform var(--transition-duration) var(--ease-in-out), -webkit-transform var(--transition-duration) var(--ease-in-out);
}
.video-feature__link-icon > *:first-child {
  -webkit-transform-origin: 8px 5px;
          transform-origin: 8px 5px;
}
.video-feature__link-icon > *:last-child {
  -webkit-transform-origin: 8px 11px;
          transform-origin: 8px 11px;
}