/* Máscara cinematográfica aplicada a todas as demonstrações. */
.video-wrap {
  isolation: isolate;
}

.video-wrap::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(circle at 50% 44%, transparent 15%, rgba(2, 7, 16, .12) 48%, rgba(1, 5, 12, .8) 115%),
    linear-gradient(115deg, rgba(0, 119, 255, .26), transparent 38%, rgba(24, 218, 255, .08) 72%, rgba(1, 5, 12, .4));
  box-shadow:
    inset 0 0 0 1px rgba(103, 201, 255, .08),
    inset 0 -80px 90px rgba(1, 5, 12, .7);
  pointer-events: none;
  transition: opacity .55s ease;
}

.video-wrap::after {
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(3, 9, 19, .38), transparent 38%, rgba(4, 13, 25, .18)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0, rgba(255, 255, 255, .018) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: screen;
  transition: opacity .55s ease;
}

.video-wrap video {
  filter: saturate(.92) contrast(1.08);
  transition: opacity .55s, transform 1s, filter .55s;
}

.product:hover .video-wrap video,
.video-wrap.playing video {
  filter: saturate(1.08) contrast(1.04);
  opacity: .96;
}

.product:hover .video-wrap::before,
.video-wrap.playing::before {
  opacity: .55;
}

.video-wrap.playing::after {
  opacity: .25;
}

.video-wrap .play { z-index: 3; }
.video-wrap .play::after {
  content: "COM SOM";
  position: absolute;
  left: 50%;
  top: calc(100% + 17px);
  transform: translateX(-50%);
  color: rgba(235, 248, 255, .9);
  font: 800 8px/1 'Inter', sans-serif;
  letter-spacing: .18em;
  white-space: nowrap;
  text-shadow: 0 2px 12px #000;
}
.video-wrap.playing .play::after { content: "PAUSAR"; }
.video-wrap .index,
.video-wrap .tag { z-index: 2; }

@media (max-width: 700px) {
  .video-wrap::before {
    background:
      radial-gradient(circle at 50% 45%, transparent 12%, rgba(1, 6, 14, .2) 55%, rgba(1, 5, 12, .85) 115%),
      linear-gradient(135deg, rgba(0, 119, 255, .22), transparent 52%);
  }
}