/* ==========================================================================
   paper.css — surface imperfections. Generated by tools/make-paper.py;
   re-run that script rather than editing the data URIs by hand.
   ========================================================================== */

:root {
  --crumple-1: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27420%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.009%200.014%27%20numOctaves%3D%274%27%20seed%3D%273%27%20result%3D%27n%27%2F%3E%3CfeDiffuseLighting%20in%3D%27n%27%20lighting-color%3D%27%23ffffff%27%20surfaceScale%3D%271.4%27%20diffuseConstant%3D%271%27%3E%3CfeDistantLight%20azimuth%3D%27225%27%20elevation%3D%2760%27%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3Crect%20width%3D%27420%27%20height%3D%27420%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  --crumple-2: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27420%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.016%200.011%27%20numOctaves%3D%275%27%20seed%3D%2717%27%20result%3D%27n%27%2F%3E%3CfeDiffuseLighting%20in%3D%27n%27%20lighting-color%3D%27%23ffffff%27%20surfaceScale%3D%272.0%27%20diffuseConstant%3D%271%27%3E%3CfeDistantLight%20azimuth%3D%27200%27%20elevation%3D%2752%27%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3Crect%20width%3D%27420%27%20height%3D%27420%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  --crumple-3: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27420%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.022%200.026%27%20numOctaves%3D%275%27%20seed%3D%2741%27%20result%3D%27n%27%2F%3E%3CfeDiffuseLighting%20in%3D%27n%27%20lighting-color%3D%27%23ffffff%27%20surfaceScale%3D%272.6%27%20diffuseConstant%3D%271%27%3E%3CfeDistantLight%20azimuth%3D%27250%27%20elevation%3D%2746%27%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3Crect%20width%3D%27420%27%20height%3D%27420%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  --crumple-4: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27420%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.006%200.010%27%20numOctaves%3D%273%27%20seed%3D%2788%27%20result%3D%27n%27%2F%3E%3CfeDiffuseLighting%20in%3D%27n%27%20lighting-color%3D%27%23ffffff%27%20surfaceScale%3D%271.1%27%20diffuseConstant%3D%271%27%3E%3CfeDistantLight%20azimuth%3D%27215%27%20elevation%3D%2766%27%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3Crect%20width%3D%27420%27%20height%3D%27420%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27420%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27f%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%200.35%27%20numOctaves%3D%272%27%20seed%3D%275%27%20result%3D%27n%27%2F%3E%3CfeDiffuseLighting%20in%3D%27n%27%20lighting-color%3D%27%23ffffff%27%20surfaceScale%3D%270.5%27%20diffuseConstant%3D%271%27%3E%3CfeDistantLight%20azimuth%3D%27180%27%20elevation%3D%2770%27%2F%3E%3C%2FfeDiffuseLighting%3E%3C%2Ffilter%3E%3Crect%20width%3D%27420%27%20height%3D%27420%27%20filter%3D%27url%28%23f%29%27%2F%3E%3C%2Fsvg%3E");
}

/* --------------------------------------------------------------------------
   Surface imperfections.

   Two layers sit above the card's content, because on a real clipping the
   damage is on the sheet and crosses whatever is printed on it:
     .paper::before  relief — crumple and creases, blended `overlay` so it
                     both darkens and lightens, which is what a fold does
     .paper::after   ageing — edge-yellowing and fibre, blended `multiply`,
                     since paper only ever darkens as it ages
   Every knob below is set per card from a seed in js/app.js, so no two
   clippings are damaged the same way.
   -------------------------------------------------------------------------- */

.paper::before,
.paper::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}

/* ---- relief: crumple + fold lines ---- */
.paper::before {
  mix-blend-mode: overlay;
  opacity: var(--relief-a, 0.5);
  background-image:
    /* first fold */
    linear-gradient(var(--crease-1-ang, 88deg),
      transparent calc(var(--crease-1-pos, 38%) - 3.4%),
      rgba(0, 0, 0, calc(0.26 * var(--crease-1-a, 0))) calc(var(--crease-1-pos, 38%) - 0.3%),
      rgba(255, 255, 255, calc(0.44 * var(--crease-1-a, 0))) calc(var(--crease-1-pos, 38%) + 0.3%),
      transparent calc(var(--crease-1-pos, 38%) + 3.4%)),
    /* second fold */
    linear-gradient(var(--crease-2-ang, 4deg),
      transparent calc(var(--crease-2-pos, 66%) - 2.8%),
      rgba(0, 0, 0, calc(0.22 * var(--crease-2-a, 0))) calc(var(--crease-2-pos, 66%) - 0.25%),
      rgba(255, 255, 255, calc(0.36 * var(--crease-2-a, 0))) calc(var(--crease-2-pos, 66%) + 0.25%),
      transparent calc(var(--crease-2-pos, 66%) + 2.8%)),
    /* the crumpled surface itself */
    var(--crumple, none);
  background-size: 100% 100%, 100% 100%, cover;
}

/* ---- ageing: edge-yellowing + fibre ---- */
.paper::after {
  mix-blend-mode: multiply;
  background-image:
    /* paper darkens from the edges inward as it ages */
    radial-gradient(ellipse 128% 122% at 50% 48%,
      transparent 50%, rgba(128, 96, 48, var(--age, 0.05)) 100%),
    /* and its own fibre */
    var(--fibre, none);
  background-size: 100% 100%, 260px 260px;
  opacity: var(--age-layer-a, 0.9);
}

/* ---- a folded-over corner ---- */
.dogear {
  position: absolute; z-index: 5; pointer-events: none;
  width: var(--dogear-size, 42px); height: var(--dogear-size, 42px);
  top: -1px; right: -1px;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  /* the back of the sheet, with the fold shadowed along the diagonal */
  background:
    linear-gradient(45deg,
      rgba(0, 0, 0, 0.30) 0 2px,
      color-mix(in srgb, var(--paper, #f3efe4) 90%, #000) 2px 60%,
      color-mix(in srgb, var(--paper, #f3efe4) 98%, #fff) 100%);
  filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, 0.35));
}
.dogear.dogear-bl {
  top: auto; right: auto; bottom: -1px; left: -1px;
  clip-path: polygon(0 100%, 0 0, 100% 100%);
  background: linear-gradient(225deg,
      rgba(0, 0, 0, 0.30) 0 2px,
      color-mix(in srgb, var(--paper, #f3efe4) 90%, #000) 2px 60%,
      color-mix(in srgb, var(--paper, #f3efe4) 98%, #fff) 100%);
  filter: drop-shadow(2px -2px 2px rgba(0, 0, 0, 0.35));
}

/* ---- scuffs: short pale abrasions where the surface has rubbed ---- */
.scuff {
  position: absolute; pointer-events: none; z-index: 4;
  left: var(--scuff-x, 20%); top: var(--scuff-y, 30%);
  width: var(--scuff-w, 90px); height: 2px;
  transform: rotate(var(--scuff-ang, -12deg));
  background: linear-gradient(90deg,
    transparent, rgba(255, 255, 255, 0.55) 22%, rgba(255, 255, 255, 0.22) 60%, transparent);
  mix-blend-mode: overlay;
  filter: blur(0.6px);
}

/* the shadow varies with how much each clipping lifts off the table */
.cut {
  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45))
    drop-shadow(var(--lift-x, 0px) var(--lift-y, 16px) var(--lift-b, 24px) rgba(0, 0, 0, 0.55));
}
.cut.is-focus {
  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5))
    drop-shadow(calc(var(--lift-x, 0px) * 1.6) calc(var(--lift-y, 16px) * 2)
                calc(var(--lift-b, 24px) * 2) rgba(0, 0, 0, 0.66));
}

@media (prefers-reduced-motion: no-preference) {
  .paper::before, .paper::after { transition: opacity 0.4s ease; }
}