/* Oblivion Visual Frame public styles */
html.ovf-no-scroll-effects .ovf-vine,
body.ovf-frame-enabled .ovf-vine {
  backface-visibility: hidden;
}

.ovf-frame {
  inset: 0;
  pointer-events: none;
  z-index: var(--ovf-z-index, 8);
  overflow: hidden;
  contain: layout style paint;
}

.ovf-position-fixed,
body.ovf-position-fixed .ovf-frame {
  position: fixed;
}

.ovf-position-absolute,
body.ovf-position-absolute .ovf-frame {
  position: absolute;
  min-height: 100%;
}

.ovf-vine {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--ovf-desktop-width, 140px);
  background-repeat: var(--ovf-repeat-mode, repeat-y);
  background-size: contain;
  background-position-x: center;
  background-position-y: var(--ovf-scroll-y, 0px);
  opacity: var(--ovf-opacity, 0.86);
  filter: var(--ovf-filter, none);
  mix-blend-mode: var(--ovf-blend-mode, normal);
  transform: translateZ(0);
  will-change: background-position, opacity, filter;
}

.ovf-vine-left {
  left: 0;
  background-image: var(--ovf-left-image);
}

.ovf-vine-right {
  right: 0;
  background-image: var(--ovf-right-image, var(--ovf-left-image));
  transform: scaleX(-1) translateZ(0);
}

.ovf-mood-marker {
  display: block;
  position: relative;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.ovf-mood-section {
  position: relative;
}

@media (max-width: 1024px) {
  .ovf-vine {
    width: var(--ovf-tablet-width, 90px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ovf-vine {
    will-change: auto;
  }
}