.lv { display: block; position: relative; overflow: hidden; isolation: isolate; }
.lv__wipe, .lv__in, .lv__ground, .lv__line, .lv__img, .lv__pen, .lv__edge { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.lv__wipe { overflow: hidden; }
.lv__img { object-fit: cover; object-position: var(--focus, 50% 50%); }

.lv__img, .lv__line { top: -2px; left: -2px; width: calc(100% + 4px); height: calc(100% + 4px); max-width: none; }
.lv__line {
  background-color: var(--fg);
  -webkit-mask: var(--line) var(--focus, 50% 50%) / cover no-repeat;
  mask: var(--line) var(--focus, 50% 50%) / cover no-repeat;
}
.lv__wipe--line { z-index: 1; display: none; }
.lv__wipe--photo { z-index: 2; }
.lv__pen, .lv__edge { left: -100%; pointer-events: none; opacity: 0; z-index: 3; }

.lv__pen { border-right: 1px solid var(--accent); }
.lv__pen::before, .lv__pen::after {
  content: ''; position: absolute; right: -4.5px; width: 8px; height: 8px;
  border: 1px solid var(--accent); background: var(--bg);
}
.lv__pen::before { top: 10px; }
.lv__pen::after { bottom: 10px; }

.lv__edge {
  --wash: clamp(36px, 9%, 110px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) calc(100% - var(--wash)), rgba(255, 255, 255, .07) calc(100% - var(--wash) * .45), rgba(255, 255, 255, .3));
  border-right: 1px solid rgba(255, 255, 255, .95);
  box-shadow: 4px 0 16px -2px rgba(255, 255, 255, .45);
  mix-blend-mode: screen;
}

.lv.is-pre .lv__wipe--photo, .lv.is-pre .lv__wipe--line { transform: translateX(calc(-100% - 4px)); }
.lv.is-pre .lv__wipe--photo > .lv__in, .lv.is-pre .lv__wipe--line > .lv__in { transform: translateX(calc(100% + 4px)); }
.lv.is-pre .lv__wipe--line, .lv.is-moving .lv__wipe--line { display: block; }
.lv.is-moving .lv__wipe, .lv.is-moving .lv__in, .lv.is-moving .lv__pen, .lv.is-moving .lv__edge { will-change: transform; }
.lv:not(.has-line) .lv__line { display: none; }

@media (forced-colors: active) {
  .lv__line { forced-color-adjust: none; background-color: CanvasText; }
  .lv__edge { display: none; }
}