/* ----------------------------------------------------------------
	Hover image reveal: transition states

	Companion to assets/js/features/hover-reveal.js. The reference drives
	the reveal from JavaScript (GreenSock), setting opacity and the two
	opposing wipe transforms per frame; the bundled behaviour toggles an
	`is-visible` class instead, so the states it toggles are declared here.

	Deliberately geometry-free: the layer's width/height/radius belong to
	the design that uses it (each demo stylesheet sizes `.hover-reveal`
	itself), so this file never fights a design for the box.
-----------------------------------------------------------------*/

.hover-reveal {
	transition: opacity .2s ease-out;
}

.hover-reveal.is-visible {
	opacity: 1;
}

.hover-reveal__inner,
.hover-reveal__img {
	transition: transform .2s ease-out;
}

.hover-reveal__inner {
	overflow: hidden;
	transform: translate3d(-100%, 0, 0);
}

.hover-reveal__img {
	transform: translate3d(100%, 0, 0);
}

.hover-reveal.is-visible .hover-reveal__inner,
.hover-reveal.is-visible .hover-reveal__img {
	transform: translate3d(0, 0, 0);
}