// Variables & Mixins
@import "../../../../themes/everse/assets/sass/base/_variables";
@import "../../../../themes/everse/assets/sass/base/_mixins.scss";

/* Project Description
-------------------------------------------------------*/
.project {
	&__title {
		font-size: 1.5rem;
	}

	&__category {
		text-transform: uppercase;
		letter-spacing: 0.05em;
		font-size: 0.8125rem;
	}

	&__description-wrap {
		position: absolute;
		opacity: 0;
		bottom: 40px;
		left: 40px;
		display: inline-block;
		width: 78%;
		max-width: 260px;
		-webkit-clip-path: inset(0 0 0 100%);
		clip-path: inset(0 0 0 100%);
		@include transition(opacity 0.2s 0.3s, clip-path 0s 0.3s);
	}

	&__description {
		position: relative;
		padding: 20px 26px;

		&:after {
			content: "";
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: #fff;
			-webkit-transform-origin: 0 50%;
			-moz-transform-origin: 0 50%;
			transform-origin: 0 50%;
			@include transform(scaleX(0));
			@include transition(transform 0.35s cubic-bezier(0.07, 0.98, 0, 0.96));
		}

		.project__title {
			margin-bottom: 0;
		}

		.project__title,
		.project__categories {
			opacity: 0;
			z-index: 2;
			position: relative;
			@include transition(opacity 0.2s cubic-bezier(0.07, 0.98, 0, 0.96));
		}
	}

	&:hover {
		.project__description-wrap {
			opacity: 1;
			-webkit-clip-path: inset(0 0 0 0);
			clip-path: inset(0 0 0 0);
			-webkit-transition: -webkit-clip-path 0.8s
				cubic-bezier(0.07, 0.98, 0, 0.96);
			transition: clip-path 0.8s cubic-bezier(0.07, 0.98, 0, 0.96);
		}

		.project__description {
			&:after {
				-webkit-transform-origin: 100% 50%;
				-moz-transform-origin: 100% 50%;
				transform-origin: 100% 50%;
				@include transform(scaleX(1));
				@include transition(transform 0.7s cubic-bezier(0.07, 0.98, 0, 0.96));
			}
		}

		.project__title,
		.project__categories {
			opacity: 1;
		}
	}
}