//COMMON IMPORTS
@import "../config/imports";

// General
h1, h2, h3, h4, h5, h6 {
	color: var(--light);
	text-transform: none;
}

h4 {
	text-transform: uppercase;
	font-weight: 500;
    letter-spacing: 3px;
    opacity: 0.7;
    font-size: 1.3em;
}

.custom-hero-font-1 {
	padding: 0;
	line-height: 1;
	font-size: clamp(16px, 8vw, 90px);
	font-weight: 500;
	letter-spacing: 12px;
	text-transform: uppercase;
	white-space: nowrap;
}

// Header
.custom-perspective {
	perspective: 1000px;
}

.sticky-wrapper.sticky-wrapper-effect-1.sticky-wrapper-effect-1-dark.sticky-effect-active {
	.sticky-body {
		background: var(--dark);
	}
}

html.side-header-overlay-full-screen {
	#header {
		background: var(--dark);
	}
}

// Custom Elements
.custom-hero {
	.custom-el-2 {
		&:nth-child(1) {
			opacity: 0.9;
			transition: all 1s;
		}
		&:nth-child(2) {
			mix-blend-mode: hard-light;
			opacity: 0;
			transition: all 1s;
		}
	}
	&:hover {
		.custom-el-2 {
			&:nth-child(1) {
				opacity: 0;
			}
			&:nth-child(2) {
				opacity: 0.9;
			}
		}
	}
}

.custom-el-1,
.custom-el-2,
.custom-el-2-wrapper {
	width: 425px;
	height: 500px;
	border-radius: 10px;
	@media (max-width: 500px) {
		width: 340px;
		height: 400px;
	}
}

.custom-el-1 {
	margin: -10px;
}

.custom-el-2 {
	margin: 10px;
	img {
		opacity: 0;
		transition: all 300ms;
		&.lazyloaded {
			opacity: 1;
		}
	}
}

// Thumb
.thumb-info-floating-element {
	z-index: -1;
}

// BG Color Changed
.bg-color-changer {
	transition: background-color 700ms cubic-bezier(0.25, 1, 0.5, 1);
	bottom: 0;
    left: 0;
    min-height: 100vh;
    min-width: 100vw;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

// Portfolio
.custom-portfolio-item-1 {
	.custom-portfolio-item-1-img {
		border-radius: 4px 0px 0px 4px;
		@media (max-width: 991px) {
			border-radius: var(--border-radius);
		}
	}
	.custom-portfolio-item-1-type {
		padding: 10px;
		width: 60px;
		position: relative;
		overflow: hidden;
		span {
			display: block;
			white-space: nowrap;
			transform-origin: 0 0;
			transform: translate3d(32px, 10px, 0) rotate(90deg);
			text-align: left;
		}
		@media (max-width: 991px) {
			display: none;
		}
	}
}

// Animations
@keyframes arrowMove {
	0% {
		transform: translateY(5px);
	}
	50% {
		transform: translateY(10px);
	}
	100% {
		transform: translateY(5px);
	}
}

.custom-arrow-anim {
	animation: arrowMove 600ms ease;
	animation-iteration-count: infinite;
}