.jbw-reveal-frame {
  --jbw-pad: 30px;
  --jbw-line: #000;
  position: relative;
  width: 100%;
  height: 70vh;
  max-height: 100vh;
  padding: var(--jbw-pad);
  overflow: hidden;
  box-sizing: border-box;
}

.jbw-reveal-frame *,
.jbw-reveal-frame *::before,
.jbw-reveal-frame *::after { box-sizing: border-box; }

.jbw-reveal-frame .jbw-reveal-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  clip-path: inset(0 100% 100% 0);
  transition: none;
  will-change: clip-path;
}

@media (min-width: 1367px) {
  .jbw-reveal-frame[data-jbw-direction="right"] .jbw-reveal-image {
    clip-path: inset(0 0 100% 100%);
  }

  .jbw-reveal-frame[data-jbw-direction="center"] .jbw-reveal-image {
    clip-path: inset(0 0 100% 0);
  }
}

.jbw-guide,
.jbw-reveal-line {
  position: absolute;
  z-index: 2;
  display: block;
  margin: 0;
  padding: 0;
  pointer-events: none;
  background: var(--jbw-line);
}

.jbw-guide-top,
.jbw-guide-bottom,
.jbw-reveal-line-h {
  left: 0;
  width: 100%;
  height: 1px;
}

.jbw-guide-left,
.jbw-guide-right,
.jbw-reveal-line-v {
  top: 0;
  width: 1px;
  height: 100%;
}

.jbw-guide-top { top: var(--jbw-pad); }
.jbw-guide-bottom { bottom: var(--jbw-pad); }
.jbw-guide-left { left: var(--jbw-pad); }
.jbw-guide-right { right: var(--jbw-pad); }
.jbw-reveal-line-h { top: var(--jbw-pad); opacity: 0; }
.jbw-reveal-line-v { left: var(--jbw-pad); opacity: 0; }

@media (max-width: 1366px) { .jbw-reveal-frame { --jbw-pad: 20px; } }
@media (max-width: 767px) { .jbw-reveal-frame { --jbw-pad: 18px; } }

@media (prefers-reduced-motion: reduce) {
  .jbw-reveal-frame .jbw-reveal-image { clip-path: inset(0) !important; }
  .jbw-reveal-line { display: none; }
}