/* ICS hover paper (CSS only). Class ics-hover-paper on a media wrapper (its direct children = image, overlay, play icon).
   On hover / focus-within / active: children move up-left 8px (220ms ease-out); a halftone paper layer shows behind, offset down-right, torn edge (mask a/b/c by nth-child), thin deckle rim (::before).
   Layout unchanged: pseudos absolute, transform/opacity only. Colour modifiers: ics-hover-paper--yellow | --blue (default pink).
   Paper = accent tint over var(--neutral-100); dots = accent -700 at 35%, strongest bottom-right (cream fill hides dots toward top-left).
   Touch: hover only under (hover:hover); :active and :focus-within always. prefers-reduced-motion: no transform, paper shows without fade.
   Masks: uploads/ics-torn/torn-mask-{a,b,c}.svg (1000x625, preserveAspectRatio none). Decor literals: 8px shift, 1.5px dot, 5px grid. */
.ics-hover-paper {
	--hp-on: 0;
	--hp-tone: var(--pink-300);
	--hp-dot: var(--pink-700);
	--hp-paper: var(--neutral-100);
	--hp-dot-alpha: 35%;
	--hp-dot-r: 0.75px;
	--hp-grid: 5px;
	--hp-shift: 8px;
	position: relative;
	isolation: isolate;
	overflow: visible !important;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
	.ics-hover-paper {
		--hp-paper: color-mix(in srgb, var(--hp-tone) 30%, var(--neutral-100));
	}
}
.ics-hover-paper--yellow { --hp-tone: var(--yellow-300); --hp-dot: var(--yellow-700); }
.ics-hover-paper--blue { --hp-tone: var(--blue-300); --hp-dot: var(--blue-700); }

.ics-hover-paper::before,
.ics-hover-paper::after {
	content: '';
	position: absolute;
	pointer-events: none;
	opacity: var(--hp-on);
	transition: opacity 220ms ease-out;
	-webkit-mask: url(/wp-content/uploads/ics-torn/torn-mask-a-r2.svg) center / 100% 100% no-repeat;
	mask: url(/wp-content/uploads/ics-torn/torn-mask-a-r2.svg) center / 100% 100% no-repeat;
}
/* deckle rim: 1px larger than the paper on every side */
.ics-hover-paper::before {
	z-index: -2;
	inset: 7px -9px -9px 7px;
	background: var(--hp-paper);
	background: color-mix(in srgb, var(--neutral-1000) 22%, var(--hp-paper));
}
/* paper: halftone; fill overlay from bottom-right hides dots toward top-left */
.ics-hover-paper::after {
	z-index: -1;
	inset: 8px -8px -8px 8px;
	background:
		linear-gradient(to top left, transparent 0%, var(--hp-paper) 70%),
		radial-gradient(circle, var(--hp-dot) var(--hp-dot-r), transparent calc(var(--hp-dot-r) + 0.5px)) 0 0 / var(--hp-grid) var(--hp-grid),
		var(--hp-paper);
	background:
		linear-gradient(to top left, transparent 0%, var(--hp-paper) 70%),
		radial-gradient(circle, color-mix(in srgb, var(--hp-dot) var(--hp-dot-alpha), transparent) var(--hp-dot-r), transparent calc(var(--hp-dot-r) + 0.5px)) 0 0 / var(--hp-grid) var(--hp-grid),
		var(--hp-paper);
}
.ics-hover-paper:nth-child(3n+2)::before,
.ics-hover-paper:nth-child(3n+2)::after {
	-webkit-mask: url(/wp-content/uploads/ics-torn/torn-mask-b-r2.svg) center / 100% 100% no-repeat;
	mask: url(/wp-content/uploads/ics-torn/torn-mask-b-r2.svg) center / 100% 100% no-repeat;
}
.ics-hover-paper:nth-child(3n+3)::before,
.ics-hover-paper:nth-child(3n+3)::after {
	-webkit-mask: url(/wp-content/uploads/ics-torn/torn-mask-c-r2.svg) center / 100% 100% no-repeat;
	mask: url(/wp-content/uploads/ics-torn/torn-mask-c-r2.svg) center / 100% 100% no-repeat;
}

/* media: moves up-left; --hp-on drives both transform and paper opacity */
.ics-hover-paper > * {
	transform: translate(calc(var(--hp-on) * -1 * var(--hp-shift)), calc(var(--hp-on) * -1 * var(--hp-shift)));
	border-radius: var(--radius-m);
	transition: transform 220ms ease-out;
}

@media (hover: hover) {
	.ics-hover-paper:hover { --hp-on: 0; } /* H101 disabled by owner 2026-11-05 */
}
.ics-hover-paper:focus-within,
.ics-hover-paper:active { --hp-on: 0; } /* H101 disabled */

@media (prefers-reduced-motion: reduce) {
	.ics-hover-paper > * { transform: none; transition: none; }
	.ics-hover-paper::before,
	.ics-hover-paper::after { transition: none; }
}
@media (forced-colors: active) {
	.ics-hover-paper::before,
	.ics-hover-paper::after { display: none; }
}
@media print {
	.ics-hover-paper::before,
	.ics-hover-paper::after { display: none; }
	.ics-hover-paper > * { transform: none; }
}