/* =========================================================
   bb-parallax — the tilted, drifting earlier-work band
   Classes (Elementor → Advanced → CSS Classes):
   - "bb-parallax-stage"  the band's image area. Clips the rows and fades
                          them out at the top and bottom edges.
   - "bb-parallax-group"  one container inside the stage holding every row.
                          It's rotated -12° as a whole, so rows stay parallel
                          and evenly spaced instead of crossing each other.
   - "bb-parallax"        a row of screenshots; glides slowly left on its own
                          (add "bb-parallax-rev" to glide right). The script
                          copies each row once so it loops without a gap.
   - "bb-tab"             the label container, first thing in the band: a white
                          tab hanging from the section above.
   Reduced motion / no JS / editor: rows sit still.
   Screenshots inside rows are cropped to one size (top of the page shown),
   so any image can be dropped in.
   Kill switch: remove the classes, or 'bb-parallax' => false.
   ========================================================= */

.bb-parallax-stage {
	position: relative;
	overflow: hidden;
	height: var(--bb-stage-h, 720px) !important;
	min-height: 0 !important;
	justify-content: center !important;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.bb-parallax-group {
	width: 170% !important;
	max-width: none !important;
	margin-left: -35% !important;
	flex: none !important;
	align-self: auto !important;
	transform: rotate(-12deg);
	transform-origin: 50% 50%;
}

.bb-parallax {
	flex-wrap: nowrap !important;
	transform: translate3d(var(--bb-drift, 0px), 0, 0);
	transition: none !important; /* Elementor containers ease transforms by default, which made rows "fly in" */
}
.bb-parallax > * { flex: none !important; }
.bb-parallax img {
	display: block;
	width: var(--bb-tile-w, 320px) !important;
	height: var(--bb-tile-h, 200px) !important;
	max-width: none !important;
	object-fit: cover;
	object-position: top center;
	border-radius: 10px;
	background: var(--bb-mist);
	box-shadow: 0 1px 2px rgba(11, 18, 32, .06), 0 12px 28px -12px rgba(11, 18, 32, .22);
}

@media (max-width: 767px) {
	.bb-parallax-stage { --bb-tile-w: 200px; --bb-tile-h: 125px; --bb-stage-h: 460px; }
}

@media (prefers-reduced-motion: reduce) {
	.bb-parallax { transform: none; }
}

/* Label tab hanging from the section above the band. */
.bb-tab {
	position: relative;
	z-index: 6;
	align-self: flex-start;
	margin: 0 0 0 max(24px, calc((100% - 1240px) / 2 + 24px)) !important;
	padding: 14px 26px 16px !important;
	width: auto !important;
	background: #FFFFFF;
	border-radius: 0 0 18px 18px;
	box-shadow: 0 18px 28px -22px rgba(11, 18, 32, .35);
}
.bb-tab p { margin: 0; }