/*
	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 Image
 */

.wp-block-image.book-cover {
	--transition-speed: .1s;
	position: relative;
}

.wp-block-image.book-cover a:any-link{
	color: #fff;
}

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

/* Vorderer Buchdeckel (Cover) */
.wp-block-image.book-cover img {
	position: relative;
	width: 100vw;
	max-width: 100%;
	border-radius: 1%;
	border-radius: 1% 2% 2% 1%;
	transform: perspective(2000px) rotateY(-15deg) translateX(-4%) scaleX(0.96);
	will-change: transform, filter;
	transition: all var(--transition-speed) ease-in-out !important;
	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-image.book-cover::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);
	will-change: transform;
	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-image.book-cover .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: perspective(1500px) rotateY(45deg) translateX(0%) translateY(0%) scaleX(96%) scaleY(96%);
	transform-origin: left center;
	will-change: transform;
	background-repeat: no-repeat;
	overflow: hidden;
	width: 8.5%;
	left: 100%;
}

/* Vorderer Buchdeckel Lichteffekte */
.wp-block-image.book-cover::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);
	will-change: transform;
	transition: all var(--transition-speed) ease-in-out;
	}



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

	font-size: 0.8em;
	font-weight: bold;
	hyphens: manual;
	overflow: visible;

	display: flex;
	align-items: flex-end;
	justify-content: center;
	
	margin: 0;
	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);
	will-change: transform;
	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-brand-1) 0 0 0.2em, var(--wp-j4b-theme-color-brand-1) 0 0 0.4em, var(--wp-j4b-theme-color-brand-1) 0 0 0.6em, var(--wp-j4b-theme-color-brand-1) 0 0 0.8em, var(--wp-j4b-theme-color-accent) 0 0 1em;
		}
}





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