@import "@{parenturl}/less/mixins.less";
@import "@{themeurl}/less/vars.less";

section {
	position:relative;
	z-index:1;
}

.hero {
	video {
		max-height:800px;
	}
	h1 {
		background-color:fade(#fff, 75);
		.blur(10px);
		color:@blue;
		margin-top:2.5em;
		.max({ margin-top:.75em; });
		.font(Montserrat, 300, 54px);
		font-size:~"clamp(24px, 4vw, 54px)";
		margin-bottom:.75em;
		padding:.75em .75em .75em 2em;
		text-align:right;
		text-transform:none;
		width:fit-content;
		b {
			.inherit();
			.font(inherit, 500, 1.35em);
		}
	}
	.button {
		font-size:~"clamp(12px, 2vw, 24px)";
	}
	.overlay {
		width:fit-content;
		height:100%;
		margin-right:auto;
		.transition();
		opacity:1;
		pointer-events:auto;
	}
	.play {
		bottom:~"clamp(25px, 10vw, 75px)";
		width:~"clamp(100px, 15vw, 255px)";
		position:absolute;
		@media (min-width:769px) {
			left:0;
			right:0;	
		}
		@media (max-width:768px) {
			right:25px;	
		}
		margin:auto;
		.transition(opacity);
		opacity:1;
		pointer-events:auto;
	}
	@media (min-width:540px) {
		.clip(~"0 0, 100% 0, 100% calc(100% - 40px), calc(50% - -50px) calc(100% - 40px), 50% 100%, calc(50% - 50px) calc(100% - 40px), 0 calc(100% - 40px)");
	}
	.transition();
	
	&.played {
		.clip(~"0 0, 100% 0, 100% 100%, calc(50% - -50px) 100%, 50% 100%, calc(50% - 50px) 100%, 0 100%");
		.overlay, .play {
			opacity:0;
			pointer-events:none;
		}
	}
}

.up() {
	position:relative;
	&:before {
		content:' ';
		display:block;
		position:absolute;
		width:66px;
		height:33px;
		.clip(@arrow_up);
		background-color:#fff;
		left:0;
		right:0;
		top:-32px;
		margin:auto;
	}
}
.down() {
	position:relative;
	&:after {
		content:' ';
		display:block;
		position:absolute;
		width:66px;
		height:33px;
		.clip(@arrow_down);
		background-color:#fff;
		left:0;
		right:0;
		bottom:-32px;
		margin:auto;
	}
}

#welcome {
	.margin-ends(7vw);
	
	h2 {
		color:@blue;
		.font(Montserrat, 400, 64px);
		.max({ font-size:42px; });
		margin-bottom:50px;
		text-align:center;
		text-transform:none;
		img {
			vertical-align:middle;
		}
	}
}

#testimonials {
	.margin-ends(7vw);
	padding-top:5vw;
	padding-bottom:3vw;
	background-image:url('/wp-content/uploads/2021/10/testimonials.jpg');
	> div {
		overflow:visible;
	}
	
	h2 {
		background-color:#fff;
		color:@blue;
		.font(Montserrat, 400, 54px);
		.max({ font-size:36px; });
		margin:0 auto;
		padding:.375em 1em;
		text-align:center;
		text-transform:none;
		width:fit-content;
		.up();
	}
	
	.Kathy span.su-lightbox {
		background-image:url('/wp-content/uploads/2017/12/kathy.png');
	}
	.Rebecca span.su-lightbox {
		background-image:url('/wp-content/uploads/2017/12/rebecca.png');
	}
	.Courtney span.su-lightbox {
		background-image:url('/wp-content/uploads/2017/12/courtney.png');
	}
	.Jerry span.su-lightbox {
		background-image:url('/wp-content/uploads/2019/01/Jerry.jpg');
	}
	.Alice span.su-lightbox {
		background-image:url('/wp-content/uploads/2019/01/Alice.jpg');
	}
	.Kristjana span.su-lightbox {
		background-image:url('/wp-content/uploads/2019/01/Kristjana.jpg');
	}
	.Leland span.su-lightbox {
		background-image:url('/wp-content/uploads/2019/01/Leland.jpg');
	}
	.David span.su-lightbox {
		background-image:url('/wp-content/uploads/2021/08/david.png');
	}
	.Pat span.su-lightbox {
		background-image:url('/wp-content/uploads/2021/08/pat.png');
	}
	.Phillip span.su-lightbox {
		background-image:url('/wp-content/uploads/2021/08/Phillip.png');
	}
	.Patients span.su-lightbox {
		background-image:url('/wp-content/uploads/2019/01/felton-film-logo.jpg');
	}
	
	.slick-arrow {
		position:absolute;
		height:~"calc(100vw / 3 * .5)";
		.max({ height:~"calc(100vw / 2 * .5)"; }, 1280);
		.max({ height:~"calc(100vw / 1 * .5)"; });
		top:25px;
		z-index:10;
		background-color:fade(@orange, 85);
		.blur(5px);
		padding:25px;
		.vertAlign;
		cursor:pointer;
	}
	.prev {
		left:0;
	}
	.next {
		right:0;
		img {
			.rotate(180deg);
		}
	}
	
	.testimonial {
		padding-bottom:34px;
		.su-lightbox {
			border:25px solid #fff;
			display:block;
			height:0;
			padding-bottom:50%;
			background-size:cover;
			background-position:center;
			position:relative;
			svg {
				position:absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				margin:auto;
				cursor:pointer;
			}
		}
		blockquote {
			background-color:#fff;
			margin:0;
			padding:20px;
			cite, p {
				color:#595b5c;
				display:block;
				.font(Montserrat, 400, 18px, 1.5, italic);
				text-align:center;
			}
			cite:before {
				content:'-';
			}
			.down();
		}
	}
	@media (min-width:1281px) {
		.testimonial {
			& {
				blockquote, .su-lightbox svg {
					opacity:0;
					pointer-events:none;
					.transition();
				}
			}
			&.slick-current + .slick-active {
				blockquote, .su-lightbox svg {
					opacity:1;
					pointer-events:auto;
				}
			}
		}
	}
}

#services {
	.margin-ends(7vw);
	.max-width(1280px);
	position:relative;
	z-index:0;
	&:before {
		content:' ';
		display:block;
		position:absolute;
		z-index:-1;
		width:1690px;
		height:1690px;
		top:50%;
		left:50%;
		.translate(-50%, -50%);
		background-image:url('/wp-content/uploads/2021/10/services.svg');
		background-size:contain;
		background-position:center;
		background-repeat:no-repeat;
	}
	
	display:grid;
	grid-gap:25px;
	
	#cosmetic {
		background-image:url('/wp-content/uploads/2017/12/Cosmetic.jpg');
	}
	#laser {
		background-image:url('/wp-content/uploads/2017/12/Invisalign.jpg');
	}
	#general {
		background-image:url('/wp-content/uploads/2017/12/General.jpg');
	}
	#crown {
		background-image:url('/wp-content/uploads/2017/10/new-guy.jpg');
	}
	
	--service: 54px;
	.max({ --service: 42px; }, 1280);
	.service {
		position:relative;
		padding:40px;
		width:100%;
		height:100%;
		.vertAlign;
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
		> div {
			position:relative;
		}
		&:before {
			content:' ';
			display:block;
			position:absolute;
			z-index:-1;
			top:50%;
			left:50%;
			.translate(-50%, -50%);
		}
		h2 {
			color:#fff;
			.font(Montserrat, 400, var(--service));
			margin-bottom:25px;
			text-align:center;
			text-transform:none;
		}
		.copy {
			margin-bottom:50px;
			p {
				.max({ font-size:14px; line-height:1.5; }, 1280);
			}
		}
		p {
			color:#fff;
		}
		.button {
			font-size:~"clamp(16px, 6vw, 24px)";
		}
	}
	
	.service {
		.clip(@diamond);
		z-index:10;
		.transition();
		&:before {
			background-color:fade(@blue, 75);
			width:100%;
			height:100%;
			.transition();
		}
		> div {
			.translateY(50%);
			top:~"calc(var(--service) / -2)";
			.transition();
		}
		.copy, .button {
			opacity:0;
			pointer-events:none;
			.transition();
		}
	}
	.service:hover {
		.clip(@square);
		z-index:20;
		&:before {
			background-color:fade(#595b5c, 92);
			width:~"calc(100% - 30px)";
			height:~"calc(100% - 30px)";
		}
		> div {
			.translateY(0);
			top:0;
		}
		.copy, .button {
			opacity:1;
			pointer-events:auto;
		}
	}
	
	@media (min-width:769px) {
		grid-template-columns:repeat(4, 1fr);
		grid-template-rows:repeat(4, 1fr);
		
		.service {
			aspect-ratio: 1/1;
		}
		.service:nth-child(1) {
			grid-row:1 / span 2;
			grid-column:2 / span 2;
		}
		.service:nth-child(2) {
			grid-row:2 / span 2;
			grid-column:1 / span 2;
		}
		.service:nth-child(3) {
			grid-row:2 / span 2;
			grid-column:3 / span 2;
		}
		.service:nth-child(4) {
			grid-row:3 / span 2;
			grid-column:2 / span 2;
		}
		
	}
	@media (max-width:768px) {
		.service {
			.max-width(640px);
		}
		.service {
			.clip(@square);
			z-index:20;
			&:before {
				background-color:fade(#595b5c, 92);
				width:~"calc(100% - 30px)";
				height:~"calc(100% - 30px)";
			}
			> div {
				.translateY(0);
				top:0;
			}
			.copy, .button {
				opacity:1;
				pointer-events:auto;
			}
		}
	}
	
}

#love {
	.margin-ends(7vw);
	.padding-ends(5vw);
	background-image:url('/wp-content/uploads/2021/10/love.jpg');
	background-size:cover;
	background-position:center;
	> div {
		overflow:visible;
	}
	
	h2 {
		background-color:#fff;
		color:@orange;
		.font(Montserrat, 400, 54px);
		.max({ font-size:36px; });
		margin:0 auto 50px;
		padding:.375em 1em;
		text-align:center;
		text-transform:none;
		width:fit-content;
		.up();
		.down();
	}
	p {
		color:#fff;
		font-size:24px;
		.max({ font-size:18px; });
		text-align:center;
	}
}


#cta {
	.margin-ends(7vw);
	p {
		text-align:center;
		font-size:20px;
		.max({ font-size:16px; });
	}
}