/* =====================================================================
   Become Brand — motion layer styles (chosen Animation-Lab effects).
   All elements here are injected by motion.js / motion-scroll.js.
   ===================================================================== */

/* ---- B14: morphing submit button --------------------------------- */

.bbm-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.bbm-ico { flex-shrink: 0; }

/* ---- B13: WhatsApp companion pill -------------------------------- */

.bbm-wa-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	margin-inline-start: 4px;
	box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
	align-self: center;
}

/* ---- hero canvases + ghost words ---------------------------------- */

.bbm-hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.6;
}

.bbm-ghost-word {
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(50%, -50%);
	font-weight: 900;
	font-size: clamp(130px, 24vw, 320px);
	letter-spacing: -8px;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(230, 55, 120, 0.16);
	pointer-events: none;
	white-space: nowrap;
	z-index: 0;
}

.bbm-ghost-word--num {
	-webkit-text-stroke: 2px rgba(230, 55, 120, 0.5);
	z-index: 1;
}

/* ---- H04: cinema bars --------------------------------------------- */

.bbm-cine {
	position: absolute;
	left: 0;
	right: 0;
	height: 50%;
	background: #0D0D0D;
	z-index: 5;
	pointer-events: none;
}

.bbm-cine--t { top: 0; }
.bbm-cine--b { bottom: 0; }

/* ---- H05: floating shapes ----------------------------------------- */

.bbm-float {
	position: absolute;
	pointer-events: none;
	will-change: transform;
	z-index: 0;
}

/* ---- E07: particle words over the contact hero -------------------- */

.bbm-e07 { position: relative; margin-top: 26px; }
.bbm-e07 canvas { display: block; width: 100%; height: 150px; }

/* ---- S09: giant crossing words (homepage) ------------------------- */

.bbm-s09 {
	position: relative;
	background: #fff;
	border-bottom: 1px solid var(--bb-border);
	height: 190px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bbm-s09__back {
	position: absolute;
	font-weight: 900;
	font-size: 150px;
	letter-spacing: -6px;
	color: rgba(230, 55, 120, 0.1);
	white-space: nowrap;
}

.bbm-s09__front {
	position: absolute;
	font-weight: 900;
	font-size: 96px;
	letter-spacing: -4px;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(13, 13, 13, 0.3);
	white-space: nowrap;
}

/* ---- S03: word cycler strip (services) ---------------------------- */

.bbm-s03 { background: var(--bb-dark); height: 460px; }
.bbm-s03__pin {
	position: sticky;
	top: 40vh;
	display: flex;
	justify-content: center;
	padding: 0 24px;
}
.bbm-s03__h {
	font-size: clamp(30px, 5vw, 54px);
	font-weight: 900;
	letter-spacing: -1.5px;
	color: #fff;
	margin: 0;
	text-align: center;
}
.bbm-s03__word {
	display: inline-block;
	color: var(--bb-primary);
	min-width: 4.4em;
	text-align: center;
}

/* ---- E09: depth tunnel (services) --------------------------------- */

.bbm-e09 { background: #08080A; height: 780px; }
.bbm-e09__pin {
	position: sticky;
	top: 90px;
	height: 400px;
	overflow: hidden;
	perspective: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bbm-e09__ring {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 250px;
	height: 250px;
	border: 1.5px solid;
	border-radius: 26px;
	font-weight: 900;
	font-size: 27px;
	will-change: transform;
}

/* ---- S10: problem section morphs dark (ppc) ----------------------- */

.bbm-s10 { transition: background-color 0.7s ease; }
.bbm-s10 .bb-pg-h2,
.bbm-s10 .bb-pg-lead { transition: color 0.7s ease; }
.bbm-s10--dark { background-color: var(--bb-dark) !important; }
.bbm-s10--dark .bb-pg-h2 { color: #fff !important; }
.bbm-s10--dark .bb-pg-lead { color: rgba(255, 255, 255, 0.6) !important; }

/* ---- S01: pinned state-swap (video process) ----------------------- */

.bbm-s01-track {
	position: relative;
	display: block !important;
	height: 340px;
}

.bbm-s01-panel {
	position: absolute !important;
	inset: 0 auto 0 auto;
	right: 50% !important;
	transform: translateX(50%);
	width: min(460px, 90%) !important;
	margin: auto;
}

/* ---- S11: traveling dot (copywriting) ----------------------------- */

.bbm-s11 {
	position: absolute;
	top: 60px;
	right: 12%;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--bb-primary);
	box-shadow: 0 0 34px rgba(230, 55, 120, 0.5);
	pointer-events: none;
	z-index: 0;
	will-change: transform;
}

/* ---- S12: three-beat story (crm) ---------------------------------- */

.bbm-s12 { background: var(--bb-dark); height: 900px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.bbm-s12__pin {
	position: sticky;
	top: 30vh;
	text-align: center;
	padding: 0 24px;
}
.bbm-s12__icon { font-size: 54px; margin-bottom: 14px; }
.bbm-s12__h {
	font-size: clamp(30px, 5vw, 56px);
	font-weight: 900;
	letter-spacing: -1.5px;
	color: #fff;
	margin: 0;
}
.bbm-s12__h em { font-style: normal; color: var(--bb-primary); }

/* ---- S05: orbiting platforms (about) ------------------------------ */

.bbm-s05 { background: var(--bb-dark); height: 620px; }
.bbm-s05__pin {
	position: sticky;
	top: 22vh;
	display: flex;
	justify-content: center;
}
.bbm-s05__scene { position: relative; width: 320px; height: 320px; }
.bbm-s05__ring { position: absolute; inset: 0; will-change: transform; }
.bbm-s05__center {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 36px;
	color: #fff;
}
.bbm-s05__center em { font-style: normal; color: var(--bb-primary); }
.bbm-s05__chip {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 88px;
	margin: -17px -44px;
	text-align: center;
	padding: 8px 0;
	background: #1B1B1B;
	border: 1px solid rgba(230, 55, 120, 0.4);
	border-radius: 99px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	will-change: transform;
}

/* ---- mobile trims -------------------------------------------------- */

@media (max-width: 899px) {
	.bbm-ghost-word { font-size: 34vw; }
	.bbm-s09 { height: 120px; }
	.bbm-s09__back { font-size: 84px; }
	.bbm-s09__front { font-size: 54px; }
	.bbm-e07 canvas { height: 110px; }
}

@media (prefers-reduced-motion: reduce) {
	.bbm-ghost-word, .bbm-cine, .bbm-float, .bbm-hero-canvas,
	.bbm-s09, .bbm-s03, .bbm-e09, .bbm-s11, .bbm-s12, .bbm-s05, .bbm-e07 { display: none !important; }
}