/* Brush-reveal · Torr Pensel (snabb)
   ------------------------------------
   Varje .brush-stage-wrapper omsluter en <img> och en <canvas>.
   När .brush-stage-wrapper kommer in i viewport målar Torr Pensel
   fram bilden med enskilda borstspår (200 hårstrån per drag, 8+8 lager).
*/

.brush-stage-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg); /* hemsidans bakgrund via CSS-variabel */
}

.brush-stage-wrapper canvas.brush-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  pointer-events: none;
}

.brush-stage-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Medan revealen pågår döljer vi originalbilden - canvasen visar den */
.brush-stage-wrapper.is-revealing img {
  visibility: hidden;
}

/* När revealen är klar kan canvasen tas bort från layoutflödet */
.brush-stage-wrapper.is-done canvas.brush-art {
  display: none;
}

/* Reduced motion: hoppa över animationen helt */
@media (prefers-reduced-motion: reduce) {
  .brush-stage-wrapper.is-revealing img {
    visibility: visible;
  }
  .brush-stage-wrapper canvas.brush-art {
    display: none;
  }
}