/* ---------- collage materials from Angie's own asset sheets (images/Assets) ----------
   1. kraft tape   2. handmade paper surfaces
   Every page links this file. Paths are written from shared/, and every stylesheet that uses
   these variables lives one folder down too (css/, shared/), so ../images/ works everywhere. */

/* 1. Kraft tape: 8 torn strips. A taped element picks a strip + angle; neighbors differ.
   Use in a rule:  background:var(--kt) center/100% 100% no-repeat; aspect-ratio:var(--kt-ar);
                   opacity:var(--kt-o); transform:translateY(-50%) rotate(var(--kt-r)) */
:root{
  --kt-1:url(../images/tape/kraft-1.webp); --kt-2:url(../images/tape/kraft-2.webp);
  --kt-3:url(../images/tape/kraft-3.webp); --kt-4:url(../images/tape/kraft-4.webp);
  --kt-5:url(../images/tape/kraft-5.webp); --kt-6:url(../images/tape/kraft-6.webp);
  --kt-7:url(../images/tape/kraft-7.webp); --kt-8:url(../images/tape/kraft-8.webp);
  --kt:var(--kt-1); --kt-ar:3.51; --kt-r:-6deg; --kt-o:.88;
}
/* strip + angle by position, so no two neighbors match (angles −12° to +12°, opacity .85–.9) */
.kt1{--kt:var(--kt-1);--kt-ar:3.51;--kt-r:-6deg;--kt-o:.88}
.kt2{--kt:var(--kt-4);--kt-ar:3.61;--kt-r:8deg;--kt-o:.86}
.kt3{--kt:var(--kt-6);--kt-ar:5.42;--kt-r:-11deg;--kt-o:.9}
.kt4{--kt:var(--kt-7);--kt-ar:2.74;--kt-r:3deg;--kt-o:.87}
.kt5{--kt:var(--kt-3);--kt-ar:8.13;--kt-r:-3deg;--kt-o:.9}
.kt6{--kt:var(--kt-5);--kt-ar:4;--kt-r:11deg;--kt-o:.86}
.kt7{--kt:var(--kt-8);--kt-ar:3.06;--kt-r:-9deg;--kt-o:.88}
.kt8{--kt:var(--kt-2);--kt-ar:3.88;--kt-r:5deg;--kt-o:.85}
:is(.taped,.coupon,.sheet,.piece.lead,.tape):nth-child(8n+1), li:nth-child(8n+1) > .taped, .series:nth-of-type(4n+1) .lead{--kt:var(--kt-1);--kt-ar:3.51;--kt-r:-6deg;--kt-o:.88}
:is(.taped,.coupon,.sheet,.piece.lead,.tape):nth-child(8n+2), li:nth-child(8n+2) > .taped, .series:nth-of-type(4n+2) .lead{--kt:var(--kt-4);--kt-ar:3.61;--kt-r:8deg;--kt-o:.86}
:is(.taped,.coupon,.sheet,.piece.lead,.tape):nth-child(8n+3), li:nth-child(8n+3) > .taped, .series:nth-of-type(4n+3) .lead{--kt:var(--kt-6);--kt-ar:5.42;--kt-r:-11deg;--kt-o:.9}
:is(.taped,.coupon,.sheet,.piece.lead,.tape):nth-child(8n+4), li:nth-child(8n+4) > .taped, .series:nth-of-type(4n+4) .lead{--kt:var(--kt-7);--kt-ar:2.74;--kt-r:3deg;--kt-o:.87}
:is(.taped,.coupon,.sheet,.piece.lead,.tape):nth-child(8n+5), li:nth-child(8n+5) > .taped{--kt:var(--kt-3);--kt-ar:8.13;--kt-r:-3deg;--kt-o:.9}
:is(.taped,.coupon,.sheet,.piece.lead,.tape):nth-child(8n+6), li:nth-child(8n+6) > .taped{--kt:var(--kt-5);--kt-ar:4;--kt-r:11deg;--kt-o:.86}
:is(.taped,.coupon,.sheet,.piece.lead,.tape):nth-child(8n+7), li:nth-child(8n+7) > .taped{--kt:var(--kt-8);--kt-ar:3.06;--kt-r:-9deg;--kt-o:.88}
:is(.taped,.coupon,.sheet,.piece.lead,.tape):nth-child(8n+8), li:nth-child(8n+8) > .taped{--kt:var(--kt-2);--kt-ar:3.88;--kt-r:5deg;--kt-o:.85}

/* 2. Handmade paper (IMG_1172): the surface of paper-card elements, never the page background.
   A wash of paper-card cream (80%, rose 84%) sits on top so even ink-soft and raspberry text stay above 4.5:1 (checked over 99.5% of the paper). */
:root{
  --paper-cream-img:url(../images/collage/paper-cream.webp);
  --paper-rose-img:url(../images/collage/paper-rose.webp);
  --paper-tex:linear-gradient(rgba(251,246,238,.8),rgba(251,246,238,.8)),var(--paper-cream-img) center/cover;
  --paper-tex-rose:linear-gradient(rgba(251,246,238,.84),rgba(251,246,238,.84)),var(--paper-rose-img) center/cover;
  --paper-torn-cream:url(../images/collage/paper-cream-torn.webp);
  --paper-torn-rose:url(../images/collage/paper-rose-torn.webp);
}

/* torn note with a paper clip (IMG_1196), drawn with border-image so the clip and the torn edge
   keep their shape at any box size; the plain middle of the note stretches. */
.note-paper.note-paper.note-paper{border-style:solid;border-color:transparent;
  border-image:url(../images/collage/note-clip.webp) 150 140 62 30 fill / 75px 70px 31px 15px / 0 stretch;
  background:none;box-shadow:none;filter:drop-shadow(0 3px 4px rgba(62,39,35,.22))}

/* small decorative cut-outs: aria-hidden, never over text, drift in once (still under reduced motion) */
.cdeco{display:block;pointer-events:none;user-select:none}
.cdeco img{display:block;width:100%;height:auto}
.anim .cdeco:not(.on){opacity:0;transform:translateY(10px) rotate(var(--cr,0deg))}
.anim .cdeco.on{opacity:1;transform:rotate(var(--cr,0deg));transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.cdeco{transform:rotate(var(--cr,0deg))}