/* ------------------------- Close -------------------------------------------------- */

.close {
	width: 2.6em;
	height: 2.6em;
	border-radius: 50%;
	border: 1px solid rgba(var(--color-dark-rgb), 0.25);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	flex-grow: 0;
}

.close span {
	position: absolute;
	left: 99999px;
}

.close svg {
	width: 1.3em;
}

.close svg path {
	transition: var(--animation-primary);
}

.close:hover svg path {
	stroke: var(--color-primary);
}

/* ------------------------- Modal -------------------------------------------------- */

.modal {
	top: 0;
	left: var(--gap-padding);
	right: var(--gap-padding);
	bottom: 0;
	z-index: 200;
	visibility: hidden;
	opacity: 0;
	transition: var(--animation-smooth);
	transform: translateY(1em) scale(1) rotate(0.001deg);
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	padding: var(--gap-padding) 0;
	height: 100vh;
}

.modal.active {
	visibility: visible;
	opacity: 1;
	transform: translateY(0em) scale(1) rotate(0.001deg);
}

.modal-block {
	background: var(--color-light);
	border-radius: var(--border-radius);
	padding: 0.5em 1em;
	pointer-events: all;
	position: relative;
}

.modal-background {
	z-index: 199;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(var(--color-black-rgb), 0.75);
	position: fixed;
	transition: var(--animation-smooth);
	visibility: hidden;
	opacity: 0;
}

.modal-background.active {
	visibility: visible;
	opacity: 1;
}

@media (hover: hover) {
	.modal-background {
		background: rgba(var(--color-black-rgb), 0.5);
	}
}

/* ------------------------- Modal -------------------------------------------------- */
.default-header {
	padding-top: 28svh;
}

@media screen and (max-width: 1024px) {
	.default-header {
		padding-top: 19svh;
	}
}

/* ------------------------- Slider Row - 3 Col -------------------------------------------------- */

.flickity-slider-col-3 .flex-col {
	overflow: hidden;
	border-radius: 0.5em;
}

.flickity-slider-col-3 ul {
	display: flex;
	--gap: var(--gap-padding);
	--columns: 3;
}

.flickity-slider-col-3 ul li {
	width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
	margin-right: var(--gap);
	flex-shrink: 0;
}

.flickity-slider-col-3 ul li:last-child {
	margin-right: 0;
}

/* Turn Flickity ON */

.flickity-slider-col-3 .flickity-carousel::after {
	content: "flickity";
	display: none;
}

/* Remove Flex from .row for Flickity */

.flickity-slider-col-3 .flickity-carousel {
	display: block;
}

.flickity-slider-col-3 .flickity-viewport {
	border-radius: var(--border-radius-medium);
	overflow: visible;
}

/* Flickity Arrows */

.flickity-slider-col-3 .btn-prev {
	position: absolute;
	left: 0;
	top: 30%;
	transform: translate(-50%, -50%) rotate(0.001deg) scale(1);
}

.flickity-slider-col-3 .btn-prev[disabled] {
	transform: translate(-50%, -50%) rotate(0.001deg) scale(0);
}

.flickity-slider-col-3 .btn-next {
	position: absolute;
	right: 0;
	top: 30%;
	transform: translate(50%, -50%) rotate(0.001deg) scale(1);
}

.flickity-slider-col-3 .btn-next[disabled] {
	transform: translate(50%, -50%) rotate(0.001deg) scale(0);
}

@media screen and (min-width: 1024px) {
	/* Turn Flickity OFF if 3 collection items */
	.flickity-slider-col-3:is(.count-1, .count-2, .count-3) .flickity-carousel::after {
		content: "";
		display: block;
	}
	.flickity-slider-col-3:is(.count-1, .count-2, .count-3) .flickity-carousel {
		display: flex;
	}
	.flickity-slider-col-3:is(.count-1, .count-2, .count-3) .flickity-btn-prev,
	.flickity-slider-col-3:is(.count-1, .count-2, .count-3) .flickity-btn-next {
		display: none;
	}
}

@media (min-width: 720px) and (max-width: 1024px) {
	.flickity-slider-col-3 .flex-col {
		overflow: visible;
		border-radius: unset;
	}
	.flickity-slider-col-3 ul {
		--columns: 2;
	}
	/* Turn Flickity OFF if 2 collection items */
	.flickity-slider-col-3:is(.count-1, .count-2) .flickity-carousel::after {
		content: "";
		display: block;
	}
	.flickity-slider-col-3:is(.count-1, .count-2):is(.count-1, .count-2) .flickity-carousel {
		display: flex;
	}
	.flickity-slider-col-3:is(.count-1, .count-2):is(.count-1, .count-2) .flickity-btn-prev,
	.flickity-slider-col-3:is(.count-1, .count-2):is(.count-1, .count-2):is(.count-1, .count-2) .flickity-btn-next {
		display: none;
	}
}

@media screen and (max-width: 720px) {
	.flickity-slider-col-3 .flex-col {
		overflow: visible;
		border-radius: unset;
	}
	.flickity-slider-col-3 ul {
		--columns: 1.05;
	}
	.flickity-slider-col-3.count-1 ul {
		--columns: 1;
	}
	.flickity-slider-col-3 .btn {
		display: none;
	}
	.flickity-slider-col-3 .btn .arrow {
		width: calc(var(--gap-padding) * 2);
		height: calc(var(--gap-padding) * 2);
	}
	.flickity-slider-col-3 .btn .arrow .arrow-content {
		width: 50%;
	}
	/* Turn Flickity OFF if 1 collection items */
	.flickity-slider-col-3.author-click .flickity-carousel::after {
		content: "";
		display: block;
	}
	.flickity-slider-col-3:is(.count-1) .flickity-carousel {
		display: flex;
	}
	.flickity-slider-col-3:is(.count-1) .flickity-btn-prev,
	.flickity-slider-col-3:is(.count-1) .flickity-btn-next {
		display: none;
	}
}

/* ------------------------- Slider Row - 3 Col -------------------------------------------------- */

.flickity-slider-col-4 .flex-col {
	overflow: hidden;
	border-radius: 0.5em;
}

.flickity-slider-col-4 ul {
	display: flex;
	--gap: var(--gap-padding);
	--columns: 4;
}

.flickity-slider-col-4 ul li {
	width: calc((100% / var(--columns)) - (var(--gap) * ((var(--columns) - 1) / var(--columns))));
	margin-right: var(--gap);
	flex-shrink: 0;
}

.flickity-slider-col-4 ul li:last-child {
	margin-right: 0;
}

/* Turn Flickity ON */

.flickity-slider-col-4 .flickity-carousel::after {
	content: "flickity";
	display: none;
}

/* Remove Flex from .row for Flickity */

.flickity-slider-col-4 .flickity-carousel {
	display: block;
}

.flickity-slider-col-4 .flickity-viewport {
	border-radius: var(--border-radius-medium);
	overflow: visible;
}

/* Flickity Arrows */

.flickity-slider-col-4 .btn-prev {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(-50%, -50%) rotate(0.001deg) scale(1);
}

.flickity-slider-col-4 .btn-prev[disabled] {
	transform: translate(-50%, -50%) rotate(0.001deg) scale(0);
}

.flickity-slider-col-4 .btn-next {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(50%, -50%) rotate(0.001deg) scale(1);
}

.flickity-slider-col-4 .btn-next[disabled] {
	transform: translate(50%, -50%) rotate(0.001deg) scale(0);
}

@media screen and (min-width: 1240px) {
	/* Turn Flickity OFF if < 4 collection items */
	.flickity-slider-col-4:is(.count-1, .count-2, .count-3, .count-4) .flickity-carousel::after {
		content: "";
		display: block;
	}
	.flickity-slider-col-4:is(.count-1, .count-2, .count-3, .count-4) .flickity-carousel {
		display: flex;
	}
	.flickity-slider-col-4:is(.count-1, .count-2, .count-3, .count-4) .flickity-btn-prev,
	.flickity-slider-col-4:is(.count-1, .count-2, .count-3, .count-4) .flickity-btn-next {
		display: none;
	}
}

@media (min-width: 1024px) and (max-width: 1240px) {
	.flickity-slider-col-4 ul {
		--columns: 3;
	}
	/* Turn Flickity OFF if 3 collection items */
	.flickity-slider-col-4:is(.count-1, .count-2, .count-3) .flickity-carousel::after {
		content: "";
		display: block;
	}
	.flickity-slider-col-4:is(.count-1, .count-2, .count-3) .flickity-carousel {
		display: flex;
	}
	.flickity-slider-col-4:is(.count-1, .count-2, .count-3) .flickity-btn-prev,
	.flickity-slider-col-4:is(.count-1, .count-2, .count-3) .flickity-btn-next {
		display: none;
	}
}

@media (min-width: 720px) and (max-width: 1024px) {
	.flickity-slider-col-4 .flex-col {
		overflow: visible;
		border-radius: unset;
	}
	.flickity-slider-col-4 ul {
		--columns: 2.4;
	}
	/* Turn Flickity OFF if 2 collection items */
	.flickity-slider-col-4:is(.count-1, .count-2) .flickity-carousel::after {
		content: "";
		display: block;
	}
	.flickity-slider-col-4:is(.count-1, .count-2) .flickity-carousel {
		display: flex;
	}
	.flickity-slider-col-4:is(.count-1, .count-2) .flickity-btn-prev,
	.flickity-slider-col-4:is(.count-1, .count-2) .flickity-btn-next {
		display: none;
	}
}

@media screen and (max-width: 720px) {
	.flickity-slider-col-4 .flex-col {
		overflow: visible;
		border-radius: unset;
	}
	.flickity-slider-col-4 ul {
		--columns: 1.4;
	}
	.flickity-slider-col-4.count-1 ul {
		--columns: 1;
	}
	.flickity-slider-col-4 .btn {
		display: none;
	}
	.flickity-slider-col-4 .btn .arrow {
		width: calc(var(--gap-padding) * 2);
		height: calc(var(--gap-padding) * 2);
	}
	.flickity-slider-col-4 .btn .arrow .arrow-content {
		width: 50%;
	}
	/* Turn Flickity OFF if 1 collection items */
	.flickity-slider-col-4:is(.count-1) .flickity-carousel::after {
		content: "";
		display: block;
	}
	.flickity-slider-col-4:is(.count-1) .flickity-carousel {
		display: flex;
	}
	.flickity-slider-col-4:is(.count-1) .flickity-btn-prev,
	.flickity-slider-col-4:is(.count-1) .flickity-btn-next {
		display: none;
	}
}

/* ------------------------- Section Stripe -------------------------------------------------- */

.section-stripe {
	padding: 0;
}

.section-stripe .stripe.wide {
	display: flex;
	width: calc(100% + (var(--gap-padding) * 2));
	transform: translateX(calc(var(--gap-padding) * -1));
}

@media screen and (max-width: 1024px) {
	.section-stripe .stripe.wide {
		width: 100%;
		transform: translateX(0);
	}
}

/* ------------------------- Swiper Slider -------------------------------------------------- */

.swiper-container {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	position: relative;
	flex-grow: 1;
	width: 100%;
}

.swiper-wrapper {
	flex-grow: 1;
	position: relative;
	width: 100%;
	-webkit-transform-style: preserve-3d;
	transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
}

.swiper-slide {
	position: relative;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0);
}

/*--- Progress Bar ---*/

.swiper-container .swiper-pagination {
	position: relative;
	width: 100%;
	display: flex;
	bottom: unset;
	left: unset;
	gap: 0.5em;
}

.swiper-container .swiper-pagination-bullet {
	height: 1em;
	position: relative;
	border-radius: 0;
	margin: unset;
	width: 100%;
	background-color: transparent;
	display: flex;
	opacity: 1;
	flex-direction: column;
	justify-content: center;
}

.swiper-container .swiper-pagination-bullet::before {
	content: "";
	width: 100%;
	height: 1px;
	background-color: var(--color-dark);
	opacity: 0.4;
	position: absolute;
}

.swiper-container .progress {
	height: 2px;
	position: absolute;
	width: 100%;
	background-color: var(--color-dark);
	transform: scaleX(0);
	transform-origin: left top;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.swiper-container .swiper-pagination-bullet-active .progress {
	opacity: 1;
}

/*--- Progress Bar - Dark ---*/

.theme-dark .swiper-container .swiper-pagination-bullet::before {
	background-color: var(--color-white);
}

.theme-dark .swiper-container .progress {
	background-color: var(--color-light);
}

/* ------------------------- Rounded Top Section -------------------------------------------------- */

.section-next-rounded-top::before {
	content: "";
	position: absolute;
	top: calc(100% - 2px);
	left: 0;
	width: 100%;
	height: calc((var(--border-radius) * 2) + 4px);
	background: var(--color-dark);
	z-index: -1;
}

.section-next-rounded-top + .section,
.section-next-rounded-top + .section-wrap {
	border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.section-next-rounded-top + .section.last-section,
.section-next-rounded-top + .section-wrap.last-section {
	border-radius: var(--border-radius);
}

.theme-dark.section-next-rounded-top::before,
.theme-nonav-dark.section-next-rounded-top::before {
	background: var(--color-dark);
}

.theme-light.section-next-rounded-top::before,
.theme-nonav-light.section-next-rounded-top::before {
	background: var(--color-light);
}

.text-float {
	font-size: 0.5em;
	position: absolute;
	top: 1px;
	right: -0.8em;
	transform: translate(50%, -50%);
	line-height: 1;
	color: var(--color-light);
	opacity: 0.6;
}

.text-float {
	color: var(--color-light);
}

/* -------------------------------- Hover Section ---------------------------------------------*/
@media (hover: hover) {
	.single-work-item .item-click {
		transition: all var(--animation-thumb);
		position: relative;
		display: block;
	}
	.single-work-item .item-click .thumb {
		transition: var(--animation-thumb);
	}

	/* Buttons in .no-hover items */
	.grid-hover .single-work-item.no-hover .btn {
		opacity: 0.15; /* Match the opacity of siblings */
		filter: grayscale(1) contrast(1); /* Match the grayscale effect */
		transform: scale(0.9) rotate(0.001deg); /* Scale down */
		transition: all var(--animation-thumb); /* Smooth transition */
	}

	/* Buttons in .hover items */
	.grid-hover .single-work-item.hover .btn {
		opacity: 1; /* Restore full opacity */
		filter: none; /* Remove grayscale */
		transform: scale(1); /* Restore original size */
		transition: all var(--animation-thumb); /* Smooth transition */
	}

	/* Not Hover (Siblings) */
	/* .grid-work:has(.single-work-item a:hover) .single-work-item a:not(:hover) {
      opacity: 0.2;
   } */
	.grid-hover .single-work-item.no-hover .item-click {
		opacity: 0.15;
		filter: grayscale(1) contrast(1);
		transform: scale(0.9) rotate(0.001deg);
	}
}

/* ------------------------- Marquee -------------------------------------------------- */

.marquee-group {
	position: relative;
}

.marquee {
	position: relative;
}

.marquee .marquee-scroll {
	position: relative;
	display: flex;
	width: 140%;
	margin-left: -20%;
}

.marquee .marquee-content {
	position: relative;
	display: flex;
}

.marquee .marquee-item {
	width: 15vw;
}