/**
 * Shop Titan — halftone print field.
 * Pairs with assets/tg-halftone.js and patterns/st-hero-halftone.php.
 *
 * The section is an ordinary height and is never pinned. Everything here is
 * either positioning the canvas behind the copy or making sure the section
 * still looks right when the canvas never arrives.
 */

.tg-halftone {
	position: relative;
	overflow: hidden;
}

/* ⚠️ Two classes and two !importants, and both are load-bearing.
   The section is `is-layout-constrained`, and WordPress emits
   `.wp-container-x > :where(:not(.alignleft):not(.alignright):not(.alignfull))
   { max-width: <wideSize>; margin-left: auto !important; margin-right: auto
   !important }` for it. The canvas is a plain child, so it is caught by that
   even though it is absolutely positioned: `max-width` clamps it and the auto
   margins centre it. Measured on the live page before this fix — a 1440px
   section with a 1140px canvas inset 150px from each edge, so the field simply
   stopped short of the section it was supposed to fill.
   The layout CSS is `(0,1,0)` and is printed INLINE in the body, i.e. after any
   enqueued stylesheet, so a single class ties and loses. Hence `.tg-halftone`
   in front for `(0,2,0)`, and `!important` to answer its own. */
.tg-halftone .tg-halftone__canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
	/* The canvas is decoration. Every pointer event belongs to the copy and the
	   CTA sitting over it. */
	pointer-events: none;
}

/* The only job here is stacking. The field runs under the copy deliberately,
   so this just has to sit above the canvas — no scrim, no blur, no panel. */
.tg-halftone__copy {
	position: relative;
	z-index: 1;
}

/* ── Tuning the ink ─────────────────────────────────────────────────────────
   The dots default to the `ti-fg` token mixed most of the way toward `ti-bg`,
   so the field reskins with the palette instead of hardcoding a grey. To set
   it explicitly, per store or per section, declare the custom property — the
   script reads it off the section and it needs no deploy:

     .tg-halftone { --tg-halftone-ink: #dcdcd8; }

   ⚠️ Do not reach for `ti-accent-secondary` here. It is the obvious "grey"
   slug and it is named Grey in the palette, but a user Global Styles post on
   this store redefines it as #3260e9 and the whole field comes out blue. */

/* ── Reduced motion ─────────────────────────────────────────────────────────
   The script already draws a single still frame instead of animating, so the
   field is still there and the section still looks designed. Nothing to hide:
   a halftone that does not move is just a halftone. */

/* ── The ink: On-ink, the palette's light blue (2026-08-13) ─────────────────
   Michael asked for the field to run in the On-ink colour rather than the grey
   it mixed for itself. `--tg-halftone-ink` is the documented override and the
   script uses it verbatim, with no mix toward the background, so this is the
   whole change.

   Kept as the token rather than the hex: On-ink is `ti-fg-alt`, so a store that
   reskins gets its own field for free, and a Global Styles change to that
   colour moves the dots with it. Set on `.tg-halftone` itself rather than on
   one section, because it applies to every field on the site.

   ⚠️ If a store ever sets `ti-fg-alt` to something dark, this needs revisiting:
   the field runs UNDER the copy, and the default mix existed to keep it a pale
   tint. The override skips that safeguard by design.                         */
.tg-halftone {
	--tg-halftone-ink: var(--wp--preset--color--ti-fg-alt);
}

/* ── A mask hook, so a section can shape its own field (2026-08-18) ─────────
   "Soften the top line so it has more of an ombre effect and lighten it a
   little bit around where there's text."

   The canvas fills the section, so its top edge lands exactly on the section
   boundary and reads as a drawn line. A mask fixes both halves of that note at
   once: fade the first stretch to nothing for the ombre, and hold it part-way
   through the band the copy sits in so the type keeps its contrast.

   Per section, because where the text sits is a per-section fact. Default is
   no mask, so every existing field is untouched.                            */
.tg-halftone .tg-halftone__canvas {
	-webkit-mask-image: var( --tg-halftone-mask, none );
	mask-image: var( --tg-halftone-mask, none );
}