/**
 * Term Image block – front-end styles.
 *
 * Mirrors the core post-featured-image stylesheet contract (overlay
 * positioning, dim opacity scale, gradient transparency, image sizing)
 * scoped to this block's classes.
 *
 * @package WpmintyAddon
 */

.wp-block-wpminty-term-image {
	position: relative;
	margin: 0;
}

.wp-block-wpminty-term-image a {
	display: block;
	height: 100%;
}

.wp-block-wpminty-term-image :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	box-sizing: border-box;
}

.wp-block-wpminty-term-image.alignwide img,
.wp-block-wpminty-term-image.alignfull img {
	width: 100%;
}

.wp-block-wpminty-term-image:where(.alignleft, .alignright) {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Overlay (dim / gradient)
   -------------------------------------------------------------------------- */

.wp-block-wpminty-term-image .wp-block-wpminty-term-image__overlay.has-background-dim {
	position: absolute;
	inset: 0;
	background-color: #000;
}

.wp-block-wpminty-term-image .wp-block-wpminty-term-image__overlay.has-background-gradient {
	background-color: transparent;
}

.wp-block-wpminty-term-image .wp-block-wpminty-term-image__overlay.has-background-dim-0 {
	opacity: 0;
}

.wp-block-wpminty-term-image .wp-block-wpminty-term-image__overlay.has-background-dim-10 {
	opacity: 0.1;
}

.wp-block-wpminty-term-image .wp-block-wpminty-term-image__overlay.has-background-dim-20 {
	opacity: 0.2;
}

.wp-block-wpminty-term-image .wp-block-wpminty-term-image__overlay.has-background-dim-30 {
	opacity: 0.3;
}

.wp-block-wpminty-term-image .wp-block-wpminty-term-image__overlay.has-background-dim-40 {
	opacity: 0.4;
}

.wp-block-wpminty-term-image .wp-block-wpminty-term-image__overlay.has-background-dim-50 {
	opacity: 0.5;
}

.wp-block-wpminty-term-image .wp-block-wpminty-term-image__overlay.has-background-dim-60 {
	opacity: 0.6;
}

.wp-block-wpminty-term-image .wp-block-wpminty-term-image__overlay.has-background-dim-70 {
	opacity: 0.7;
}

.wp-block-wpminty-term-image .wp-block-wpminty-term-image__overlay.has-background-dim-80 {
	opacity: 0.8;
}

.wp-block-wpminty-term-image .wp-block-wpminty-term-image__overlay.has-background-dim-90 {
	opacity: 0.9;
}

.wp-block-wpminty-term-image .wp-block-wpminty-term-image__overlay.has-background-dim-100 {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Hover effects (Image Extra parity)

   Pure CSS :hover — zero runtime JS. Modifier classes and the two custom
   properties are emitted by render.php (and mirrored on the editor preview
   figure) only when an effect is selected, so untouched blocks keep core
   markup and no rule below fires.
   -------------------------------------------------------------------------- */

/* Overflow clip: zoom/kenburns scaling and the shine band would spill
   outside the figure box otherwise. The radius variable mirrors the img's
   border-radius so zoomed content clips to the same rounded corners. */
.wp-block-wpminty-term-image[class*="wpminty-term-image-hover-"],
.wp-block-wpminty-term-image[class*="wpminty-term-image-veil-"] {
	overflow: hidden;
	border-radius: var(--wpminty-term-image-radius, 0);
}

/* Transform group. */
.wp-block-wpminty-term-image[class*="wpminty-term-image-hover-"] img {
	transition: transform 0.8s ease;
	will-change: transform;
}

.wp-block-wpminty-term-image.wpminty-term-image-hover-zoom-in:hover img {
	transform: scale(1.08);
}

.wp-block-wpminty-term-image.wpminty-term-image-hover-zoom-out img {
	transform: scale(1.08);
}

.wp-block-wpminty-term-image.wpminty-term-image-hover-zoom-out:hover img {
	transform: scale(1);
}

/* Ken Burns: slower cinematic camera move — the transition override lives
   on the img (non-hover) so both hover-in and hover-out animate slowly. */
.wp-block-wpminty-term-image.wpminty-term-image-hover-kenburns img {
	transition: transform 2.2s ease-in-out;
}

.wp-block-wpminty-term-image.wpminty-term-image-hover-kenburns:hover img {
	transform: scale(1.15) translate(-4%, -2%);
}

/* Layer group: overlay — a colour veil fading in above the image (and
   above the static dim/gradient overlay span, hence z-index). */
.wp-block-wpminty-term-image.wpminty-term-image-veil-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: var(--wpminty-term-image-overlay, rgba(0, 0, 0, 0.4));
	opacity: 0;
	transition: opacity 0.8s ease;
	pointer-events: none;
}

.wp-block-wpminty-term-image.wpminty-term-image-veil-overlay:hover::after {
	opacity: 1;
}

/* Layer group: shine — a one-shot diagonal bloom burst that fades itself
   out (the `forwards` fill holds the invisible end frame while hovered). */
@keyframes wpminty-term-image-shine-burst {
	0% {
		opacity: 0.3;
		transform: translate(-50%, -50%) rotate(-45deg) scaleY(0);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) rotate(-45deg) scaleY(1);
	}
}

.wp-block-wpminty-term-image.wpminty-term-image-veil-shine::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: 200%;
	height: 250%;
	background: #fff;
	opacity: 0;
	transform: translate(-50%, -50%) rotate(-45deg) scaleY(0);
	pointer-events: none;
}

.wp-block-wpminty-term-image.wpminty-term-image-veil-shine:hover::before {
	animation: wpminty-term-image-shine-burst 0.6s linear forwards;
}