/*
Theme Name:   Bricks Child Theme
Theme URI:    https://bricksbuilder.io/
Description:  Use this child theme to extend Bricks.
Author:       Bricks
Author URI:   https://bricksbuilder.io/
Template:     bricks
Version:      1.1
Text Domain:  bricks
*/

/*** GENERAL ***/
/** HEADING ANIM **/
/* Base state (before visible) */
.bricks-is-frontend .h-blur {
	opacity: 0;
	filter: blur(14px);
	transform:
		translate3d(0px, 40px, 0px)
		scale3d(0.9, 0.9, 1)
		rotateX(0deg)
		rotateY(0deg)
		rotateZ(0deg)
		skew(10deg, 0deg);

	transform-origin: 50% 50%;
	will-change: transform, opacity, filter;
}

/* Visible / animated-in state */
.bricks-is-frontend .h-blur.is-visible {
	opacity: 1;
	filter: blur(0px);
	transform:
		translate3d(0px, 0px, 0px)
		scale3d(1, 1, 1)
		rotateX(0deg)
		rotateY(0deg)
		rotateZ(0deg)
		skew(0deg, 0deg);
}

/* Animate the change */
.bricks-is-frontend .h-blur {
	transition:
		transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 700ms ease-out,
		filter 900ms ease-out;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bricks-is-frontend .h-blur, .bricks-is-frontend .h-blur.is-visible {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
		filter: none !important;
	}
}

/** Fade Up Animation **/
.bricks-is-frontend .h-anim-up {
	opacity: 0;
	transform: translateY(var(--hwr-up-distance, 35px));
	transition:
		opacity var(--hwr-up-duration, 3000ms) var(--hwr-up-ease, cubic-bezier(.2,.8,.2,1)) var(--hwr-delay, 0ms),
		transform var(--hwr-up-duration, 3000ms) var(--hwr-up-ease, cubic-bezier(.2,.8,.2,1)) var(--hwr-delay, 0ms);
	will-change: opacity, transform;
}
.bricks-is-frontend .h-anim-up.is-inview {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.bricks-is-frontend .h-anim-up {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}


/* Reusable blob mask for any wrapper that contains an <img> */
.blob-mask {
	/* blob SVG as mask */
	--blob-mask: url("data:image/svg+xml;utf8,\
		<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'>\
		<path d='M60.5,-59.8C76.4,-44.7,85.6,-22.4,85.9,0.3C86.3,23,77.7,46,61.9,62.3C46,78.5,23,87.9,1.2,86.8C-20.6,85.6,-41.3,73.7,-56.4,57.5C-71.6,41.3,-81.3,20.6,-82.5,-1.1C-83.6,-22.9,-76.1,-45.8,-61,-60.8C-45.8,-75.8,-22.9,-83,-0.3,-82.7C22.4,-82.5,44.7,-74.8,60.5,-59.8Z' transform='translate(100 100)'/>\
		</svg>");
}

.blob-mask > img{
	display: block;
	width: 100%;
	height: auto;

	-webkit-mask-image: var(--blob-mask);
	mask-image: var(--blob-mask);

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	-webkit-mask-position: center;
	mask-position: center;

	-webkit-mask-size: 100% 110%;
	mask-size: 100% 110%;
}

/** Gloss Button Effect **/
.gloss-btn, .bricks-button.bricks-background-primary {
	position: relative;
	overflow: hidden;
	transition: all .15s ease-in-out;
}

.gloss-btn:hover, .bricks-button.bricks-background-primary:hover {
	transform: translatey(-3px);
}

.gloss-btn::before, .bricks-button.bricks-background-primary::before {
	content: "";
	position: absolute;
	top: 0;
	left: -150%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		120deg,
		rgba(255, 255, 255, 0.0) 0%,
		rgba(255, 255, 255, 0.4) 50%,
		rgba(255, 255, 255, 0.0) 100%
	);
	transform: skewX(-20deg);
	transition: all 1s ease;
}

.gloss-btn:hover::before, .bricks-button.bricks-background-primary:hover::before {
	left: 150%;
}


/** Heading Bar **/
.header__nav ul:not(.bricks-mobile-menu) .bricks-menu-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-left: 15px;
}

/* Accent bar */
.header__nav ul:not(.bricks-mobile-menu):not(.sub-menu) > .bricks-menu-item::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 0;
	width: 4px;
	height: 0;
	background: var(--gold);
	transform: skewX(-14deg);
	transform-origin: top;
	min-height: unset;
	transition: height 260ms ease;
}

.header__nav ul:not(.bricks-mobile-menu) .bricks-menu-item:hover::before,
.header__nav ul:not(.bricks-mobile-menu) .bricks-menu-item.current-menu-item::before {
	height: 100%;
}


/** Solutions Tabs **/
.tab-title .solutions-tabs__title {
	display: inline;
	background-color: transparent;
	background-image: linear-gradient(to top, var(--gold) 0px 0px), linear-gradient(to top, transparent 0px, transparent 0px);
	background-repeat: no-repeat;
	background-position: left bottom, left bottom;
	background-size: 0% 2px, 100% 2px;
	transition: background-size 1s cubic-bezier(.2,.8,.2,1);
	padding-bottom: 3px;
} 

.tab-title.brx-open .solutions-tabs__title {
	background-position: left bottom, left bottom;
	background-size: 100% 2px, 100% 2px;
}

.solutions-tabs__sub {
	max-height: 0px;
	transition: all .3s ease-in-out;
	overflow: hidden;
}

.tab-title.brx-open .solutions-tabs__sub {
	max-height: 400px;
}

/*** HOME ***/


/*** ABOUT ***/
.process__card:hover {
	transform: translateY(-3px);
	border: 1px solid #fff !important;
	background: rgba(250,250,250, .05) !important;
}

.process__ib .icon {
	transition: all .15s ease-in-out;
}

.process__card:hover .process__ib .icon {
	background-color: var(--gold);
	border-color: var(--gold);
} 

.process__ib h3 {
	margin-bottom: 10px;
}

/*** SOLUTIONS - OVERALL ***/
.horizontal-solutions .tab-menu {
	position: relative;
	display: flex;
	gap: 12px;
	padding: 6px;
}

.horizontal-solutions .tab-menu .tab-title {
	position: relative;
	z-index: 2;
}

/* Turn off Bricks' active bg because the pill handles it */
.horizontal-solutions .tab-menu .tab-title.brx-open {
	background: transparent !important;
}

.horizontal-solutions .tab-menu .tab-indicator {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-radius: var(--border-radius);
	background: var(--dark-green);
	transition: transform 280ms ease, width 280ms ease, height 280ms ease;
	will-change: transform, width, height;
}