/* ============================================================
   textures.css
   Riso / letterpress marks cut from the asset sheet into
   /images/Textures. Every file is a transparent PNG, so a mark
   sits over the paper background without a box around it.

   Two ways to use them:

   1. As a decorative mark — an empty element with .tx plus the
      name, inside a position:relative parent:
          <span class="tx tx-arch-sunburst tx-lg tx-behind"></span>

   2. As type decoration — .tx-underline on an inline element
      draws a brush stroke beneath it, .tx-highlight paints a
      rough block behind it.

   The halftone and crosshatch squares are bounded marks with
   fading edges, not seamless tiles. Repeating them shows a
   visible seam, so they are used as discrete accents.
   ============================================================ */

.tx {
    position: absolute;
    pointer-events: none;
    user-select: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ---------- sizes ---------- */
.tx-sm { width: 90px;  height: 90px; }
.tx-md { width: 150px; height: 150px; }
.tx-lg { width: 230px; height: 230px; }
.tx-xl { width: 340px; height: 340px; }

/* Strips and strokes are wide, not square. */
.tx-strip    { width: 280px; height: 100px; }
.tx-strip-lg { width: 460px; height: 150px; }

/* ---------- weight and depth ---------- */
.tx-faint  { opacity: .18; }
.tx-soft   { opacity: .38; }
.tx-strong { opacity: .75; }

/* Decoration must never sit over text or swallow a click. */
.tx-behind { z-index: 0; }
.tx-under  { z-index: -1; }

/* ---------- halftones and grids ---------- */
.tx-halftone-dots-black   { background-image: url("../images/Textures/halftone-dots-black.png"); }
.tx-halftone-dots-red     { background-image: url("../images/Textures/halftone-dots-red.png"); }
.tx-halftone-dots-purple  { background-image: url("../images/Textures/halftone-dots-purple.png"); }
.tx-halftone-gradient     { background-image: url("../images/Textures/halftone-gradient.png"); }
.tx-halftone-square       { background-image: url("../images/Textures/halftone-square-black.png"); }
.tx-grid-fine             { background-image: url("../images/Textures/grid-fine.png"); }
.tx-crosshatch-rough      { background-image: url("../images/Textures/crosshatch-rough.png"); }
.tx-crosshatch-dense      { background-image: url("../images/Textures/crosshatch-dense.png"); }
.tx-crosshatch-purple     { background-image: url("../images/Textures/crosshatch-purple.png"); }
.tx-crosshatch-black      { background-image: url("../images/Textures/crosshatch-black-2.png"); }

/* ---------- torn paper ---------- */
.tx-torn-red     { background-image: url("../images/Textures/torn-strip-red.png"); }
.tx-torn-purple  { background-image: url("../images/Textures/torn-strip-purple.png"); }
.tx-torn-yellow  { background-image: url("../images/Textures/torn-strip-yellow.png"); }
.tx-torn-teal    { background-image: url("../images/Textures/torn-wedge-teal.png"); }
.tx-tab-purple   { background-image: url("../images/Textures/torn-tab-purple.png"); }
.tx-tab-teal     { background-image: url("../images/Textures/torn-tab-teal.png"); }

/* ---------- brush and ink ---------- */
.tx-brush          { background-image: url("../images/Textures/brush-stroke-black.png"); }
.tx-brush-2        { background-image: url("../images/Textures/brush-stroke-black-2.png"); }
.tx-brush-3        { background-image: url("../images/Textures/brush-stroke-black-3.png"); }
.tx-scribble       { background-image: url("../images/Textures/scribble-ellipse-black.png"); }
.tx-scribble-purple{ background-image: url("../images/Textures/scribble-ellipse-purple.png"); }
.tx-circle-brush   { background-image: url("../images/Textures/circle-brush-black.png"); }

/* ---------- blocks and shapes ---------- */
.tx-rect-purple { background-image: url("../images/Textures/rect-rough-purple.png"); }
.tx-rect-pink   { background-image: url("../images/Textures/rect-rough-pink.png"); }
.tx-rect-yellow { background-image: url("../images/Textures/rect-rough-yellow.png"); }
.tx-rect-teal   { background-image: url("../images/Textures/rect-rough-teal.png"); }
.tx-circle-yellow { background-image: url("../images/Textures/circle-yellow.png"); }
.tx-circle-pink   { background-image: url("../images/Textures/circle-pink.png"); }
.tx-arch          { background-image: url("../images/Textures/arch-sunburst.png"); }

/* ============================================================
   Type decoration
   ============================================================ */

/* A brush stroke under a word or phrase. The stroke is stretched
   to the text's own width rather than tiled, so it reads as one
   deliberate mark however long the phrase is. */
.tx-underline {
    position: relative;
    display: inline-block;
    /* The stroke lives inside this padding rather than hanging below the
       element. That way it takes up room in the flow and cannot land on
       whatever follows the heading. */
    padding-bottom: .30em;
}

.tx-underline::after {
    content: "";
    position: absolute;
    left: -3%;
    right: -3%;
    bottom: 0;
    height: .30em;
    background: url("../images/Textures/brush-stroke-black.png") center / 100% 100% no-repeat;
    pointer-events: none;
}

/* A rough block behind inline text. The text keeps its own colour,
   so pick a block that it reads against. */
.tx-highlight {
    position: relative;
    display: inline-block;
    padding: 0 .3em;
}

.tx-highlight::before {
    content: "";
    position: absolute;
    inset: -.12em -.1em -.16em;
    background: url("../images/Textures/rect-rough-yellow.png") center / 100% 100% no-repeat;
    z-index: -1;
    pointer-events: none;
}

.tx-highlight-purple::before { background-image: url("../images/Textures/rect-rough-purple.png"); }
.tx-highlight-pink::before   { background-image: url("../images/Textures/rect-rough-pink.png"); }
.tx-highlight-teal::before   { background-image: url("../images/Textures/rect-rough-teal.png"); }

/* ============================================================
   A torn strip used as a section rule
   ============================================================ */

.tx-rule {
    display: block;
    height: 26px;
    margin: var(--space-xl) 0;
    background: url("../images/Textures/torn-strip-red.png") left center / auto 100% no-repeat;
}

.tx-rule-purple { background-image: url("../images/Textures/torn-strip-purple.png"); }
.tx-rule-yellow { background-image: url("../images/Textures/torn-strip-yellow.png"); }

@media (prefers-reduced-motion: no-preference) {
    /* Nothing animates here — the marks are static by design. */
}