.protected-proof-image {
  --protected-proof-split: 47%;
  --protected-watermark-after-x: 42%;
  --protected-watermark-after-y: 160%;
  --protected-watermark-before-x: -42%;
  --protected-watermark-before-y: -160%;
  --protected-watermark-rotation: -28deg;
  --protected-watermark-x: 0%;
  --protected-watermark-y: 0%;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  max-width: 100%;
  padding: 0;
  position: relative;
  width: 100%;
}

.protected-proof-image:focus {
  outline: none;
}

.protected-proof-image:focus-visible .protected-proof-image__frame {
  box-shadow: 0 0 0 3px rgba(1, 192, 254, 0.55);
}

.protected-proof-image__frame {
  background: #111;
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.protected-proof-image--small {
  max-width: 125px;
}

.protected-proof-image__img {
  display: block;
  height: auto;
  max-width: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  width: 100%;
}

.protected-proof-image__img--blur {
  filter: blur(16px) saturate(0.7) brightness(0.78);
  inset: 0;
  position: absolute;
  transform: scale(1.04);
}

.protected-proof-image__img--clear {
  clip-path: inset(0 calc(100% - var(--protected-proof-split)) 0 0);
  position: relative;
  transition: clip-path 160ms ease-out;
  z-index: 2;
}

.protected-proof-image--landscape .protected-proof-image__img--clear {
  clip-path: inset(0 0 calc(100% - var(--protected-proof-split)) 0);
}

.protected-proof-image__watermark {
  align-items: center;
  color: rgba(255, 255, 255, 0.72);
  display: flex;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 700;
  inset: 0;
  justify-content: center;
  line-height: 1.3;
  pointer-events: none;
  position: absolute;
  white-space: pre-line;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  transform: translate(var(--protected-watermark-x), var(--protected-watermark-y)) rotate(var(--protected-watermark-rotation));
  transition: transform 160ms ease-out;
  z-index: 4;
}

.protected-proof-image__watermark::before,
.protected-proof-image__watermark::after {
  color: rgba(255, 255, 255, 0.55);
  content: attr(data-watermark);
  position: absolute;
}

.protected-proof-image__watermark::before {
  transform: translate(var(--protected-watermark-before-x), var(--protected-watermark-before-y));
}

.protected-proof-image__watermark::after {
  transform: translate(var(--protected-watermark-after-x), var(--protected-watermark-after-y));
}

.protected-proof-image__hint {
  color: #777;
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  margin-top: 8px;
  text-align: center;
}

.protected-proof-image.is-showing-alternate .protected-proof-image__img--clear {
  clip-path: inset(0 0 0 var(--protected-proof-split));
}

.protected-proof-image--landscape.is-showing-alternate .protected-proof-image__img--clear {
  clip-path: inset(var(--protected-proof-split) 0 0 0);
}

.protected-proof-image.is-hidden-protection .protected-proof-image__img--clear {
  clip-path: inset(0);
}

.protected-proof-image.is-hidden-protection .protected-proof-image__img--blur {
  display: none;
}

.protected-proof-image.is-protection-alert .protected-proof-image__img--clear {
  opacity: 0;
}

.protected-proof-image.is-protection-alert .protected-proof-image__img--blur {
  filter: blur(22px) brightness(0.45);
}

@media (max-width: 700px) {
  .protected-proof-image__watermark {
    font-size: 11px;
  }

  .protected-proof-image--small .protected-proof-image__watermark {
    font-size: 8px;
  }
}