/* Evomeet Masonry Reveal Image - front-end styles */

/* The host container (created by the shortcode/CPT, or an existing
   Divi Section/Row/Module/block augmented in place by the class-hook
   scanner). position:relative gives the absolutely positioned background
   layer below a containing block. isolation:isolate forces this element
   to establish its OWN stacking context - without it, position:relative
   with no explicit z-index does NOT create one, so the z-index:-1
   background layer escapes to the nearest ancestor that does (often much
   further up the page), painting behind that ancestor's contents instead
   of just behind this element's own content - which on a real page with
   a themed background (a Divi Section's own background-image/gradient,
   for instance) means the background layer ends up hidden behind that
   same background it was meant to replace. */
.emari-wrapper {
	position: relative;
	isolation: isolate;
}

.emari-wrapper > .emari-bg-layer {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

/* The "ghost" backdrop: the same image, always fully visible, brightened
   and desaturated almost to white. It is what shows through the gaps
   before a tile has arrived, and is left in place (not hidden) once the
   reveal finishes, since the now-opaque tiles tile the container edge to
   edge and simply paint over it. */
.emari-bg-layer .emari-source-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: none;
}

.emari-wrapper.emari-ready .emari-source-img {
	filter: brightness(var(--e-ghost-brightness, 1.6)) saturate(var(--e-ghost-saturate, 0.12));
}

.emari-bg-layer .emari-tiles,
.emari-bg-layer .emari-lines {
	position: absolute;
	inset: 0;
}

/* Recreated from a container's own native background-image when the
   class-hook integration reused it (a gradient overlay kept alongside the
   photo, for instance). Placed after .emari-lines in the DOM so it paints
   on top of everything within .emari-bg-layer's own stacking context. */
.emari-bg-layer .emari-gradient-overlay {
	position: absolute;
	inset: 0;
}

/* Before JS initializes, the plain <img> shows normally as a CSS-cover
   background (progressive enhancement / no-JS fallback); tiles/lines stay
   invisible/empty. */
.emari-wrapper:not(.emari-ready) .emari-tiles,
.emari-wrapper:not(.emari-ready) .emari-lines {
	display: none;
}

.emari-wrapper.emari-static .emari-source-img {
	filter: none;
}

.emari-wrapper.emari-static .emari-tiles,
.emari-wrapper.emari-static .emari-lines {
	display: none;
}

/* One colour fragment of the final image. Starts translated fully outside
   the container (--e-fx/--e-fy, computed per tile toward its nearest
   edge) and slides to its resting position, staggered via --e-delay. */
.emari-tile {
	position: absolute;
	background-repeat: no-repeat;
	will-change: transform;
	transform: translate(var(--e-fx, 0), var(--e-fy, 0));
	transition-property: transform;
	transition-duration: var(--e-dur, 600ms);
	transition-delay: var(--e-delay, 0ms);
	transition-timing-function: var(--e-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.emari-wrapper.is-revealed .emari-tile {
	transform: translate(0, 0);
}

/* One divider line between two tiles. Drawn as a thin bar scaled to 0
   along its own length (--e-line-sx/--e-line-sy set per line, matching
   whichever axis it runs along) from a transform-origin at the edge it
   should visually grow from, then scaled to 1 to "draw" itself in. Once
   every tile has finished sliding into place it fades out on its own
   delay (--e-line-fade-delay), computed in JS as lines-in duration plus
   the longest tile animation. */
.emari-line {
	position: absolute;
	background: var(--e-line-color, #fff);
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
	opacity: 1;
	pointer-events: none;
	will-change: transform, opacity;
	transform: scaleX(var(--e-line-sx, 1)) scaleY(var(--e-line-sy, 1));
	transition-property: transform, opacity;
	transition-duration: var(--e-line-draw-dur, 500ms), var(--e-line-fade-dur, 500ms);
	transition-delay: 0ms, var(--e-line-fade-delay, 1000ms);
	transition-timing-function: ease-out, ease-in;
}

.emari-wrapper.is-revealed .emari-line {
	transform: scaleX(1) scaleY(1);
	opacity: 0;
}

.emari-admin-notice {
	padding: 10px 14px;
	background: #fff8e5;
	border-left: 4px solid #dba617;
	font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
	.emari-tile,
	.emari-line {
		transition: none !important;
	}
}