/* Homepage cinematic stack: native scroll owns the video and content timeline. */

html.cemacon-video-loading,
html.cemacon-video-loading body {
	overflow: hidden !important;
	overscroll-behavior: none;
}
html.cemacon-video-loading { scrollbar-gutter: stable; }

html.cemacon-video-loading .cemacon-scroll-hint {
	display: none !important;
}

.cemacon-video-loader {
	position: fixed;
	inset: auto 0 7vh;
	margin: auto;
	width: min(420px, calc(100vw - 40px));
	box-sizing: border-box;
	padding: 24px 28px;
	border: 1px solid #faa21b;
	border-radius: 14px;
	background: rgba(25, 25, 25, 0.94);
	color: #fff;
	text-align: center;
	font: inherit;
	box-shadow: 0 8px 36px #0003;
}

.cemacon-video-loader::backdrop { background: rgba(0, 0, 0, 0.12); }
.cemacon-video-loader p { margin: 16px 0; }
.cemacon-video-loader__spinner {
	display: block;
	width: 40px;
	height: 40px;
	margin: auto;
	border: 4px solid #faa21b40;
	border-top-color: #faa21b;
	border-radius: 50%;
	animation: cemacon-video-loader-spin 0.85s linear infinite;
}
.cemacon-video-loader progress { width: 100%; height: 6px; accent-color: #faa21b; }
.cemacon-video-loader progress::-webkit-progress-bar { background: #ffffff25; border-radius: 6px; }
.cemacon-video-loader progress::-webkit-progress-value { background: #faa21b; border-radius: 6px; }
.cemacon-video-loader progress::-moz-progress-bar { background: #faa21b; }
.cemacon-video-loader button {
	border: 0;
	border-radius: 30px;
	padding: 12px 28px;
	background: #faa21b;
	color: #242424;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.cemacon-video-loader button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.cemacon-video-loader button[hidden] { display: none !important; }
.cemacon-video-loader--error .cemacon-video-loader__spinner,
.cemacon-video-loader--error progress { display: none; }
@keyframes cemacon-video-loader-spin { to { transform: rotate(360deg); } }

@keyframes cemacon-scroll-motion-pending-fallback {
	to {
		visibility: visible;
	}
}

@keyframes cemacon-hero-intro-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes cemacon-scroll-hint-wheel {
	0% {
		top: 6px;
		opacity: 0;
	}

	40% {
		opacity: 1;
	}

	100% {
		top: 18px;
		opacity: 0;
	}
}

.cemacon-scroll-hint {
	display: none;
}

@media only screen and (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
	/*
	 * PHP adds the pending class before first paint. JavaScript removes it only
	 * after the initial scrub state is applied. The animation remains a safety
	 * fallback when the page structure or JavaScript cannot initialize.
	 */
	body.home.cemacon-scroll-motion-pending:not(.elementor-editor-active)
		.elementor[data-elementor-type="wp-page"]
		> .e-con.e-parent {
		visibility: hidden;
		animation: cemacon-scroll-motion-pending-fallback 0s 3s forwards;
	}

	body.home.cemacon-scroll-motion-active .cemacon-scroll-stack {
		position: relative;
		isolation: isolate;
	}

	body.home.cemacon-scroll-motion-active .cemacon-scroll-stack__panel {
		position: sticky !important;
		top: 0;
		z-index: var(--cemacon-stack-index, 1);
		width: 100%;
		height: 100vh;
		height: 100svh;
		min-height: 100vh !important;
		min-height: 100svh !important;
		overflow: hidden;
	}

	/*
	 * Elementor keeps the background-video wrapper at the boxed content width.
	 * Let the media layer fill the full-width sticky hero while its inner
	 * content remains constrained by Elementor's normal container settings.
	 */
	body.home.cemacon-scroll-scrub-active
		.cemacon-hero-video
		.elementor-background-video-container {
		top: 0 !important;
		right: auto !important;
		bottom: 0 !important;
		left: 50% !important;
		width: 100vw !important;
		max-width: none !important;
		margin: 0 !important;
		transform: translateX(-50%) !important;
	}

	body.home.cemacon-scroll-scrub-active
		.cemacon-hero-video
		.elementor-background-video-container
		video {
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		max-height: none !important;
		transform: none !important;
		object-fit: cover;
	}

	/*
	 * One panel viewport now owns the complete chapter transition. Removing the
	 * extra viewport hold doubles timeline progress for the same scroll input.
	 */
	body.home.cemacon-scroll-motion-active
		.cemacon-scroll-stack__panel--motion-hold {
		margin-bottom: 0;
	}

	body.home.cemacon-scroll-motion-active
		.cemacon-hero-video.cemacon-scroll-stack__panel--motion-hold {
		margin-bottom: 0;
	}

	body.home.cemacon-scroll-motion-active
		.cemacon-scroll-stack__hero-spacer {
		display: block;
		width: 100%;
		height: 0;
		pointer-events: none;
	}

	body.home.cemacon-scroll-motion-active .cemacon-scroll-stack::after {
		content: '';
		display: block;
		width: 100%;
		height: 100vh;
		height: 100svh;
		pointer-events: none;
	}

	/* Extra native scroll for slower chapters; JS sizes and removes these spacers. */
	body.home.cemacon-scroll-motion-active .cemacon-scroll-stack__chapter-spacer {
		display: block;
		flex: 0 0 auto;
		width: 100%;
		height: 0;
		margin: 0;
		padding: 0;
		pointer-events: none;
	}

	/* Keep the Elementor background video hidden until its first decoded frame. */
	body.home.cemacon-scroll-motion-pending:not(.elementor-editor-active)
		.elementor[data-elementor-type="wp-page"]
		> .e-con.e-parent:first-child
		.elementor-background-video-container,
	body.home.cemacon-scroll-scrub-active
		.cemacon-hero-video
		.elementor-background-video-container {
		opacity: 0;
		transition: none !important;
	}

	body.home.cemacon-scroll-scrub-active
		.cemacon-hero-video.cemacon-hero-video--playing
		.elementor-background-video-container {
		opacity: 1;
	}

	/*
	 * Every later chapter is a transparent foreground layer over the original
	 * video panel. Clear both Elementor backgrounds and nested overlay pseudos.
	 */
	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--transparent,
	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--transparent
		> .e-con-inner {
		background-color: transparent !important;
		background-image: none !important;
	}

	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--transparent::before,
	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--transparent
		> .e-con-inner::before,
	body.home.cemacon-scroll-scrub-active
		:is(
			.cemacon-scroll-stack__panel--video-story,
			.cemacon-scroll-stack__panel--video-stats,
			.cemacon-scroll-stack__panel--video-positioning,
			.cemacon-scroll-stack__panel--video-inspiration,
			.cemacon-scroll-stack__panel--video-brick-products,
			.cemacon-scroll-stack__panel--video-ideas,
			.cemacon-scroll-stack__panel--video-trust,
			.cemacon-scroll-stack__panel--video-contact
		)
		.e-con::before,
	body.home.cemacon-scroll-scrub-active
		:is(
			.cemacon-scroll-stack__panel--video-story,
			.cemacon-scroll-stack__panel--video-stats,
			.cemacon-scroll-stack__panel--video-positioning,
			.cemacon-scroll-stack__panel--video-inspiration,
			.cemacon-scroll-stack__panel--video-brick-products,
			.cemacon-scroll-stack__panel--video-ideas,
			.cemacon-scroll-stack__panel--video-trust,
			.cemacon-scroll-stack__panel--video-contact
		)
		.e-con-inner::before {
		opacity: 0 !important;
		background: transparent !important;
	}

	body.home.cemacon-scroll-scrub-active
		:is(
			.cemacon-scroll-stack__panel--video-story,
			.cemacon-scroll-stack__panel--video-stats,
			.cemacon-scroll-stack__panel--video-positioning,
			.cemacon-scroll-stack__panel--video-inspiration,
			.cemacon-scroll-stack__panel--video-brick-products,
			.cemacon-scroll-stack__panel--video-ideas,
			.cemacon-scroll-stack__panel--video-trust,
			.cemacon-scroll-stack__panel--video-contact
		)
		.elementor-background-overlay {
		display: none !important;
	}

	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--transparent
		> .e-con-inner,
	body.home.cemacon-scroll-scrub-active
		.cemacon-hero-video
		> .e-con-inner {
		position: relative;
		z-index: 2;
	}

	/* Align the second chapter with the hero and keep its copy legible on video. */
	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--video-story
		> .e-con-inner {
		width: 100% !important;
		max-width: none !important;
		padding-right: clamp(40px, 5vw, 72px) !important;
		padding-left: clamp(40px, 5vw, 72px) !important;
	}

	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--video-story
		.elementor-widget-text-editor,
	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--video-story
		.elementor-widget-text-editor
		* {
		color: #fff !important;
	}

	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--video-story
		.elementor-widget-text-editor {
		flex: 0 0 auto;
	}

	/* Preserve the desktop composition while scaling the foreground on wide screens. */
	@media only screen and (min-width: 2200px) {
		body.home.cemacon-scroll-scrub-active
			.cemacon-scroll-stack__panel--video-positioning
			.cemacon-positioning__inner {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}

	/* Shared video overlay, including the uninterrupted ideas/trust chapters. */
	body.home.cemacon-scroll-scrub-active .cemacon-video-shared-overlay {
		position: absolute;
		inset: 0;
		z-index: 1;
		background: transparent;
		opacity: 0;
		transition: none !important;
		pointer-events: none;
	}

	/* Hide widget-owned static backgrounds; the shared video remains below. */
	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--video-positioning
		> .elementor-background-overlay,
	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--video-positioning
		.cemacon-positioning__background,
	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--video-positioning
		.cemacon-positioning__overlay,
	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--video-inspiration
		.cemacon-projects-inspiration__background,
	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--video-brick-products
		.cemacon-brick-products__background,
	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--video-ideas
		.cemacon-transform-ideas__background,
	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--video-trust
		.cemacon-transform-ideas__background,
	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--video-contact
		.cemacon-team-contact__background {
		visibility: hidden;
		opacity: 0 !important;
	}

	/*
	 * These properties are recalculated from native scroll on each animation
	 * frame. No transition may continue after the user stops or releases the
	 * scrollbar thumb.
	 */
	body.home.cemacon-scroll-scrub-active .cemacon-scroll-scrub-item {
		visibility: hidden;
		opacity: var(--cemacon-scroll-opacity, 0) !important;
		transform: translate3d(
			0,
			var(--cemacon-scroll-offset, -100vh),
			0
		) !important;
		transition: none !important;
		animation: none !important;
		will-change: transform, opacity;
	}

	/* The hero copy is present immediately and fades once on a top-page load. */
	body.home.cemacon-scroll-scrub-active.cemacon-hero-intro-entering
		.cemacon-hero-video
		> .e-con-inner {
		animation: cemacon-hero-intro-fade 700ms ease-out;
		will-change: opacity;
	}

	body.home.cemacon-scroll-scrub-active .cemacon-scroll-hint {
		position: fixed;
		bottom: clamp(20px, 3vh, 30px);
		left: 50%;
		z-index: 50;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 9px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #242424;
		font-family: inherit;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.16em;
		line-height: 1.2;
		text-align: center;
		text-transform: uppercase;
		text-shadow: 0 1px 10px rgba(255, 255, 255, 0.55);
		opacity: var(--cemacon-scroll-hint-opacity, 1);
		pointer-events: none;
		transform: translateX(-50%);
		transition: opacity 180ms linear;
		will-change: opacity;
	}

	.cemacon-scroll-hint__mouse {
		position: relative;
		display: block;
		width: 22px;
		height: 34px;
		border: 2px solid rgba(36, 36, 36, 0.62);
		border-radius: 12px;
		box-shadow: 0 1px 8px rgba(255, 255, 255, 0.4);
	}

	.cemacon-scroll-hint__wheel {
		position: absolute;
		top: 6px;
		left: 50%;
		width: 4px;
		height: 7px;
		border-radius: 2px;
		background: #f7a316;
		transform: translateX(-50%);
		animation: cemacon-scroll-hint-wheel 1.7s ease-in-out infinite;
	}

	body.home.cemacon-scroll-scrub-active .cemacon-scroll-scrub-overlay {
		opacity: var(--cemacon-scroll-overlay-opacity, 0) !important;
		transition: none !important;
		will-change: opacity;
	}

	body.home.cemacon-scroll-scrub-active
		.cemacon-scroll-stack__panel--video-brick-products
		.cemacon-brick-products__arrow {
		visibility: var(--cemacon-scroll-controls-visibility, hidden);
		opacity: var(--cemacon-scroll-controls-opacity, 0);
		pointer-events: var(--cemacon-scroll-controls-pointer-events, none);
		transition:
			background-color 180ms ease,
			color 180ms ease,
			transform 180ms ease;
	}

	body.home.cemacon-scroll-motion-active
		.cemacon-scroll-stack__panel
		.cemacon-positioning,
	body.home.cemacon-scroll-motion-active
		.cemacon-scroll-stack__panel
		.cemacon-brick-products,
	body.home.cemacon-scroll-motion-active
		.cemacon-scroll-stack__panel
		.cemacon-transform-ideas,
	body.home.cemacon-scroll-motion-active
		.cemacon-scroll-stack__panel
		.cemacon-team-contact {
		height: 100vh;
		height: 100svh;
		min-height: 100vh !important;
		min-height: 100svh !important;
	}

	body.home.cemacon-scroll-motion-active
		.cemacon-scroll-stack__panel--video-contact
		.cemacon-team-contact {
		align-items: center;
		padding-top: 60px !important;
		padding-bottom: 60px !important;
	}
}

/*
 * On very tall desktop displays, keep each chapter's scroll travel comparable
 * to a 1080px-high screen while the sticky panels still cover the full viewport.
 */
@media only screen and (min-width: 1025px) and (min-height: 1081px) and (prefers-reduced-motion: no-preference) {
	body.home.cemacon-scroll-motion-active
		.cemacon-scroll-stack__panel--motion-hold {
		margin-bottom: calc(1080px - 100vh);
		margin-bottom: calc(1080px - 100svh);
	}

	body.home.cemacon-scroll-motion-active
		.cemacon-hero-video.cemacon-scroll-stack__panel--motion-hold {
		margin-bottom: 0;
	}

	body.home.cemacon-scroll-motion-active
		.cemacon-scroll-stack__hero-spacer {
		margin-bottom: calc(1080px - 100vh);
		margin-bottom: calc(1080px - 100svh);
	}

	body.home.cemacon-scroll-motion-active .cemacon-scroll-stack::after {
		height: 1080px;
	}
}

/* Keep all positioning cards inside compact desktop/laptop viewports. */
@media only screen and (min-width: 1025px) and (max-height: 900px) and (prefers-reduced-motion: no-preference) {
	body.home.cemacon-scroll-motion-active
		.cemacon-scroll-stack__panel
		.cemacon-positioning {
		align-items: center;
		padding: 72px 24px 40px !important;
	}

	body.home.cemacon-scroll-motion-active
		.cemacon-scroll-stack__panel
		.cemacon-positioning__title {
		margin-bottom: clamp(32px, 5vh, 48px) !important;
		font-size: clamp(52px, 7vh, 64px) !important;
		line-height: 1.1 !important;
		letter-spacing: -3px !important;
	}

	body.home.cemacon-scroll-motion-active
		.cemacon-scroll-stack__panel
		.cemacon-positioning__card {
		gap: clamp(18px, 2.8vh, 24px) !important;
		padding-bottom: clamp(18px, 3vh, 26px) !important;
	}

	body.home.cemacon-scroll-motion-active
		.cemacon-scroll-stack__panel
		.cemacon-positioning__media {
		height: clamp(220px, 31vh, 280px) !important;
	}

	body.home.cemacon-scroll-motion-active
		.cemacon-scroll-stack__panel
		.cemacon-positioning__card-title {
		font-size: clamp(24px, 3.2vh, 30px) !important;
		line-height: 1.25 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cemacon-scroll-scrub-item {
		transform: none !important;
	}
}