/* ==========================================================================
   Premium image reveal — progressive enhancement (visible without JS)
   ========================================================================== */

.image-reveal {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: #f0f0f0;
}

.image-reveal img,
.image-reveal video {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Fallback — visible without JavaScript */
.no-js .image-reveal,
html:not(.js) .image-reveal,
.image-reveal.fallback-visible {
	opacity: 1;
	clip-path: inset(0 0 0 0);
	transform: none;
}

.no-js .image-reveal img,
.no-js .image-reveal video,
html:not(.js) .image-reveal img,
html:not(.js) .image-reveal video,
.image-reveal.fallback-visible img,
.image-reveal.fallback-visible video {
	opacity: 1;
	transform: none;
}

/* Hidden initial state — only when JS is active */
.js .image-reveal:not(.is-visible) {
	opacity: 0;
	clip-path: inset(100% 0 0 0);
	transform: translateY(40px);
	transition:
		opacity 0.9s ease,
		clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--reveal-delay, 0s);
}

.js .image-reveal:not(.is-visible) img,
.js .image-reveal:not(.is-visible) video {
	transform: scale(1.08);
	transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--reveal-delay, 0s);
}

.js .image-reveal.is-visible {
	opacity: 1;
	clip-path: inset(0 0 0 0);
	transform: translateY(0);
}

.js .image-reveal.is-visible img,
.js .image-reveal.is-visible video {
	transform: scale(1);
}

/* Portfolio cards — fixed media height from parent */
.wm-portfolio-item__image .image-reveal,
.wm-project-card__media .image-reveal {
	height: 100%;
}

.wm-portfolio-item__image .image-reveal img,
.wm-portfolio-item__image .image-reveal video,
.wm-project-card__media .image-reveal img,
.wm-project-card__media .image-reveal video {
	height: 100%;
}

/* Case study editorial images — natural height */
.wm-rad-images__item .image-reveal,
.wm-rad-final-images__item .image-reveal {
	border-radius: 12px;
	border: 1px solid rgba(15, 17, 21, 0.08);
}

.wm-rad-images__item .image-reveal img,
.wm-rad-final-images__item .image-reveal img {
	height: auto;
}

@media (max-width: 767px) {
	.js .image-reveal:not(.is-visible) {
		transform: translateY(24px);
	}

	.js .image-reveal:not(.is-visible) img,
	.js .image-reveal:not(.is-visible) video {
		transform: scale(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
	.js .image-reveal,
	.js .image-reveal img,
	.js .image-reveal video {
		opacity: 1 !important;
		clip-path: inset(0 0 0 0) !important;
		transform: none !important;
		transition: none !important;
	}
}