/**
 * TENSUNG product gallery: a cushioned crossfade between shots, and a lens
 * magnifier over the stage.
 *
 * Two house rules apply. Motion is transform and opacity only, and it collapses
 * under prefers-reduced-motion. And nothing the buyer needs sits behind hover:
 * the magnifier is an enhancement for a mouse, gated on (hover: hover) and
 * (pointer: fine) in script, so on a phone it simply does not exist and the
 * photograph is unchanged.
 *
 * The stage owns the square now. The <img> used to, through aspect-ratio, which
 * cannot survive two stacked layers - the second would add a second square
 * below the first for the frame before it is positioned.
 */

body .tensung-products-page .tensung-pdp-gallery {
	position: relative;
}

body .tensung-products-page .tensung-pdp-stage {
	position: relative;
	aspect-ratio: 1 / 1;
	transition: background-color .34s cubic-bezier( .4, 0, .2, 1 );
}

body .tensung-products-page .tensung-pdp-stage img.ts-pdp-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: opacity .34s cubic-bezier( .4, 0, .2, 1 ), transform .34s cubic-bezier( .4, 0, .2, 1 );
}

/* Fit is per layer, because the two layers disagree during a switch: a fitted
   catalogue sheet can be arriving over a cropped model shot. */
body .tensung-products-page .tensung-pdp-stage img.ts-pdp-layer.is-fit {
	object-fit: contain;
}

/* The outgoing shot fades at rest; the incoming one settles the last 1.5% of
   its scale as it arrives. Both moving would read as a bounce, not a cushion. */
body .tensung-products-page .tensung-pdp-stage img.ts-pdp-layer.is-hidden {
	opacity: 0;
}

body .tensung-products-page .tensung-pdp-stage img.ts-pdp-layer.is-arriving {
	transform: scale( 1.015 );
}

/* Thumbnails. The active one was already marked by border colour; give the
   press a little travel so a click feels answered before the stage finishes. */
body .tensung-products-page .tensung-pdp-thumb {
	transition: border-color .18s ease, transform .18s cubic-bezier( .4, 0, .2, 1 );
}

body .tensung-products-page .tensung-pdp-thumb:active {
	transform: scale( .96 );
}

body .tensung-products-page .tensung-pdp-thumb img {
	transition: opacity .18s ease;
}

body .tensung-products-page .tensung-pdp-thumb:not( .is-active ) img {
	opacity: .82;
}

body .tensung-products-page .tensung-pdp-thumb:hover img,
body .tensung-products-page .tensung-pdp-thumb.is-active img {
	opacity: 1;
}

body .tensung-products-page .tensung-pdp-thumb:focus-visible {
	outline: 2px solid var( --ts-jade );
	outline-offset: 2px;
}

/* ---- Magnifier ---------------------------------------------------------- */

/* The lens lives inside the stage, so the stage's own overflow clips it at the
   edges. The panel cannot: the stage is overflow:hidden, so the panel is a
   child of the gallery column and paints over the spec column beside it. */

body .tensung-products-page .tensung-pdp-stage.ts-pdp-zoomable {
	cursor: zoom-in;
}

body .tensung-products-page .ts-pdp-lens {
	position: absolute;
	top: 0;
	left: 0;
	border: 1px solid var( --ts-jade );
	background: rgba( 255, 255, 255, .18 );
	border-radius: 3px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .16s ease;
	z-index: 3;
}

/* Everything outside the lens dims, so the eye is told what is being read.
   A spread that large is cheaper than a second overlay element and cannot
   fall out of sync with the lens it belongs to. */
body .tensung-products-page .ts-pdp-lens::after {
	content: "";
	position: absolute;
	inset: -1px;
	box-shadow: 0 0 0 9999px rgba( 18, 19, 18, .13 );
	border-radius: 3px;
}

body .tensung-products-page .ts-pdp-zoom {
	position: absolute;
	top: 0;
	left: 0;
	border: 1px solid var( --ts-line-soft );
	border-radius: 6px;
	background-color: #fff;
	background-repeat: no-repeat;
	box-shadow: 0 18px 44px -20px rgba( 22, 33, 29, .42 );
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
	z-index: 40;
}

body .tensung-products-page .tensung-pdp-gallery.is-zooming .ts-pdp-lens,
body .tensung-products-page .tensung-pdp-gallery.is-zooming .ts-pdp-zoom {
	opacity: 1;
}

/* A corner caption naming the magnification, in the mono face the design
   reserves for specification and utility labels. */
body .tensung-products-page .ts-pdp-zoom-note {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 3px 7px;
	border-radius: 3px;
	background: rgba( 18, 19, 18, .72 );
	color: #fff;
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: .04em;
}

@media ( prefers-reduced-motion: reduce ) {
	body .tensung-products-page .tensung-pdp-stage,
	body .tensung-products-page .tensung-pdp-stage img.ts-pdp-layer,
	body .tensung-products-page .tensung-pdp-thumb,
	body .tensung-products-page .tensung-pdp-thumb img,
	body .tensung-products-page .ts-pdp-lens,
	body .tensung-products-page .ts-pdp-zoom {
		transition-duration: .01ms;
	}

	body .tensung-products-page .tensung-pdp-stage img.ts-pdp-layer.is-arriving,
	body .tensung-products-page .tensung-pdp-thumb:active {
		transform: none;
	}
}