/**
 * WP Tutorials Animated Gallery Links (WPTAGL)
 *
 * https://wp-tutorials.tech/refine-wordpress/animated-wordpress-gallery-links/
 *
 */

.animated-gallery-links {
/* 	margin-bottom: 1.5em; */
}

.animated-gallery-links .wp-block-image {
	position: relative;
	overflow: hidden;
}

.animated-gallery-links .wp-block-image a {
	position: relative;
	display: block;
}

/**
 * Configure and animate the image captions when hovered.
 */
.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image figcaption {
	background: transparent;
	font-size: 100%;
	font-weight: 900;

	text-shadow:
		-1px -1px 2px #000,
		1px -1px 2px #000,
		-1px 1px 2px #000,
		1px 1px 2px #000;

	position: absolute;
	text-align: left;
	transition: 0.3s bottom, 0.3s transform;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 1em;
	bottom: 1em;
	pointer-events: none;
	line-height: 1.3em;
	z-index: 20;
}

.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image:hover figcaption {
	bottom: 50%;
	transform: translateY(50%);
}

/**
 * Zoom in on the image when its hovered hover.
 */
.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image img {
	transition: 0.3s transform;
}

.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image:hover img {
	transform: scale(1.2);
}

/**
 * Create a totally transparent overlay for the image, then make it
 * semi-transparent when the image is hovered.
 */
.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image a::before {
	content: ' ';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 10;
	transition: 0.3s opacity;
	background-color: black;
	opacity: 0.0;
}

.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image:hover a::before {
	opacity: 0.5;
}

/**
 * Create an animated arrow that comes into view when the image is hovered.
 */
.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image a::after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 700;
	content: '\f061';
	position: absolute;
	left: 0;
	bottom: 2em;
	color: #ADF5FF;
	opacity: 0.0;
	transition: 0.3s left, 0.3s opacity, 0.3s transform;
	transform: scale(0.5);
	z-index: 20;
}

.wp-block-gallery.has-nested-images.animated-gallery-links figure.wp-block-image:hover a::after {
	bottom: 2em;
	left: 1.2em;
	opacity: 1.0;
	transform: scale(1.5);
}