/* ============================================================
   doodle layer: random ink drawings scattered around the page
   ============================================================ */

.doodle-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.doodle {
  position: absolute;
  pointer-events: none;
  user-select: none;
  filter:
    drop-shadow(0 0 2px rgba(0,0,0,0.4))
    contrast(1.1);
  opacity: 0;
  transition: opacity 800ms ease;
  /* doodles are inverted to render as white-on-dark for the body areas */
}

.doodle.is-on-paper {
  /* doodles that land on a white panel render as black ink */
  mix-blend-mode: multiply;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}

.doodle.is-visible { opacity: 0.9; }
.doodle.is-visible.is-on-paper { opacity: 1; }

/* doodles that land on the dark margin render as white chalk/ink */
.doodle.is-on-dark {
  filter: invert(1) brightness(1.05) drop-shadow(0 0 3px rgba(0,0,0,0.6));
  opacity: 0.55;
}
.doodle.is-visible.is-on-dark { opacity: 0.55; }