/* =====================================================
   ModArt Renov Framework
--------------------------------------------------------
   File        : lightbox.css
   Description : Portfolio Lightbox
   Version     : 1.0.0
   Author      : Ayhan TACAR & Atlas
===================================================== */


/* =====================================================
   LIGHTBOX
===================================================== */

.lightbox{

	position:fixed;

	inset:0;

	display:flex;

	align-items:center;

	justify-content:center;

	opacity:0;

	visibility:hidden;

	background:radial-gradient(circle at 50% 42%,rgba(44,31,13,.42),rgba(0,0,0,.94) 52%,rgba(0,0,0,.985) 100%);

	-webkit-backdrop-filter:blur(8px);

	backdrop-filter:blur(8px);

	transition:
		opacity .35s ease,
		visibility .35s ease;

	z-index:99999;

}

.lightbox.active{

	opacity:1;

	visibility:visible;

}

body.lightbox-open{
	overflow:hidden;
	touch-action:none;
}

.lightbox-image{
	position:relative;
	z-index:1;

	display:block;

	max-width:88vw;

	max-height:85vh;

	border-radius:18px;
	border:1px solid rgba(255,255,255,.14);

	box-shadow:0 34px 86px rgba(0,0,0,.58),0 0 0 1px rgba(212,175,55,.2) inset,0 0 40px rgba(212,175,55,.14);

	backface-visibility:hidden;

	transform:translateZ(0) scale(.94);

	transition:transform .35s ease;

	cursor:zoom-in;

	background:#050505;

}

.lightbox-video{
	position:relative;
	z-index:1;
	display:block;
	max-width:88vw;
	max-height:85vh;
	border-radius:18px;
	border:1px solid rgba(255,255,255,.14);
	box-shadow:0 34px 86px rgba(0,0,0,.58),0 0 0 1px rgba(212,175,55,.2) inset,0 0 40px rgba(212,175,55,.14);
	background:#050505;
	outline:none;
}

.lightbox-video[hidden],
.lightbox-image[hidden]{
	display:none !important;
}

.lightbox.active .lightbox-image{

	transform:translateZ(0) scale(1);

}

.lightbox-image.zoomed{

	transform:translateZ(0) scale(1.28);

	cursor:zoom-out;

}

.lightbox-info{
	z-index:18;

	position:absolute;
	left:50%;
	bottom:26px;
	transform:translateX(-50%);

	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
	justify-content:center;

	padding:12px 18px;
	border:1px solid rgba(212,175,55,.4);
	border-radius:14px;
	background:linear-gradient(180deg,rgba(8,8,8,.72),rgba(8,8,8,.6));
	color:#f4e7c9;
	backdrop-filter:blur(10px);
	box-shadow:0 12px 30px rgba(0,0,0,.35);

}

.lightbox-title{

	font-size:15px;
	font-weight:700;
	letter-spacing:.45px;
	text-transform:uppercase;

}

.lightbox-category,
.lightbox-counter{

	font-size:12px;
	color:#e3cf9d;
	letter-spacing:.45px;
	text-transform:uppercase;

}


/* =====================================================
   CONTROLS
===================================================== */

.lightbox-close,
.lightbox-fullscreen,
.lightbox-prev,
.lightbox-next{
	z-index:20;

	position:absolute;

	display:flex;

	align-items:center;

	justify-content:center;

	width:58px;

	height:58px;

	border:none;

	border-radius:50%;

	overflow:hidden;

	background:linear-gradient(180deg,rgba(28,28,28,.88),rgba(12,12,12,.86));

	color:var(--color-text);

	cursor:pointer;

	font-size:34px;

	position:absolute;

	-webkit-backdrop-filter:blur(12px);

	backdrop-filter:blur(12px);

	transition:
		background-color .3s ease,
		color .3s ease,
		transform .3s ease,
		box-shadow .3s ease;

	border:1px solid rgba(255,255,255,.16);

}

.lightbox-close::before,
.lightbox-fullscreen::before,
.lightbox-prev::before,
.lightbox-next::before{

	content:"";

	position:absolute;
	top:0;
	left:-120%;

	width:80%;
	height:100%;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255,255,255,.35),
			transparent
		);

	transition:left .8s ease;

}

.lightbox-close:hover,
.lightbox-fullscreen:hover,
.lightbox-prev:hover,
.lightbox-next:hover{

	background:linear-gradient(180deg,#ffe3a2,#d4a53b 72%);

	color:#000;

	transform:scale(1.08);
	box-shadow:0 14px 30px rgba(212,175,55,.32),0 0 0 1px rgba(87,63,12,.24) inset;

}

.lightbox-close:focus-visible,
.lightbox-fullscreen:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible{
	outline:2px solid #f2d17a;
	outline-offset:2px;
}

.lightbox-prev,
.lightbox-next{
	font-size:30px;
}

.lightbox-close:hover::before,
.lightbox-fullscreen:hover::before,
.lightbox-prev:hover::before,
.lightbox-next:hover::before{

	left:140%;

}

.lightbox-prev:hover,
.lightbox-next:hover{

	transform:translateY(-50%) scale(1.08);

}

.lightbox-close{

	top:30px;

	right:30px;

}

.lightbox-fullscreen{

	top:30px;
	right:98px;
	font-size:24px;

}

.lightbox-prev{

	left:25px;

	top:50%;

	transform:translateY(-50%);

}

.lightbox-next{

	right:25px;

	top:50%;

	transform:translateY(-50%);

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:768px){

	.lightbox-image{

		max-width:84vw;

		max-height:70vh;

	}

	.lightbox-video{

		max-width:84vw;

		max-height:70vh;

	}

	.lightbox-prev,
	.lightbox-next{

		width:46px;

		height:46px;

		font-size:26px;

		background:rgba(0,0,0,.60);

	}

	.lightbox-prev{

		left:8px;

	}

	.lightbox-next{

		right:8px;

	}

	.lightbox-close{

		width:46px;

		height:46px;

		top:15px;

		right:15px;

	}

	.lightbox-fullscreen{

		width:46px;
		height:46px;
		top:15px;
		right:68px;
		font-size:20px;

	}

	.lightbox-info{

		left:12px;
		right:12px;
		bottom:14px;
		transform:none;
		justify-content:flex-start;
		max-width:none;
		padding:10px 12px;

	}

}


/* =====================================================
   PERFORMANCE
===================================================== */

.lightbox-image{

	will-change:transform;

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

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

	.lightbox,
	.lightbox-image,
	.lightbox-close,
	.lightbox-prev,
	.lightbox-next{

		animation:none !important;

		transition:none !important;

		transform:none !important;

	}

}