/* ==========================================================================
   Blooopp Brand Statement (Letter Scroll) Block Styles
   ========================================================================== */

/* Breakout to full viewport width even when placed inside constrained Gutenberg groups */
.wp-block-blooopp-brand-statement,
.blooopp-brand-statement-section {
	position: relative !important;
	width: 100vw !important;
	max-width: 100vw !important;
	left: 50% !important;
	right: 50% !important;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
	background-color: #000000 !important;
	color: #ffffff !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

/* Remove parent group padding if nested */
.wp-block-group:has(.blooopp-brand-statement-section) {
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: 100% !important;
}

/* Scroll Runway Track: Total letters + entrance & exit hold buffers */
.blooopp-brand-statement-track {
	position: relative !important;
	width: 100% !important;
	height: calc((var(--total-letters, 7) + 1.6) * var(--scroll-dist, 90vh)) !important;
	min-height: 100vh !important;
}

/* Sticky Viewport Container: Full Screen with Safe Space Management */
.blooopp-brand-statement-sticky {
	position: sticky !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	max-width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: #000000 !important;
	overflow: hidden !important;
	z-index: 2 !important;
	box-sizing: border-box !important;
	/* Top space managed: safe clearance below fixed/sticky header */
	padding-top: clamp(65px, 10vh, 100px) !important;
	/* Bottom space managed: generous breathing room above screen bottom */
	padding-bottom: clamp(30px, 6vh, 65px) !important;
}

/* Centered Content Frame - Full Screen Width */
.blooopp-brand-statement-container {
	width: 100vw !important;
	max-width: 100vw !important;
	margin: 0 auto !important;
	padding: 0 3vw !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	flex: 1 !important;
	max-height: 100% !important;
}

/* Letters Row: Spanning across the full screen width */
.blooopp-letters-row {
	display: flex !important;
	align-items: flex-end !important;
	justify-content: center !important;
	gap: clamp(4px, 1.2vw, 20px) !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 auto clamp(16px, 3.5vh, 40px) auto !important;
	user-select: none !important;
	height: clamp(140px, 30vw, 380px) !important;
	padding-bottom: 8px !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

/* Individual Letter Item (Default Outlined State) - Full Screen Giant Typography */
.blooopp-letter-item {
	font-family: "Blacky", "Blacky Modern Headline Food Font", var(--wp--preset--font-family--blacky-modern-headline-food-font), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: clamp(3.2rem, 24vw, 24rem) !important;
	font-weight: 900 !important;
	line-height: 0.85 !important;
	color: transparent !important;
	-webkit-text-stroke: clamp(2.5px, 0.28vw, 5px) var(--text-color, #ffffff) !important;
	text-stroke: clamp(2.5px, 0.28vw, 5px) var(--text-color, #ffffff) !important;
	transform-origin: center bottom !important;
	display: inline-block !important;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, -webkit-text-stroke-width 0.3s ease, filter 0.35s ease !important;
	cursor: pointer !important;
	opacity: 0.82 !important;
	will-change: transform !important;
	text-align: center !important;
	flex-shrink: 0 !important;
}

.blooopp-letter-item:hover {
	opacity: 1 !important;
}

/* Active Letter Item (Scaled & Elevated from Baseline) */
.blooopp-letter-item.is-active {
	transform: scaleY(var(--active-scale, 1.3)) scaleX(1.1) !important;
	opacity: 1 !important;
	-webkit-text-stroke: clamp(3px, 0.35vw, 6px) var(--text-color, #ffffff) !important;
	text-stroke: clamp(3px, 0.35vw, 6px) var(--text-color, #ffffff) !important;
	filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.28)) !important;
	z-index: 5 !important;
}

/* Letter Content Deck (Holds Headings & Descriptions) */
.blooopp-letter-content-deck {
	position: relative !important;
	width: 100% !important;
	max-width: clamp(400px, 70vw, 900px) !important;
	min-height: 140px !important;
	margin: 0 auto !important;
	text-align: center !important;
	transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
}

/* When the section has not yet arrived at the center: hide content deck */
.blooopp-brand-statement-section:not(.is-started) .blooopp-letter-content-deck {
	opacity: 0 !important;
	transform: translateY(14px) !important;
	pointer-events: none !important;
}

/* Individual Content Pane */
.blooopp-letter-content-pane {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(18px) !important;
	transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0.38s !important;
	pointer-events: none !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
}

/* Active Content Pane */
.blooopp-letter-content-pane.is-active {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
	pointer-events: auto !important;
}

/* Headline */
.blooopp-letter-heading {
	font-family: "Blacky", "Blacky Modern Headline Food Font", var(--wp--preset--font-family--blacky-modern-headline-food-font), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: clamp(2.2rem, 4.2vw, 3.8rem) !important;
	font-weight: 900 !important;
	color: #ffffff !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	margin: 0 0 14px 0 !important;
	line-height: 1.15 !important;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Description */
.blooopp-letter-description {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-size: clamp(1.05rem, 1.55vw, 1.35rem) !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.85) !important;
	margin: 0 auto !important;
	max-width: clamp(340px, 60vw, 750px) !important;
	text-align: center !important;
}

/* ==========================================================================
   Mobile & Responsive Adjustments
   ========================================================================== */
@media screen and (max-width: 768px) {
	.blooopp-brand-statement-sticky {
		padding-top: 72px !important;
		padding-bottom: 24px !important;
	}

	.blooopp-letters-row {
		gap: clamp(2px, 1.2vw, 8px) !important;
		height: clamp(90px, 25vw, 150px) !important;
		margin-bottom: 16px !important;
	}

	.blooopp-letter-item {
		font-size: var(--letter-font-size, 18vw) !important;
		-webkit-text-stroke-width: clamp(2px, 0.5vw, 3px) !important;
		text-stroke-width: clamp(2px, 0.5vw, 3px) !important;
	}

	.blooopp-letter-item.is-active {
		transform: scaleY(calc(var(--active-scale, 1.3) * 0.94)) scaleX(1.08) !important;
		-webkit-text-stroke-width: clamp(2.5px, 0.6vw, 3.5px) !important;
		text-stroke-width: clamp(2.5px, 0.6vw, 3.5px) !important;
	}

	.blooopp-letter-heading {
		font-size: clamp(1.6rem, 5.5vw, 2.2rem) !important;
		margin-bottom: 8px !important;
	}

	.blooopp-letter-description {
		font-size: clamp(0.9rem, 3.2vw, 1.1rem) !important;
		padding: 0 10px !important;
	}

	.blooopp-letter-content-deck {
		min-height: 110px !important;
	}
}

/* ==========================================================================
   Gutenberg Editor Specific Adjustments
   ========================================================================== */
.blooopp-brand-statement-editor {
	background: #000000 !important;
	border-radius: 12px;
	padding: 24px 20px;
	position: relative;
	width: 100% !important;
	max-width: 100% !important;
	left: auto !important;
	right: auto !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.blooopp-brand-statement-editor .blooopp-brand-statement-sticky {
	position: relative !important;
	height: auto !important;
	min-height: 400px;
	padding-top: 20px !important;
	padding-bottom: 20px !important;
	width: 100% !important;
	max-width: 100% !important;
}

.blooopp-brand-statement-preview-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	flex-wrap: wrap;
	gap: 12px;
}

.blooopp-editor-badge {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: #fcb07f;
	background: rgba(252, 176, 127, 0.12);
	padding: 4px 10px;
	border-radius: 6px;
}

.blooopp-editor-letter-nav {
	display: flex;
	align-items: center;
	gap: 10px;
}

.blooopp-editor-current-label {
	color: #ffffff;
	font-size: 13px;
}

.blooopp-brand-statement-editor .blooopp-letter-content-deck {
	position: relative !important;
	min-height: auto;
	opacity: 1 !important;
	transform: none !important;
}

.blooopp-brand-statement-editor .blooopp-letter-content-pane {
	position: relative !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

.blooopp-brand-statement-editor .blooopp-letter-heading,
.blooopp-brand-statement-editor .blooopp-letter-description {
	outline: none;
}