/*
Theme Name:   XPro Jet Charters
Description:  XPro Jet Charters child theme.
Author:       HWR Design
Author URI:   https://hwrdesign.com/
Template:     bricks
Version:      1.1
Text Domain:  bricks
*/


/*** GENERAL ***/

/** Image Slash **/
.image-slash {
	position: relative;
}

.image-slash:before {
	content: '';
	width: 200px;
	height: calc(100% + 60px);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) skew(-30deg);
	background: rgba(103,37,163,.3);
}

.image-slash img {
	z-index: 1;
}

/** Buttons **/
/* .bricks-button:hover {
transform: translateY(-3px);
} */

.bricks-button {
	position: relative;
	overflow: hidden;
}

/* Primary */
.bricks-background-primary:before, .bricks-background-secondary: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.1) 50%, rgba(255, 255, 255, 0.0) 100%);
	transform: skewX(-20deg);
	transition: all 1s 
		ease;
}

.bricks-background-primary:hover::before, .bricks-background-secondary:hover::before {
	left: 150%;
}

/* Light */
.bricks-background-light:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0%;
	background: var(--dark-purple);
	z-index: -1;
	transition: height 0.35s ease;
}

/* Hover In */
.bricks-background-light:hover::before {
	height: 100%;
	opacity: 1;
}

/** Animated Plane **/
/* SECTION: creates the scroll length (pin duration) */
.animated-plane {
	position: relative;

	/* Adjust this to control how long the section stays "locked" */
	--pin-scroll: 20vh; 

	/* Adjust plane vertical position */
	--plane-y: -30vh;

	min-height: calc(100vh + var(--pin-scroll));
}

/* JS will wrap your existing children into this sticky stage automatically */
.animated-plane__stage {
	top: 0;
	height: calc(100vh);
	overflow: hidden;

	display: flex;
	align-items: center;
}

/* Keep headings above background, but below plane */
.animated-plane__stage .brxe-container {
	position: relative;
	z-index: 2;
	width: min(1100px, 92vw);
	margin: 0 auto;
}

/* Make the plane overlay the text */
.animated-plane__plane {
	position: absolute;
	left: 0;
	top: 0; /* we’ll move it down via translateY */
	z-index: 5;

	width: clamp(180px, 18vw, 420px);
	height: auto;

	pointer-events: none;
	will-change: transform;
	transform: translate3d(-140%, var(--plane-y), 0);
}

/* A little polish on the heading swap */
.animated-plane__heading {
	transition: opacity 180ms ease, filter 18