/*
 * Better Biz Builder — motion & interaction styles.
 * All motion is gated behind prefers-reduced-motion so it never fights accessibility.
 */

/* =====================================================================
   1. Scroll reveal — base, directional variants & configurable stagger
   --------------------------------------------------------------------
   - Standalone elements use .bbb-reveal (+ optional .bbb-reveal--* variant).
   - Grouped children use .bbb-reveal-group; motion.js sets --bbb-i per child
     so any number of children cascade in.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
	/*
	 * The hidden initial state is gated behind `.bbb-js` (added by the head
	 * script only when JS is available) so that if the motion script is
	 * blocked, cached badly, or errors, content is NEVER left invisible.
	 */
	.bbb-js .bbb-reveal,
	.bbb-js .bbb-reveal-group > * {
		opacity: 0;
		transform: translateY(28px);
		transition:
			opacity 0.7s ease,
			transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
			filter 0.7s ease;
		transition-delay: calc(var(--bbb-i, 0) * 90ms);
		will-change: opacity, transform;
	}

	/* Directional / scale / blur variants — add as a second class. */
	.bbb-js .bbb-reveal.bbb-reveal--left  { transform: translateX(-46px); }
	.bbb-js .bbb-reveal.bbb-reveal--right { transform: translateX(46px); }
	.bbb-js .bbb-reveal.bbb-reveal--scale { transform: scale(0.92); }
	.bbb-js .bbb-reveal.bbb-reveal--blur  { filter: blur(12px); transform: translateY(12px); }

	.bbb-reveal.is-visible,
	.bbb-reveal-group.is-visible > * {
		opacity: 1;
		transform: none;
		filter: none;
	}

	/* Directional variants must reset when visible (higher specificity than --left/--right). */
	.bbb-js .bbb-reveal.is-visible.bbb-reveal--left,
	.bbb-js .bbb-reveal.is-visible.bbb-reveal--right,
	.bbb-js .bbb-reveal.is-visible.bbb-reveal--scale,
	.bbb-js .bbb-reveal.is-visible.bbb-reveal--blur,
	.bbb-js .bbb-reveal-group.is-visible > .bbb-reveal--left,
	.bbb-js .bbb-reveal-group.is-visible > .bbb-reveal--right {
		transform: none;
		filter: none;
	}

	/*
	 * Failsafe: if the motion script never initializes, the head script adds
	 * `.bbb-reveal-all` after a short delay to force every reveal visible.
	 */
	.bbb-reveal-all .bbb-reveal,
	.bbb-reveal-all .bbb-reveal-group > * {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
}

/* =====================================================================
   2. Scroll-progress bar (element injected by motion.js)
   ===================================================================== */
.bbb-progress {
	position: fixed;
	inset: 0 auto auto 0;
	width: 0;
	height: 3px;
	z-index: 1000;
	background-image: var(--wp--preset--gradient--brand-diagonal);
	box-shadow: 0 0 14px -2px rgba(79, 70, 229, 0.7);
	pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
	.bbb-progress { display: none; }
}

/* =====================================================================
   3. Hover lift & glow for cards and buttons
   ===================================================================== */
.bbb-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	will-change: transform;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.bbb-card:hover {
		transform: translateY(-6px);
		box-shadow: 0 24px 50px -22px rgba(79, 70, 229, 0.5);
	}
	.wp-block-button__link {
		transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	}
	.wp-block-button__link:hover {
		transform: translateY(-2px);
		box-shadow: 0 14px 26px -12px rgba(79, 70, 229, 0.6);
	}
}

/* Animated gradient top-accent that appears on card hover/focus. */
.bbb-card--top { position: relative; }
.bbb-card--top::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	border-radius: 14px 14px 0 0;
	background-image: var(--wp--preset--gradient--brand-diagonal);
	opacity: 0;
}
@media (hover: hover) {
	.bbb-card--top:hover::before,
	.bbb-card--top:focus-within::before { opacity: 1; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.bbb-card--top::before { transition: opacity 0.3s ease; }
}

/* =====================================================================
   4. Sticky / shrinking header
   ===================================================================== */
.wp-site-blocks > header,
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--base);
	transition: box-shadow 0.3s ease, padding 0.3s ease, background-color 0.3s ease;
}

body.bbb-scrolled header.wp-block-template-part,
body.bbb-scrolled .wp-site-blocks > header {
	box-shadow: 0 6px 24px -16px rgba(11, 16, 32, 0.5);
	backdrop-filter: saturate(140%) blur(6px);
}

/* Animated underline on the primary nav links. */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.wp-block-navigation .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -4px;
		height: 2px;
		background-image: var(--wp--preset--gradient--brand-diagonal);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.25s ease;
	}
	.wp-block-navigation .wp-block-navigation-item__content:hover::after {
		transform: scaleX(1);
	}
}

/* =====================================================================
   5. Hero — animated sheen, floating blobs & gradient backdrop
   ===================================================================== */
.bbb-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.bbb-hero-inner {
	position: relative;
	z-index: 1;
}
.bbb-hero-sheen,
.bbb-blob {
	position: absolute;
	z-index: 0;
	pointer-events: none;
}
.bbb-hero-sheen {
	inset: -25%;
	background:
		conic-gradient(
			from 0deg at 50% 50%,
			transparent 0deg,
			rgba(6, 182, 212, 0.10) 80deg,
			transparent 170deg,
			rgba(79, 70, 229, 0.16) 260deg,
			transparent 360deg
		);
}
.bbb-blob {
	width: clamp(220px, 34vw, 460px);
	aspect-ratio: 1;
	will-change: transform;
}
.bbb-blob--1 { top: -10%; left: -8%; }
.bbb-blob--2 { right: -10%; bottom: -16%; }
.bbb-blob__inner {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	filter: blur(64px);
	opacity: 0.55;
}
.bbb-blob--1 .bbb-blob__inner { background: radial-gradient(circle at 30% 30%, #4f46e5, transparent 70%); }
.bbb-blob--2 .bbb-blob__inner { background: radial-gradient(circle at 70% 70%, #06b6d4, transparent 70%); }

@media (prefers-reduced-motion: no-preference) {
	.bbb-hero-sheen { animation: bbb-spin 34s linear infinite; }
	.bbb-blob__inner { animation: bbb-float 16s ease-in-out infinite; }
	.bbb-blob--2 .bbb-blob__inner { animation-duration: 21s; animation-direction: reverse; }
}
@keyframes bbb-spin {
	to { transform: rotate(1turn); }
}
@keyframes bbb-float {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(16px, -22px, 0) scale(1.12); }
}

/* Parallax helper (motion.js drives the transform). */
[data-bbb-parallax] { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
	[data-bbb-parallax] { transform: none !important; }
}

/* =====================================================================
   6. Animated stats row
   ===================================================================== */
.bbb-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.5rem, 6vw, 4.5rem);
	margin: var(--wp--preset--spacing--60, 3rem) 0 0;
	padding: 0;
}
.bbb-stat { text-align: center; }
.bbb-stat__num {
	display: block;
	font-family: var(--wp--preset--font-family--manrope, system-ui, sans-serif);
	font-weight: 800;
	font-size: clamp(2.2rem, 5vw, 3.25rem);
	line-height: 1;
	letter-spacing: -1px;
	background-image: linear-gradient(135deg, #818cf8 0%, #22d3ee 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.bbb-count { font-variant-numeric: tabular-nums; }
.bbb-stat__label {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.95rem;
	letter-spacing: 0.3px;
	color: var(--wp--preset--color--accent-5);
	opacity: 0.85;
}

/* =====================================================================
   7. Process — "How it works" steps with connecting progress line
   ===================================================================== */
.bbb-steps {
	list-style: none;
	margin: var(--wp--preset--spacing--60, 3rem) 0 0;
	padding: 0;
	display: grid;
	gap: clamp(1.75rem, 4vw, 3rem);
	position: relative;
}
.bbb-step { text-align: center; }
.bbb-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0 auto 1.1rem;
	border-radius: 50%;
	font-weight: 800;
	font-size: 1.25rem;
	color: #fff;
	background-image: var(--wp--preset--gradient--brand-diagonal);
	box-shadow: 0 12px 26px -10px rgba(79, 70, 229, 0.6);
	position: relative;
	z-index: 1;
}
.bbb-step h3 { margin: 0 0 0.4rem; }
.bbb-step p { margin: 0; color: var(--wp--preset--color--accent-4); }

@media (min-width: 782px) {
	.bbb-steps { grid-template-columns: repeat(3, 1fr); }

	/* Track + fill that connect the three numbered circles. */
	.bbb-steps::before,
	.bbb-steps::after {
		content: "";
		position: absolute;
		top: 1.6rem;
		left: 16.66%;
		width: 66.66%;
		height: 2px;
		transform: translateY(-1px);
	}
	.bbb-steps::before {
		background: color-mix(in srgb, var(--wp--preset--color--accent-1) 22%, transparent);
	}
	.bbb-steps::after {
		background-image: var(--wp--preset--gradient--brand-diagonal);
		transform-origin: left center;
	}
}
@media (min-width: 782px) and (prefers-reduced-motion: no-preference) {
	.bbb-steps::after {
		transform: translateY(-1px) scaleX(0);
		transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
	}
	.bbb-steps.is-visible::after {
		transform: translateY(-1px) scaleX(1);
	}
}

/* =====================================================================
   8. Soft section glow utility (uses the spotlight gradient preset)
   ===================================================================== */
.bbb-glow { position: relative; isolation: isolate; }
.bbb-glow::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--wp--preset--gradient--spotlight);
	pointer-events: none;
}

/* Gentle gradient utility used by hero/CTA patterns */
.bbb-on-dark,
.bbb-on-dark :where(h1, h2, h3, p) {
	color: var(--wp--preset--color--base);
}

/* =====================================================================
   Footer layout hardening
   --------------------------------------------------------------------
   The footer columns sit in a narrow, constrained area. Without help,
   the link/CTA columns can collapse to a sliver — stacking the button
   text vertically. Let the columns wrap and keep a sensible minimum
   width so the "Start your project" button always reads normally.
   ===================================================================== */
.wp-site-blocks footer .wp-block-columns {
	flex-wrap: wrap;
}
.wp-site-blocks footer .wp-block-column {
	flex: 1 1 180px;
	min-width: 180px;
	overflow-wrap: break-word;
}
.wp-site-blocks footer .wp-block-column:first-child {
	flex: 1.6 1 260px;
}
.wp-site-blocks footer .wp-block-buttons {
	flex-wrap: wrap;
}
.wp-site-blocks footer .wp-block-button__link {
	white-space: nowrap;
}

/* =====================================================================
   9. Brand wordmark (site identity)
   ===================================================================== */
.bbb-wordmark {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	line-height: 1;
}

/* Gradient monogram chip rendered before the site name */
.bbb-wordmark::before {
	content: "B";
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 0.6rem;
	background-image: var(--wp--preset--gradient--brand-diagonal);
	color: var(--wp--preset--color--base);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0;
	box-shadow: 0 6px 16px -6px rgba(79, 70, 229, 0.55);
}

/* Gradient-filled wordmark text (overrides the flat link color) */
.bbb-wordmark a {
	background-image: var(--wp--preset--gradient--brand-diagonal);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.bbb-wordmark a {
		transition: opacity 0.2s ease;
	}
	.bbb-wordmark a:hover {
		opacity: 0.82;
	}
}

/* =====================================================================
   10. Footer CTA button
   --------------------------------------------------------------------
   The footer's amber "Start your project" button sits on the dark
   (contrast) footer. The global button :hover flips buttons to a dark
   contrast background + white text — which is overridden to nothing here
   by the preset !important color classes, and would be invisible on the
   dark footer even if it applied. So we give this button its own legible
   styling and a real, visible hover/focus state.
   ===================================================================== */
.bbb-footer-cta .wp-block-button__link {
	font-weight: 700;
	letter-spacing: 0.2px;
	box-shadow: 0 10px 22px -14px rgba(245, 158, 11, 0.7);
	transition:
		background-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

/* Override the global (dead) button hover with one that actually shows.
   Higher specificity + !important beats .has-accent-3-background-color. */
.bbb-footer-cta .wp-block-button__link:hover,
.bbb-footer-cta .wp-block-button__link:focus-visible {
	background-color: #d97706 !important; /* deeper amber — stays bright on the dark footer */
	color: var(--wp--preset--color--contrast) !important; /* keep crisp, high-contrast dark text */
	box-shadow: 0 16px 30px -12px rgba(245, 158, 11, 0.85);
}

.bbb-footer-cta .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 3px;
}

/* =====================================================================
   11. Mobile layout & navigation polish
   --------------------------------------------------------------------
   Fixes cramped header, sloppy overlay menu, clipped reveals, and grids
   that stay multi-column on narrow phones.
   ===================================================================== */

/* Prevent sideways scroll from decorative offsets without clipping content. */
html {
	overflow-x: clip;
}

/* =====================================================================
   12. Desktop header & layout (≥782px)
   --------------------------------------------------------------------
   Mobile rules must not leak here — single-row nav + intact CTA button.
   ===================================================================== */
@media (min-width: 782px) {
	.bbb-header-bar {
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 1.5rem;
		max-width: var(--wp--style--global--wide-size, 1340px);
		margin-inline: auto;
		width: 100%;
	}

	.bbb-header-brand {
		flex: 0 1 auto;
		min-width: 0;
	}

	.bbb-header-actions {
		flex: 1 1 auto;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: var(--wp--preset--spacing--40) !important;
		min-width: 0;
	}

	.bbb-header-actions .wp-block-navigation {
		flex: 1 1 auto;
		justify-content: flex-end;
		min-width: 0;
	}

	.bbb-header-actions .wp-block-navigation .wp-block-navigation__container {
		flex-wrap: nowrap !important;
		justify-content: flex-end;
	}

	.bbb-header-actions .wp-block-navigation-item__content {
		white-space: nowrap;
	}

	.bbb-header-cta {
		flex: 0 0 auto;
	}

	.bbb-header-cta .wp-block-button__link {
		white-space: nowrap;
	}

	/* Hero CTAs stay side-by-side on desktop. */
	.bbb-hero .wp-block-buttons {
		flex-direction: row;
		align-items: center;
		width: auto;
	}

	.bbb-hero .wp-block-button,
	.bbb-hero .wp-block-button__link {
		width: auto;
	}
}

@media (max-width: 781px) {
	/* --- Compact single-row header --- */
	.bbb-header {
		padding-top: var(--wp--preset--spacing--30) !important;
		padding-bottom: var(--wp--preset--spacing--30) !important;
	}

	.bbb-header-bar {
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 0.75rem;
	}

	.bbb-header-bar > .wp-block-group:first-child {
		flex: 1 1 auto;
		min-width: 0;
	}

	.bbb-header-actions {
		flex: 0 0 auto;
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 0.5rem !important;
	}

	/* Quote CTA lives in the hero/footer — hide in header on phones. */
	.bbb-header-cta {
		display: none !important;
	}

	.bbb-wordmark {
		font-size: clamp(0.95rem, 4.2vw, 1.15rem) !important;
	}

	.bbb-wordmark::before {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 1rem;
	}

	/* --- Page title band (Contact, Services, etc.) --- */
	.bbb-page-header {
		padding-top: var(--wp--preset--spacing--40) !important;
		padding-bottom: var(--wp--preset--spacing--30) !important;
	}

	.bbb-page-header .wp-block-post-title {
		font-size: var(--wp--preset--font-size--x-large) !important;
	}

	/* --- Hero: less vertical padding, stacked CTAs --- */
	.bbb-hero {
		padding-top: var(--wp--preset--spacing--60) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
	}

	.bbb-hero .wp-block-heading {
		font-size: clamp(1.85rem, 8vw, 2.6rem) !important;
	}

	.bbb-hero .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 0.75rem;
	}

	.bbb-hero .wp-block-button,
	.bbb-hero .wp-block-button__link {
		width: 100%;
	}

	.bbb-hero .wp-block-button__link {
		justify-content: center;
		text-align: center;
	}

	.bbb-stats {
		gap: 1.25rem 2rem;
	}

	/* --- No horizontal slide-in on small screens (avoids edge clipping) --- */
	.bbb-js .bbb-reveal.bbb-reveal--left,
	.bbb-js .bbb-reveal.bbb-reveal--right {
		transform: translateY(28px);
	}

	/* --- Portfolio / query grids → single column --- */
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* --- Section padding trim --- */
	.wp-block-group.alignfull:not(.bbb-hero) {
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}

	/* --- Contact form column padding --- */
	.bbb-contact-form-col {
		padding: var(--wp--preset--spacing--40) !important;
	}

	/* --- Mobile nav overlay: branded, left-aligned, easy to tap --- */
	.wp-block-navigation__responsive-container.is-menu-open {
		background: var(--wp--preset--color--base);
		padding: calc(var(--wp--preset--spacing--50) + env(safe-area-inset-top, 0px))
			var(--wp--preset--spacing--40)
			calc(var(--wp--preset--spacing--50) + env(safe-area-inset-bottom, 0px));
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		align-items: flex-start !important;
		justify-content: flex-start !important;
		padding-top: 3.5rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		width: 100%;
		gap: 0.25rem !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item {
		width: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 0.85rem 1rem !important;
		font-family: var(--wp--preset--font-family--bricolage-grotesque, Manrope, sans-serif);
		font-size: 1.35rem !important;
		font-weight: 700;
		letter-spacing: -0.02em;
		color: var(--wp--preset--color--contrast) !important;
		border-radius: 12px;
		border: 1px solid transparent;
		text-align: left;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content::after {
		display: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item.current-menu-item
		.wp-block-navigation-item__content,
	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content[aria-current="page"] {
		background: color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent);
		border-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 25%, transparent);
		color: var(--wp--preset--color--accent-1) !important;
	}

	.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation-item__content:active {
		background: color-mix(in srgb, var(--wp--preset--color--accent-1) 16%, transparent);
	}

	.wp-block-navigation__responsive-container-close,
	.wp-block-navigation__responsive-container-open {
		padding: 0.5rem;
		border-radius: 10px;
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	}

	.wp-block-navigation__responsive-container-close svg,
	.wp-block-navigation__responsive-container-open svg {
		width: 1.35rem;
		height: 1.35rem;
	}
}