Video Popup

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";

.video-popup {
	position: relative;
	padding-top: 6rem;
	margin-bottom: 8rem;

    @include media-breakpoint-down(md) {
        padding-top: 3rem;
        margin-bottom: 5rem;
    }
	h2 {
		max-width: 50rem;
		margin: 0 auto;
		padding-bottom: 5.5rem;

		@include media-breakpoint-down(md) {
			padding-bottom: 3rem;
		}
	}
	&:after {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		top: 0;
		height: 100%;
		max-height: 0;
		width: 100%;
		background: var(--theme-colour);
		transition: max-height 0.7s cubic-bezier(0.62, 0.38, 0.17, 0.85);
		transition-delay: 0.3s;
	}
	&.aos-animate {
		&:after {
			max-height: 38rem;

			@include media-breakpoint-down(md) {
				max-height: 28rem;
			}
			@include media-breakpoint-down(sm) {
				max-height: 22rem;
			}
		}
	}
}

.video-popup-cta {
	display: flex;
	align-items: flex-end;
	position: relative;
	min-height: 38rem;
	overflow: hidden;
	max-width: 70rem;
	margin: 0 auto;

	@include media-breakpoint-down(md) {
		min-height: 28rem;
	}
	@include media-breakpoint-down(sm) {
		min-height: 20rem;
	}
	img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		object-fit: cover;
		transition: transform 4s ease-in-out;
	}
	&:after {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	}
	.video-popup-inner {
		padding: 3.75rem;
		max-width: 40rem;
		position: relative;
		z-index: 3;

		@include media-breakpoint-down(md) {
			padding: 2rem;
		}
		@include media-breakpoint-down(sm) {
			padding: 1.5rem;
		}
	}
	h3 {
		color: #fff;
	}
	p {
		font-size: 1rem;
		color: #fff;
		display: flex;
		align-items: center;

		@include media-breakpoint-down(sm) {
			font-size: 1rem;
		}
	}
	.play-icon {
		display: block;
		width: 2.25rem;
		height: 2.25rem;
		border-radius: 100%;
		margin-right: 1rem;
		background-color: $red;
		position: relative;
		transition: background-color 0.3s ease-in-out;

		&:after {
			transition: border-color 0.3s ease-in-out;
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 7.5px 0 7.5px 13px;
			border-color: transparent transparent transparent #ffffff;
		}
	}
	&:hover {
		img {
			transform: scale(1.1);
		}
		.play-icon {
			background-color: #fff;

			&:after {
				border-color: transparent transparent transparent $red;
			}
		}
	}
}