/**
 * --------------------------------------------------------
 * WP Custom Gallery
 * Animations
 * --------------------------------------------------------
 */

/*----------------------------------------------------------
Transition Variables
----------------------------------------------------------*/

:root {

	--wpcg-duration-fast: .18s;
	--wpcg-duration: .28s;
	--wpcg-duration-slow: .45s;

	--wpcg-easing: cubic-bezier(.25, .46, .45, .94);

}

/*----------------------------------------------------------
Image Fade
----------------------------------------------------------*/

.wpcg-image,
.wpcg-modal-image {

	opacity: 1;

	transition:
		opacity var(--wpcg-duration) var(--wpcg-easing),
		transform var(--wpcg-duration) var(--wpcg-easing);

}

.wpcg-image.is-hidden,
.wpcg-modal-image.is-hidden {

	opacity: 0;

}

.wpcg-image.is-visible,
.wpcg-modal-image.is-visible {

	opacity: 1;

}

/*----------------------------------------------------------
Slide Animation
----------------------------------------------------------*/

.wpcg-slide-next {

	animation: wpcg-slide-next var(--wpcg-duration) var(--wpcg-easing);

}

.wpcg-slide-prev {

	animation: wpcg-slide-prev var(--wpcg-duration) var(--wpcg-easing);

}

@keyframes wpcg-slide-next {

	from {

		opacity: 0;
		transform: translateX(40px);

	}

	to {

		opacity: 1;
		transform: translateX(0);

	}

}

@keyframes wpcg-slide-prev {

	from {

		opacity: 0;
		transform: translateX(-40px);

	}

	to {

		opacity: 1;
		transform: translateX(0);

	}

}

/*----------------------------------------------------------
Scale
----------------------------------------------------------*/

.wpcg-scale-in {

	animation: wpcg-scale-in var(--wpcg-duration) ease;

}

@keyframes wpcg-scale-in {

	from {

		opacity: 0;

		transform: scale(.95);

	}

	to {

		opacity: 1;

		transform: scale(1);

	}

}

/*----------------------------------------------------------
Modal
----------------------------------------------------------*/

.wpcg-modal {

	transition:

		opacity .25s ease,

		visibility .25s ease;

}

.wpcg-modal.is-open .wpcg-modal-container {

	animation: wpcg-modal-open .28s ease;

}

@keyframes wpcg-modal-open {

	from {

		transform: scale(.96);

		opacity: 0;

	}

	to {

		transform: scale(1);

		opacity: 1;

	}

}

/*----------------------------------------------------------
Navigation
----------------------------------------------------------*/

.wpcg-nav,
.wpcg-modal-prev,
.wpcg-modal-next {

	transition:

		background .25s ease,

		transform .25s ease,

		opacity .25s ease;

}

.wpcg-nav:hover,
.wpcg-modal-prev:hover,
.wpcg-modal-next:hover {

	transform: scale(1.08);

}

/*----------------------------------------------------------
Toolbar
----------------------------------------------------------*/

.wpcg-toolbar-btn,
.wpcg-modal-action {

	transition:

		background .25s ease,

		transform .25s ease,

		box-shadow .25s ease;

}

.wpcg-toolbar-btn:hover,
.wpcg-modal-action:hover {

	transform: translateY(-2px);

}

.wpcg-toolbar-btn:active,
.wpcg-modal-action:active {

	transform: scale(.95);

}

/*----------------------------------------------------------
Close Button
----------------------------------------------------------*/

.wpcg-modal-close {

	transition:

		background .25s ease,

		transform .25s ease;

}

.wpcg-modal-close:hover {

	transform: rotate(90deg);

}

/*----------------------------------------------------------
Overlay
----------------------------------------------------------*/

.wpcg-overlay {

	transition:

		opacity .25s ease,

		transform .25s ease;

}

.wpcg-gallery:hover .wpcg-overlay {

	opacity: 1;

	transform: translateY(0);

}

/*----------------------------------------------------------
Loader
----------------------------------------------------------*/

.wpcg-loader {

	opacity: 0;

	transition: opacity .25s ease;

}

.wpcg-loader.is-visible {

	opacity: 1;

}

/*----------------------------------------------------------
Spinner
----------------------------------------------------------*/

.wpcg-spinner {

	animation: wpcg-spinner .8s linear infinite;

}

@keyframes wpcg-spinner {

	from {

		transform: rotate(0deg);

	}

	to {

		transform: rotate(360deg);

	}

}

/*----------------------------------------------------------
Zoom
----------------------------------------------------------*/

.wpcg-modal.zoomed .wpcg-modal-image {

	animation: wpcg-zoom .25s ease;

}

@keyframes wpcg-zoom {

	from {

		transform: scale(1);

	}

	to {

		transform: scale(2);

	}

}

/*----------------------------------------------------------
Button Ripple
----------------------------------------------------------*/

.wpcg-toolbar-btn,
.wpcg-modal-action,
.wpcg-nav {

	position: relative;

	overflow: hidden;

}

.wpcg-toolbar-btn::before,
.wpcg-modal-action::before,
.wpcg-nav::before {

	content: "";

	position: absolute;

	inset: 0;

	border-radius: inherit;

	background: rgba(255, 255, 255, .08);

	transform: scale(0);

	opacity: 0;

	transition: all .35s ease;

}

.wpcg-toolbar-btn:hover::before,
.wpcg-modal-action:hover::before,
.wpcg-nav:hover::before {

	transform: scale(1);

	opacity: 1;

}

/*----------------------------------------------------------
Accessibility
----------------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {

		animation: none !important;

		transition: none !important;

		scroll-behavior: auto !important;

	}

}