/* ==========================================================================
   Block: Cloud Divider (bga/cloud-divider)

   Top/bottom variants use a natural cloud SVG as a section divider.
   Speech-bubble and drawing-transition variants are decorative overlays.
   ========================================================================== */

/* ── Base container ────────────────────────────────────────────────────── */

.bga-cloud {
	position: relative;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	margin-top: -1px;
	margin-bottom: -1px;
	/*
	 * Cloud fill resolves from --cloud-fill, falling back to currentColor.
	 * Override per-context by setting --cloud-fill on a parent (e.g. inside a
	 * section that needs the cloud to match a different colour than the section
	 * background). Default colour token is cream.
	 */
	color: var(--cloud-fill, var(--color-cream));
}

.bga-cloud__divider-svg {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * Crisp edges on Safari/Chrome/Firefox. Avoids the 1px sub-pixel seam
	 * between the cloud silhouette and the adjacent section background.
	 */
	shape-rendering: geometricPrecision;
}

/* Colour token mappings — drive --cloud-fill from data-colour. */
.bga-cloud[data-colour="orange"] { --cloud-fill: var(--color-orange); }
.bga-cloud[data-colour="cream"]  { --cloud-fill: var(--color-cream); }
.bga-cloud[data-colour="brown"]  { --cloud-fill: var(--color-brown); }
.bga-cloud[data-colour="white"]  { --cloud-fill: var(--color-white); }

/*
 * Sections use .section vertical padding. The block above a cloud often has no
 * background colour (only body shows through), so padding-bottom reveals the
 * body’s white — a visible “gap” between cream content and the cream cloud SVG.
 * Drop bottom padding when the next sibling is a cloud divider.
 */
.section:has(+ .bga-cloud) {
	padding-bottom: var(--sp-48);
}

/* Cloud dividers should fade in only — no vertical shift that creates gaps */
.bga-cloud.bga-reveal {
	transform: none;
}

.bga-cloud.bga-reveal:not(.is-visible) {
	opacity: 0;
}

/* ── Top & Bottom cloud divider variants ───────────────────────────────── */

/*
 * Orientation rule: the cloud BODY sits flush against its matching-colour
 * neighbour; the bumps puff into the contrasting section. The content's
 * variant value is inverted relative to where the matching section sits, so:
 *
 * "top"    = matching section is BELOW. Body sits at the bottom (flush, -1px
 *            overlap below); bumps face UP into the contrasting section above
 *            (24px breathing room above).
 * "bottom" = matching section is ABOVE. Body sits at the top (flush, -1px
 *            overlap above); bumps face DOWN into the contrasting section below
 *            (24px breathing room below).
 */
.bga-cloud--top {
	padding: 0;
	margin-top: 24px;
	margin-bottom: -1px;
}

.bga-cloud--bottom {
	padding: 0;
	margin-top: -1px;
	margin-bottom: 24px;
}

/*
 * Speech-bubble + cream divider: the speech-bubble has 96px of orange
 * padding-bottom, and the cream divider's bumps occupy the upper portion
 * of its own height with transparent space between them. Without overlap,
 * a wide white strip appears between the orange and the first cream bump.
 * Pull the cream divider up into the orange padding so the bumps appear
 * right against the orange edge — reads as cream "biting" into the orange.
 */
.bga-cloud--speech-bubble + .bga-cloud--bottom {
	margin-top: -120px;
}

/*
 * Flush mode: divider sits between two sections that share its cloud colour.
 * Fill the transparent SVG area with the cloud fill so no body background
 * shows through, and zero out the outward breathing margin. The bumpy SVG
 * edge now reads as a decorative wavy seam between two same-coloured sections
 * rather than a transition into white.
 */
.bga-cloud--flush {
	background-color: var(--cloud-fill, var(--color-cream));
	margin-top: -1px;
	margin-bottom: -1px;
}

.bga-cloud__divider-svg {
	display: block;
	width: 100%;
	height: auto;
}

/* SVGs are pre-oriented — no rotation needed */

/* ── Height-controlled mode ─────────────────────────────────────────────── */

.bga-cloud[data-height] {
	transform: translateZ(0); /* GPU compositing */
}

.bga-cloud[data-height] .bga-cloud__divider-svg {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	bottom: -1px;
}

/* ── Cloud shape min-width (prevents squishing on wide screens) ────────── */

@media (min-width: 1000px) {
	.bga-cloud[data-style="gentle"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="layered"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="billowy"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="cumulus"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="dramatic"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="scalloped"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="wispy"] .bga-cloud__divider-svg {
		min-width: 1700px;
	}
}

@media (max-width: 999px) {
	.bga-cloud[data-style="gentle"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="layered"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="billowy"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="cumulus"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="dramatic"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="scalloped"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="wispy"] .bga-cloud__divider-svg {
		min-width: 800px;
	}
}

@media (max-width: 690px) {
	.bga-cloud[data-style="gentle"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="layered"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="billowy"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="cumulus"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="dramatic"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="scalloped"] .bga-cloud__divider-svg,
	.bga-cloud[data-style="wispy"] .bga-cloud__divider-svg {
		min-width: 690px;
	}
}

/* ── Legacy divider variant ────────────────────────────────────────────── */

.bga-cloud--divider {
	line-height: normal;
}

.bga-cloud--divider-legacy {
	display: flex;
	flex-direction: column;
}

.bga-cloud__edge {
	display: block;
	width: 100%;
	height: 60px;
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.bga-cloud__edge {
		height: 80px;
	}
}

.bga-cloud__body {
	flex: 1;
	min-height: 60px;
}

@media (min-width: 768px) {
	.bga-cloud__body {
		min-height: 80px;
	}
}

/* ── General SVG helper ─────────────────────────────────────────────────── */

.bga-cloud__svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ── Drawing-transition variant ─────────────────────────────────────────── */

.bga-cloud--drawing-transition {
	line-height: normal;
	padding: 24px 0;
}

.bga-cloud__svg--transition {
	height: 120px;
}

@media (min-width: 768px) {
	.bga-cloud__svg--transition {
		height: 160px;
	}
}

/* ── Speech-bubble / testimonial variant ────────────────────────────────── */

.bga-cloud--speech-bubble {
	line-height: normal;
	padding: var(--section-padding-mobile) 0;
	background-color: var(--color-orange);
	overflow: hidden;
	position: relative;
}

.bga-cloud__bubble-wrap {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--sp-24);
}

.bga-cloud__cloud-img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 140%;
	max-width: 1100px;
	height: auto;
	opacity: 0.25;
	mix-blend-mode: screen;
	pointer-events: none;
	filter: brightness(1.3) contrast(0.85);
}

/*
 * W5: layered cloud treatment for the speech-bubble. Two copies at
 * different scales / offsets / opacities. Allows some bleed out of the
 * container so the testimonial reads as floating on cloud, not a banner.
 */
.bga-cloud__cloud-img--back {
	width: 180%;
	max-width: 1500px;
	opacity: 0.18;
	transform: translate(-58%, -42%) scale(1) rotate(-3deg);
	filter: brightness(1.5) contrast(0.8) blur(1px);
}

.bga-cloud__cloud-img--front {
	width: 130%;
	max-width: 1100px;
	opacity: 0.32;
	transform: translate(-42%, -58%) scaleX(-1);
	filter: brightness(1.2) contrast(0.9);
}

.bga-cloud__testimonial {
	position: relative;
	z-index: 1;
	text-align: center;
	margin: 0;
	padding: var(--sp-48) 0;
}

.bga-cloud__quote {
	font-family: var(--font-heading);
	font-size: clamp(1.125rem, 2.15vw, 1.5rem);
	font-weight: var(--font-weight-light);
	font-style: italic;
	color: var(--color-cream);
	line-height: 1.45;
	margin-bottom: var(--sp-24);
}

.bga-cloud__attribution {
	font-family: var(--font-body);
	font-size: clamp(0.95rem, 2.1vw, 1.875rem);
	color: var(--color-cream);
	font-style: normal;
	opacity: 0.9;
	letter-spacing: 0.08em;
}

@media (min-width: 768px) {
	.bga-cloud--speech-bubble {
		padding: var(--section-padding-desktop) 0;
	}

	.bga-cloud__quote {
		font-size: clamp(1.4rem, 2.6vw, 2.125rem);
	}
}

/* ── W5: Speech-bubble — slider layout ─────────────────────────────────── */

.bga-cloud__bubble-wrap--slider {
	max-width: 880px;
}

.bga-cloud__slider {
	position: relative;
	z-index: 1;
	padding: var(--sp-32) var(--sp-48);
}

.bga-cloud__slides {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	gap: 0;
}

.bga-cloud__slides::-webkit-scrollbar {
	display: none;
}

.bga-cloud__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	margin: 0;
	padding: var(--sp-16) 0;
	text-align: center;
	min-width: 0;
}

/* Quotes inside slides keep the same look as the single-mode quote. */
.bga-cloud__slide .bga-cloud__quote {
	margin-bottom: var(--sp-24);
}

/* ── Prev / next ───────────────────────────────────────────────────────── */

.bga-cloud__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(41, 19, 5, 0.35);
	color: var(--color-cream);
	border: 1px solid rgba(233, 230, 225, 0.3);
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease, transform 0.2s ease;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.bga-cloud__nav:hover,
.bga-cloud__nav:focus-visible {
	background: rgba(41, 19, 5, 0.7);
	transform: translateY(-50%) scale(1.05);
}

.bga-cloud__nav:focus-visible {
	outline: 2px solid var(--color-cream);
	outline-offset: 2px;
}

.bga-cloud__nav--prev { left: 0; }
.bga-cloud__nav--next { right: 0; }

@media (min-width: 1024px) {
	.bga-cloud__nav {
		width: 48px;
		height: 48px;
	}
	.bga-cloud__nav--prev { left: -8px; }
	.bga-cloud__nav--next { right: -8px; }
}

/* ── Dots ──────────────────────────────────────────────────────────────── */

.bga-cloud__dots {
	display: flex;
	justify-content: center;
	gap: var(--sp-8);
	margin-top: var(--sp-24);
}

.bga-cloud__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(233, 230, 225, 0.55);
	background: transparent;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.bga-cloud__dot:hover,
.bga-cloud__dot:focus-visible {
	background: rgba(233, 230, 225, 0.45);
}

.bga-cloud__dot:focus-visible {
	outline: 2px solid var(--color-cream);
	outline-offset: 2px;
}

.bga-cloud__dot.is-active {
	background: var(--color-cream);
	transform: scale(1.15);
}

/* Reduced motion: keep the scroll snap but disable smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
	.bga-cloud__slides {
		scroll-behavior: auto;
	}
	.bga-cloud__cloud-img--back,
	.bga-cloud__cloud-img--front {
		transition: none;
	}
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.bga-cloud__edge,
	.bga-cloud__svg {
		animation: none;
	}
}