.disperse-filler {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42vh;
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--cl-base);
  font-size: 0.9rem;
}
.disperse-filler p { max-width: 26em; margin: 0; }

.disperse-gallery {
  position: relative;
  width: min(720px, 94%);
  margin: 0 auto;
  height: 240vh;
}
.disperse-sticky {
  position: sticky;
  top: 90px;
  height: clamp(340px, 56vh, 480px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--cl-white);
  box-shadow: 0 2px 20px rgba(49,33,20,0.08);
  overflow: hidden;
}
.disperse-fallback,
.disperse-sticky canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.disperse-fallback {
  object-fit: cover;
  opacity: 1;
  transition: opacity 180ms ease;
}
.disperse-sticky canvas {
  opacity: 0;
  transition: opacity 180ms ease;
}
.disperse-gallery.is-canvas-ready .disperse-fallback { opacity: 0; }
.disperse-gallery.is-canvas-ready canvas { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .disperse-fallback,
  .disperse-sticky canvas { transition: none; }
}