/*  

	Author : Moskva Yigit
	Author URI : http://www.moskvayigit.com/

	Table of Contents
	- Hover Slide Reveal
	 
*/

.ki-description{max-width:500px;}

/*----------------------------
	.-- Hover Slide Reveal
-----------------------------*/

*,
*::after,
*::before {
	box-sizing: border-box;
}

.dark .hover-slide-reveal__title-main,
.dark .hover-slide-reveal__content,
.dark .hover-slide-reveal__works span{ 
	color: var(--wp--preset--color--dark);
}

.light .hover-slide-reveal__title-main,
.light .hover-slide-reveal__content,
.light .hover-slide-reveal__works span{
	color: var(--wp--preset--color--white);
}

section.hover-slide-reveal-main {
    width: 100%;
    height: 100vh;
}

.hover-slide-reveal {
	padding: 1.5rem;
	position: relative;
	min-height: 100vh;
	display: grid;
	z-index: 1000;
	width: 100%;
	grid-row-gap: 1rem;
	grid-column-gap: 2rem;
	justify-items: start;
	grid-template-columns: auto auto auto;
	grid-template-areas: 
		'... ... ...'
		'... ... ...'
		'... ... ...'
		'works works works'
		'content content content'
		'... ... ...'
		'... ... ...'
}

.hover-slide-reveal a {
  pointer-events: auto;
}

.hover-slide-reveal__works {
	grid-area: works;
	display: flex;
	flex-direction: column;
	pointer-events: none;
}

.hover-slide-reveal__works span {
	margin-bottom: 1.5rem;
	font-size: 15px;
}

.hover-slide-reveal__works a {
	pointer-events: auto;
	padding: 0.25rem 0;
	position: relative;
	font-size: 1rem;
	text-decoration: none;
	color: var(--color-link-hover-slide);
}

.hover-slide-reveal__works a:hover {
	color: var(--color-link-hover-slide-hover);
}
 
.hover-slide-reveal__works a.current {
	color: var(--color-link-hover-slide-current);
}

.hover-slide-reveal__content {
	grid-area: content;
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-areas: 'content-item';
}

.hover-slide-reveal__title-main {
	text-transform: none;
	line-height: 0.9;
	font-weight: 400;
	margin: 0;
	grid-area: content;
	font-size: clamp(2rem,8vw,9rem);
	display: grid;
	align-content: center;
	width: 100%;
	pointer-events: none;
}


.hover-slide-reveal--content {
	pointer-events: none;
	position: relative;
	opacity: 0;
	grid-area: content-item;
	display: grid;
	grid-template-columns: repeat(10,1fr);
	grid-template-rows: repeat(10,1fr);
	width: 100%;
	height: 100%;
	z-index: 0;
}

.content--current {
	opacity: 1;
}

.hover-slide-reveal--content__title {
	position: relative;
	z-index: 10;
	text-transform: none;
	font-weight: normal;
	opacity: 0;
	grid-area: 1 / 2 / -1 / -2;
	width: 100%;
	height: 100%;
	display: grid;
	align-content: center;
	margin: 0;
	line-height: 1;
	font-size: clamp(2rem,10vw,9rem);
}

.hover-slide-reveal--content__img {
	position: relative;
	will-change: clip-path, filter;
}

.hover-slide-reveal--content__img-inner {
	background-size: cover;
	background-position: 50% 0%;
	width: 100%;
	height: 100%;
}

.content--position--1 .hover-slide-reveal--pos-1,
.content--position--6 .hover-slide-reveal--pos-1 { grid-area: 1 / 1 / 5 / 5; }
.content--position--1 .hover-slide-reveal--pos-2,
.content--position--6 .hover-slide-reveal--pos-2 { grid-area: 5 / 8 / 10 / 11; }
.content--position--1 .hover-slide-reveal--pos-3,
.content--position--6 .hover-slide-reveal--pos-3 { grid-area: 8 / 3 / 11 / 5; }


.content--position--2 .hover-slide-reveal--pos-1,
.content--position--7 .hover-slide-reveal--pos-1 { grid-area: 3 / 5 / 8 / 10; }
.content--position--2 .hover-slide-reveal--pos-2,
.content--position--7 .hover-slide-reveal--pos-2 { grid-area: 7 / 4 / 10 / 7; }
.content--position--2 .hover-slide-reveal--pos-3,
.content--position--7 .hover-slide-reveal--pos-3 { grid-area: 2 / 2 / 4 / 4; }

.content--position--3 .hover-slide-reveal--pos-1,
.content--position--8 .hover-slide-reveal--pos-1 { grid-area: 8 / 2 / 11 / 5; }
.content--position--3 .hover-slide-reveal--pos-2,
.content--position--8 .hover-slide-reveal--pos-2 { grid-area: 2 / 8 / 8 / 11; }
.content--position--3 .hover-slide-reveal--pos-3,
.content--position--8 .hover-slide-reveal--pos-3 { grid-area: 3 / 3 / 6 / 6; }

.content--position--4 .hover-slide-reveal--pos-1,
.content--position--9 .hover-slide-reveal--pos-1 { grid-area: 7 / 7 / 10 / 9; }
.content--position--4 .hover-slide-reveal--pos-2,
.content--position--9 .hover-slide-reveal--pos-2 { grid-area: 4 / 1 / 10 / 4; }
.content--position--4 .hover-slide-reveal--pos-3,
.content--position--9 .hover-slide-reveal--pos-3 { grid-area: 2 / 5 / 6 / 9; }

.content--position--5 .hover-slide-reveal--pos-1,
.content--position--10 .hover-slide-reveal--pos-1 { grid-area: 3 / 8 / 8 / 11; }
.content--position--5 .hover-slide-reveal--pos-2,
.content--position--10 .hover-slide-reveal--pos-2 { grid-area: 1 / 5 / 5 / 7; }
.content--position--5 .hover-slide-reveal--pos-3,
.content--position--10 .hover-slide-reveal--pos-3 { grid-area: 6 / 2 / 11 / 5; }

.hover-slide-reveal--background {
	position: fixed;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	display: grid;
	z-index: -1;
	grid-template-areas: 'background';
	grid-template-columns: 100%;
	grid-template-rows: 100%;
	pointer-events: none;
	place-items: center;
}

.hover-slide-reveal--background__image {
	position: relative;
	z-index: 0;
	grid-area: background;
	background-size: cover;
	filter: brightness(0.33);
	width: 120%;
	height: 120%;
	opacity: 0;
}

.hover-slide-reveal--background__video {
	position: relative;
	z-index: 1;
	grid-area: background;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

@media screen and (min-width: 53em) {
		
	.hover-slide-reveal {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 100%;
		width: 100%;
		grid-template-columns: 20% 15% 30% 1fr 1fr;
		grid-template-rows: auto auto 1fr 1fr auto;
		align-content: space-between;
		grid-template-areas: 
		'... ... ... ... ...'
		'... content content content content'
		'... content content content content'
		'works content content content content'
		'title title ... ... ...';
	}

	.hover-slide-reveal__works {
		margin-bottom: 10vh;
	}
	
	.hover-slide-reveal__title-main {
		grid-area: 5 / 3 / 2 / 6;
	}

}