/*
	Theme Name:		MiWiki 2023
	Theme Part:		j4b-patterns.css
	Description:	CSS-Formatierungen für den j4b Vorlagen (Wordpress Patterns)
	Author:			Stefan Kuhn
	Author URI:		https://just4business.de/
	Template:		Generatepress Child-Theme MiWiki 2023
	Version:		0.1
*/



/**
 * Pattern: j4b Book-Cover Gallery
 */

/* Animierte Buch-Gallerie */
.wp-block-gallery.book-cover {
	--transition-speed: .2s;
	--wp--style--gallery-gap-default: 1em;
}
@media (min-width: 480px) {
	.wp-block-gallery.book-cover {
		--wp--style--gallery-gap-default: 1.5em;
	}
}

.wp-block-gallery.book-cover .wp-block-image {
	position: relative;
}

.content-area .entry-content .wp-block-gallery.book-cover a.external:not(.wp-block-button__link):not([href^="mailto"]):not([href^="https://jannot.de/"]):not([href^="https://jannot.com/"]) {
	padding-right: 0;
	hyphens: manual;
}
.content-area .entry-content .wp-block-gallery.book-cover a.external:not(.wp-block-button__link):not([href^="mailto"]):not([href^="https://jannot.de/"]):not([href^="https://jannot.com/"])::after {
	content: unset ;
}

.wp-block-gallery.book-cover .wp-block-image::before,
.wp-block-gallery.book-cover .wp-block-image::after,
.wp-block-gallery.book-cover .wp-block-image .wp-element-caption a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

/* Vorderer Buchdeckel (Cover) */
.wp-block-gallery.book-cover .wp-block-image img {
	position: relative;
	border-radius: 1%;
	border-radius: 1% 2% 2% 1%;
	transform: perspective(2000px) rotateY(-15deg) translateX(-4%) scaleX(0.96);
	transition: all var(--transition-speed) ease-in-out;
	
	box-shadow: 6px 6px 12px -1px var(--wp-j4b-theme-color-darker-9), 20px 14px 16px -6px var(--wp-j4b-theme-color-darker-4);
}

/* Hinterer Buchdeckel */
.wp-block-gallery.book-cover .wp-block-image::before {
	background-color: #555;
	background-image:	linear-gradient(to right, #0006, #0003 0.75%, #fff6 1.5%, #fff6 2%, #0000 2.75%, #0003 3.25%, #0004 3.625%, #0003 4%, #0000 4.375%, #fff6 4.75%, #fff6 5%, #0000 5.5%, #fff0 98%, #fff2 98.75%, #fff3 99.25%, #fff6 99.75%), 
						linear-gradient(to bottom, #0000 98.5%, #0003 99.25%, #0006);
	border-radius: 1% 2% 2% 1%;
	transform: perspective(2000px) rotateY(-15deg) translateX(2%) scaleX(0.98) scaleY(0.98);
	transition: all var(--transition-speed) ease-in-out;
	
	box-shadow: 6px 6px 18px -2px var(--wp-j4b-theme-color-darker-9), 24px 28px 40px -6px var(--wp-j4b-theme-color-darker-4);
}

/* Buchseiten */
.wp-block-gallery.book-cover .wp-block-image .wp-element-caption a::before {
	background-color: #efefef;
	background-image: repeating-linear-gradient(to left, #ddd 0%, #ddd 0.35%, #ddd0 0.35%, #ddd0 0.6%);
	background-image: repeating-linear-gradient(to left, #ddd 0%, #ddd 7.5%, #ddd0 7.5%, #ddd0 15%);
	transition: all var(--transition-speed) ease-in-out;
	transform-origin: left center;
	background-repeat: no-repeat;
	overflow: hidden;
	width: 8.5%;
	left: 100%;
	transform: perspective(1500px) rotateY(45deg) translateX(0%) translateY(0%) scaleX(96%) scaleY(96%);
}

/* Vorderer Buchdeckel Lichteffekte */
.wp-block-gallery.book-cover .wp-block-image::after {
	background-image:	linear-gradient(to right, #0006, #0003 0.75%, #fff6 1.5%, #fff6 2%, #0000 2.75%, #0003 3.25%, #0004 3.625%, #0003 4%, #0000 4.375%, #fff6 4.75%, #fff6 5%, #0000 5.5%, #fff0 98%, #fff2 98.75%, #fff3 99.25%, #fff6 99.75%), 
						linear-gradient(to bottom, #fff6, #fff6 0.25%, #fff3 0.5%, #fff2 0.75%, #fff0 1.5%, #0000 98.5%, #0003 99.25%, #0006),
						linear-gradient(to right, #0000 99.5%, #0006 99.75%),
						linear-gradient(to bottom, #0006, #0000 .25%);
	background-size: 100% 100%;
	background-position: top left;
	background-repeat: no-repeat;
	border-radius: 1% 2% 2% 1%;
	border-width: 0.5px;
	border-style: solid;
	border-top-color: #999;
	border-right-color: #999;
	border-bottom-color: #666;
	border-left-width: 0;
	transform: perspective(2000px) rotateY(-15deg) translateX(-4%) scaleX(0.96);
	transition: all var(--transition-speed) ease-in-out;
	}



.wp-block-gallery.book-cover.has-nested-images figure.wp-block-image figcaption {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0 ;
	right: 0;
	max-height: 100%;

	overflow: visible;

	display: flex;
	align-items: flex-end;
	justify-content: center;
	
	padding: 0.5em 1ch;

	color: #fff;
	text-shadow: #000 0 0 0.2em, #000 0 0 0.4em, #000 0 0 0.6em, #000 0 0 0.8em, #000 0 0 1em;
	background: unset;

	transform: perspective(2000px) rotateY(-15deg) translateX(-4%) scaleX(0.96);
	transition: all var(--transition-speed)  ease-in-out;

	z-index: +1;

	animation: myanim 4s infinite;
}
@keyframes myanim {
	50% {
			text-shadow: var(--wp-j4b-theme-color-accent) 0 0 0.2em, var(--wp-j4b-theme-color-accent) 0 0 0.4em, var(--wp-j4b-theme-color-accent) 0 0 0.6em, var(--wp-j4b-theme-color-accent) 0 0 0.8em, var(--wp-j4b-theme-color-accent) 0 0 1em;
		}
}

.wp-block-gallery.book-cover .wp-block-image .wp-element-caption a::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}


.content-area .entry-content .wp-block-gallery.book-cover .wp-element-caption :not(.invid-middle-frontpage) a.external:not(.wp-block-button__link):not([href^="mailto"]):not([href^="https://jannot.de/"]):not([href^="https://jannot.com/"])::after,
.wp-block-gallery.book-cover .wp-element-caption a::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 0;
	height: unset;
	mask: none;
	background-color: transparent;
}




/* Hover-Effekt */
@media (hover: hover) and (pointer: fine) {
	/* Perspektivwechsel */
	.wp-block-gallery.book-cover .wp-block-image:hover {
		cursor: pointer;
	}
	.wp-block-gallery.book-cover .wp-block-image:hover::after,
	.wp-block-gallery.book-cover .wp-block-image:hover img,
	.wp-block-gallery.book-cover.has-nested-images figure.wp-block-image:hover figcaption {
		transform: perspective(2000px) rotateY(0deg) translateX(0) scaleX(1) scaleY(1);
	}
	.wp-block-gallery.book-cover .wp-block-image:hover::before {
		transform: perspective(2000px) rotateY(0deg) translateX(0%) scaleX(98%) scaleY(98%);
	}
	.wp-block-gallery.book-cover .wp-block-image:hover .wp-element-caption a::before {
		transform: perspective(1500px) rotateY(90deg) translateX(-8.5%) scaleX(96%) scaleY(96%);
		width: 0%;
	}
	.wp-block-gallery.book-cover .wp-block-image:hover figcaption {
		opacity: 0;
	}
	/* Helligkeitswechsel des Covers */
	html:not([data-theme="dark"]) {
		.wp-block-gallery.book-cover .wp-block-image img {
			filter: brightness(.98) saturate(.98);
		}
		.wp-block-gallery.book-cover .wp-block-image:hover img {
			filter: brightness(1) saturate(1);
		}
	}
}