/* reel wrapper */
.reel-wrapper {
  position: relative;
  transition: 0.5s ease-out;
  overflow: hidden;
  margin: 0 auto;
}
#hero, #play {
  transition: 0.25s 0.25s ease-in-out;
}
video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
video#reel {
  object-fit: contain;
}
.triangle {
  border: 100px solid white;
  border-right: 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
  width: 0;
  height: 0;
  opacity: 0.5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: scaleX(1.4) translateY(-50%);
  transition: 0.2s ease-out;
  cursor: pointer;
}
.triangle:hover {
  opacity: 1;
  transform: scaleX(1.4) translateY(-50%) scale(1.1);
}
.close {
  position: absolute;
  z-index: 100;
  top: 2em;
  right: 2em;
  padding: 2em;
  color: white;
  transition: 0.5s ease-out;
  font-family: 'Sharp Sans Bold', sans-serif;
  transform: scaleY(0.7);
  cursor: pointer;
  opacity: 0;
}
.playing .close {
  opacity: 1;
}


/* play logic */
{% if module.enable_click %}
  .playing #hero, .playing #play {
    transition-delay: 0;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease-out;
  }
  .playing #reel {
    opacity: 1;
    transition: 1s ease-out;
  }
  .playing.reel-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 50;
  }

{% endif %}