/* Home Hero */

:root {
	--rot-d: 42.5deg;
	--hero-h: 680px;
}

.hero {
    position: relative;
    height: var(--hero-h);
    max-height: var(--hero-h);
    background-color: var(--skin-grey-10);
    overflow: hidden;
	background-image: url('/wp-content/themes/h2-conveyancing/assets/img/bg_hero_r1.jpg');
	width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero .skin-inner {
	height: 100%;
	display: flex;
}
.hero-content {
    position: relative;
	margin-right: auto;
    width: 800px;
    max-width: var(--skin-content-max);
    display: flex;
    flex-direction: column;
	justify-content: center;
    gap: 10px;
    z-index: 6;
}

.hero-content .h1 {
	margin: 0;
}

.hero-heading h1:first-child { color: var(--skin-black); }
.hero-heading h1 .red  { color: var(--skin-red); }

.hero .hero-checklist {
	gap: 5px;
}

.hero-checklist { display: flex; flex-direction: column; gap: 5px; list-style: none; margin: 0; padding: 0; }
.hero-checklist li { display: flex; align-items: center; gap: 5px; font-size: 19px; line-height: 29px; color: var(--skin-black); }
.hero-checklist i { color: var(--skin-red); font-size: 18px; }
.hero-content .hero-buttons { margin-top: 30px;}
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }

/* Shared line styles */
.hero-diagonal {
	position: absolute;
	right: 0;
	height: 100%;
	overflow: hidden;
	width: 100%;
}
.hero-diagonal__line {
	position: absolute;
	z-index: 3;
	top: -30%;
	right: 895px;
	width: 5px;
	height: 165%;
	transform-origin: center;
	transform: rotate(var(--rot-d));
}

/* Red line starts below and slides up */
.hero-diagonal__line--red {
	right: 945px;
	background: var(--skin-red); 
    opacity: 0.3;
	transform: translateY(100%) rotate(var(--rot-d));
	animation: red-line-up 1.3s ease-out 0.3s forwards;
}

/* Grey line starts above and slides down */
.hero-diagonal__line--grey {
	background: var(--skin-black); 
    opacity: 0.35;
	transform: translateY(-100%) rotate(var(--rot-d));
	animation: grey-line-down 1.2s ease-out 0.2s forwards;
}

.hero-diagonal__imask {
    position: absolute;
    z-index: 4;
    right: -40px;
    bottom: -200px;
    height: 380px;
    width: 220px;
    background-color: var(--skin-grey-10);
	transform: rotate(var(--rot-d));	
}

.hero-diagonal__imask .dl--red,
.hero-diagonal__imask .dl--grey {
	position: absolute;
	width: 5px;
	height: 400px;
}

.hero-diagonal__imask .dl--red {
	background: var(--skin-red); 
	transform: translateX(35px);
}

.hero-diagonal__imask .dl--grey {
	background: var(--skin-black); 
	transform: translateX(70px);
}

/* Hidden initially */
.hero .hero-diagonal__imask,
.hero .hero-diagonal__image,
.hero .hero-diagonal__line,
.hero .hero-dl {
	opacity: 0;
	visibility: hidden;
}

/* Image */
.hero.show-image .hero-diagonal__image {
	visibility: visible;
	animation: hero-image-up .8s ease-out forwards;
}

.hero.show-image .hero-diagonal__imask {
	visibility: visible;
	animation: fade-in 1s ease-out forwards;
}

/* Red lines */
.hero.show-red .hero-diagonal__line--red {
	visibility: visible;
	animation: hero-red-up .6s ease-out forwards;
}

.hero.show-red .dl--red {
	visibility: visible;
	animation: hero-red-2 .6s ease-out forwards;
}


/* Grey lines */
.hero.show-grey .hero-diagonal__line--grey {
	visibility: visible;
	animation: hero-grey-down .6s ease-out forwards;
}

.hero.show-grey .dl--grey {
	visibility: visible;
	animation: hero-grey-2 .6s ease-out forwards;
}

@media (min-width: 1281px) {
	.hero-diagonal {
		min-height: 720px;
		height: 100%;
		overflow: hidden;	
	}

	/* Cropped image */
	.hero-diagonal__image {
		clip-path: polygon(
			805px 0,
			100% 0,
			100% 100%,
			70px 100%
		);
	}

	.hero-image {
		position: absolute;
		top: 0;
		left: auto;
		width: 1240px;
		right: 0;
		height: 100%;
		overflow: hidden;
		clip-path: polygon(
			725px 0,
			100% 0,
			100% 100%,
			65px 100%
		);

		opacity: 0;
		transform: translateY(100px);
		animation: image-slide-up 0.5s ease-out 0.5s forwards;
	}

	.hero-image img {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
	}

}

@media (max-width: 1600px) {
	.hero-content {
		width: 683px;
	}		
}

@media (max-width: 1440px) {
	.hero .hero-diagonal__line {
		display: none;
	}
	
	.hero-content {
    	width: 50%;
		max-width: 50%;   
	}
}	

@media (max-width: 1280px) {
    .hero {
		background-image: none!important;
        height: auto;
        max-height: none;
        min-height: 0;
        display: flex;
        flex-direction: column;
		padding-left: 0;
		padding-right: 0;
    }
	
	
    .hero-bg {
        position: relative;
        inset: auto;
        width: 100%;
        height: 320px;
        order: 1;
    }
    .hero-content {
        position: relative;
        top: auto;
		transform: translateY(0);
        left: auto;
        order: 2;
        width: 100%;
        max-width: 100%;
        padding: 40px var(--skin-gutter);
        background: var(--skin-grey-10);
    }
	
	.hero-diagonal {
		position:relative;
		min-height: 540px;
		overflow: hidden;
	}

	.hero-diagonal__imask {
		height: 250px;
		width: 250px;
		right: -150px;
		top: 410px;
		transform: scale(0.7) rotate(var(--rot-d));
	}
	.hero-diagonal__content {
		width: 100%;
		padding: 60px 20px;
	}

	.hero-diagonal__line,
	.hero-diagonal__gap {
		display: none;
	}
    .hero  .hero-bg { height: 540px; }
	
	.hero-content .h1 {
		margin-bottom: 0px;
	}
	.hero.show-grey .dl--grey {
		transform: translateX(25px);
	}
	
	.hero.show-grey .dl--red {
		transform: translateX(50px);
	}
	
	
}

@media (max-width: 1024px) {
    .hero-buttons { flex-direction: row; align-items: stretch; }
	
	.hero-content .h1 {
		margin-bottom: 0px;
	}
	.hero.show-grey .dl--grey {
		transform: translateX(25px);
	}
	
	.hero.show-grey .dl--red {
		transform: translateX(50px);
	}
}

@media (max-width: 767px) {
	
}
@keyframes image-reveal-up {
	to {
		clip-path: polygon(
			860px 0,
			100% 0,
			100% 100%,
			70px 100%
		);
	}
}

@keyframes image-slide-up {
	from {
		transform: translateY(100px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes hero-image-up {
	from {
		opacity: 0;
		transform: translateX(80px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;		
	}
}


@keyframes hero-red-up {
	from {
		opacity: 0;
		transform: translateY(100%) rotate(var(--rot-d));
	}
	to {
		opacity: 0.35;
		transform: translateY(0) rotate(var(--rot-d));
	}
}

@keyframes hero-grey-down {
	from {
		opacity: 0;
		transform: translateY(-100%) rotate(var(--rot-d));
	}
	to {
		opacity: 0.35;
		transform: translateY(0) rotate(var(--rot-d));
	}
}

@keyframes hero-red-2 {
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 0.35;
		transform: translateX(35px);
	}
}

@keyframes hero-grey-2 {
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 0.35;
		transform: translateX(70px);
	}
}

@keyframes red-line-up {
	from {
		transform: translateY(100%) rotate(var(--rot-d));
	}

	to {
		transform: translateY(0) rotate(var(--rot-d));
	}
}

@keyframes grey-line-down {
	from {
		transform: translateY(-100%) rotate(var(--rot-d));
	}

	to {
		transform: translateY(0) rotate(var(--rot-d));
	}
}