/* =========================================================
   VISIONDECOR GLOBAL POLISH
========================================================= */

html {
	scroll-behavior: smooth;
}

body {
	overflow-x: hidden;
}

::selection {
	background: #d5aa32;
	color: #071a3d;
}


/* =========================================================
   REVEAL ANIMATIONS
========================================================= */

.vd-reveal {
	opacity: 0;
	transform: translateY(34px);
	transition:
		opacity 700ms ease,
		transform 700ms cubic-bezier(.2, .75, .25, 1);
	will-change: opacity, transform;
}

.vd-reveal.vd-is-visible {
	opacity: 1;
	transform: translateY(0);
}

.vd-reveal-left {
	opacity: 0;
	transform: translateX(-38px);
	transition:
		opacity 750ms ease,
		transform 750ms cubic-bezier(.2, .75, .25, 1);
}

.vd-reveal-left.vd-is-visible {
	opacity: 1;
	transform: translateX(0);
}

.vd-reveal-right {
	opacity: 0;
	transform: translateX(38px);
	transition:
		opacity 750ms ease,
		transform 750ms cubic-bezier(.2, .75, .25, 1);
}

.vd-reveal-right.vd-is-visible {
	opacity: 1;
	transform: translateX(0);
}

.vd-delay-1 {
	transition-delay: 80ms;
}

.vd-delay-2 {
	transition-delay: 160ms;
}

.vd-delay-3 {
	transition-delay: 240ms;
}

.vd-delay-4 {
	transition-delay: 320ms;
}


/* =========================================================
   BUTTON POLISH
========================================================= */

.vd-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform 220ms ease,
		box-shadow 220ms ease,
		background 220ms ease,
		color 220ms ease;
}

.vd-button::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		120deg,
		transparent 15%,
		rgba(255, 255, 255, 0.28) 50%,
		transparent 85%
	);
	content: "";
	transform: translateX(-130%);
	transition: transform 600ms ease;
}

.vd-button:hover::before {
	transform: translateX(130%);
}

.vd-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(7, 26, 61, 0.16);
}

.vd-button:active {
	transform: translateY(0);
}


/* =========================================================
   CARD POLISH
========================================================= */

.vd-service-card,
.vd-project-card,
.vd-process-step,
.vd-why-card,
.vd-review-card,
.vd-gallery-photo-card,
.vd-diaspora-card,
.vd-testimonials-photo-card,
.vd-video-testimonial-card,
.vd-contact-card,
.vd-about-value-card {
	transition:
		transform 320ms ease,
		box-shadow 320ms ease,
		border-color 320ms ease,
		background 320ms ease;
}

.vd-service-card:hover,
.vd-process-step:hover,
.vd-why-card:hover,
.vd-review-card:hover,
.vd-testimonials-photo-card:hover,
.vd-video-testimonial-card:hover,
.vd-contact-card:hover {
	transform: translateY(-7px);
}


/* =========================================================
   IMAGE POLISH
========================================================= */

.vd-service-image-wrapper,
.vd-project-image-link,
.vd-gallery-photo-wrap,
.vd-diaspora-image-wrap,
.vd-services-image-wrap,
.vd-about-image,
.vd-about-team-image,
.vd-testimonials-client-image,
.vd-video-testimonial-media {
	backface-visibility: hidden;
	transform: translateZ(0);
}

.vd-service-image,
.vd-project-image,
.vd-gallery-photo-wrap img,
.vd-diaspora-image-wrap img,
.vd-services-image-wrap img,
.vd-about-image img,
.vd-about-team-image img,
.vd-testimonials-client-image img {
	transition: transform 750ms cubic-bezier(.2, .75, .25, 1);
}

.vd-service-card:hover .vd-service-image,
.vd-project-card:hover .vd-project-image,
.vd-gallery-photo-card:hover img,
.vd-diaspora-card:hover img,
.vd-services-image-card:hover img,
.vd-about-image:hover img,
.vd-about-team-image:hover img,
.vd-testimonials-photo-card:hover img {
	transform: scale(1.055);
}


/* =========================================================
   TEXT LINK POLISH
========================================================= */

.vd-text-link,
.vd-project-link,
.vd-services-card-cta,
.vd-projects-view-all,
.vd-process-header-link {
	position: relative;
}

.vd-text-link::after,
.vd-project-link::after,
.vd-projects-view-all::after,
.vd-process-header-link::after {
	position: absolute;
	right: 0;
	bottom: -5px;
	left: 0;
	height: 1px;
	background: currentColor;
	content: "";
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 250ms ease;
}

.vd-text-link:hover::after,
.vd-project-link:hover::after,
.vd-projects-view-all:hover::after,
.vd-process-header-link:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}


/* =========================================================
   DECORATIVE FLOATING ELEMENTS
========================================================= */

.vd-float-slow {
	animation: vd-float 7s ease-in-out infinite;
}

.vd-float-medium {
	animation: vd-float 5.5s ease-in-out infinite;
}

@keyframes vd-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-10px);
	}
}


/* =========================================================
   HEADER POLISH
========================================================= */

.site-header,
.vd-header,
.ns-header {
	transition:
		background 250ms ease,
		box-shadow 250ms ease,
		backdrop-filter 250ms ease;
}

body.vd-scrolled .site-header,
body.vd-scrolled .vd-header,
body.vd-scrolled .ns-header {
	background: rgba(3, 16, 39, 0.9);
	box-shadow: 0 12px 35px rgba(3, 16, 39, 0.14);
	backdrop-filter: blur(18px);
}


/* =========================================================
   INPUT POLISH
========================================================= */

input,
select,
textarea {
	transition:
		border-color 200ms ease,
		box-shadow 200ms ease,
		background 200ms ease;
}

input:focus,
select:focus,
textarea:focus {
	background: #ffffff;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.vd-reveal,
	.vd-reveal-left,
	.vd-reveal-right {
		opacity: 1;
		transform: none;
	}
}