.root {
  --_y-shift: 50%;
  --_bg-light: transparent;
  --_bg-dark: transparent;

  overflow: hidden;
  border-radius: inherit;

  &::before {
    pointer-events: none;
    content: '';

    position: absolute;
    inset: 0;

    background-image: radial-gradient(closest-side at 50% var(--_y-shift), var(--_bg-light) 25%, var(--_bg-dark) 125%);
  }

  &.withLinearGradient {
    &::before {
      background-image:
        radial-gradient(circle at 50% var(--_y-shift), #ffffff44, #ffffff00 9.5rem),
        linear-gradient(var(--_bg-light), var(--_bg-dark));
    }
  }
}

.canvas {
  pointer-events: none;

  position: relative;

  width: 100%;
  height: 100%;

  opacity: 0;
  object-fit: cover;

  transition: opacity 0.15s ease-out;

  &.showing {
    opacity: 1;
  }
}