.JACKS0N {
  width: 100vw;
  height: 100dvh;
  position: relative;
  overflow: hidden;

  & .video__main {
    z-index: 1;
    backface-visibility: hidden;
    width: 100dvh;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;

    &:before {
      transform-origin: center;
      content: "";
      background: radial-gradient(circle at center, color-mix(in srgb, var(--color-red) 0%, transparent 100%), color-mix(in srgb, var(--color-green) 100%, transparent 100%), color-mix(in srgb, var(--color-background) 0%, transparent 100%));
      mix-blend-mode: difference;
      z-index: 2;
      opacity: .5;
      width: 500%;
      height: 200%;
      transition: opacity .5s, transform .5s;
      display: none;
      position: absolute;
      inset: -50% 0 0 -80%;
      transform: scale(2);
    }

    &:after {
      z-index: 11111;
      opacity: .6;
      content: "";
      width: 100%;
      height: 100%;
      image-rendering: pixelated;
      pointer-events: none;
      mix-blend-mode: overlay;
      transition: opacity var(--animation-step) ease;
      background-image: url("noise.e67ae4e2.gif");
      background-repeat: repeat;
      background-size: 83px;
      position: fixed;
      top: 0;
      left: 0;
    }

    &.is-playing {
      & video {
        opacity: 1;
      }

      &:after {
        opacity: .6;
      }

      &:before {
        opacity: 0;
        transform: scale(1);
      }
    }

    & video {
      transition: opacity var(--animation-step) ease, transform var(--animation-step) ease;
      opacity: 1;
      z-index: 1222;
      object-fit: cover;
      width: 100%;
      min-width: 100vmin;
      height: 130%;
      min-height: 100vmax;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      -ms-interpolation-mode: nearest-neighbor;
      position: fixed;
      top: -15%;
      left: 0;
      transform: translateZ(2px);
    }
  }

  & .video__overlay {
    cursor: crosshair;
    aspect-ratio: 1280 / 980;
    z-index: 2;
    backdrop-filter: blur(.5em);
    opacity: 1;
    left: calc(var(--frame-size) * 2vmin);
    top: calc(var(--frame-size) * 2vmin);
    width: calc(100% - calc(var(--frame-size) * 4vmin));
    height: calc(calc(100% - var(--frame-size) * 2vmin)  - var(--frame-size) * 2vmin);
    border: 1 solid var(--color-quaternary-4);
    box-shadow: 0 0 0 .125em color-mix(in srgb, var(--color-primary-1) 0%, var(--color-foreground) 100%);
    border-radius: 1.675em;
    transition: box-shadow .3s;
    display: block;
    position: absolute;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--color-background) 50%, transparent 50%) !important;

    @media only screen and (width <= 699px) {
      & {
        --frame-size: 15;
        min-width: 100%;
        left: calc(var(--frame-size) / 1vmin);
        top: calc(var(--frame-size) * 2vmin);
        width: calc(100% - calc(var(--frame-size) * 4vmin));
        height: calc(calc(100% - var(--frame-size) * 2vmin)  - var(--frame-size) * 2vmin);
        border-radius: 0 !important;
      }
    }

    & button.video-control-btn {
      bottom: calc(var(--space) * .25);
      right: calc(var(--space) * .25);
      z-index: 111111;
      color: var(--color-background);
      border: none;
      border-radius: 1.25em;
      position: absolute;
      background: none !important;

      &:after {
        content: "";
        opacity: .5;
        z-index: -1;
        mix-blend-mode: difference;
        background: color-mix(in srgb, var(--color-foreground) 60%, transparent 100%);
        backdrop-filter: blur(1em);
        border-radius: 1.25em;
        position: absolute;
        inset: 0;
      }
    }

    &.minimized {
      --frame-size: 10;
      min-width: 10em;

      @media only screen and (width <= 699px) {
        & {
          --frame-size: 15;
          min-width: 50%;
          left: calc(var(--frame-size) * 1.5vmin);
          top: calc(var(--frame-size) * 2vmin);
          width: calc(100% - calc(var(--frame-size) * 4vmin));
          height: calc(calc(100% - var(--frame-size) * 2vmin)  - var(--frame-size) * 2vmin);
        }
      }

      @media only screen and (width >= 2000px) {
        & {
          --frame-size: 11;
          left: calc(var(--frame-size) * 4vmin);
          top: calc(var(--frame-size) * 3vmin);
          width: calc(100% - calc(var(--frame-size) * 8vmin));
          height: calc(calc(100% - var(--frame-size) * 4vmin)  - var(--frame-size) * 2vmin);
        }
      }

      & .subtitles-container, & .control__wrapper {
        display: none;
      }
    }

    &:after {
      z-index: 2;
      opacity: .6;
      content: "";
      width: 100%;
      height: 100%;
      image-rendering: pixelated;
      mix-blend-mode: overlay;
      background-image: url("noise.e67ae4e2.gif");
      background-repeat: repeat;
      background-size: 83px;
      transition: opacity 1s;
      position: absolute;
      top: 0;
      left: 0;
    }

    & video {
      opacity: 1;
      z-index: 2;
      object-fit: cover;
      aspect-ratio: 1280 / 980;
      min-width: 100vmin;
      height: 240%;
      min-height: 100vmax;
      transition: all .123s ease-in-out;
      position: relative;
    }

    &.is-playing {
      filter: none;
      opacity: 1;
      box-shadow: 0 0 0 .125em color-mix(in srgb, var(--color-primary-1) 0%, var(--color-foreground) 100%), 0 0 0 0em color-mix(in srgb, var(--color-primary-1) 0%, var(--color-background) 100%);
      background-color: #0000;

      & .subtitles-container {
        visibility: visible;
      }

      & video {
        opacity: 1;
      }

      &:after {
        opacity: .6;
      }
    }

    &.is-playing video {
      opacity: 1;
      background-color: var(--color-foreground);
      filter: blur();
    }

    &:before {
      cursor: pointer;
      content: "";
      font-family: var(--font-mono);
      text-transform: uppercase;
      letter-spacing: .05em;
      text-align: center;
      z-index: 111;
      color: var(--color-background);
      text-shadow: -1px -1px 0 color-mix(in srgb, var(--color-foreground) 50%, transparent), 1px -1px 0 color-mix(in srgb, var(--color-foreground) 50%, transparent), -1px 1px 0 color-mix(in srgb, var(--color-foreground) 50%, transparent), 1px 1px 0 color-mix(in srgb, var(--color-foreground) 50%, transparent);
      justify-content: center;
      align-items: center;
      padding: .125em 2em;
      font-size: clamp(2.875em, 8vmin, 10em);
      font-weight: 800;
      line-height: 1.125;
      display: flex;
      position: absolute;
      inset: 0;
    }

    &.is-playing:before {
      display: none;
    }

    &:after {
      content: "";
      pointer-events: none;
      border-radius: 4px;
      position: absolute;
      inset: 0;
    }
  }

  & .video__overlay__two {
    top: unset;
    left: unset;
    right: calc(var(--frame-size) * 1vmin);
    bottom: calc(var(--frame-size) * 1vmin);
  }
}

.channel {
  pointer-events: none;
  z-index: 1;
}

.video__main, .video__overlay {
  z-index: 2;
}

.video__overlay {
  position: relative;
}

.grabber-icon {
  z-index: 99999999;
  color: #fff;
  cursor: grab;
  pointer-events: none;
  width: 2em;
  height: 2em;
  transition: opacity .2s;
  position: absolute;
  top: 1.5em;
  left: 1.5em;

  & > circle {
    fill: #fff;
    transform-origin: center;
    transform: scale(1.25);
  }
}

.top--right {
  top: calc(var(--space) * 1.25);
  z-index: 99999999;
  cursor: grab;
  pointer-events: none;
  --highlight-color: var(--color-background);
  color: var(--color-foreground);
  mix-blend-mode: overlay;
  border-radius: .5em;
  font-size: clamp(1em, 2vmin, 6em);
  transition: opacity .2s;
  display: block;
  position: absolute;
  right: 1em;

  & span {
    text-align: center;
    width: 100%;
    max-width: 80%;
    text-shadow: -.5px -.5px 0 color-mix(in srgb, var(--highlight-color) 50%, transparent), .5px -.5px 0 color-mix(in srgb, var(--highlight-color) 50%, transparent), -.5px .5px 0 color-mix(in srgb, var(--highlight-color) 50%, transparent), .5px .5px 0 color-mix(in srgb, var(--highlight-color) 50%, transparent);
    color: var(--color-foreground);
    margin: 0 auto;
    padding: 0;
    animation: none;
    position: relative;
    bottom: 0;
    animation-play-state: paused !important;
  }
}

.video__overlay:hover .grabber-icon, .video__overlay:not(:hover) .grabber-icon {
  opacity: 1;
}

.user-input {
  opacity: 0;
  z-index: 2147483647;
  pointer-events: auto;
  mix-blend-mode: overlay;
  width: auto;
  height: 30%;
  transition: opacity .2s;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  & svg {
    filter: url("#goo3");
    width: 100%;
    height: 100%;
  }
}

.espri__scroll::-webkit-scrollbar {
  display: none;
}

.espri__scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/*# sourceMappingURL=six.69b6fbfb.css.map */