/**
 * The ghost, printed on the garment, on hover.
 *
 * Every category tile on the home page is a Cover block whose background image
 * is an AS Colour model shot. Hovering one prints the ThreadGhost mark onto the
 * garment. It is the fastest way to say what the store does: you did not come
 * here for a blank, you came here to put something on it.
 *
 * Nothing here needs a second photograph and nothing here edits page content.
 * The mark is a theme asset drawn on a pseudo-element, and each garment gets
 * its own placement through four custom properties, keyed off the link the tile
 * already carries. Retuning a category is four numbers, not a new render.
 *
 *   --tg-print-x       across the tile, from the left
 *   --tg-print-y       down the tile, from the top
 *   --tg-print-w       width of the mark as a share of the tile
 *   --tg-print-tilt    rotation, to sit with the garment rather than the frame
 *
 * The default placement is chest-centre on a straight-on model shot, which is
 * most of them. The overrides below are the garments that are not.
 *
 * A note on the blend: the mark is a flat white PNG, and `screen` over black
 * fabric returns white. Holding it under full opacity is what lets the folds
 * and the fabric's own highlights read through the ink, so it looks printed
 * rather than pasted. Raise the opacity and it turns into a sticker.
 */

.st-cat-card {
	--tg-print-x: 50%;
	--tg-print-y: 44%;
	--tg-print-w: 26%;
	--tg-print-tilt: 0deg;

	position: relative;
	isolation: isolate; /* keeps the blend off whatever sits behind the card */
}

.st-cat-card::after {
	content: "";
	position: absolute;
	left: var( --tg-print-x );
	top: var( --tg-print-y );
	width: var( --tg-print-w );
	aspect-ratio: 600 / 708; /* the mark's own proportions */
	transform: translate( -50%, -50% ) rotate( var( --tg-print-tilt ) ) scale( 0.88 );
	background-image: var( --tg-print-art, url( "ghost-mark-white.png" ) );
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	mix-blend-mode: screen;
	opacity: 0;
	pointer-events: none;
	z-index: 1;
	transition:
		opacity 240ms ease-out,
		transform 380ms cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

/* The label sits in the same stacking context and must stay on top of the ink. */
.st-cat-card .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.st-cat-card:hover::after,
.st-cat-card:focus-within::after {
	opacity: 0.86;
	transform: translate( -50%, -50% ) rotate( var( --tg-print-tilt ) ) scale( 1 );
}

/* The tile itself leans in a little. Transform only, so the grid never reflows. */
.st-cat-card .wp-block-cover__image-background {
	transition: transform 520ms cubic-bezier( 0.2, 0.6, 0.2, 1 );
}

.st-cat-card:hover .wp-block-cover__image-background,
.st-cat-card:focus-within .wp-block-cover__image-background {
	transform: scale( 1.04 );
}

/*
 * Per-garment placement.
 *
 * Keyed on the archive link rather than a class, so these work against the page
 * content exactly as it is stored today. Adding a category with no rule here
 * still prints, at the chest-centre default.
 */

/* A cap is small in frame and worn on the head, so the mark goes on the crown
   and rides the curve. */
.st-cat-card:has( a[href*="/headwear/" ] ) {
	--tg-print-x: 50%;
	--tg-print-y: 33%;
	--tg-print-w: 15%;
	--tg-print-tilt: -3deg;
}

/* Hoodies carry a pouch and a hood: the printable field is the upper chest,
   above where the drawcords cross. */
.st-cat-card:has( a[href*="/hoodies" ] ) {
	--tg-print-y: 38%;
	--tg-print-w: 23%;
}

.st-cat-card:has( a[href*="/sweaters/" ] ) {
	--tg-print-y: 41%;
	--tg-print-w: 24%;
}

/* The jackets tile is an apron, not an open jacket. Its printable field is the
   bib, which is centred and high. Left chest, the right answer for a zip-front
   jacket, put the mark on the apron's strap. Tuned against the photograph that
   is actually in the tile. */
.st-cat-card:has( a[href*="/jackets/" ] ) {
	--tg-print-x: 50%;
	--tg-print-y: 33%;
	--tg-print-w: 15%;
}

.st-cat-card:has( a[href*="/polos/" ] ) {
	--tg-print-x: 40%;
	--tg-print-y: 36%;
	--tg-print-w: 11%;
}

/* A tank's field is narrower than a tee's, so the mark comes down in size
   rather than running off the armhole. */
.st-cat-card:has( a[href*="/singlets" ] ) {
	--tg-print-y: 41%;
	--tg-print-w: 17%;
}

/* Activewear is a pair of shorts. A chest placement has nothing to sit on, so
   the mark goes where it goes on real shorts: small, on one leg. */
.st-cat-card:has( a[href*="/activewear/" ] ) {
	--tg-print-x: 38%;
	--tg-print-y: 52%;
	--tg-print-w: 10%;
}

/* Kids sizing is small in frame; scaling the mark with the garment is what
   keeps it reading as the same print. */
.st-cat-card:has( a[href*="/kids/" ] ) {
	--tg-print-y: 43%;
	--tg-print-w: 21%;
}

.st-cat-card:has( a[href*="/long-sleeves/" ] ) {
	--tg-print-y: 43%;
	--tg-print-w: 24%;
}

/* A tote is printed on the face of the bag, which sits low and centre. */
.st-cat-card:has( a[href*="/bags/" ] ) {
	--tg-print-x: 50%;
	--tg-print-y: 52%;
	--tg-print-w: 22%;
	--tg-print-tilt: 0deg;
}

/*
 * Touch has no hover, and a mark that only ever appears under a pointer would
 * be invisible to most of the traffic. On a coarse pointer the ink is simply
 * on, quiet and permanent, so the phone still shows what the store does.
 */
@media ( hover: none ), ( pointer: coarse ) {
	.st-cat-card::after {
		opacity: 0.7;
		transform: translate( -50%, -50% ) rotate( var( --tg-print-tilt ) ) scale( 1 );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.st-cat-card::after,
	.st-cat-card .wp-block-cover__image-background {
		transition: none;
	}

	.st-cat-card:hover::after,
	.st-cat-card:focus-within::after {
		transform: translate( -50%, -50% ) rotate( var( --tg-print-tilt ) );
	}

	.st-cat-card:hover .wp-block-cover__image-background,
	.st-cat-card:focus-within .wp-block-cover__image-background {
		transform: none;
	}
}

/*
 * `:has()` is what keys every placement above. Where it is unsupported the
 * defaults still print at chest-centre, which is right for the tees, the
 * fleece and the long sleeves. Nothing disappears.
 */