/* unroll.css — the scroll-position-driven "unrolling parchment" on slice 0.
 *
 * The scroll art ships as three canvas-positioned pieces inside .pp-unroll:
 *   .pp-unroll__top       lower tassel/finial tails (static)
 *   .pp-unroll__parchment the parchment paper column, inside .pp-unroll__reveal
 *   .pp-unroll__roller    the bottom roller (translated by js/unroll.js)
 * The on-parchment HTML overlays (hint / coins / plate / scratch canvas) also live inside
 * .pp-unroll__reveal, so a single clip-path scrub reveals paper + text together.
 *
 * Never-invisible contract: the RESTING CSS below is the fully-unrolled state (no clip, no
 * transform) — so with no JS, a thrown script, or prefers-reduced-motion the scroll shows
 * exactly today's static layout. js/unroll.js adds html.unroll-armed and drives the rolled
 * state via inline clip-path / transform only while it is actually running.
 */

.pp-unroll {
  position: absolute;
  inset: 0;
  pointer-events: none; /* decorative; the scratch canvas re-enables its own hit area */
  /* overflow visible: the bottom roller travels UP above the seam (over the hero) when
     rolled — .slice / .body-art don't clip, and .page's clip is at the column edges. */
}

.pp-unroll__piece {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* The reveal is a fixed CLIP box (overflow:hidden) spanning the overlap-top down to the
   bottom-roller rest centre; js/unroll.js grows the window with scaleY(s). Its top/height %
   are inlined by build.cjs. Default (unarmed, s implied 1) = fully open. */
.pp-unroll__reveal {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  transform-origin: 50% 0%; /* pivot at the clip-box top (the overlap top) */
  backface-visibility: hidden;
  /* top / height inlined by build.cjs (canvas geometry) */
}

/* Counter-wrapper: reproduces the old slice-0 reveal box (so every child keeps its baked %)
   and counter-scales scaleY(1/s) about the same pivot, keeping content undistorted while the
   parent's clip window expands. Its top / height / transform-origin are inlined by build.cjs. */
.pp-unroll__reveal-inner {
  position: absolute;
  left: 0;
  right: 0;
  backface-visibility: hidden;
}

/* the moving bottom roller pivots/translates on the compositor (JS sets translate3d). */
.pp-unroll__roller {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

/* Scratch canvas stays inert until the scroll is essentially fully open (it is clipped
   before that anyway; this guards against a clipped-but-hittable edge intercepting a tap).
   Gated on html.unroll-armed so a no-JS / reduced-motion visitor keeps the normal canvas. */
html.unroll-armed .pp-unroll:not(.is-open) .pp-scratch-canvas {
  pointer-events: none;
}

/* Reduced motion: force the resting unrolled state even if something armed it (identity
   transforms => the reveal clip sits at the roller rest centre, i.e. fully open). */
@media (prefers-reduced-motion: reduce) {
  .pp-unroll__reveal,
  .pp-unroll__reveal-inner {
    transform: none !important;
    will-change: auto !important;
  }
  .pp-unroll__roller {
    transform: none !important;
    will-change: auto !important;
  }
}