.ssg-wrap{
  position: relative;
  isolation: isolate;
  min-height: var(--ssg-section-min-h, 200vh);
  overflow: visible; /* keep sticky working */
}

/* Background stage is contained to the section (not fixed). */
.ssg-stage{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  /* Clip background to this section without breaking sticky. */
  overflow: clip;
}

/* Fallback for browsers without overflow: clip */
@supports not (overflow: clip){
  .ssg-stage{
    overflow: visible;
    clip-path: inset(0);
  }
}

/* Sticky "pinned viewport" layer */
.ssg-pin{
  position: sticky;
  top: var(--ssg-top, 0px);
  height: calc(100vh - var(--ssg-top, 0px));
}

/* Canvas fills the pinned viewport area */
.ssg-canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Overlay above canvas */
.ssg-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--ssg-overlay, #000);
  opacity: var(--ssg-overlay-opacity, 0.35);
  z-index: 1;
  pointer-events: none;
}

/* Content above everything */
.ssg-content{
  position: relative;
  z-index: 2;
}