/**
 * ----------------------------------------------------------
 * CYPROS POWER
 * Motion System
 * ----------------------------------------------------------
 */

 :root {
	--motion-fast: 220ms;
	--motion-base: 320ms;
	--motion-slow: 520ms;

	--ease-standard: cubic-bezier(.22, .61, .36, 1);
	--ease-emphasis: cubic-bezier(.16, 1, .3, 1);
}

/* ----------------------------------------------------------
 * BASE REVEAL
 * ----------------------------------------------------------
 */

.motion-ready [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity var(--motion-slow) var(--ease-standard),
		transform var(--motion-slow) var(--ease-emphasis);
	will-change: opacity, transform;
}

/* ----------------------------------------------------------
 * VISIBLE STATE
 * ----------------------------------------------------------
 */

.motion-ready [data-reveal].is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ----------------------------------------------------------
 * STAGGER DELAYS
 * ----------------------------------------------------------
 */

.motion-ready [data-reveal-delay="0"] {
	transition-delay: 0ms;
}

.motion-ready [data-reveal-delay="1"] {
	transition-delay: 70ms;
}

.motion-ready [data-reveal-delay="2"] {
	transition-delay: 140ms;
}

.motion-ready [data-reveal-delay="3"] {
	transition-delay: 210ms;
}

.motion-ready [data-reveal-delay="4"] {
	transition-delay: 280ms;
}

.motion-ready [data-reveal-delay="5"] {
	transition-delay: 350ms;
}

/* ----------------------------------------------------------
 * OPTIONAL DIRECTIONS
 * ----------------------------------------------------------
 */

.motion-ready [data-reveal="left"] {
	transform: translateX(-24px);
}

.motion-ready [data-reveal="right"] {
	transform: translateX(24px);
}

.motion-ready [data-reveal="scale"] {
	transform: scale(.975);
}

.motion-ready [data-reveal="left"].is-visible,
.motion-ready [data-reveal="right"].is-visible {
	transform: translateX(0);
}

.motion-ready [data-reveal="scale"].is-visible {
	transform: scale(1);
}

/* ----------------------------------------------------------
 * HOVER LIFT
 * ----------------------------------------------------------
 */

.hover-lift {
	transition:
		transform var(--motion-fast) var(--ease-standard),
		box-shadow var(--motion-fast) var(--ease-standard);
}

.hover-lift:hover,
.hover-lift:focus-visible {
	transform: translateY(-4px);
}

/* ----------------------------------------------------------
 * IMAGE ZOOM
 * ----------------------------------------------------------
 */

.image-zoom {
	overflow: hidden;
}

.image-zoom img {
	transition: transform 700ms var(--ease-emphasis);
}

.image-zoom:hover img,
.image-zoom:focus-within img {
	transform: scale(1.04);
}

/* ----------------------------------------------------------
 * REDUCED MOTION
 * ----------------------------------------------------------
 */

@media (prefers-reduced-motion: reduce) {
	[data-reveal],
	[data-reveal="left"],
	[data-reveal="right"],
	.motion-ready [data-reveal="scale"] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.hover-lift,
	.image-zoom img {
		transition: none;
	}

	.hover-lift:hover,
	.hover-lift:focus-visible,
	.image-zoom:hover img,
	.image-zoom:focus-within img {
		transform: none;
	}
}