/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCRIBBLE TRANSITION – homepage → case study.
   Homepage (js/scribble-transition.js): the scribble draws, thickens until it covers the screen,
   then the case study opens underneath the solid colour.
   Case study (js/scribble-arrive.js): the page starts covered in that same colour,
   and the cover fades away once the page is ready.
   Colours come from data-transition-color on each homepage tile.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --scribble-reveal-time: 250ms;
  --scribble-layer: 2147483647;   /* above everything */
}

/* ── leaving the homepage ── */
.scribble-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--scribble-layer);
  overflow: hidden;
  pointer-events: auto;   /* blocks clicks while it runs */
  touch-action: none;
}

.scribble-overlay svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.scribble-overlay path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url("#scribble-roughen");   /* the scribble's own lumpy roughen filter (made in scribble-transition.js) */
}

/* hidden until the dash is set up, so the full line never flashes */
.scribble-overlay.is-preparing {
  visibility: hidden;
}

.scribble-locked {
  overflow: hidden;
}

/* ── arriving on the case study ── */
.scribble-arriving::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--scribble-layer);
  background: var(--scribble-color);
  pointer-events: none;
}

.scribble-arriving.is-revealing::after {
  animation: scribble-reveal var(--scribble-reveal-time) ease-out forwards;
}

@keyframes scribble-reveal {
  to {
    opacity: 0;
  }
}