/**
 * LBF Blue Lights & Bubbles Parade — scoped CSS (v29.5.1)
 *
 * Built from scratch — NOT a copy of parade-page.css. Different
 * structural rhythm, different visual hierarchy, with the Athletes
 * on Main Stage block as the page's climactic moment.
 *
 *   - Page canvas: LIGHT (consistent with site)
 *   - Hero: full-bleed dark with animated drifting bubbles
 *   - Story: light card with 3-moment strip + horizontal chip row
 *   - Grand Reviewing: dark, quote-centered, single column
 *   - Athletes on Main Stage: TALLEST, full-bleed, spotlight beams,
 *     stylized program-style team roster (this is the page's climax)
 *   - Enter: compact light card with chips not cards
 *   - FAQ: 5 questions only
 *   - Closing: single sentence with light-string flourish
 *
 * Scoped under body.lbf-bubbles-page. Class prefix `bb-*`.
 */

body.lbf-bubbles-page {
	--bb-blue:        #0037a7;
	--bb-blue-dark:   #002580;
	--bb-blue-deep:   #001f5a;
	--bb-blue-night:  #00154a;
	--bb-blue-glow:   #4d7fff;
	--bb-blue-soft:   #cfe2ff;
	--bb-gold:        #f3c303;
	--bb-gold-soft:   #fceea8;
	--bb-gold-dark:   #c79c00;
	--bb-blueberry:   #4a3a8c;
	--bb-blueberry-deep: #2e2466;
	--bb-bg:          #f0f4f8;
	--bb-bg-2:        #fbfcff;
	--bb-bg-3:        #eef2fc;
	--bb-panel:       #ffffff;
	--bb-text:        #0e1525;
	--bb-text-2:      #374151;
	--bb-text-3:      #6b7280;
	--bb-border:      #d7e2fb;
	--bb-border-soft: #e8eef9;
	--bb-shadow-card: 0 10px 30px rgba(0, 55, 167, 0.05);
	--bb-shadow-lift: 0 22px 60px rgba(0, 55, 167, 0.08);
	--bb-shadow-hero: 0 25px 70px rgba(0, 21, 74, 0.35);
	--bb-shadow-stage: 0 30px 90px rgba(0, 21, 74, 0.45);

	--bb-bubble-a: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%20240%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22ba1%22%20cx%3D%2230%25%22%20cy%3D%2230%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22#ffffff%22%20stop-opacity%3D%220.55%22%2F%3E%20%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22#cfe2ff%22%20stop-opacity%3D%220.22%22%2F%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22#7faaff%22%20stop-opacity%3D%220.08%22%2F%3E%20%3C%2FradialGradient%3E%20%3C%2Fdefs%3E%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2280%22%20r%3D%2222%22%20fill%3D%22url(#ba1)%22%20stroke%3D%22#a8c6f5%22%20stroke-width%3D%220.5%22%20stroke-opacity%3D%220.4%22%2F%3E%20%3Ccircle%20cx%3D%2233%22%20cy%3D%2272%22%20r%3D%225%22%20fill%3D%22#ffffff%22%20opacity%3D%220.5%22%2F%3E%20%3Ccircle%20cx%3D%22160%22%20cy%3D%2250%22%20r%3D%2216%22%20fill%3D%22url(#ba1)%22%20stroke%3D%22#a8c6f5%22%20stroke-width%3D%220.5%22%20stroke-opacity%3D%220.4%22%2F%3E%20%3Ccircle%20cx%3D%22155%22%20cy%3D%2244%22%20r%3D%223.5%22%20fill%3D%22#ffffff%22%20opacity%3D%220.5%22%2F%3E%20%3Ccircle%20cx%3D%22195%22%20cy%3D%22160%22%20r%3D%2220%22%20fill%3D%22url(#ba1)%22%20stroke%3D%22#a8c6f5%22%20stroke-width%3D%220.5%22%20stroke-opacity%3D%220.4%22%2F%3E%20%3Ccircle%20cx%3D%22189%22%20cy%3D%22153%22%20r%3D%224.5%22%20fill%3D%22#ffffff%22%20opacity%3D%220.5%22%2F%3E%20%3Ccircle%20cx%3D%2290%22%20cy%3D%22190%22%20r%3D%2214%22%20fill%3D%22url(#ba1)%22%20stroke%3D%22#a8c6f5%22%20stroke-width%3D%220.5%22%20stroke-opacity%3D%220.4%22%2F%3E%20%3Ccircle%20cx%3D%2286%22%20cy%3D%22185%22%20r%3D%223%22%20fill%3D%22#ffffff%22%20opacity%3D%220.5%22%2F%3E%20%3Ccircle%20cx%3D%22110%22%20cy%3D%22120%22%20r%3D%229%22%20fill%3D%22url(#ba1)%22%20stroke%3D%22#a8c6f5%22%20stroke-width%3D%220.4%22%20stroke-opacity%3D%220.4%22%2F%3E%20%3Ccircle%20cx%3D%22107%22%20cy%3D%22116%22%20r%3D%222%22%20fill%3D%22#ffffff%22%20opacity%3D%220.5%22%2F%3E%20%3Ccircle%20cx%3D%22220%22%20cy%3D%22100%22%20r%3D%227%22%20fill%3D%22url(#ba1)%22%20stroke%3D%22#a8c6f5%22%20stroke-width%3D%220.4%22%20stroke-opacity%3D%220.4%22%2F%3E%20%3Ccircle%20cx%3D%2220%22%20cy%3D%22200%22%20r%3D%226%22%20fill%3D%22url(#ba1)%22%20stroke%3D%22#a8c6f5%22%20stroke-width%3D%220.4%22%20stroke-opacity%3D%220.4%22%2F%3E%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22220%22%20r%3D%225%22%20fill%3D%22url(#ba1)%22%20stroke%3D%22#a8c6f5%22%20stroke-width%3D%220.4%22%20stroke-opacity%3D%220.4%22%2F%3E%20%3C%2Fsvg%3E");
	--bb-bubble-b: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20300%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22bb1%22%20cx%3D%2230%25%22%20cy%3D%2230%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22#ffffff%22%20stop-opacity%3D%220.92%22%2F%3E%20%3Cstop%20offset%3D%2235%25%22%20stop-color%3D%22#cfe2ff%22%20stop-opacity%3D%220.55%22%2F%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22#5b86e5%22%20stop-opacity%3D%220.15%22%2F%3E%20%3C%2FradialGradient%3E%20%3CradialGradient%20id%3D%22bb2%22%20cx%3D%2235%25%22%20cy%3D%2230%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22#ffffff%22%20stop-opacity%3D%220.85%22%2F%3E%20%3Cstop%20offset%3D%2250%25%22%20stop-color%3D%22#a8c6f5%22%20stop-opacity%3D%220.40%22%2F%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22#4d7fff%22%20stop-opacity%3D%220.12%22%2F%3E%20%3C%2FradialGradient%3E%20%3C%2Fdefs%3E%20%3C%21--%20Large%20foreground%20bubbles%20--%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%22100%22%20r%3D%2228%22%20fill%3D%22url(#bb1)%22%20stroke%3D%22#cfe2ff%22%20stroke-width%3D%220.8%22%20stroke-opacity%3D%220.7%22%2F%3E%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2290%22%20r%3D%226%22%20fill%3D%22#ffffff%22%20opacity%3D%220.85%22%2F%3E%20%3Ccircle%20cx%3D%2244%22%20cy%3D%2286%22%20r%3D%222.5%22%20fill%3D%22#ffffff%22%20opacity%3D%220.95%22%2F%3E%20%3Ccircle%20cx%3D%22220%22%20cy%3D%2260%22%20r%3D%2222%22%20fill%3D%22url(#bb2)%22%20stroke%3D%22#a8c6f5%22%20stroke-width%3D%220.7%22%20stroke-opacity%3D%220.7%22%2F%3E%20%3Ccircle%20cx%3D%22213%22%20cy%3D%2252%22%20r%3D%225%22%20fill%3D%22#ffffff%22%20opacity%3D%220.85%22%2F%3E%20%3Ccircle%20cx%3D%22155%22%20cy%3D%22180%22%20r%3D%2232%22%20fill%3D%22url(#bb1)%22%20stroke%3D%22#cfe2ff%22%20stroke-width%3D%220.9%22%20stroke-opacity%3D%220.6%22%2F%3E%20%3Ccircle%20cx%3D%22143%22%20cy%3D%22168%22%20r%3D%227%22%20fill%3D%22#ffffff%22%20opacity%3D%220.85%22%2F%3E%20%3Ccircle%20cx%3D%22148%22%20cy%3D%22163%22%20r%3D%223%22%20fill%3D%22#ffffff%22%20opacity%3D%220.95%22%2F%3E%20%3Ccircle%20cx%3D%22260%22%20cy%3D%22230%22%20r%3D%2218%22%20fill%3D%22url(#bb2)%22%20stroke%3D%22#a8c6f5%22%20stroke-width%3D%220.6%22%20stroke-opacity%3D%220.65%22%2F%3E%20%3Ccircle%20cx%3D%22254%22%20cy%3D%22223%22%20r%3D%224%22%20fill%3D%22#ffffff%22%20opacity%3D%220.85%22%2F%3E%20%3C%21--%20Medium%20bubbles%20--%3E%20%3Ccircle%20cx%3D%22180%22%20cy%3D%22120%22%20r%3D%2212%22%20fill%3D%22url(#bb2)%22%20stroke%3D%22#cfe2ff%22%20stroke-width%3D%220.5%22%20stroke-opacity%3D%220.6%22%2F%3E%20%3Ccircle%20cx%3D%22176%22%20cy%3D%22116%22%20r%3D%222.5%22%20fill%3D%22#ffffff%22%20opacity%3D%220.8%22%2F%3E%20%3Ccircle%20cx%3D%22100%22%20cy%3D%22240%22%20r%3D%2214%22%20fill%3D%22url(#bb1)%22%20stroke%3D%22#a8c6f5%22%20stroke-width%3D%220.6%22%20stroke-opacity%3D%220.6%22%2F%3E%20%3Ccircle%20cx%3D%2295%22%20cy%3D%22234%22%20r%3D%223%22%20fill%3D%22#ffffff%22%20opacity%3D%220.8%22%2F%3E%20%3Ccircle%20cx%3D%2230%22%20cy%3D%22200%22%20r%3D%2210%22%20fill%3D%22url(#bb2)%22%20stroke%3D%22#cfe2ff%22%20stroke-width%3D%220.5%22%20stroke-opacity%3D%220.6%22%2F%3E%20%3Ccircle%20cx%3D%2226%22%20cy%3D%22196%22%20r%3D%222%22%20fill%3D%22#ffffff%22%20opacity%3D%220.8%22%2F%3E%20%3Ccircle%20cx%3D%22280%22%20cy%3D%22140%22%20r%3D%2211%22%20fill%3D%22url(#bb1)%22%20stroke%3D%22#a8c6f5%22%20stroke-width%3D%220.5%22%20stroke-opacity%3D%220.6%22%2F%3E%20%3Ccircle%20cx%3D%22276%22%20cy%3D%22135%22%20r%3D%222.2%22%20fill%3D%22#ffffff%22%20opacity%3D%220.8%22%2F%3E%20%3C%21--%20Small%20bubbles%20--%3E%20%3Ccircle%20cx%3D%2280%22%20cy%3D%2240%22%20r%3D%226%22%20fill%3D%22url(#bb2)%22%20stroke%3D%22#cfe2ff%22%20stroke-width%3D%220.4%22%20stroke-opacity%3D%220.6%22%2F%3E%20%3Ccircle%20cx%3D%22240%22%20cy%3D%22170%22%20r%3D%227%22%20fill%3D%22url(#bb1)%22%20stroke%3D%22#a8c6f5%22%20stroke-width%3D%220.4%22%20stroke-opacity%3D%220.6%22%2F%3E%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2280%22%20r%3D%225%22%20fill%3D%22url(#bb2)%22%20stroke%3D%22#cfe2ff%22%20stroke-width%3D%220.4%22%20stroke-opacity%3D%220.6%22%2F%3E%20%3Ccircle%20cx%3D%22200%22%20cy%3D%22270%22%20r%3D%226%22%20fill%3D%22url(#bb1)%22%20stroke%3D%22#a8c6f5%22%20stroke-width%3D%220.4%22%20stroke-opacity%3D%220.6%22%2F%3E%20%3C%21--%20Tiny%20far-distance%20bubbles%20like%20points%20of%20light%20--%3E%20%3Ccircle%20cx%3D%2260%22%20cy%3D%22270%22%20r%3D%222%22%20fill%3D%22#ffffff%22%20opacity%3D%220.7%22%2F%3E%20%3Ccircle%20cx%3D%22290%22%20cy%3D%2260%22%20r%3D%222%22%20fill%3D%22#cfe2ff%22%20opacity%3D%220.7%22%2F%3E%20%3Ccircle%20cx%3D%22170%22%20cy%3D%2220%22%20r%3D%222.5%22%20fill%3D%22#ffffff%22%20opacity%3D%220.7%22%2F%3E%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2240%22%20r%3D%222%22%20fill%3D%22#cfe2ff%22%20opacity%3D%220.7%22%2F%3E%20%3Ccircle%20cx%3D%22270%22%20cy%3D%22200%22%20r%3D%221.8%22%20fill%3D%22#ffffff%22%20opacity%3D%220.7%22%2F%3E%20%3Ccircle%20cx%3D%22140%22%20cy%3D%22290%22%20r%3D%222.2%22%20fill%3D%22#cfe2ff%22%20opacity%3D%220.7%22%2F%3E%20%3C%2Fsvg%3E");
	--bb-bubble-c: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%20%3Cdefs%3E%20%3CradialGradient%20id%3D%22bc1%22%20cx%3D%2232%25%22%20cy%3D%2230%25%22%3E%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22#ffffff%22%20stop-opacity%3D%220.95%22%2F%3E%20%3Cstop%20offset%3D%2240%25%22%20stop-color%3D%22#cfe2ff%22%20stop-opacity%3D%220.50%22%2F%3E%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22#5b86e5%22%20stop-opacity%3D%220.15%22%2F%3E%20%3C%2FradialGradient%3E%20%3C%2Fdefs%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2244%22%20fill%3D%22url(#bc1)%22%20stroke%3D%22#cfe2ff%22%20stroke-width%3D%221.2%22%20stroke-opacity%3D%220.7%22%2F%3E%20%3Ccircle%20cx%3D%2237%22%20cy%3D%2236%22%20r%3D%229%22%20fill%3D%22#ffffff%22%20opacity%3D%220.85%22%2F%3E%20%3Ccircle%20cx%3D%2242%22%20cy%3D%2230%22%20r%3D%224%22%20fill%3D%22#ffffff%22%20opacity%3D%220.95%22%2F%3E%20%3C%2Fsvg%3E");
	--bb-lightstring: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%2016%22%3E%20%3Cpath%20d%3D%22M%202%204%20Q%2025%2013%2C%2050%2010%20T%2098%204%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.5)%22%20stroke-width%3D%220.8%22%20fill%3D%22none%22%2F%3E%20%3Cg%3E%20%3Ccircle%20cx%3D%2210%22%20cy%3D%228%22%20r%3D%222.6%22%20fill%3D%22#f3c303%22%2F%3E%20%3Ccircle%20cx%3D%2210%22%20cy%3D%228%22%20r%3D%224.5%22%20fill%3D%22#f3c303%22%20opacity%3D%220.35%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2211%22%20r%3D%222.6%22%20fill%3D%22#cfe2ff%22%2F%3E%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2211%22%20r%3D%224.5%22%20fill%3D%22#cfe2ff%22%20opacity%3D%220.4%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Ccircle%20cx%3D%2247%22%20cy%3D%2211.5%22%20r%3D%222.6%22%20fill%3D%22#f3c303%22%2F%3E%20%3Ccircle%20cx%3D%2247%22%20cy%3D%2211.5%22%20r%3D%224.5%22%20fill%3D%22#f3c303%22%20opacity%3D%220.35%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Ccircle%20cx%3D%2267%22%20cy%3D%2210%22%20r%3D%222.6%22%20fill%3D%22#cfe2ff%22%2F%3E%20%3Ccircle%20cx%3D%2267%22%20cy%3D%2210%22%20r%3D%224.5%22%20fill%3D%22#cfe2ff%22%20opacity%3D%220.4%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Ccircle%20cx%3D%2287%22%20cy%3D%226%22%20r%3D%222.6%22%20fill%3D%22#f3c303%22%2F%3E%20%3Ccircle%20cx%3D%2287%22%20cy%3D%226%22%20r%3D%224.5%22%20fill%3D%22#f3c303%22%20opacity%3D%220.35%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
}

/* ═════════════════════════════════════════════════════════════════
   CANVAS / SHELL
   ───────────────────────────────────────────────────────────────── */

body.lbf-bubbles-page .bb-canvas {
	padding-top: calc(var(--header-h, 82px) + 0.75rem);
	padding-bottom: 1.5rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	background-color: var(--bb-bg);
	background-image: var(--bb-bubble-a);
	background-repeat: repeat;
	background-size: 480px 480px;
	background-attachment: fixed;
	position: relative;
}
body.lbf-bubbles-page .bb-canvas::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(240, 244, 248, 0.78);
	z-index: 0;
	pointer-events: none;
}

body.lbf-bubbles-page .bb-shell {
	max-width: calc(1480px - 2 * clamp(0.75rem, 2vw, 1.5rem));
	margin: 0 auto;
	background: linear-gradient(180deg, #fcfdff 0%, #f6f9ff 50%, #fafcff 100%);
	border: 1px solid var(--bb-border);
	border-radius: 2rem;
	box-shadow: var(--bb-shadow-lift);
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

/* Hidden ref tag — homage pattern */
body.lbf-bubbles-page .bb-shell::after {
	content: "[BLUE_LIGHTS_REF_BB01]";
	position: absolute;
	bottom: 1rem;
	right: 2rem;
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.5rem;
	color: rgba(0, 55, 167, 0.18);
	letter-spacing: 0.2em;
	pointer-events: none;
}

/* ═════════════════════════════════════════════════════════════════
   SHARED ELEMENTS
   ───────────────────────────────────────────────────────────────── */

body.lbf-bubbles-page .bb-card {
	background: #fff;
	border: 1px solid var(--bb-border);
	border-radius: 1.5rem;
	overflow: hidden;
	position: relative;
	box-shadow: var(--bb-shadow-card);
}

/* Eyebrow */
body.lbf-bubbles-page .bb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bb-blue);
	background: rgba(0, 55, 167, 0.08);
	border: 1px solid rgba(0, 55, 167, 0.18);
	border-radius: 99px;
	padding: 0.35rem 0.85rem;
}
body.lbf-bubbles-page .bb-eyebrow::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--bb-blue-glow);
	box-shadow: 0 0 6px var(--bb-blue-glow);
}
body.lbf-bubbles-page .bb-eyebrow--on-dark {
	color: var(--bb-blue-soft);
	background: rgba(207, 226, 255, 0.10);
	border-color: rgba(207, 226, 255, 0.32);
}
body.lbf-bubbles-page .bb-eyebrow--on-dark::before {
	background: var(--bb-blue-soft);
	box-shadow: 0 0 8px var(--bb-blue-soft);
}
body.lbf-bubbles-page .bb-eyebrow--on-gold {
	color: var(--bb-gold);
	background: rgba(243, 195, 3, 0.12);
	border-color: rgba(243, 195, 3, 0.36);
}
body.lbf-bubbles-page .bb-eyebrow--on-gold::before {
	background: var(--bb-gold);
	box-shadow: 0 0 8px var(--bb-gold);
}

/* Accent color span used in headings */
body.lbf-bubbles-page .bb-h-accent { color: var(--bb-blue); }

/* Buttons */
body.lbf-bubbles-page .bb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.85rem 1.6rem;
	border-radius: 99px;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 0.9rem;
	font-weight: 800;
	text-decoration: none;
	letter-spacing: 0.01em;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.lbf-bubbles-page .bb-btn--primary {
	background: linear-gradient(180deg, var(--bb-gold) 0%, var(--bb-gold-dark) 100%);
	color: var(--bb-blue-night);
	box-shadow: 0 12px 28px rgba(243, 195, 3, 0.36), 0 0 18px rgba(243, 195, 3, 0.18);
}
body.lbf-bubbles-page .bb-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px rgba(243, 195, 3, 0.45), 0 0 24px rgba(243, 195, 3, 0.28);
}

/* Inline links */
body.lbf-bubbles-page .bb-link {
	color: var(--bb-blue);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1.5px solid rgba(0, 55, 167, 0.32);
	transition: border-color 0.15s ease;
}
body.lbf-bubbles-page .bb-link:hover { border-bottom-color: var(--bb-blue); }

/* Pills (hero) */
body.lbf-bubbles-page .bb-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 99px;
	padding: 0.34rem 0.9rem 0.34rem 0.7rem;
	font-family: 'Outfit', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	transition: background 0.2s ease, border-color 0.2s ease;
}
body.lbf-bubbles-page .bb-pill:hover {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(207, 226, 255, 0.42);
}
body.lbf-bubbles-page .bb-pill-ico {
	width: 14px;
	height: 14px;
	color: var(--bb-blue-soft);
	flex-shrink: 0;
}
body.lbf-bubbles-page .bb-pill-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bb-blue-glow);
	box-shadow: 0 0 6px var(--bb-blue-glow);
}

/* ═════════════════════════════════════════════════════════════════
   §1 — HERO  (full-bleed, animated drifting bubbles)
   ───────────────────────────────────────────────────────────────── */

body.lbf-bubbles-page .bb-hero {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	background:
		radial-gradient(ellipse at 50% 100%, rgba(77, 127, 255, 0.32), transparent 60%),
		radial-gradient(circle at 20% 25%, rgba(74, 58, 140, 0.28), transparent 45%),
		radial-gradient(circle at 80% 30%, rgba(0, 55, 167, 0.35), transparent 50%),
		linear-gradient(180deg, #000820 0%, var(--bb-blue-night) 40%, #000820 100%);
	box-shadow: var(--bb-shadow-hero);
	min-height: 440px;
	display: flex;
	flex-direction: column;
	color: #fff;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-hero { min-height: 500px; }
}

/* Light string at the top of the hero */
body.lbf-bubbles-page .bb-hero-lights {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 18px;
	z-index: 5;
	overflow: hidden;
	pointer-events: none;
}
body.lbf-bubbles-page .bb-hero-lightstring {
	display: block;
	width: 100%;
	height: 18px;
	background-image: var(--bb-lightstring);
	background-repeat: repeat-x;
	background-size: 120px 18px;
	filter: drop-shadow(0 0 6px rgba(243, 195, 3, 0.5));
	animation: bb-string-glow 3s ease-in-out infinite;
}
@keyframes bb-string-glow {
	0%, 100% { opacity: 0.92; filter: drop-shadow(0 0 6px rgba(243, 195, 3, 0.5)); }
	50% { opacity: 1; filter: drop-shadow(0 0 12px rgba(243, 195, 3, 0.7)); }
}

/* Stars + atmospheric glows */
body.lbf-bubbles-page .bb-hero-sky {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}
body.lbf-bubbles-page .bb-hero-stars {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.85) 1px, transparent 1.5px),
		radial-gradient(circle, rgba(207, 226, 255, 0.65) 1px, transparent 1.5px),
		radial-gradient(circle, rgba(255, 255, 255, 0.55) 1.5px, transparent 2px),
		radial-gradient(circle, rgba(243, 195, 3, 0.30) 1px, transparent 1.5px);
	background-size: 200px 200px, 140px 140px, 260px 260px, 320px 320px;
	background-position: 0 0, 60px 80px, 100px 120px, 30px 50px;
	opacity: 0.7;
	animation: bb-twinkle 4.5s ease-in-out infinite;
}
@keyframes bb-twinkle {
	0%, 100% { opacity: 0.55; }
	50% { opacity: 0.85; }
}
body.lbf-bubbles-page .bb-hero-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(64px);
}
body.lbf-bubbles-page .bb-hero-orb--a {
	width: 460px;
	height: 460px;
	top: -160px;
	left: 30%;
	background: rgba(77, 127, 255, 0.30);
}
body.lbf-bubbles-page .bb-hero-orb--b {
	width: 360px;
	height: 360px;
	bottom: -140px;
	right: -100px;
	background: rgba(74, 58, 140, 0.36);
}

/* Animated drifting bubbles — the page's signature */
body.lbf-bubbles-page .bb-hero-bubbles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 2;
}
body.lbf-bubbles-page .bb-drift {
	position: absolute;
	bottom: -10%;
	background-image: var(--bb-bubble-c);
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 50%;
	animation-name: bb-rise;
	animation-timing-function: ease-in;
	animation-iteration-count: infinite;
	will-change: transform, opacity;
}
@keyframes bb-rise {
	0%   { transform: translate3d(0, 0, 0) scale(0.55); opacity: 0; }
	8%   { opacity: 0.85; }
	25%  { transform: translate3d(18px, -25vh, 0) scale(0.75); }
	50%  { transform: translate3d(-12px, -55vh, 0) scale(0.85); }
	75%  { transform: translate3d(22px, -85vh, 0) scale(0.95); }
	90%  { opacity: 0.7; }
	100% { transform: translate3d(-20px, -115%, 0) scale(1); opacity: 0; }
}
/* Distributed across the hero — different sizes, delays, durations */
body.lbf-bubbles-page .bb-drift--1 { left:  8%; width: 22px; height: 22px; animation-duration: 11s; animation-delay: 0s; }
body.lbf-bubbles-page .bb-drift--2 { left: 18%; width: 38px; height: 38px; animation-duration: 14s; animation-delay: 3s; }
body.lbf-bubbles-page .bb-drift--3 { left: 28%; width: 16px; height: 16px; animation-duration: 9s;  animation-delay: 5s; }
body.lbf-bubbles-page .bb-drift--4 { left: 40%; width: 48px; height: 48px; animation-duration: 17s; animation-delay: 1s; }
body.lbf-bubbles-page .bb-drift--5 { left: 52%; width: 26px; height: 26px; animation-duration: 12s; animation-delay: 6s; }
body.lbf-bubbles-page .bb-drift--6 { left: 64%; width: 34px; height: 34px; animation-duration: 15s; animation-delay: 2s; }
body.lbf-bubbles-page .bb-drift--7 { left: 76%; width: 20px; height: 20px; animation-duration: 10s; animation-delay: 7s; }
body.lbf-bubbles-page .bb-drift--8 { left: 86%; width: 42px; height: 42px; animation-duration: 16s; animation-delay: 4s; }
body.lbf-bubbles-page .bb-drift--9 { left: 95%; width: 18px; height: 18px; animation-duration: 11s; animation-delay: 8s; }
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-drift,
	body.lbf-bubbles-page .bb-hero-stars,
	body.lbf-bubbles-page .bb-hero-lightstring { animation: none; }
}

/* Hero content — centered, atmospheric */
body.lbf-bubbles-page .bb-hero-inner {
	position: relative;
	z-index: 4;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2.5rem 1.5rem 1.5rem;
	max-width: 780px;
	margin: 0 auto;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-hero-inner { padding: 3rem 2rem 1.75rem; }
}

body.lbf-bubbles-page .bb-hero-h {
	font-family: 'Outfit', system-ui, sans-serif;
	margin: 0.9rem 0 0;
	font-size: clamp(2.4rem, 6.5vw, 4.4rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 0.95;
	color: #fff;
	text-shadow: 0 0 30px rgba(77, 127, 255, 0.35), 0 0 60px rgba(0, 21, 74, 0.5);
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.05em;
}
body.lbf-bubbles-page .bb-hero-h-line1 { display: block; }
body.lbf-bubbles-page .bb-hero-h-line2 {
	display: block;
	color: var(--bb-blue-soft);
	font-weight: 900;
	position: relative;
}
body.lbf-bubbles-page .bb-hero-h-amp {
	color: var(--bb-gold);
	font-style: italic;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-right: 0.05em;
	text-shadow: 0 0 20px rgba(243, 195, 3, 0.45);
}
body.lbf-bubbles-page .bb-hero-h-mark {
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	margin-left: 0.1em;
	vertical-align: 0.1em;
	background: radial-gradient(circle at 35% 35%, #fff 0%, var(--bb-gold) 60%, var(--bb-gold-dark) 100%);
	box-shadow: 0 0 14px rgba(243, 195, 3, 0.7);
	animation: bb-mark-pulse 2.5s ease-in-out infinite;
}
@keyframes bb-mark-pulse {
	0%, 100% { box-shadow: 0 0 14px rgba(243, 195, 3, 0.6); transform: scale(1); }
	50% { box-shadow: 0 0 24px rgba(243, 195, 3, 0.95); transform: scale(1.08); }
}
body.lbf-bubbles-page .bb-hero-h-rule {
	display: block;
	width: 70px;
	height: 2px;
	margin: 0.7rem auto 0;
	background: linear-gradient(90deg, transparent 0%, var(--bb-gold) 50%, transparent 100%);
	box-shadow: 0 0 8px rgba(243, 195, 3, 0.5);
}

body.lbf-bubbles-page .bb-hero-tagline {
	margin: 1.15rem 0 0;
	font-family: 'Outfit', sans-serif;
	font-size: clamp(0.95rem, 1.6vw, 1.1rem);
	font-weight: 500;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	max-width: 540px;
}

body.lbf-bubbles-page .bb-hero-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.55rem;
	margin: 1.6rem 0 0;
}

body.lbf-bubbles-page .bb-hero-inner > .bb-btn {
	margin-top: 1.4rem;
}

/* Hero footer — date + step-off, anchored to bottom */
body.lbf-bubbles-page .bb-hero-foot {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding: 1.1rem 1.5rem 1.6rem;
	margin-top: auto;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	background: linear-gradient(180deg, transparent 0%, rgba(0, 21, 74, 0.5) 100%);
}
body.lbf-bubbles-page .bb-hero-foot-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
}
body.lbf-bubbles-page .bb-hero-foot-lbl {
	font-family: 'Outfit', sans-serif;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bb-gold);
}
body.lbf-bubbles-page .bb-hero-foot-val {
	font-family: 'Outfit', sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.005em;
}
body.lbf-bubbles-page .bb-hero-foot-sep {
	width: 1px;
	height: 28px;
	background: rgba(255, 255, 255, 0.2);
}
body.lbf-bubbles-page .bb-hero-foot-scroll {
	position: absolute;
	bottom: 0.5rem;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.4);
	animation: bb-scroll-bounce 2s ease-in-out infinite;
}
@keyframes bb-scroll-bounce {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, 4px); }
}

/* ═════════════════════════════════════════════════════════════════
   §2 — STORY  (one continuous narrative block)
   ───────────────────────────────────────────────────────────────── */

body.lbf-bubbles-page .bb-story {
	padding: 2.5rem 1.5rem;
	position: relative;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-story { padding: 3rem 2rem; }
}
body.lbf-bubbles-page .bb-story::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--bb-bubble-a);
	background-size: 320px 320px;
	background-repeat: no-repeat;
	background-position: 105% -20%;
	opacity: 0.45;
	pointer-events: none;
}
body.lbf-bubbles-page .bb-story-inner {
	position: relative;
	z-index: 1;
	max-width: 880px;
	margin: 0 auto;
}
body.lbf-bubbles-page .bb-story-h {
	font-family: 'Outfit', sans-serif;
	margin: 0.85rem 0 0;
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.05;
	color: var(--bb-text);
}
body.lbf-bubbles-page .bb-story-lead {
	margin: 1rem 0 0;
	font-size: clamp(0.95rem, 1.5vw, 1.05rem);
	line-height: 1.7;
	color: var(--bb-text-2);
	max-width: 720px;
}

/* 3-moment "as it happens" strip */
body.lbf-bubbles-page .bb-moments {
	margin: 2.5rem 0 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-moments { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
}
body.lbf-bubbles-page .bb-moment {
	position: relative;
	padding: 1.2rem 1.25rem;
	border: 1px solid var(--bb-border-soft);
	border-radius: 14px;
	background: linear-gradient(180deg, var(--bb-bg-2) 0%, var(--bb-bg-3) 100%);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
body.lbf-bubbles-page .bb-moment:hover {
	transform: translateY(-3px);
	border-color: var(--bb-blue);
	box-shadow: var(--bb-shadow-card);
}
body.lbf-bubbles-page .bb-moment--accent {
	background: linear-gradient(180deg, #fff 0%, #f0f5ff 100%);
	border-color: var(--bb-blue);
	box-shadow: 0 12px 28px rgba(0, 55, 167, 0.10), 0 0 0 4px rgba(77, 127, 255, 0.08);
}
body.lbf-bubbles-page .bb-moment-icon {
	width: 36px;
	height: 36px;
	color: var(--bb-blue);
}
body.lbf-bubbles-page .bb-moment--accent .bb-moment-icon {
	color: var(--bb-blue-glow);
	filter: drop-shadow(0 0 6px rgba(77, 127, 255, 0.4));
}
body.lbf-bubbles-page .bb-moment-icon svg { width: 100%; height: 100%; }
body.lbf-bubbles-page .bb-moment-time {
	margin-top: 0.7rem;
	font-family: 'Outfit', sans-serif;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bb-text-3);
}
body.lbf-bubbles-page .bb-moment--accent .bb-moment-time { color: var(--bb-blue); }
body.lbf-bubbles-page .bb-moment-h {
	margin-top: 0.25rem;
	font-family: 'Outfit', sans-serif;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--bb-text);
	letter-spacing: -0.01em;
}
body.lbf-bubbles-page .bb-moment-p {
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--bb-text-2);
}

/* Look-for chip row */
body.lbf-bubbles-page .bb-lookfor {
	margin: 2.5rem 0 0;
	padding: 1.1rem 1.25rem;
	background: linear-gradient(135deg, rgba(74, 58, 140, 0.04) 0%, rgba(0, 55, 167, 0.04) 100%);
	border-left: 3px solid var(--bb-blueberry);
	border-radius: 8px;
}
body.lbf-bubbles-page .bb-lookfor-lbl {
	display: block;
	margin-bottom: 0.7rem;
	font-family: 'Outfit', sans-serif;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bb-blueberry);
}
body.lbf-bubbles-page .bb-lookfor-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}
body.lbf-bubbles-page .bb-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.32rem 0.85rem;
	background: #fff;
	border: 1px solid var(--bb-border);
	border-radius: 99px;
	font-family: 'Outfit', sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--bb-text);
	letter-spacing: 0.005em;
	transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
body.lbf-bubbles-page .bb-chip:hover {
	border-color: var(--bb-blue);
	color: var(--bb-blue);
	transform: translateY(-1px);
}
body.lbf-bubbles-page .bb-chip--more {
	background: transparent;
	border-style: dashed;
	color: var(--bb-text-3);
	font-style: italic;
}

/* ═════════════════════════════════════════════════════════════════
   §3 — GRAND REVIEWING  (dark, quote-centered)
   ───────────────────────────────────────────────────────────────── */

body.lbf-bubbles-page .bb-grand {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	background:
		radial-gradient(circle at 30% 30%, rgba(77, 127, 255, 0.25), transparent 45%),
		radial-gradient(circle at 70% 70%, rgba(74, 58, 140, 0.22), transparent 45%),
		linear-gradient(135deg, var(--bb-blue-deep) 0%, var(--bb-blue-night) 100%);
	box-shadow: var(--bb-shadow-hero);
	color: #fff;
	min-height: 420px;
}
body.lbf-bubbles-page .bb-grand-sky {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
body.lbf-bubbles-page .bb-grand-stars {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.6) 1px, transparent 1.5px),
		radial-gradient(circle, rgba(207, 226, 255, 0.45) 1px, transparent 1.5px);
	background-size: 180px 180px, 220px 220px;
	background-position: 0 0, 60px 90px;
	opacity: 0.55;
}
body.lbf-bubbles-page .bb-grand-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(64px);
}
body.lbf-bubbles-page .bb-grand-orb--a {
	width: 360px;
	height: 360px;
	top: -120px;
	left: 10%;
	background: rgba(77, 127, 255, 0.32);
}
body.lbf-bubbles-page .bb-grand-orb--b {
	width: 280px;
	height: 280px;
	bottom: -80px;
	right: 5%;
	background: rgba(74, 58, 140, 0.28);
}
body.lbf-bubbles-page .bb-grand-bubble-layer {
	position: absolute;
	inset: 0;
	background-image: var(--bb-bubble-b);
	background-size: 540px 540px;
	background-repeat: no-repeat;
	background-position: 95% 10%;
	opacity: 0.55;
}

body.lbf-bubbles-page .bb-grand-inner {
	position: relative;
	z-index: 2;
	max-width: 760px;
	margin: 0 auto;
	padding: 3rem 1.75rem;
	text-align: center;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-grand-inner { padding: 3.5rem 2.5rem; }
}
body.lbf-bubbles-page .bb-grand-kicker {
	font-family: 'Outfit', sans-serif;
	margin: 0.85rem 0 0;
	font-size: clamp(1rem, 1.8vw, 1.2rem);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.78);
	letter-spacing: -0.005em;
	line-height: 1.4;
}
body.lbf-bubbles-page .bb-quote {
	margin: 2rem auto 0;
	max-width: 640px;
	padding: 1.25rem 2rem;
	font-family: 'Outfit', sans-serif;
	font-size: clamp(1.15rem, 2.4vw, 1.6rem);
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
	font-style: italic;
	position: relative;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
	border-radius: 12px;
	box-shadow:
		inset 0 0 0 1px rgba(243, 195, 3, 0.22),
		inset 0 0 30px rgba(243, 195, 3, 0.06),
		0 0 40px rgba(243, 195, 3, 0.12);
	backdrop-filter: blur(4px);
}
body.lbf-bubbles-page .bb-quote-mark {
	position: absolute;
	font-family: serif;
	font-size: 4rem;
	font-style: normal;
	color: var(--bb-gold);
	line-height: 1;
	opacity: 0.55;
	filter: drop-shadow(0 0 10px rgba(243, 195, 3, 0.4));
}
body.lbf-bubbles-page .bb-quote-mark--open {
	left: -0.2rem;
	top: -1.5rem;
}
body.lbf-bubbles-page .bb-quote-mark--close {
	right: -0.2rem;
	bottom: -1.8rem;
}
body.lbf-bubbles-page .bb-quote-team {
	color: var(--bb-gold);
	font-style: normal;
	font-weight: 700;
	text-shadow: 0 0 16px rgba(243, 195, 3, 0.5);
	animation: bb-team-glow 3s ease-in-out infinite;
}
@keyframes bb-team-glow {
	0%, 100% { text-shadow: 0 0 16px rgba(243, 195, 3, 0.5); }
	50% { text-shadow: 0 0 28px rgba(243, 195, 3, 0.8), 0 0 8px rgba(243, 195, 3, 0.4); }
}
body.lbf-bubbles-page .bb-grand-footer {
	margin: 2rem auto 0;
	max-width: 560px;
	font-size: 0.88rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.7);
}

/* ═════════════════════════════════════════════════════════════════
   §4 — ATHLETES ON THE MAIN STAGE  (THE CLIMAX)
   ───────────────────────────────────────────────────────────────── */

body.lbf-bubbles-page .bb-stage {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(243, 195, 3, 0.20) 0%, transparent 35%),
		radial-gradient(circle at 25% 80%, rgba(74, 58, 140, 0.34), transparent 50%),
		radial-gradient(circle at 75% 80%, rgba(0, 55, 167, 0.32), transparent 50%),
		linear-gradient(180deg, var(--bb-blueberry-deep) 0%, var(--bb-blue-night) 60%, #000820 100%);
	box-shadow: var(--bb-shadow-stage);
	color: #fff;
	min-height: 700px;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-stage { min-height: 780px; }
}

/* Spotlight beams from top corners crossing at center */
body.lbf-bubbles-page .bb-stage-spots {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}
body.lbf-bubbles-page .bb-stage-spot {
	position: absolute;
	top: -50px;
	width: 200px;
	height: 700px;
	transform-origin: top center;
	filter: blur(20px);
	mix-blend-mode: screen;
	animation: bb-spot-sweep 8s ease-in-out infinite alternate;
}
body.lbf-bubbles-page .bb-stage-spot--l {
	left: 15%;
	background: linear-gradient(180deg, rgba(243, 195, 3, 0.55) 0%, rgba(243, 195, 3, 0.25) 30%, transparent 75%);
	transform: rotate(-22deg);
}
body.lbf-bubbles-page .bb-stage-spot--r {
	right: 15%;
	background: linear-gradient(180deg, rgba(207, 226, 255, 0.55) 0%, rgba(207, 226, 255, 0.25) 30%, transparent 75%);
	transform: rotate(22deg);
	animation-delay: -4s;
}
@keyframes bb-spot-sweep {
	0%   { transform: rotate(var(--rot, -22deg)) translateX(0); }
	100% { transform: rotate(var(--rot, -22deg)) translateX(40px); }
}
body.lbf-bubbles-page .bb-stage-spot--l { --rot: -22deg; }
body.lbf-bubbles-page .bb-stage-spot--r { --rot:  22deg; }
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-stage-spot { animation: none; }
}

body.lbf-bubbles-page .bb-stage-sky {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
body.lbf-bubbles-page .bb-stage-stars {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.7) 1px, transparent 1.5px),
		radial-gradient(circle, rgba(243, 195, 3, 0.55) 1px, transparent 1.5px),
		radial-gradient(circle, rgba(255, 255, 255, 0.4) 1.5px, transparent 2px);
	background-size: 140px 140px, 200px 200px, 280px 280px;
	background-position: 0 0, 80px 60px, 40px 120px;
	opacity: 0.6;
}
body.lbf-bubbles-page .bb-stage-bubble-layer {
	position: absolute;
	inset: 0;
	background-image: var(--bb-bubble-b);
	background-size: 480px 480px;
	background-repeat: no-repeat;
	background-position: 5% 95%;
	opacity: 0.42;
}

body.lbf-bubbles-page .bb-stage-inner {
	position: relative;
	z-index: 3;
	max-width: 880px;
	margin: 0 auto;
	padding: 3.5rem 1.85rem;
	text-align: center;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-stage-inner { padding: 4.5rem 2.5rem; }
}

body.lbf-bubbles-page .bb-stage-h {
	font-family: 'Outfit', sans-serif;
	margin: 1.4rem 0 0;
	font-size: clamp(2.6rem, 7vw, 4.8rem);
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 0.92;
	color: #fff;
	text-shadow: 0 0 32px rgba(243, 195, 3, 0.36), 0 0 64px rgba(0, 21, 74, 0.6);
	position: relative;
	z-index: 2;
}
body.lbf-bubbles-page .bb-stage-h-gold {
	display: block;
	color: var(--bb-gold);
	text-shadow: 0 0 36px rgba(243, 195, 3, 0.55), 0 0 72px rgba(243, 195, 3, 0.28);
}
body.lbf-bubbles-page .bb-stage-lead {
	max-width: 620px;
	margin: 1.4rem auto 0;
	font-size: clamp(0.95rem, 1.5vw, 1.05rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.9);
}

/* Stage program — stylized team roster like a printed playbill */
body.lbf-bubbles-page .bb-program {
	margin: 2.75rem auto 0;
	max-width: 640px;
	padding: 1.75rem 1.5rem 1.5rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
	border: 1px solid rgba(243, 195, 3, 0.32);
	border-radius: 12px;
	backdrop-filter: blur(8px);
	position: relative;
}
body.lbf-bubbles-page .bb-program::before,
body.lbf-bubbles-page .bb-program::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 60%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--bb-gold), transparent);
	opacity: 0.5;
}
body.lbf-bubbles-page .bb-program::before { top: 0.7rem; }
body.lbf-bubbles-page .bb-program::after  { bottom: 0.7rem; }
body.lbf-bubbles-page .bb-program-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	font-family: 'Outfit', sans-serif;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bb-gold);
	margin-bottom: 1.4rem;
}
body.lbf-bubbles-page .bb-program-mark {
	font-size: 0.85rem;
	color: var(--bb-gold);
	filter: drop-shadow(0 0 6px rgba(243, 195, 3, 0.6));
}
body.lbf-bubbles-page .bb-program-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.15rem 1.5rem;
	font-family: 'Outfit', sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.94);
	text-align: center;
}
@media (min-width: 540px) {
	body.lbf-bubbles-page .bb-program-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-program-list { grid-template-columns: repeat(3, 1fr); }
}
body.lbf-bubbles-page .bb-program-list li {
	padding: 0.5rem 1rem;
	position: relative;
	letter-spacing: 0.01em;
	transition: color 0.18s ease, text-shadow 0.18s ease;
	border-bottom: 1px solid rgba(243, 195, 3, 0.12);
}
body.lbf-bubbles-page .bb-program-list li::before {
	content: "★";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: var(--bb-gold);
	font-size: 0.7em;
	opacity: 0;
	transition: opacity 0.2s ease, left 0.2s ease;
	filter: drop-shadow(0 0 6px rgba(243, 195, 3, 0.7));
}
body.lbf-bubbles-page .bb-program-list li:hover {
	color: var(--bb-gold);
	text-shadow: 0 0 12px rgba(243, 195, 3, 0.6);
}
body.lbf-bubbles-page .bb-program-list li:hover::before {
	opacity: 1;
	left: 0.3rem;
}
body.lbf-bubbles-page .bb-program-footer {
	margin-top: 1.5rem;
	font-family: 'Outfit', sans-serif;
	font-size: 0.75rem;
	font-style: italic;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.65);
	text-align: center;
}

/* ═════════════════════════════════════════════════════════════════
   §5 — ENTER  (compact conversion block)
   ───────────────────────────────────────────────────────────────── */

body.lbf-bubbles-page .bb-enter {
	padding: 2.5rem 1.5rem;
	position: relative;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-enter { padding: 3rem 2rem; }
}
body.lbf-bubbles-page .bb-enter::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--bb-bubble-a);
	background-size: 300px 300px;
	background-repeat: no-repeat;
	background-position: -10% 110%;
	opacity: 0.4;
	pointer-events: none;
}
body.lbf-bubbles-page .bb-enter-inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
}
body.lbf-bubbles-page .bb-enter-h {
	font-family: 'Outfit', sans-serif;
	margin: 0.85rem 0 0;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.05;
	color: var(--bb-text);
}
body.lbf-bubbles-page .bb-enter-lead {
	margin: 0.85rem 0 0;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--bb-text-2);
	max-width: 620px;
}

/* Category chips */
body.lbf-bubbles-page .bb-cat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
}
body.lbf-bubbles-page .bb-cat-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	background: #fff;
	border: 1.5px solid var(--bb-border);
	border-radius: 99px;
	font-family: 'Outfit', sans-serif;
	font-size: 0.85rem;
	font-weight: 800;
	color: var(--bb-blue);
	letter-spacing: 0.005em;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
body.lbf-bubbles-page .bb-cat-chip:hover {
	background: var(--bb-blue);
	color: #fff;
	border-color: var(--bb-blue);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 55, 167, 0.18);
}
body.lbf-bubbles-page .bb-cat-chip--alt {
	background: transparent;
	border-style: dashed;
	color: var(--bb-text-3);
	font-style: italic;
	font-weight: 600;
}
body.lbf-bubbles-page .bb-cat-chip--alt:hover {
	background: transparent;
	color: var(--bb-blueberry);
	border-color: var(--bb-blueberry);
	border-style: dashed;
}

body.lbf-bubbles-page .bb-enter-note {
	margin: 1.4rem 0 0;
	padding: 0.85rem 1.1rem;
	background: rgba(77, 127, 255, 0.07);
	border-left: 3px solid var(--bb-blue-glow);
	border-radius: 6px;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--bb-text-2);
}

/* Form embed */
body.lbf-bubbles-page .bb-enter-form {
	margin-top: 1.75rem;
	padding: 1.5rem;
	background: linear-gradient(180deg, #fbfcff 0%, var(--bb-bg-3) 100%);
	border: 1px solid var(--bb-border);
	border-radius: 14px;
}
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="text"],
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="email"],
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="tel"],
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="url"],
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="number"],
body.lbf-bubbles-page .bb-enter-form .gform_wrapper select,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper textarea {
	border-radius: 10px;
	border: 1px solid var(--bb-border);
}

body.lbf-bubbles-page .bb-enter-pending {
	text-align: center;
	padding: 1.5rem 1rem;
}
body.lbf-bubbles-page .bb-enter-pending-mark {
	color: var(--bb-blue);
	margin: 0 auto 0.85rem;
	animation: bb-pending-spin 6s linear infinite;
	display: inline-block;
}
@keyframes bb-pending-spin {
	to { transform: rotate(360deg); }
}
body.lbf-bubbles-page .bb-enter-pending-h {
	font-family: 'Outfit', sans-serif;
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--bb-text);
	letter-spacing: -0.01em;
}
body.lbf-bubbles-page .bb-enter-pending-p {
	margin: 0.65rem auto 0;
	max-width: 460px;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--bb-text-2);
}

/* ═════════════════════════════════════════════════════════════════
   §6 — FAQ  (5 questions)
   ───────────────────────────────────────────────────────────────── */

body.lbf-bubbles-page .bb-faq {
	padding: 2.5rem 1.5rem;
	position: relative;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-faq { padding: 3rem 2rem; }
}
body.lbf-bubbles-page .bb-faq-inner {
	max-width: 760px;
	margin: 0 auto;
}
body.lbf-bubbles-page .bb-faq-h {
	font-family: 'Outfit', sans-serif;
	margin: 0.85rem 0 0;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.05;
	color: var(--bb-text);
}
body.lbf-bubbles-page .bb-faq-list {
	margin-top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
body.lbf-bubbles-page .bb-faq-item {
	background: var(--bb-bg-3);
	border: 1px solid var(--bb-border-soft);
	border-radius: 12px;
	transition: border-color 0.15s ease, background 0.15s ease;
}
body.lbf-bubbles-page .bb-faq-item[open] {
	border-color: var(--bb-blue);
	background: #fff;
}
body.lbf-bubbles-page .bb-faq-q {
	cursor: pointer;
	font-family: 'Outfit', sans-serif;
	font-size: 0.92rem;
	font-weight: 800;
	color: var(--bb-text);
	padding: 0.9rem 1.1rem;
	list-style: none;
	position: relative;
	padding-right: 2.5rem;
	line-height: 1.35;
	letter-spacing: -0.005em;
}
body.lbf-bubbles-page .bb-faq-q::-webkit-details-marker { display: none; }
body.lbf-bubbles-page .bb-faq-q::after {
	content: "+";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	font-family: 'Outfit', sans-serif;
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--bb-blue);
	line-height: 1;
	transition: transform 0.2s ease;
}
body.lbf-bubbles-page .bb-faq-item[open] .bb-faq-q::after { content: "−"; }
body.lbf-bubbles-page .bb-faq-a {
	padding: 0 1.1rem 0.95rem;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--bb-text-2);
}

/* ═════════════════════════════════════════════════════════════════
   §7 — CLOSING
   ───────────────────────────────────────────────────────────────── */

body.lbf-bubbles-page .bb-close {
	position: relative;
	padding: 2.5rem 1.5rem 2rem;
	text-align: center;
}
body.lbf-bubbles-page .bb-close-lights {
	max-width: 200px;
	margin: 0 auto 1.5rem;
	height: 16px;
	overflow: hidden;
}
body.lbf-bubbles-page .bb-close-lightstring {
	display: block;
	width: 100%;
	height: 16px;
	background-image: var(--bb-lightstring);
	background-repeat: repeat-x;
	background-size: 100px 16px;
	filter: drop-shadow(0 0 6px rgba(243, 195, 3, 0.45));
	animation: bb-string-glow 3s ease-in-out infinite;
}
body.lbf-bubbles-page .bb-close-p {
	max-width: 620px;
	margin: 0 auto;
	font-family: 'Outfit', sans-serif;
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.45;
	color: var(--bb-text-2);
	letter-spacing: -0.005em;
}

/* ═════════════════════════════════════════════════════════════════
   v29.5.2 POLISH ADDITIONS — items 4–14 from the polish plan
   ───────────────────────────────────────────────────────────────── */

/* ── ITEM 4: HERO BOTTOM-EDGE TRANSITION ───────────────────────────
   A soft gradient mask at the bottom of the hero block fades the
   dark night into the lighter section below. */
body.lbf-bubbles-page .bb-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 80px;
	background: linear-gradient(180deg, transparent 0%, rgba(252, 253, 255, 0.18) 60%, rgba(252, 253, 255, 0.42) 100%);
	pointer-events: none;
	z-index: 3;
}

/* ── ITEM 12: SEAM BUBBLES BETWEEN SECTIONS ────────────────────────
   Two small drifting bubbles tucked at the seam between every
   section pair so the page feels continuous. */
body.lbf-bubbles-page .bb-seam {
	position: relative;
	height: 0;
	overflow: visible;
	z-index: 1;
	pointer-events: none;
}
body.lbf-bubbles-page .bb-seam-bubble {
	position: absolute;
	display: block;
	background-image: var(--bb-bubble-c);
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 50%;
	opacity: 0.4;
	animation: bb-seam-drift 6s ease-in-out infinite;
}
body.lbf-bubbles-page .bb-seam-bubble--1 {
	left: 8%;
	bottom: -8px;
	width: 18px;
	height: 18px;
	animation-delay: 0s;
}
body.lbf-bubbles-page .bb-seam-bubble--2 {
	right: 12%;
	bottom: -14px;
	width: 12px;
	height: 12px;
	animation-delay: -3s;
}
@keyframes bb-seam-drift {
	0%, 100% { transform: translateY(0); opacity: 0.4; }
	50% { transform: translateY(-16px); opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-seam-bubble { animation: none; }
}

/* ── ITEM 5: STEP-OFF MOMENT CARD — extra polish ────────────────────
   The accent card gets a subtle inner-glow ring and a "LIVE"-style
   indicator dot that pulses. */
body.lbf-bubbles-page .bb-moment--accent {
	position: relative;
}
body.lbf-bubbles-page .bb-moment--accent::after {
	content: "";
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bb-blue-glow);
	box-shadow: 0 0 0 4px rgba(77, 127, 255, 0.18), 0 0 10px rgba(77, 127, 255, 0.7);
	animation: bb-live-pulse 1.8s ease-in-out infinite;
}
@keyframes bb-live-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(77, 127, 255, 0.18), 0 0 10px rgba(77, 127, 255, 0.7); }
	50% { box-shadow: 0 0 0 6px rgba(77, 127, 255, 0.06), 0 0 16px rgba(77, 127, 255, 0.9); }
}
body.lbf-bubbles-page .bb-moment:hover .bb-moment-icon {
	transform: scale(1.12);
	transition: transform 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-moment--accent::after { animation: none; }
}

/* ── ITEM 6: CHIP TICKER — continuous horizontal scroll ─────────────
   The track holds two duplicate rows side by side; animation slides
   the whole track left by 50% (one row's width), then loops. Pauses
   on hover so people can read. */
body.lbf-bubbles-page .bb-lookfor-viewport {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
body.lbf-bubbles-page .bb-lookfor-track {
	display: flex;
	width: max-content;
	animation: bb-ticker 32s linear infinite;
}
body.lbf-bubbles-page .bb-lookfor-track:hover {
	animation-play-state: paused;
}
body.lbf-bubbles-page .bb-lookfor-track .bb-lookfor-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.4rem;
	padding-right: 0.4rem;
	flex-shrink: 0;
}
@keyframes bb-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-lookfor-track { animation: none; }
}

/* ── ITEM 8b: STAGE CENTER HALO ─────────────────────────────────────
   A pulsing radial glow centered behind the stage headline,
   suggesting the headline is being spotlit. */
body.lbf-bubbles-page .bb-stage-halo {
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(243, 195, 3, 0.22) 0%, rgba(243, 195, 3, 0.08) 30%, transparent 60%);
	filter: blur(40px);
	animation: bb-halo-breathe 5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes bb-halo-breathe {
	0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
	50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-stage-halo { animation: none; }
}

/* ── ITEM 8c: STAGE DUST PARTICLES IN SPOTLIGHTS ───────────────────
   Tiny particles drifting up through the spotlight beam areas. */
body.lbf-bubbles-page .bb-stage-dust {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(243, 195, 3, 0.85);
	box-shadow: 0 0 6px rgba(243, 195, 3, 0.7);
	animation: bb-dust-rise 14s linear infinite;
	opacity: 0;
}
body.lbf-bubbles-page .bb-stage-dust--1 { left: 18%; bottom: 0; animation-delay: 0s; }
body.lbf-bubbles-page .bb-stage-dust--2 { left: 22%; bottom: 0; animation-delay: -4s; width: 2px; height: 2px; }
body.lbf-bubbles-page .bb-stage-dust--3 { right: 18%; bottom: 0; animation-delay: -7s; background: rgba(207, 226, 255, 0.85); box-shadow: 0 0 6px rgba(207, 226, 255, 0.7); }
body.lbf-bubbles-page .bb-stage-dust--4 { right: 22%; bottom: 0; animation-delay: -10s; width: 2px; height: 2px; }
body.lbf-bubbles-page .bb-stage-dust--5 { left: 50%; bottom: 0; animation-delay: -2s; width: 2px; height: 2px; }
@keyframes bb-dust-rise {
	0% { transform: translateY(0) translateX(0); opacity: 0; }
	10% { opacity: 0.9; }
	90% { opacity: 0.5; }
	100% { transform: translateY(-100vh) translateX(20px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-stage-dust { animation: none; }
}

/* ── ITEM 9: ENTER PENDING — atmospheric drift ─────────────────────
   The "Registration opens soon" placeholder gets subtle drifting
   bubbles inside it, plus a gently-breathing border. */
body.lbf-bubbles-page .bb-enter-pending {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	border: 1.5px dashed rgba(0, 55, 167, 0.18);
	background: linear-gradient(180deg, #fff 0%, #f6f9ff 100%);
	animation: bb-pending-breathe 4s ease-in-out infinite;
}
@keyframes bb-pending-breathe {
	0%, 100% { border-color: rgba(0, 55, 167, 0.18); }
	50% { border-color: rgba(77, 127, 255, 0.36); }
}
body.lbf-bubbles-page .bb-enter-pending::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--bb-bubble-a);
	background-size: 200px 200px;
	background-repeat: no-repeat;
	background-position: 105% 115%;
	opacity: 0.5;
	pointer-events: none;
}
body.lbf-bubbles-page .bb-enter-pending > * {
	position: relative;
	z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-enter-pending { animation: none; }
}

/* ── ITEM 5b: CATEGORY CHIPS — softer pulse on the first one ───────
   Subtly nudges the user toward picking a category. */
body.lbf-bubbles-page .bb-cat-chip:first-child {
	box-shadow: 0 0 0 0 rgba(0, 55, 167, 0.0);
	animation: bb-cat-nudge 3.5s ease-in-out infinite;
}
@keyframes bb-cat-nudge {
	0%, 92%, 100% { box-shadow: 0 0 0 0 rgba(0, 55, 167, 0); transform: translateY(0); }
	96% { box-shadow: 0 0 0 6px rgba(77, 127, 255, 0.12); transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-cat-chip:first-child { animation: none; }
}

/* ── ITEM 10: FAQ NUMBERED INDICATORS + ANIMATION ─────────────────
   Each summary shows its number (data-num attr) as a styled
   numerical chip. Expand/collapse animates the icon smoothly. */
body.lbf-bubbles-page .bb-faq-q {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding-left: 1.1rem;
}
body.lbf-bubbles-page .bb-faq-q::before {
	content: attr(data-num);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--bb-blue);
	color: #fff;
	font-family: 'Outfit', sans-serif;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0;
	flex-shrink: 0;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.lbf-bubbles-page .bb-faq-item[open] .bb-faq-q::before {
	background: var(--bb-gold);
	color: var(--bb-blue-night);
	box-shadow: 0 0 12px rgba(243, 195, 3, 0.5);
	transform: scale(1.08);
}
body.lbf-bubbles-page .bb-faq-q::after {
	transition: transform 0.25s ease, color 0.2s ease;
}
body.lbf-bubbles-page .bb-faq-item[open] .bb-faq-q::after {
	transform: translateY(-50%) rotate(180deg);
	color: var(--bb-gold);
}
/* Expand animation — slide-down feel */
body.lbf-bubbles-page .bb-faq-a {
	animation: bb-faq-reveal 0.3s ease-out;
}
@keyframes bb-faq-reveal {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-faq-a { animation: none; }
}

/* ── ITEM 11: CLOSING — fade-in entrance ───────────────────────────
   The light string animates in first, then the line. */
body.lbf-bubbles-page .bb-close.lbf-rv-visible .bb-close-lights {
	animation: bb-close-string-in 0.7s ease-out 0.1s both;
}
body.lbf-bubbles-page .bb-close.lbf-rv-visible .bb-close-p {
	animation: bb-close-line-in 0.9s ease-out 0.55s both;
}
@keyframes bb-close-string-in {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes bb-close-line-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-close.lbf-rv-visible .bb-close-lights,
	body.lbf-bubbles-page .bb-close.lbf-rv-visible .bb-close-p { animation: none; }
}

/* ── ITEM 13: BETTER SECTION HEADING RHYTHM ────────────────────────
   The Story heading's accent word gets a subtle gold underline;
   the Enter heading's accent stays clean blue. Different rhythm. */
body.lbf-bubbles-page .bb-story-h .bb-h-accent {
	position: relative;
	display: inline-block;
}
body.lbf-bubbles-page .bb-story-h .bb-h-accent::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.05em;
	height: 6px;
	background: linear-gradient(90deg, transparent 0%, rgba(243, 195, 3, 0.45) 50%, transparent 100%);
	border-radius: 3px;
	z-index: -1;
}

/* ── ITEM 14: HOVER GLOWS — buttons, cards, faq, chips ─────────────
   Soft consistent blue/gold glow on hover throughout the page. */
body.lbf-bubbles-page .bb-faq-item:hover {
	box-shadow: 0 4px 16px rgba(0, 55, 167, 0.08);
}
body.lbf-bubbles-page .bb-faq-item[open]:hover {
	box-shadow: 0 6px 24px rgba(0, 55, 167, 0.12), 0 0 0 1px rgba(243, 195, 3, 0.18);
}
body.lbf-bubbles-page .bb-chip {
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
body.lbf-bubbles-page .bb-chip:hover {
	border-color: var(--bb-blue-glow);
	color: var(--bb-blue);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(77, 127, 255, 0.18), 0 0 0 3px rgba(77, 127, 255, 0.06);
	background: #fff;
}

/* Subtle hover state on the hero CTA */
body.lbf-bubbles-page .bb-btn--primary {
	position: relative;
	overflow: hidden;
}
body.lbf-bubbles-page .bb-btn--primary::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.42) 50%, transparent 60%);
	transform: translateX(-100%);
	transition: transform 0.6s ease;
	pointer-events: none;
}
body.lbf-bubbles-page .bb-btn--primary:hover::after {
	transform: translateX(100%);
}

/* ═════════════════════════════════════════════════════════════════
   v29.5.3 — MORE BUBBLE + BLUE POLISH
   Items 2–8 from the polish plan.
   ───────────────────────────────────────────────────────────────── */

/* ── ITEMS 2 + 8: CANVAS-WIDE BUBBLE LAYER + DEEPER BACKGROUND ─────
   Sits behind the shell so bubbles are visible between sections
   and along the canvas margins. Two scales: small/medium foreground
   bubbles drifting at moderate pace, and large slow "deep" bubbles
   drifting at ~60s pace for atmospheric depth. */
body.lbf-bubbles-page .bb-canvas-bubbles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
body.lbf-bubbles-page .bb-canvas-bubble {
	position: absolute;
	background-image: var(--bb-bubble-c);
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 50%;
	opacity: 0;
	animation-name: bb-canvas-drift;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	will-change: transform, opacity;
}
/* 7 canvas bubbles distributed across the page at varying sizes/speeds */
body.lbf-bubbles-page .bb-canvas-bubble--1 { left: 2%;  top: 8%;  width: 32px; height: 32px; animation-duration: 26s; animation-delay: 0s; }
body.lbf-bubbles-page .bb-canvas-bubble--2 { right: 3%; top: 22%; width: 24px; height: 24px; animation-duration: 32s; animation-delay: -5s; }
body.lbf-bubbles-page .bb-canvas-bubble--3 { left: 4%;  top: 45%; width: 38px; height: 38px; animation-duration: 38s; animation-delay: -12s; }
body.lbf-bubbles-page .bb-canvas-bubble--4 { right: 2%; top: 55%; width: 28px; height: 28px; animation-duration: 28s; animation-delay: -8s; }
body.lbf-bubbles-page .bb-canvas-bubble--5 { left: 3%;  top: 72%; width: 22px; height: 22px; animation-duration: 24s; animation-delay: -3s; }
body.lbf-bubbles-page .bb-canvas-bubble--6 { right: 4%; top: 82%; width: 34px; height: 34px; animation-duration: 36s; animation-delay: -18s; }
body.lbf-bubbles-page .bb-canvas-bubble--7 { left: 6%;  top: 92%; width: 26px; height: 26px; animation-duration: 30s; animation-delay: -22s; }
@keyframes bb-canvas-drift {
	0%   { transform: translate3d(0, 20px, 0) scale(0.85); opacity: 0; }
	10%  { opacity: 0.6; }
	30%  { transform: translate3d(15px, -30px, 0) scale(1); opacity: 0.7; }
	60%  { transform: translate3d(-12px, -80px, 0) scale(0.95); opacity: 0.55; }
	85%  { opacity: 0.45; }
	100% { transform: translate3d(20px, -160px, 0) scale(0.7); opacity: 0; }
}

/* Deeper, larger, slower bubbles for atmospheric depth (item 2) */
body.lbf-bubbles-page .bb-canvas-deep {
	position: absolute;
	background-image: var(--bb-bubble-c);
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 50%;
	opacity: 0;
	filter: blur(2px);
	animation-name: bb-canvas-deep-drift;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform, opacity;
}
body.lbf-bubbles-page .bb-canvas-deep--1 { left:  8%; top: 28%; width: 80px; height: 80px; animation-duration: 58s; animation-delay: 0s; }
body.lbf-bubbles-page .bb-canvas-deep--2 { right: 6%; top: 60%; width: 96px; height: 96px; animation-duration: 65s; animation-delay: -20s; }
body.lbf-bubbles-page .bb-canvas-deep--3 { left: 12%; top: 85%; width: 72px; height: 72px; animation-duration: 60s; animation-delay: -38s; }
@keyframes bb-canvas-deep-drift {
	0%   { transform: translate3d(0, 40px, 0) scale(0.9); opacity: 0; }
	15%  { opacity: 0.28; }
	50%  { transform: translate3d(30px, -100px, 0) scale(1); opacity: 0.35; }
	85%  { opacity: 0.22; }
	100% { transform: translate3d(-20px, -260px, 0) scale(0.85); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-canvas-bubble,
	body.lbf-bubbles-page .bb-canvas-deep { animation: none; opacity: 0.3; }
}
/* The shell sits above the canvas bubbles */
body.lbf-bubbles-page .bb-shell { z-index: 2; }

/* ── ITEM 3: BLUE LIGHT "FIREFLIES" IN DARK SECTIONS ────────────────
   Small bright blue/white points of light that drift slowly through
   the hero, Grand Reviewing, and Stage blocks. Different vocabulary
   from bubbles — these are points of light, not transparent spheres. */
body.lbf-bubbles-page .bb-firefly {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(207, 226, 255, 1) 0%, rgba(77, 127, 255, 0.6) 50%, transparent 100%);
	box-shadow: 0 0 10px rgba(207, 226, 255, 0.85), 0 0 20px rgba(77, 127, 255, 0.5);
	opacity: 0;
	animation-name: bb-firefly-drift;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	will-change: transform, opacity;
	pointer-events: none;
}
/* Hero fireflies (1-5) */
body.lbf-bubbles-page .bb-firefly--1  { left: 12%; top: 30%; animation-duration: 9s;  animation-delay: 0s; }
body.lbf-bubbles-page .bb-firefly--2  { left: 78%; top: 40%; animation-duration: 11s; animation-delay: -3s; }
body.lbf-bubbles-page .bb-firefly--3  { left: 25%; top: 65%; animation-duration: 12s; animation-delay: -7s; }
body.lbf-bubbles-page .bb-firefly--4  { left: 88%; top: 18%; animation-duration: 10s; animation-delay: -5s; width: 3px; height: 3px; }
body.lbf-bubbles-page .bb-firefly--5  { left: 50%; top: 75%; animation-duration: 13s; animation-delay: -9s; }
/* Grand Reviewing fireflies (6-9) */
body.lbf-bubbles-page .bb-firefly--6  { left: 15%; top: 25%; animation-duration: 10s; animation-delay: 0s; }
body.lbf-bubbles-page .bb-firefly--7  { left: 82%; top: 55%; animation-duration: 12s; animation-delay: -4s; width: 5px; height: 5px; }
body.lbf-bubbles-page .bb-firefly--8  { left: 40%; top: 75%; animation-duration: 9s;  animation-delay: -6s; }
body.lbf-bubbles-page .bb-firefly--9  { left: 70%; top: 20%; animation-duration: 11s; animation-delay: -8s; width: 3px; height: 3px; }
/* Stage fireflies (10-15) — more of them since this is the climax */
body.lbf-bubbles-page .bb-firefly--10 { left: 18%; top: 25%; animation-duration: 11s; animation-delay: 0s; }
body.lbf-bubbles-page .bb-firefly--11 { left: 78%; top: 35%; animation-duration: 13s; animation-delay: -2s; }
body.lbf-bubbles-page .bb-firefly--12 { left: 30%; top: 65%; animation-duration: 10s; animation-delay: -5s; width: 5px; height: 5px; }
body.lbf-bubbles-page .bb-firefly--13 { left: 65%; top: 80%; animation-duration: 12s; animation-delay: -7s; }
body.lbf-bubbles-page .bb-firefly--14 { left: 8%;  top: 55%; animation-duration: 9s;  animation-delay: -3s; width: 3px; height: 3px; }
body.lbf-bubbles-page .bb-firefly--15 { left: 92%; top: 70%; animation-duration: 14s; animation-delay: -10s; }
@keyframes bb-firefly-drift {
	0%   { transform: translate3d(0, 0, 0); opacity: 0; }
	10%  { opacity: 0.9; }
	25%  { transform: translate3d(40px, -30px, 0); opacity: 1; }
	50%  { transform: translate3d(-20px, -60px, 0); opacity: 0.7; }
	75%  { transform: translate3d(35px, -90px, 0); opacity: 1; }
	90%  { opacity: 0.4; }
	100% { transform: translate3d(-15px, -120px, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-firefly { animation: none; opacity: 0.7; }
}

/* ── ITEM 4: FLOWING BUBBLE THROUGH 3 MOMENTS TIMELINE ──────────────
   A single bubble that travels horizontally across the moments row,
   visiting each card. Suggests "the parade flows through these moments." */
body.lbf-bubbles-page .bb-moments {
	position: relative;
}
body.lbf-bubbles-page .bb-moments-flow {
	position: absolute;
	top: -8px;
	left: 0;
	width: 22px;
	height: 22px;
	background-image: var(--bb-bubble-c);
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 50%;
	opacity: 0;
	animation: bb-moments-flow-move 12s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
	filter: drop-shadow(0 0 8px rgba(77, 127, 255, 0.5));
}
@keyframes bb-moments-flow-move {
	0%   { left: 5%;  transform: translateY(0); opacity: 0; }
	8%   { opacity: 0.85; }
	30%  { left: 33%; transform: translateY(-4px); opacity: 0.85; }
	40%  { left: 33%; transform: translateY(0);    opacity: 0.85; }
	60%  { left: 66%; transform: translateY(-4px); opacity: 0.85; }
	70%  { left: 66%; transform: translateY(0);    opacity: 0.85; }
	92%  { left: 95%; transform: translateY(-4px); opacity: 0.85; }
	100% { left: 95%; transform: translateY(0);    opacity: 0; }
}
@media (max-width: 767px) {
	/* On stacked mobile, flow vertically not horizontally */
	body.lbf-bubbles-page .bb-moments-flow {
		top: 0;
		left: -8px !important;
		animation-name: bb-moments-flow-move-mobile;
	}
	@keyframes bb-moments-flow-move-mobile {
		0%   { top: 2%;  opacity: 0; }
		8%   { opacity: 0.85; }
		50%  { top: 50%; opacity: 0.85; }
		92%  { top: 95%; opacity: 0.85; }
		100% { top: 98%; opacity: 0; }
	}
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-moments-flow { animation: none; opacity: 0; }
}

/* ── ITEM 5: ROTATING RING LIGHTS AROUND STAGE HALO ─────────────────
   Concentric soft rings behind the stage headline that rotate at
   different speeds. Real stage-lighting feel. */
body.lbf-bubbles-page .bb-stage-rings {
	position: absolute;
	top: 35%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 500px;
	height: 500px;
	pointer-events: none;
	z-index: 1;
}
body.lbf-bubbles-page .bb-stage-ring {
	position: absolute;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	border: 1px solid;
	opacity: 0.3;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
body.lbf-bubbles-page .bb-stage-ring--1 {
	width: 240px;
	height: 240px;
	margin: -120px 0 0 -120px;
	border-color: rgba(243, 195, 3, 0.45);
	border-style: dashed;
	animation-name: bb-ring-spin;
	animation-duration: 24s;
}
body.lbf-bubbles-page .bb-stage-ring--2 {
	width: 360px;
	height: 360px;
	margin: -180px 0 0 -180px;
	border-color: rgba(207, 226, 255, 0.32);
	border-style: dotted;
	animation-name: bb-ring-spin-rev;
	animation-duration: 38s;
}
body.lbf-bubbles-page .bb-stage-ring--3 {
	width: 480px;
	height: 480px;
	margin: -240px 0 0 -240px;
	border-color: rgba(243, 195, 3, 0.22);
	border-style: dashed;
	animation-name: bb-ring-spin;
	animation-duration: 52s;
}
@keyframes bb-ring-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@keyframes bb-ring-spin-rev {
	from { transform: rotate(360deg); }
	to   { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-stage-ring { animation: none; }
}

/* ── ITEM 6: BUBBLE RELEASE FROM CTA ON HOVER ───────────────────────
   When the hero CTA is hovered, three bubbles rise from above it
   and fade out. */
body.lbf-bubbles-page .bb-hero-cta-wrap {
	position: relative;
	display: inline-block;
	margin-top: 1.4rem;
}
/* Override the previous .bb-hero-inner > .bb-btn rule since the CTA
   is now wrapped — the wrap takes the spacing instead */
body.lbf-bubbles-page .bb-hero-inner > .bb-hero-cta-wrap > .bb-btn {
	margin-top: 0;
}
body.lbf-bubbles-page .bb-cta-bubble {
	position: absolute;
	bottom: 100%;
	width: 14px;
	height: 14px;
	background-image: var(--bb-bubble-c);
	background-size: contain;
	background-repeat: no-repeat;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	filter: drop-shadow(0 0 6px rgba(243, 195, 3, 0.4));
}
body.lbf-bubbles-page .bb-cta-bubble--1 { left: 20%; }
body.lbf-bubbles-page .bb-cta-bubble--2 { left: 50%; transform: translateX(-50%); width: 18px; height: 18px; }
body.lbf-bubbles-page .bb-cta-bubble--3 { right: 20%; }
body.lbf-bubbles-page .bb-hero-cta-wrap:hover .bb-cta-bubble--1 { animation: bb-cta-pop 1.4s ease-out forwards; }
body.lbf-bubbles-page .bb-hero-cta-wrap:hover .bb-cta-bubble--2 { animation: bb-cta-pop 1.6s 0.15s ease-out forwards; }
body.lbf-bubbles-page .bb-hero-cta-wrap:hover .bb-cta-bubble--3 { animation: bb-cta-pop 1.5s 0.3s ease-out forwards; }
@keyframes bb-cta-pop {
	0%   { transform: translateY(0) scale(0.4); opacity: 0; }
	20%  { opacity: 0.9; }
	100% { transform: translateY(-60px) scale(1.1); opacity: 0; }
}
@media (max-width: 600px) {
	/* Override mobile width:100% behavior on the now-wrapped button */
	body.lbf-bubbles-page .bb-hero-cta-wrap { display: block; width: 100%; }
	body.lbf-bubbles-page .bb-hero-cta-wrap > .bb-btn { width: 100%; }
}

/* ── ITEM 7: 3 MOMENTS CARDS FLOATING GENTLY ────────────────────────
   Subtle continuous up-and-down motion, each card on a different
   cycle so they don't move in unison. */
body.lbf-bubbles-page .bb-moment {
	animation: bb-moment-float 6s ease-in-out infinite;
}
body.lbf-bubbles-page .bb-moment:nth-child(2) {
	animation-duration: 7s;
	animation-delay: -2s;
}
body.lbf-bubbles-page .bb-moment:nth-child(3) {
	animation-duration: 6.5s;
	animation-delay: -4s;
}
body.lbf-bubbles-page .bb-moment:nth-child(4) {
	animation-duration: 7.5s;
	animation-delay: -1s;
}
@keyframes bb-moment-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}
/* Hover still wins — override the animation on hover */
body.lbf-bubbles-page .bb-moment:hover {
	animation: none;
	transform: translateY(-3px);
	border-color: var(--bb-blue);
	box-shadow: var(--bb-shadow-card);
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-moment { animation: none; }
}

/* ═════════════════════════════════════════════════════════════════
   v29.5.4 — STORY REBUILD + MORE STARS
   Three uploaded SVG icons (sunset / parade float / stage) carry the
   story-strip design. Look-for restyled (purple gone). Light-section
   motes + dark-section twinkle stars added.
   ───────────────────────────────────────────────────────────────── */

/* ── STORY SCENES — Direction B: vertical stack of wide cards,
   icon as large background watermark on the right, content on left ── */
body.lbf-bubbles-page .bb-scenes {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin: 2.5rem 0 0;
}

body.lbf-bubbles-page .bb-scene {
	position: relative;
	padding: 1.5rem 1.5rem 1.4rem;
	border-radius: 20px;
	border: 1px solid var(--bb-border-soft);
	background: linear-gradient(180deg, var(--bb-bg-2) 0%, var(--bb-bg-3) 100%);
	overflow: hidden;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	animation: bb-scene-float 7s ease-in-out infinite;
	min-height: 150px;
}
@media (min-width: 600px) {
	body.lbf-bubbles-page .bb-scene {
		padding: 1.85rem 2rem 1.7rem;
		min-height: 180px;
	}
}
body.lbf-bubbles-page .bb-scene:hover {
	transform: translateY(-3px);
	border-color: var(--bb-blue);
	box-shadow: 0 18px 36px rgba(0, 55, 167, 0.10);
}

/* Per-scene tint backgrounds — each scene has its own atmospheric color */
body.lbf-bubbles-page .bb-scene--sunset {
	background:
		radial-gradient(circle at 75% 20%, rgba(243, 195, 3, 0.10), transparent 55%),
		radial-gradient(circle at 20% 90%, rgba(255, 127, 63, 0.06), transparent 50%),
		linear-gradient(180deg, #fefcf6 0%, #fbf5e8 100%);
	border-color: rgba(243, 195, 3, 0.24);
}
body.lbf-bubbles-page .bb-scene--parade {
	background:
		radial-gradient(circle at 70% 25%, rgba(77, 127, 255, 0.14), transparent 55%),
		radial-gradient(circle at 25% 85%, rgba(0, 55, 167, 0.08), transparent 50%),
		linear-gradient(180deg, #f7faff 0%, #eef3ff 100%);
	border-color: rgba(0, 55, 167, 0.30);
}
body.lbf-bubbles-page .bb-scene--stage {
	background:
		radial-gradient(circle at 75% 25%, rgba(74, 58, 140, 0.12), transparent 55%),
		radial-gradient(circle at 25% 85%, rgba(243, 195, 3, 0.06), transparent 50%),
		linear-gradient(180deg, #f8f6ff 0%, #efebff 100%);
	border-color: rgba(74, 58, 140, 0.28);
}

/* The Step-off scene (middle) is visually larger and more saturated.
   In Direction B (vertical stack) it doesn't scale up — instead it
   gets a stronger inner glow and a bigger shadow so it reads as the
   focal moment. */
body.lbf-bubbles-page .bb-scene--accent {
	padding-top: 2.85rem;
	padding-right: 1.85rem;
	padding-bottom: 1.7rem;
	padding-left: 1.85rem;
	box-shadow:
		0 18px 40px rgba(0, 55, 167, 0.14),
		0 0 0 4px rgba(77, 127, 255, 0.10),
		inset 0 0 0 1px rgba(0, 55, 167, 0.14);
	z-index: 2;
}
@media (min-width: 600px) {
	body.lbf-bubbles-page .bb-scene--accent {
		padding-top: 3.1rem;
		padding-right: 2.25rem;
		padding-bottom: 1.9rem;
		padding-left: 2.25rem;
		min-height: 210px;
	}
}

/* Step-off tag at the top corner of the accent scene */
body.lbf-bubbles-page .bb-scene-tag {
	position: absolute;
	top: 1rem;
	left: 1.4rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.28rem 0.7rem;
	background: var(--bb-blue);
	color: #fff;
	border-radius: 99px;
	font-family: 'Outfit', sans-serif;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	box-shadow: 0 4px 12px rgba(0, 55, 167, 0.32), 0 0 12px rgba(77, 127, 255, 0.35);
}
body.lbf-bubbles-page .bb-scene-tag-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bb-blue-glow);
	box-shadow: 0 0 6px var(--bb-blue-glow);
	animation: bb-tag-live 1.6s ease-in-out infinite;
}
@keyframes bb-tag-live {
	0%, 100% { box-shadow: 0 0 6px var(--bb-blue-glow); }
	50% { box-shadow: 0 0 12px var(--bb-blue-soft); }
}

/* Icon as large background watermark on the right of each scene card.
   Big, low-opacity, with a soft glow halo. Color per-scene. */
body.lbf-bubbles-page .bb-scene-iconwrap {
	position: absolute;
	right: -10px;
	top: 50%;
	transform: translateY(-50%);
	width: 150px;
	height: 150px;
	pointer-events: none;
	z-index: 1;
}
@media (min-width: 600px) {
	body.lbf-bubbles-page .bb-scene-iconwrap {
		right: 1rem;
		width: 180px;
		height: 180px;
	}
}
@media (min-width: 900px) {
	body.lbf-bubbles-page .bb-scene-iconwrap {
		right: 1.5rem;
		width: 210px;
		height: 210px;
	}
}
body.lbf-bubbles-page .bb-scene--accent .bb-scene-iconwrap {
	width: 170px;
	height: 170px;
}
@media (min-width: 600px) {
	body.lbf-bubbles-page .bb-scene--accent .bb-scene-iconwrap {
		width: 200px;
		height: 200px;
	}
}
@media (min-width: 900px) {
	body.lbf-bubbles-page .bb-scene--accent .bb-scene-iconwrap {
		width: 230px;
		height: 230px;
	}
}
body.lbf-bubbles-page .bb-scene-icon {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 2;
	opacity: 0.22;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
body.lbf-bubbles-page .bb-scene:hover .bb-scene-icon {
	opacity: 0.32;
	transform: scale(1.05);
}
body.lbf-bubbles-page .bb-scene--accent .bb-scene-icon {
	opacity: 0.30;
}
body.lbf-bubbles-page .bb-scene--accent:hover .bb-scene-icon {
	opacity: 0.42;
}
/* Per-scene icon colors */
body.lbf-bubbles-page .bb-scene--sunset .bb-scene-icon { color: var(--bb-gold-dark); }
body.lbf-bubbles-page .bb-scene--parade .bb-scene-icon { color: var(--bb-blue); }
body.lbf-bubbles-page .bb-scene--stage  .bb-scene-icon { color: var(--bb-blueberry); }

/* Soft glow halo behind each icon — color matches the scene */
body.lbf-bubbles-page .bb-scene-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	height: 90%;
	border-radius: 50%;
	filter: blur(30px);
	opacity: 0.35;
	z-index: 1;
	animation: bb-scene-glow-pulse 4s ease-in-out infinite;
}
body.lbf-bubbles-page .bb-scene--sunset .bb-scene-glow { background: radial-gradient(circle, var(--bb-gold) 0%, transparent 70%); }
body.lbf-bubbles-page .bb-scene--parade .bb-scene-glow { background: radial-gradient(circle, var(--bb-blue-glow) 0%, transparent 70%); }
body.lbf-bubbles-page .bb-scene--stage  .bb-scene-glow { background: radial-gradient(circle, var(--bb-blueberry) 0%, transparent 70%); }
body.lbf-bubbles-page .bb-scene-glow--strong {
	opacity: 0.75;
	animation-duration: 3s;
}
@keyframes bb-scene-glow-pulse {
	0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.45; }
	50% { transform: translate(-50%, -50%) scale(1.18); opacity: 0.7; }
}

/* Scene time + title + paragraph */
body.lbf-bubbles-page .bb-scene-time {
	position: relative;
	z-index: 3;
	font-family: 'Outfit', sans-serif;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bb-text-3);
	max-width: 60%;
}
@media (min-width: 600px) {
	body.lbf-bubbles-page .bb-scene-time { max-width: 55%; }
}
body.lbf-bubbles-page .bb-scene--accent .bb-scene-time { color: var(--bb-blue); }
body.lbf-bubbles-page .bb-scene-h {
	position: relative;
	z-index: 3;
	margin-top: 0.35rem;
	font-family: 'Outfit', sans-serif;
	font-size: 1.5rem;
	font-weight: 900;
	color: var(--bb-text);
	letter-spacing: -0.025em;
	line-height: 1.1;
	max-width: 60%;
}
@media (min-width: 600px) {
	body.lbf-bubbles-page .bb-scene-h {
		font-size: 1.8rem;
		max-width: 55%;
	}
}
body.lbf-bubbles-page .bb-scene--accent .bb-scene-h {
	font-size: 1.75rem;
}
@media (min-width: 600px) {
	body.lbf-bubbles-page .bb-scene--accent .bb-scene-h { font-size: 2.1rem; }
}
body.lbf-bubbles-page .bb-scene-p {
	position: relative;
	z-index: 3;
	margin: 0.65rem 0 0;
	max-width: 60%;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--bb-text-2);
}
@media (min-width: 600px) {
	body.lbf-bubbles-page .bb-scene-p {
		font-size: 0.95rem;
		max-width: 55%;
	}
}

/* Connectors not used in Direction B — hide them entirely. The
   scene cards stack vertically as a list, no thread needed. */
body.lbf-bubbles-page .bb-scene-connector { display: none; }
@keyframes bb-connector-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* Subtle continuous float — staggered cycles per scene */
@keyframes bb-scene-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}
body.lbf-bubbles-page .bb-scene--parade { animation-duration: 8s; animation-delay: -2s; }
body.lbf-bubbles-page .bb-scene--stage  { animation-duration: 7.5s; animation-delay: -4s; }
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-scene,
	body.lbf-bubbles-page .bb-scene--accent,
	body.lbf-bubbles-page .bb-scene-glow,
	body.lbf-bubbles-page .bb-scene-tag-dot,
	body.lbf-bubbles-page .bb-scene-connector::before { animation: none; }
}

/* ── WATCHING FOR TONIGHT — Look-for redesign (no purple!) ──────── */
body.lbf-bubbles-page .bb-watching {
	margin: 3rem 0 0;
	text-align: center;
}
body.lbf-bubbles-page .bb-watching-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	margin-bottom: 1rem;
}
body.lbf-bubbles-page .bb-watching-rule {
	display: block;
	width: 50px;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(0, 55, 167, 0.35) 50%, transparent 100%);
}
body.lbf-bubbles-page .bb-watching-lbl {
	display: inline-block;
	font-family: 'Outfit', sans-serif;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bb-blue);
}
body.lbf-bubbles-page .bb-watching-viewport {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
body.lbf-bubbles-page .bb-watching-track {
	display: flex;
	width: max-content;
	animation: bb-ticker 30s linear infinite;
}
body.lbf-bubbles-page .bb-watching-track:hover {
	animation-play-state: paused;
}
body.lbf-bubbles-page .bb-watching-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.55rem;
	padding-right: 0.55rem;
	flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-watching-track { animation: none; }
}

/* ── LIGHT-SECTION MOTES (story card pale-blue drifting points) ─── */
body.lbf-bubbles-page .bb-story-stars {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}
body.lbf-bubbles-page .bb-story {
	position: relative;
}
body.lbf-bubbles-page .bb-story-inner {
	position: relative;
	z-index: 1;
}
body.lbf-bubbles-page .bb-mote {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(77, 127, 255, 0.55) 0%, rgba(207, 226, 255, 0.18) 60%, transparent 100%);
	box-shadow: 0 0 6px rgba(77, 127, 255, 0.25);
	opacity: 0;
	animation-name: bb-mote-drift;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
body.lbf-bubbles-page .bb-mote--1 { top: 18%; left: 12%; animation-duration: 14s; animation-delay: 0s;  width: 5px; height: 5px; }
body.lbf-bubbles-page .bb-mote--2 { top: 38%; right: 8%;  animation-duration: 11s; animation-delay: -3s; }
body.lbf-bubbles-page .bb-mote--3 { top: 62%; left: 22%; animation-duration: 16s; animation-delay: -7s; width: 3px; height: 3px; }
body.lbf-bubbles-page .bb-mote--4 { top: 28%; left: 48%; animation-duration: 13s; animation-delay: -5s; }
body.lbf-bubbles-page .bb-mote--5 { top: 78%; right: 18%; animation-duration: 12s; animation-delay: -9s; width: 5px; height: 5px; }
body.lbf-bubbles-page .bb-mote--6 { top: 86%; left: 38%; animation-duration: 15s; animation-delay: -11s; width: 3px; height: 3px; }
@keyframes bb-mote-drift {
	0%   { transform: translate3d(0, 0, 0); opacity: 0; }
	12%  { opacity: 0.7; }
	30%  { transform: translate3d(20px, -16px, 0); opacity: 0.85; }
	55%  { transform: translate3d(-12px, -32px, 0); opacity: 0.55; }
	80%  { transform: translate3d(15px, -48px, 0); opacity: 0.7; }
	100% { transform: translate3d(-8px, -64px, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-mote { animation: none; opacity: 0.4; }
}

/* ── DARK-SECTION TWINKLE STARS — sparkle bursts (different from fireflies) ─ */
body.lbf-bubbles-page .bb-twinkle {
	position: absolute;
	width: 12px;
	height: 12px;
	pointer-events: none;
	opacity: 0;
	animation-name: bb-twinkle-flash;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
body.lbf-bubbles-page .bb-twinkle::before,
body.lbf-bubbles-page .bb-twinkle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 1.5px;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
	transform: translate(-50%, -50%);
	border-radius: 1px;
	box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}
body.lbf-bubbles-page .bb-twinkle::after {
	transform: translate(-50%, -50%) rotate(90deg);
}
/* Hero twinkles 1-4 */
body.lbf-bubbles-page .bb-twinkle--1  { top: 22%; left: 35%; animation-duration: 5s; animation-delay: 0s; }
body.lbf-bubbles-page .bb-twinkle--2  { top: 48%; right: 28%; animation-duration: 6s; animation-delay: -2s; }
body.lbf-bubbles-page .bb-twinkle--3  { top: 70%; left: 60%; animation-duration: 5.5s; animation-delay: -4s; }
body.lbf-bubbles-page .bb-twinkle--4  { top: 14%; right: 12%; animation-duration: 6.5s; animation-delay: -1s; width: 10px; height: 10px; }
/* Grand Reviewing twinkles 5-8 */
body.lbf-bubbles-page .bb-twinkle--5  { top: 18%; left: 22%; animation-duration: 5s; animation-delay: 0s; }
body.lbf-bubbles-page .bb-twinkle--6  { top: 45%; right: 18%; animation-duration: 6s; animation-delay: -2.5s; }
body.lbf-bubbles-page .bb-twinkle--7  { top: 72%; left: 55%; animation-duration: 5.5s; animation-delay: -4s; width: 10px; height: 10px; }
body.lbf-bubbles-page .bb-twinkle--8  { top: 32%; right: 42%; animation-duration: 7s; animation-delay: -1.5s; }
/* Stage twinkles 9-12 (more for the climax) */
body.lbf-bubbles-page .bb-twinkle--9  { top: 15%; left: 28%; animation-duration: 5s; animation-delay: 0s; }
body.lbf-bubbles-page .bb-twinkle--10 { top: 32%; right: 22%; animation-duration: 6s; animation-delay: -1s; }
body.lbf-bubbles-page .bb-twinkle--11 { top: 60%; left: 50%; animation-duration: 5.5s; animation-delay: -3s; width: 14px; height: 14px; }
body.lbf-bubbles-page .bb-twinkle--12 { top: 80%; right: 35%; animation-duration: 6.5s; animation-delay: -2s; }
@keyframes bb-twinkle-flash {
	0%, 70%, 100% { opacity: 0; transform: scale(0.4); }
	75%  { opacity: 1; transform: scale(1); }
	82%  { opacity: 0.6; transform: scale(1.2); }
	90%  { opacity: 0; transform: scale(0.6); }
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-twinkle { animation: none; opacity: 0.5; }
}

/* ── ADDITIONAL FIREFLIES 16-24 (3 per dark section) ────────────── */
body.lbf-bubbles-page .bb-firefly--16 { left: 35%; top: 12%; animation-duration: 11s; animation-delay: -2s; }
body.lbf-bubbles-page .bb-firefly--17 { left: 62%; top: 60%; animation-duration: 13s; animation-delay: -8s; width: 3px; height: 3px; }
body.lbf-bubbles-page .bb-firefly--18 { left: 5%;  top: 50%; animation-duration: 12s; animation-delay: -6s; }
body.lbf-bubbles-page .bb-firefly--19 { left: 50%; top: 40%; animation-duration: 10s; animation-delay: -1s; width: 3px; height: 3px; }
body.lbf-bubbles-page .bb-firefly--20 { left: 28%; top: 60%; animation-duration: 14s; animation-delay: -5s; }
body.lbf-bubbles-page .bb-firefly--21 { left: 88%; top: 80%; animation-duration: 11s; animation-delay: -9s; width: 5px; height: 5px; }
body.lbf-bubbles-page .bb-firefly--22 { left: 45%; top: 18%; animation-duration: 10s; animation-delay: -3s; width: 5px; height: 5px; }
body.lbf-bubbles-page .bb-firefly--23 { left: 22%; top: 42%; animation-duration: 13s; animation-delay: -6s; }
body.lbf-bubbles-page .bb-firefly--24 { left: 85%; top: 55%; animation-duration: 12s; animation-delay: -4s; width: 3px; height: 3px; }

/* ═════════════════════════════════════════════════════════════════
   v29.5.4 — FIREFLY + MOTE EXPANSION
   - 6 more fireflies (24 → 30) for the 2x density bump
   - Motes added to Enter, FAQ, Closing sections
   ───────────────────────────────────────────────────────────────── */

/* Additional fireflies 25-30 (hero 25,26; grand 27; stage 28,29,30) */
body.lbf-bubbles-page .bb-firefly--25 { left: 70%; top: 18%; animation-duration: 12s; animation-delay: -1s; width: 5px; height: 5px; }
body.lbf-bubbles-page .bb-firefly--26 { left: 38%; top: 72%; animation-duration: 11s; animation-delay: -7s; width: 3px; height: 3px; }
body.lbf-bubbles-page .bb-firefly--27 { left: 35%; top: 30%; animation-duration: 14s; animation-delay: -2s; }
body.lbf-bubbles-page .bb-firefly--28 { left: 14%; top: 30%; animation-duration: 11s; animation-delay: -6s; width: 5px; height: 5px; }
body.lbf-bubbles-page .bb-firefly--29 { left: 58%; top: 52%; animation-duration: 13s; animation-delay: -4s; }
body.lbf-bubbles-page .bb-firefly--30 { left: 42%; top: 88%; animation-duration: 10s; animation-delay: -9s; width: 3px; height: 3px; }

/* Section motes — soft pale-blue drift points for the LIGHT sections.
   Differs from .bb-firefly in that motes work on light backgrounds —
   softer color, lower contrast, gentler glow. Used in Enter, FAQ, Closing. */
body.lbf-bubbles-page .bb-section-motes {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
/* The bb-mote rule (positioning per --N) already exists from earlier work
   for Story motes 1-6. We just add positioning + sizing for 7-20. */
body.lbf-bubbles-page .bb-mote--7  { left: 8%;  top: 12%; animation-duration: 16s; animation-delay: 0s; }
body.lbf-bubbles-page .bb-mote--8  { left: 70%; top: 22%; animation-duration: 19s; animation-delay: -4s; width: 6px; height: 6px; }
body.lbf-bubbles-page .bb-mote--9  { left: 22%; top: 55%; animation-duration: 14s; animation-delay: -8s; }
body.lbf-bubbles-page .bb-mote--10 { left: 88%; top: 65%; animation-duration: 18s; animation-delay: -2s; width: 5px; height: 5px; }
body.lbf-bubbles-page .bb-mote--11 { left: 45%; top: 82%; animation-duration: 17s; animation-delay: -11s; }
body.lbf-bubbles-page .bb-mote--12 { left: 12%; top: 88%; animation-duration: 15s; animation-delay: -6s; width: 4px; height: 4px; }
body.lbf-bubbles-page .bb-mote--13 { left: 18%; top: 20%; animation-duration: 16s; animation-delay: -3s; }
body.lbf-bubbles-page .bb-mote--14 { left: 75%; top: 30%; animation-duration: 18s; animation-delay: -7s; width: 5px; height: 5px; }
body.lbf-bubbles-page .bb-mote--15 { left: 35%; top: 60%; animation-duration: 15s; animation-delay: -10s; }
body.lbf-bubbles-page .bb-mote--16 { left: 82%; top: 75%; animation-duration: 17s; animation-delay: -5s; }
body.lbf-bubbles-page .bb-mote--17 { left: 12%; top: 85%; animation-duration: 14s; animation-delay: -1s; width: 4px; height: 4px; }
body.lbf-bubbles-page .bb-mote--18 { left: 25%; top: 35%; animation-duration: 16s; animation-delay: 0s; }
body.lbf-bubbles-page .bb-mote--19 { left: 65%; top: 50%; animation-duration: 18s; animation-delay: -6s; width: 5px; height: 5px; }
body.lbf-bubbles-page .bb-mote--20 { left: 80%; top: 70%; animation-duration: 14s; animation-delay: -10s; }

/* The .bb-close section needs position:relative so the motes layer
   inside it positions correctly */
body.lbf-bubbles-page .bb-close { position: relative; }
body.lbf-bubbles-page .bb-close > *:not(.bb-section-motes) { position: relative; z-index: 1; }
body.lbf-bubbles-page .bb-enter,
body.lbf-bubbles-page .bb-faq { position: relative; }
body.lbf-bubbles-page .bb-enter > *:not(.bb-section-motes),
body.lbf-bubbles-page .bb-faq > *:not(.bb-section-motes) { position: relative; z-index: 1; }


/* ═════════════════════════════════════════════════════════════════
   v29.5.5 — CONSTELLATION CHART  (§2 Story replacement, the WOW moment)
   Dark night-sky panel rendered as a celestial chart of the parade.
   Three star nodes connected by glowing dashed lines, with chart-
   vocabulary decorations (corner ticks, compass rose, edge coordinates,
   museum-print credit). Choreographed reveal animation triggered by
   the .lbf-rv-visible class added by scroll-reveal.js.
   ───────────────────────────────────────────────────────────────── */

/* ── Section container — dark night sky panel ───────────────────── */
body.lbf-bubbles-page .bb-chart {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	min-height: 580px;
	padding: 2.5rem 1.5rem 3rem;
	background:
		radial-gradient(ellipse at 20% 20%, rgba(74, 58, 140, 0.32), transparent 50%),
		radial-gradient(ellipse at 80% 30%, rgba(0, 55, 167, 0.32), transparent 50%),
		radial-gradient(ellipse at 50% 90%, rgba(77, 127, 255, 0.18), transparent 60%),
		linear-gradient(160deg, #000515 0%, #00154a 45%, #0a0a35 100%);
	box-shadow: var(--bb-shadow-hero);
	color: #fff;
	isolation: isolate;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-chart {
		min-height: 660px;
		padding: 3rem 2.5rem 3.5rem;
	}
}
@media (min-width: 1024px) {
	body.lbf-bubbles-page .bb-chart {
		min-height: 720px;
	}
}

/* ── Background star field ──────────────────────────────────────── */
body.lbf-bubbles-page .bb-chart-sky {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
body.lbf-bubbles-page .bb-chart-stars {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 100%),
		radial-gradient(1px 1px at 28% 7%, rgba(207, 226, 255, 0.85) 50%, transparent 100%),
		radial-gradient(1.5px 1.5px at 45% 14%, #fff 50%, transparent 100%),
		radial-gradient(1px 1px at 62% 9%, rgba(243, 195, 3, 0.6) 50%, transparent 100%),
		radial-gradient(1px 1px at 78% 22%, rgba(207, 226, 255, 0.85) 50%, transparent 100%),
		radial-gradient(1.5px 1.5px at 92% 12%, #fff 50%, transparent 100%),
		radial-gradient(1px 1px at 8% 42%, rgba(207, 226, 255, 0.7) 50%, transparent 100%),
		radial-gradient(1px 1px at 33% 48%, #fff 50%, transparent 100%),
		radial-gradient(1.5px 1.5px at 67% 38%, rgba(243, 195, 3, 0.5) 50%, transparent 100%),
		radial-gradient(1px 1px at 88% 52%, rgba(207, 226, 255, 0.8) 50%, transparent 100%),
		radial-gradient(1px 1px at 18% 78%, #fff 50%, transparent 100%),
		radial-gradient(1px 1px at 42% 88%, rgba(207, 226, 255, 0.75) 50%, transparent 100%),
		radial-gradient(1px 1px at 58% 72%, #fff 50%, transparent 100%),
		radial-gradient(1.5px 1.5px at 75% 84%, rgba(207, 226, 255, 0.85) 50%, transparent 100%),
		radial-gradient(1px 1px at 95% 92%, #fff 50%, transparent 100%);
	opacity: 0.7;
	animation: bb-chart-stars-twinkle 6s ease-in-out infinite;
}
body.lbf-bubbles-page .bb-chart-stars--alt {
	background-image:
		radial-gradient(1px 1px at 22% 28%, rgba(207, 226, 255, 0.6) 50%, transparent 100%),
		radial-gradient(0.5px 0.5px at 38% 38%, #fff 50%, transparent 100%),
		radial-gradient(1px 1px at 55% 22%, rgba(243, 195, 3, 0.4) 50%, transparent 100%),
		radial-gradient(0.5px 0.5px at 72% 48%, rgba(207, 226, 255, 0.6) 50%, transparent 100%),
		radial-gradient(1px 1px at 84% 32%, #fff 50%, transparent 100%),
		radial-gradient(0.5px 0.5px at 14% 62%, rgba(207, 226, 255, 0.5) 50%, transparent 100%),
		radial-gradient(1px 1px at 48% 68%, rgba(207, 226, 255, 0.7) 50%, transparent 100%),
		radial-gradient(0.5px 0.5px at 82% 70%, #fff 50%, transparent 100%);
	opacity: 0.5;
	animation: bb-chart-stars-twinkle 9s ease-in-out infinite -3s;
}
@keyframes bb-chart-stars-twinkle {
	0%, 100% { opacity: 0.45; }
	50% { opacity: 0.85; }
}

/* ── Atmospheric haze blobs ─────────────────────────────────────── */
body.lbf-bubbles-page .bb-chart-haze {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
}
body.lbf-bubbles-page .bb-chart-haze--a {
	width: 420px;
	height: 420px;
	top: -150px;
	left: 8%;
	background: rgba(77, 127, 255, 0.20);
	animation: bb-chart-haze-drift-a 18s ease-in-out infinite alternate;
}
body.lbf-bubbles-page .bb-chart-haze--b {
	width: 380px;
	height: 380px;
	bottom: -130px;
	right: 5%;
	background: rgba(74, 58, 140, 0.28);
	animation: bb-chart-haze-drift-b 22s ease-in-out infinite alternate;
}
@keyframes bb-chart-haze-drift-a {
	from { transform: translate(0, 0); }
	to   { transform: translate(40px, 20px); }
}
@keyframes bb-chart-haze-drift-b {
	from { transform: translate(0, 0); }
	to   { transform: translate(-30px, -25px); }
}

/* ── Chart frame: corner ticks ──────────────────────────────────── */
body.lbf-bubbles-page .bb-chart-frame {
	position: absolute;
	inset: 1.25rem;
	pointer-events: none;
	z-index: 2;
}
body.lbf-bubbles-page .bb-chart-tick {
	position: absolute;
	width: 14px;
	height: 14px;
}
body.lbf-bubbles-page .bb-chart-tick::before,
body.lbf-bubbles-page .bb-chart-tick::after {
	content: "";
	position: absolute;
	background: rgba(243, 195, 3, 0.55);
}
body.lbf-bubbles-page .bb-chart-tick::before { width: 14px; height: 1px; }
body.lbf-bubbles-page .bb-chart-tick::after  { width: 1px; height: 14px; }
body.lbf-bubbles-page .bb-chart-tick--tl { top: 0;    left: 0;    }
body.lbf-bubbles-page .bb-chart-tick--tl::before { top: 0; left: 0; }
body.lbf-bubbles-page .bb-chart-tick--tl::after  { top: 0; left: 0; }
body.lbf-bubbles-page .bb-chart-tick--tr { top: 0;    right: 0;   }
body.lbf-bubbles-page .bb-chart-tick--tr::before { top: 0; right: 0; }
body.lbf-bubbles-page .bb-chart-tick--tr::after  { top: 0; right: 0; }
body.lbf-bubbles-page .bb-chart-tick--bl { bottom: 0; left: 0;    }
body.lbf-bubbles-page .bb-chart-tick--bl::before { bottom: 0; left: 0; }
body.lbf-bubbles-page .bb-chart-tick--bl::after  { bottom: 0; left: 0; }
body.lbf-bubbles-page .bb-chart-tick--br { bottom: 0; right: 0;   }
body.lbf-bubbles-page .bb-chart-tick--br::before { bottom: 0; right: 0; }
body.lbf-bubbles-page .bb-chart-tick--br::after  { bottom: 0; right: 0; }

/* ── Edge coordinate labels (chart-vocabulary flourish) ─────────── */
body.lbf-bubbles-page .bb-chart-coord {
	position: absolute;
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
	font-size: 0.55rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: rgba(243, 195, 3, 0.4);
	text-transform: uppercase;
	display: none;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-chart-coord { display: block; }
}
body.lbf-bubbles-page .bb-chart-coord--tl { top: -0.45rem; left: 1.4rem; }
body.lbf-bubbles-page .bb-chart-coord--tr { top: -0.45rem; right: 1.4rem; }
body.lbf-bubbles-page .bb-chart-coord--bl { bottom: -0.45rem; left: 1.4rem; }

/* ── Compass rose mark ──────────────────────────────────────────── */
body.lbf-bubbles-page .bb-chart-compass {
	position: absolute;
	bottom: 0.4rem;
	right: 0.4rem;
	width: 36px;
	height: 36px;
	color: rgba(243, 195, 3, 0.45);
	display: none;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-chart-compass {
		display: block;
		width: 44px;
		height: 44px;
		bottom: 0.6rem;
		right: 0.6rem;
	}
}
body.lbf-bubbles-page .bb-chart-compass svg { width: 100%; height: 100%; }

/* ── Header (chart title) ───────────────────────────────────────── */
body.lbf-bubbles-page .bb-chart-header {
	position: relative;
	z-index: 5;
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
	padding-top: 0.5rem;
	opacity: 0;
	transform: translateY(8px);
}
body.lbf-bubbles-page .bb-chart.lbf-rv-visible .bb-chart-header {
	animation: bb-chart-header-in 0.9s ease-out 0.2s forwards;
}
@keyframes bb-chart-header-in {
	to { opacity: 1; transform: translateY(0); }
}

body.lbf-bubbles-page .bb-chart-eyebrow {
	display: inline-block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--bb-gold);
	opacity: 0.85;
	margin-bottom: 0.75rem;
}

body.lbf-bubbles-page .bb-chart-title {
	margin: 0;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: clamp(1.85rem, 4.5vw, 3.2rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1;
	color: #fff;
	text-shadow: 0 0 30px rgba(207, 226, 255, 0.25), 0 0 60px rgba(0, 21, 74, 0.5);
}
body.lbf-bubbles-page .bb-chart-title-em {
	color: var(--bb-gold);
	font-style: italic;
	text-shadow: 0 0 28px rgba(243, 195, 3, 0.55), 0 0 56px rgba(243, 195, 3, 0.25);
}

body.lbf-bubbles-page .bb-chart-subtitle {
	margin-top: 0.85rem;
	font-family: 'Outfit', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: rgba(207, 226, 255, 0.85);
}

body.lbf-bubbles-page .bb-chart-caption {
	margin-top: 0.55rem;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.62rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	color: rgba(255, 255, 255, 0.45);
	font-style: italic;
}

/* ── The constellation stage (SVG + label overlay) ──────────────── */
body.lbf-bubbles-page .bb-chart-stage {
	position: relative;
	z-index: 3;
	max-width: 1100px;
	margin: 1.5rem auto 0;
	aspect-ratio: 1000 / 360;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-chart-stage {
		margin-top: 2rem;
	}
}

body.lbf-bubbles-page .bb-chart-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* ── Scatter stars (inside SVG) ─────────────────────────────────── */
body.lbf-bubbles-page .bb-chart-scatter circle {
	opacity: 0;
	animation: bb-chart-scatter-in 1s ease-out forwards;
}
body.lbf-bubbles-page .bb-chart.lbf-rv-visible .bb-chart-scatter circle {
	animation-delay: 0.9s;
}
/* Stagger each scatter star slightly */
body.lbf-bubbles-page .bb-chart.lbf-rv-visible .bb-chart-scatter circle:nth-child(odd)  { animation-delay: 0.9s; }
body.lbf-bubbles-page .bb-chart.lbf-rv-visible .bb-chart-scatter circle:nth-child(even) { animation-delay: 1.1s; }
@keyframes bb-chart-scatter-in {
	to { opacity: 0.7; }
}

/* ── Constellation lines (stroke-dashoffset draw-in) ────────────── */
body.lbf-bubbles-page .bb-chart-line {
	/* dasharray "4 8" defines the dash pattern; we override at runtime via
	   stroke-dashoffset trick. The path lengths below are calibrated to
	   cover the full Q-curve length plus a buffer. */
	stroke-dasharray: 320;
	stroke-dashoffset: 320;
	opacity: 0;
	filter: drop-shadow(0 0 6px rgba(243, 195, 3, 0.35));
}
body.lbf-bubbles-page .bb-chart-line--2 {
	filter: drop-shadow(0 0 6px rgba(77, 127, 255, 0.35));
}
body.lbf-bubbles-page .bb-chart.lbf-rv-visible .bb-chart-line--1 {
	animation: bb-chart-line-draw 1.1s ease-out 1.6s forwards;
}
body.lbf-bubbles-page .bb-chart.lbf-rv-visible .bb-chart-line--2 {
	animation: bb-chart-line-draw 1.1s ease-out 2.9s forwards;
}
@keyframes bb-chart-line-draw {
	0%   { stroke-dashoffset: 320; opacity: 0; }
	10%  { opacity: 1; }
	100% { stroke-dashoffset: 0; opacity: 1; }
}

/* After lines draw, restore the dashed pattern via switching dasharray  */
body.lbf-bubbles-page .bb-chart.lbf-rv-visible .bb-chart-line--1,
body.lbf-bubbles-page .bb-chart.lbf-rv-visible .bb-chart-line--2 {
	/* once animation finishes (forwards), the keyframe end state holds:
	   stroke-dashoffset:0 + the inline dasharray "4 8" applies, so the
	   line ends up showing its proper dashed pattern. */
}

/* ── Star nodes — pop in with flare burst, then idle pulse ──────── */
body.lbf-bubbles-page .bb-chart-star {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}
body.lbf-bubbles-page .bb-chart.lbf-rv-visible .bb-chart-star--1 {
	animation:
		bb-chart-star-pop 0.7s cubic-bezier(0.25, 1.6, 0.45, 1) 1.2s forwards,
		bb-chart-star-pulse 4s ease-in-out 2s infinite;
}
body.lbf-bubbles-page .bb-chart.lbf-rv-visible .bb-chart-star--2 {
	animation:
		bb-chart-star-pop-big 0.85s cubic-bezier(0.25, 1.6, 0.45, 1) 2.4s forwards,
		bb-chart-star-pulse-big 3.5s ease-in-out 3.3s infinite;
}
body.lbf-bubbles-page .bb-chart.lbf-rv-visible .bb-chart-star--3 {
	animation:
		bb-chart-star-pop 0.7s cubic-bezier(0.25, 1.6, 0.45, 1) 3.7s forwards,
		bb-chart-star-pulse 4s ease-in-out 4.5s infinite;
}
@keyframes bb-chart-star-pop {
	0%   { opacity: 0; transform: scale(0.2) rotate(-12deg); }
	60%  { opacity: 1; transform: scale(1.2) rotate(4deg); }
	100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes bb-chart-star-pop-big {
	0%   { opacity: 0; transform: scale(0.15) rotate(-20deg); }
	55%  { opacity: 1; transform: scale(1.25) rotate(6deg); }
	100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes bb-chart-star-pulse {
	0%, 100% { transform: scale(1); filter: brightness(1); }
	50% { transform: scale(1.05); filter: brightness(1.18); }
}
@keyframes bb-chart-star-pulse-big {
	0%, 100% { transform: scale(1); filter: brightness(1); }
	50% { transform: scale(1.08); filter: brightness(1.28); }
}

/* Aura ring inside each star — opacity-only pulse */
body.lbf-bubbles-page .bb-chart-aura {
	animation: bb-chart-aura-pulse 4s ease-in-out infinite;
}
body.lbf-bubbles-page .bb-chart-aura--strong {
	animation: bb-chart-aura-pulse-strong 3.5s ease-in-out infinite;
}
@keyframes bb-chart-aura-pulse {
	0%, 100% { opacity: 0.7; }
	50% { opacity: 1; }
}
@keyframes bb-chart-aura-pulse-strong {
	0%, 100% { opacity: 0.8; }
	50% { opacity: 1; }
}

/* Hover on each star — brighten that node */
body.lbf-bubbles-page .bb-chart-star:hover { cursor: pointer; }
body.lbf-bubbles-page .bb-chart-star:hover .bb-chart-aura {
	opacity: 1;
}

/* ── Star labels (HTML, overlaid on SVG via absolute positioning) ── */
body.lbf-bubbles-page .bb-chart-label {
	position: absolute;
	z-index: 4;
	max-width: 180px;
	text-align: center;
	opacity: 0;
	transform: translate(-50%, -50%) translateY(6px);
	pointer-events: none;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-chart-label { max-width: 220px; }
}
body.lbf-bubbles-page .bb-chart.lbf-rv-visible .bb-chart-label--1 {
	animation: bb-chart-label-in 0.6s ease-out 1.7s forwards;
}
body.lbf-bubbles-page .bb-chart.lbf-rv-visible .bb-chart-label--2 {
	animation: bb-chart-label-in 0.7s ease-out 2.9s forwards;
}
body.lbf-bubbles-page .bb-chart.lbf-rv-visible .bb-chart-label--3 {
	animation: bb-chart-label-in 0.6s ease-out 4.2s forwards;
}
@keyframes bb-chart-label-in {
	to { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}

body.lbf-bubbles-page .bb-chart-label-time {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(243, 195, 3, 0.85);
	margin-bottom: 0.2rem;
}
body.lbf-bubbles-page .bb-chart-label-time--accent {
	color: var(--bb-gold);
	font-size: 0.7rem;
}

body.lbf-bubbles-page .bb-chart-label-name {
	font-family: 'Outfit', sans-serif;
	font-size: 0.95rem;
	font-weight: 800;
	color: #fff;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-shadow: 0 0 12px rgba(0, 21, 74, 0.8);
}
body.lbf-bubbles-page .bb-chart-label-name--accent {
	font-size: 1.2rem;
	color: var(--bb-blue-soft);
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-chart-label-name { font-size: 1.05rem; }
	body.lbf-bubbles-page .bb-chart-label-name--accent { font-size: 1.4rem; }
}

body.lbf-bubbles-page .bb-chart-label-p {
	margin: 0.3rem 0 0;
	font-size: 0.72rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-chart-label-p { font-size: 0.8rem; }
}

body.lbf-bubbles-page .bb-chart-label-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: 'Outfit', sans-serif;
	font-size: 0.55rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bb-gold);
	background: rgba(243, 195, 3, 0.12);
	border: 1px solid rgba(243, 195, 3, 0.45);
	padding: 0.22rem 0.65rem;
	border-radius: 99px;
	margin-bottom: 0.45rem;
}
body.lbf-bubbles-page .bb-chart-label-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--bb-gold);
	box-shadow: 0 0 6px var(--bb-gold);
	animation: bb-chart-label-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes bb-chart-label-dot-pulse {
	0%, 100% { opacity: 0.7; box-shadow: 0 0 6px var(--bb-gold); }
	50% { opacity: 1; box-shadow: 0 0 12px var(--bb-gold); }
}

/* The bb-link inside label-p needs dark-background styling */
body.lbf-bubbles-page .bb-chart-label-p .bb-link {
	color: var(--bb-blue-soft);
	border-bottom-color: rgba(207, 226, 255, 0.4);
}
body.lbf-bubbles-page .bb-chart-label-p .bb-link:hover {
	border-bottom-color: var(--bb-blue-soft);
}

/* ── Chart fireflies (drifting points inside the chart panel) ───── */
body.lbf-bubbles-page .bb-chart-fireflies {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1;
}
body.lbf-bubbles-page .bb-cf {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(207, 226, 255, 1) 0%, rgba(77, 127, 255, 0.6) 50%, transparent 100%);
	box-shadow: 0 0 10px rgba(207, 226, 255, 0.85), 0 0 20px rgba(77, 127, 255, 0.5);
	opacity: 0;
	animation: bb-cf-drift 11s ease-in-out infinite;
}
body.lbf-bubbles-page .bb-cf--1 { left: 10%; top: 80%; animation-duration: 10s; animation-delay: 0s; }
body.lbf-bubbles-page .bb-cf--2 { left: 30%; top: 75%; animation-duration: 13s; animation-delay: -3s; width: 5px; height: 5px; }
body.lbf-bubbles-page .bb-cf--3 { left: 48%; top: 88%; animation-duration: 11s; animation-delay: -7s; }
body.lbf-bubbles-page .bb-cf--4 { left: 68%; top: 82%; animation-duration: 12s; animation-delay: -5s; width: 3px; height: 3px; }
body.lbf-bubbles-page .bb-cf--5 { left: 88%; top: 78%; animation-duration: 10s; animation-delay: -2s; }
body.lbf-bubbles-page .bb-cf--6 { left: 18%; top: 50%; animation-duration: 14s; animation-delay: -9s; }
body.lbf-bubbles-page .bb-cf--7 { left: 56%; top: 40%; animation-duration: 12s; animation-delay: -4s; width: 5px; height: 5px; }
body.lbf-bubbles-page .bb-cf--8 { left: 78%; top: 60%; animation-duration: 11s; animation-delay: -6s; }
@keyframes bb-cf-drift {
	0%   { transform: translate3d(0, 0, 0); opacity: 0; }
	12%  { opacity: 0.9; }
	30%  { transform: translate3d(20px, -25px, 0); opacity: 1; }
	60%  { transform: translate3d(-15px, -50px, 0); opacity: 0.7; }
	100% { transform: translate3d(10px, -90px, 0); opacity: 0; }
}

/* ── Bottom credit strip (museum-print style) ────────────────────── */
body.lbf-bubbles-page .bb-chart-credit {
	position: absolute;
	bottom: 0.9rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 4;
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.55rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.35);
	font-style: italic;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
}
body.lbf-bubbles-page .bb-chart.lbf-rv-visible .bb-chart-credit {
	animation: bb-chart-credit-in 0.8s ease-out 4.6s forwards;
}
@keyframes bb-chart-credit-in {
	to { opacity: 1; }
}
body.lbf-bubbles-page .bb-chart-credit-sep {
	opacity: 0.5;
}

/* ── MOBILE FALLBACK — restack labels below the chart on narrow screens
   Keep the SVG constellation but reposition labels to a single column
   below. Use a higher-specificity media query so the label inline
   `style="left/top"` attributes don't win. */
@media (max-width: 700px) {
	body.lbf-bubbles-page .bb-chart-stage {
		aspect-ratio: auto;
		min-height: 280px;
		padding-bottom: 0;
	}
	body.lbf-bubbles-page .bb-chart-svg {
		max-height: 240px;
	}
	body.lbf-bubbles-page .bb-chart-label[style] {
		position: static !important;
		transform: none !important;
		max-width: 100%;
		margin: 0.85rem auto 0;
		padding: 0.65rem 0.9rem;
		background: rgba(0, 21, 74, 0.4);
		border-radius: 10px;
		border: 1px solid rgba(243, 195, 3, 0.18);
	}
	body.lbf-bubbles-page .bb-chart-label--2[style] {
		background: rgba(0, 21, 74, 0.6);
		border-color: rgba(243, 195, 3, 0.45);
	}
	body.lbf-bubbles-page .bb-chart-label--3[style] {
		margin-bottom: 1rem;
	}
	body.lbf-bubbles-page .bb-chart-coord,
	body.lbf-bubbles-page .bb-chart-compass {
		display: none;
	}
	body.lbf-bubbles-page .bb-chart-credit {
		font-size: 0.5rem;
		letter-spacing: 0.12em;
	}
}

/* ── Reduced-motion fallback ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-chart-stars,
	body.lbf-bubbles-page .bb-chart-stars--alt,
	body.lbf-bubbles-page .bb-chart-haze,
	body.lbf-bubbles-page .bb-chart-aura,
	body.lbf-bubbles-page .bb-chart-aura--strong,
	body.lbf-bubbles-page .bb-cf,
	body.lbf-bubbles-page .bb-chart-label-dot { animation: none !important; }

	body.lbf-bubbles-page .bb-chart-header,
	body.lbf-bubbles-page .bb-chart-credit,
	body.lbf-bubbles-page .bb-chart-label {
		opacity: 1 !important;
		transform: translate(-50%, -50%) !important;
		animation: none !important;
	}
	body.lbf-bubbles-page .bb-chart-header { transform: none !important; }
	body.lbf-bubbles-page .bb-chart-line {
		stroke-dashoffset: 0 !important;
		opacity: 1 !important;
		animation: none !important;
	}
	body.lbf-bubbles-page .bb-chart-star {
		opacity: 1 !important;
		animation: none !important;
	}
	body.lbf-bubbles-page .bb-chart-scatter circle {
		opacity: 0.7 !important;
		animation: none !important;
	}
}


/* ═════════════════════════════════════════════════════════════════
   v29.5.6 — REALISTIC STARS + BIGGER CHART TEXT + JS HANDOFF
   - When .bb-chart--js is present (added by bubbles-chart.js), the
     scroll-driven JS controls line drawing. CSS auto-reveal animation
     for the lines is disabled here so the JS isn't fighting the CSS.
   - Chart text sizes bumped throughout (title, subtitle, caption,
     labels). Page-wide text is unchanged — these rules are scoped to
     the .bb-chart section only.
   - Realistic star shape now defined in SVG markup (point + bloom +
     lens-flare cross). No CSS changes needed for the star itself —
     the CSS aura pulse from v29.5.5 still applies and looks right
     with the new shape.
   ───────────────────────────────────────────────────────────────── */

/* ── JS handoff — when JS takes over the line drawing, stop the
   CSS reveal animation on the lines so they don't fight. The JS sets
   stroke-dashoffset directly via inline style which wins anyway, but
   removing the animation keeps things tidy. */
body.lbf-bubbles-page .bb-chart--js .bb-chart-line {
	animation: none !important;
}
body.lbf-bubbles-page .bb-chart--js.lbf-rv-visible .bb-chart-line--1,
body.lbf-bubbles-page .bb-chart--js.lbf-rv-visible .bb-chart-line--2 {
	animation: none !important;
}

/* When JS is on, also disable the star pop-in animations — the user
   is in control of when stars appear (via scroll position), but for
   the first paint we want them visible already. Skip the pop entirely. */
body.lbf-bubbles-page .bb-chart--js .bb-chart-star {
	opacity: 1;
	animation: none;
}
/* But idle pulse can still run */
body.lbf-bubbles-page .bb-chart--js .bb-chart-star--1 {
	animation: bb-chart-star-pulse 4s ease-in-out infinite;
}
body.lbf-bubbles-page .bb-chart--js .bb-chart-star--2 {
	animation: bb-chart-star-pulse-big 3.5s ease-in-out infinite;
}
body.lbf-bubbles-page .bb-chart--js .bb-chart-star--3 {
	animation: bb-chart-star-pulse 4s ease-in-out infinite;
}

/* When JS is on, labels should be visible immediately (don't wait for
   reveal-class timing — the user controls progress). */
body.lbf-bubbles-page .bb-chart--js .bb-chart-label {
	opacity: 1;
	transform: translate(-50%, -50%);
	animation: none;
}

/* Header still animates in on reveal — same as before. */

/* ── BIGGER CHART TEXT (scoped to .bb-chart) ───────────────────── */

/* Title — was clamp(1.85rem, 4.5vw, 3.2rem). Now: */
body.lbf-bubbles-page .bb-chart-title {
	font-size: clamp(2.4rem, 5.6vw, 4.2rem);
	letter-spacing: -0.04em;
}

/* Subtitle — was 0.75rem with 0.28em tracking. Now: */
body.lbf-bubbles-page .bb-chart-subtitle {
	font-size: 0.95rem;
	letter-spacing: 0.32em;
	margin-top: 1rem;
}

/* Caption — was 0.62rem. Now: */
body.lbf-bubbles-page .bb-chart-caption {
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	margin-top: 0.7rem;
}

/* Eyebrow — was 0.65rem. Now: */
body.lbf-bubbles-page .bb-chart-eyebrow {
	font-size: 0.78rem;
	letter-spacing: 0.3em;
	margin-bottom: 0.9rem;
}

/* Label time — was 0.6rem. Now: */
body.lbf-bubbles-page .bb-chart-label-time {
	font-size: 0.78rem;
	letter-spacing: 0.22em;
}
body.lbf-bubbles-page .bb-chart-label-time--accent {
	font-size: 0.9rem;
}

/* Label name — was 0.95rem / 1.05rem desktop. Now: */
body.lbf-bubbles-page .bb-chart-label-name {
	font-size: 1.2rem;
	letter-spacing: -0.02em;
}
body.lbf-bubbles-page .bb-chart-label-name--accent {
	font-size: 1.5rem;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-chart-label-name { font-size: 1.35rem; }
	body.lbf-bubbles-page .bb-chart-label-name--accent { font-size: 1.85rem; }
}

/* Label paragraph — was 0.72rem / 0.8rem desktop. Now: */
body.lbf-bubbles-page .bb-chart-label-p {
	font-size: 0.92rem;
	line-height: 1.55;
	margin-top: 0.4rem;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-chart-label-p {
		font-size: 1rem;
		line-height: 1.6;
	}
}

/* Step-off tag — was 0.55rem. Now: */
body.lbf-bubbles-page .bb-chart-label-tag {
	font-size: 0.68rem;
	letter-spacing: 0.22em;
	padding: 0.32rem 0.85rem;
	margin-bottom: 0.6rem;
}

/* Bigger labels need slightly wider max-width so they don't wrap badly */
body.lbf-bubbles-page .bb-chart-label {
	max-width: 220px;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-chart-label {
		max-width: 280px;
	}
}

/* Coord labels (edge) — bump from 0.55rem since they look insignificant now */
body.lbf-bubbles-page .bb-chart-coord {
	font-size: 0.65rem;
	letter-spacing: 0.14em;
}

/* Bottom credit — bump too */
body.lbf-bubbles-page .bb-chart-credit {
	font-size: 0.68rem;
	letter-spacing: 0.2em;
}

/* Section minimum height — taller now since labels are bigger and may
   wrap differently. Give the chart room to breathe. */
body.lbf-bubbles-page .bb-chart {
	min-height: 640px;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-chart {
		min-height: 720px;
	}
}
@media (min-width: 1024px) {
	body.lbf-bubbles-page .bb-chart {
		min-height: 800px;
	}
}

/* ── Mobile fallback adjustments for the bigger text ──────────── */
@media (max-width: 700px) {
	body.lbf-bubbles-page .bb-chart-title {
		font-size: 2rem;
	}
	body.lbf-bubbles-page .bb-chart-subtitle {
		font-size: 0.82rem;
		letter-spacing: 0.26em;
	}
	body.lbf-bubbles-page .bb-chart-caption {
		font-size: 0.7rem;
	}
	body.lbf-bubbles-page .bb-chart-label-name {
		font-size: 1.05rem;
	}
	body.lbf-bubbles-page .bb-chart-label-name--accent {
		font-size: 1.25rem;
	}
	body.lbf-bubbles-page .bb-chart-label-p {
		font-size: 0.85rem;
	}
}


/* ═════════════════════════════════════════════════════════════════
   v29.5.7 — REORDER + HERO TWO-BUTTONS + DARK ENTER/FAQ/CLOSING
   
   The previously-light sections (Enter, FAQ, Closing) get fully
   redesigned dark treatments, each with a DIFFERENT visual concept
   so they don't look identical to each other or to Hero/Stage/Grand.
   
   Concepts:
   - Enter   → "Application Desk" — gold corner brackets like an
                official document, dossier-stamp decoration, form
                fields with glowing underlines, illuminated chip tokens
   - FAQ     → "Lantern Cards" — string of warm lantern lights
                across the top, each Q is a numbered glowing lantern
                node that brightens when opened
   - Closing → "Pure Night" — minimal dark with a big moonglow,
                big italic typography, the light-string still spans
                across but more atmospheric
   ───────────────────────────────────────────────────────────────── */

/* ── Anchor-link landing fix (#parade, #stage, #grand, #enter) ──── */
body.lbf-bubbles-page #parade,
body.lbf-bubbles-page #stage,
body.lbf-bubbles-page #grand,
body.lbf-bubbles-page #enter {
	scroll-margin-top: calc(var(--header-h, 82px) + 1rem);
}

/* ── HERO TWO-BUTTON LAYOUT ─────────────────────────────────────── */
body.lbf-bubbles-page .bb-hero-ctas {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	align-items: center;
	margin-top: 1.4rem;
}
@media (min-width: 540px) {
	body.lbf-bubbles-page .bb-hero-ctas {
		flex-direction: row;
		gap: 0.85rem;
	}
}
/* The CTA-wrap (around primary) keeps its own bubble-release effect */
body.lbf-bubbles-page .bb-hero-ctas .bb-hero-cta-wrap {
	margin-top: 0;
}

/* Secondary button — outline style, no bubble release */
body.lbf-bubbles-page .bb-btn--secondary {
	background: rgba(255, 255, 255, 0.04);
	color: #fff;
	border: 1.5px solid rgba(207, 226, 255, 0.45);
	backdrop-filter: blur(6px);
	box-shadow: inset 0 0 18px rgba(77, 127, 255, 0.10), 0 4px 18px rgba(0, 21, 74, 0.3);
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.85rem 1.4rem 0.85rem 1.2rem;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.lbf-bubbles-page .bb-btn--secondary:hover {
	background: rgba(77, 127, 255, 0.18);
	border-color: rgba(207, 226, 255, 0.8);
	transform: translateY(-2px);
	box-shadow: inset 0 0 22px rgba(77, 127, 255, 0.20), 0 10px 28px rgba(0, 21, 74, 0.5), 0 0 0 4px rgba(77, 127, 255, 0.08);
}
body.lbf-bubbles-page .bb-btn-ico {
	width: 16px;
	height: 16px;
	color: var(--bb-blue-soft);
	flex-shrink: 0;
}
body.lbf-bubbles-page .bb-btn--secondary:hover .bb-btn-ico {
	color: #fff;
}

/* On mobile, the wrap shouldn't force its child to 100% width when in the
   .bb-hero-ctas flex container */
@media (max-width: 539px) {
	body.lbf-bubbles-page .bb-hero-ctas .bb-hero-cta-wrap,
	body.lbf-bubbles-page .bb-hero-ctas > .bb-btn--secondary {
		width: 100%;
		max-width: 320px;
	}
	body.lbf-bubbles-page .bb-hero-ctas .bb-hero-cta-wrap > .bb-btn {
		width: 100%;
	}
}

/* ═════════════════════════════════════════════════════════════════
   ENTER SECTION — "APPLICATION DESK" dark redesign
   ───────────────────────────────────────────────────────────────── */

body.lbf-bubbles-page .bb-enter {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	padding: 3rem 1.5rem 3rem;
	background:
		radial-gradient(ellipse at 15% 20%, rgba(74, 58, 140, 0.22), transparent 50%),
		radial-gradient(ellipse at 85% 80%, rgba(0, 55, 167, 0.28), transparent 55%),
		linear-gradient(170deg, #00154a 0%, #001f5a 50%, #000820 100%);
	box-shadow: var(--bb-shadow-hero);
	color: #fff;
	border: 1px solid rgba(243, 195, 3, 0.16);
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-enter {
		padding: 3.5rem 3rem;
	}
}

/* Corner brackets — "official document" frame */
body.lbf-bubbles-page .bb-enter-bracket {
	position: absolute;
	width: 36px;
	height: 36px;
	pointer-events: none;
	z-index: 2;
}
body.lbf-bubbles-page .bb-enter-bracket::before,
body.lbf-bubbles-page .bb-enter-bracket::after {
	content: "";
	position: absolute;
	background: var(--bb-gold);
	opacity: 0.7;
	box-shadow: 0 0 8px rgba(243, 195, 3, 0.5);
}
body.lbf-bubbles-page .bb-enter-bracket::before { width: 36px; height: 2px; }
body.lbf-bubbles-page .bb-enter-bracket::after  { width: 2px; height: 36px; }
body.lbf-bubbles-page .bb-enter-bracket--tl { top: 1rem; left: 1rem; }
body.lbf-bubbles-page .bb-enter-bracket--tl::before { top: 0; left: 0; }
body.lbf-bubbles-page .bb-enter-bracket--tl::after  { top: 0; left: 0; }
body.lbf-bubbles-page .bb-enter-bracket--tr { top: 1rem; right: 1rem; }
body.lbf-bubbles-page .bb-enter-bracket--tr::before { top: 0; right: 0; }
body.lbf-bubbles-page .bb-enter-bracket--tr::after  { top: 0; right: 0; }
body.lbf-bubbles-page .bb-enter-bracket--bl { bottom: 1rem; left: 1rem; }
body.lbf-bubbles-page .bb-enter-bracket--bl::before { bottom: 0; left: 0; }
body.lbf-bubbles-page .bb-enter-bracket--bl::after  { bottom: 0; left: 0; }
body.lbf-bubbles-page .bb-enter-bracket--br { bottom: 1rem; right: 1rem; }
body.lbf-bubbles-page .bb-enter-bracket--br::before { bottom: 0; right: 0; }
body.lbf-bubbles-page .bb-enter-bracket--br::after  { bottom: 0; right: 0; }

/* Dossier stamp — circular, top-right area, decorative */
body.lbf-bubbles-page .bb-enter-stamp {
	position: absolute;
	top: 2.5rem;
	right: 2.5rem;
	width: 76px;
	height: 76px;
	color: var(--bb-gold);
	opacity: 0.5;
	transform: rotate(-8deg);
	pointer-events: none;
	z-index: 1;
	display: none;
	animation: bb-stamp-breathe 4s ease-in-out infinite;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-enter-stamp { display: block; }
}
body.lbf-bubbles-page .bb-enter-stamp svg {
	width: 100%;
	height: 100%;
}
@keyframes bb-stamp-breathe {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 0.65; }
}

/* Override Enter inner styling for dark */
body.lbf-bubbles-page .bb-enter-inner {
	position: relative;
	z-index: 3;
	max-width: 760px;
	margin: 0 auto;
}
body.lbf-bubbles-page .bb-enter-h {
	color: #fff;
	margin-top: 1rem;
}
body.lbf-bubbles-page .bb-enter-h .bb-h-accent {
	color: var(--bb-gold);
	text-shadow: 0 0 20px rgba(243, 195, 3, 0.4);
}
body.lbf-bubbles-page .bb-enter-lead {
	color: rgba(255, 255, 255, 0.78);
}

/* Category chips — illuminated token style on dark */
body.lbf-bubbles-page .bb-enter .bb-cat-chip {
	background: rgba(255, 255, 255, 0.06);
	border: 1.5px solid rgba(207, 226, 255, 0.35);
	color: #fff;
	font-weight: 800;
	backdrop-filter: blur(4px);
	box-shadow: 0 0 0 0 rgba(243, 195, 3, 0);
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
body.lbf-bubbles-page .bb-enter .bb-cat-chip:hover {
	background: var(--bb-gold);
	border-color: var(--bb-gold);
	color: var(--bb-blue-night);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(243, 195, 3, 0.3), 0 0 0 4px rgba(243, 195, 3, 0.12);
}
body.lbf-bubbles-page .bb-enter .bb-cat-chip--alt {
	background: transparent;
	border-style: dashed;
	border-color: rgba(207, 226, 255, 0.32);
	color: rgba(207, 226, 255, 0.7);
}
body.lbf-bubbles-page .bb-enter .bb-cat-chip--alt:hover {
	background: transparent;
	border-color: var(--bb-gold);
	color: var(--bb-gold);
}

/* Enter note — slim glowing line */
body.lbf-bubbles-page .bb-enter-note {
	background: rgba(77, 127, 255, 0.12);
	border-left-color: var(--bb-blue-glow);
	color: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(4px);
	box-shadow: 0 0 16px rgba(77, 127, 255, 0.08);
}

/* Form panel on dark */
body.lbf-bubbles-page .bb-enter-form {
	background: rgba(0, 21, 74, 0.45);
	border: 1px solid rgba(207, 226, 255, 0.2);
	backdrop-filter: blur(8px);
	box-shadow: inset 0 0 28px rgba(0, 21, 74, 0.4);
}

/* Pending state on dark */
body.lbf-bubbles-page .bb-enter-pending {
	background: linear-gradient(180deg, rgba(0, 21, 74, 0.6) 0%, rgba(0, 21, 74, 0.4) 100%);
	border: 1.5px dashed rgba(243, 195, 3, 0.35);
}
body.lbf-bubbles-page .bb-enter-pending-mark { color: var(--bb-gold); }
body.lbf-bubbles-page .bb-enter-pending-h { color: #fff; }
body.lbf-bubbles-page .bb-enter-pending-p { color: rgba(255, 255, 255, 0.65); }
body.lbf-bubbles-page .bb-enter-pending-p strong { color: var(--bb-gold); font-weight: 700; }

/* Override the bb-card light styling that was originally on .bb-enter */
body.lbf-bubbles-page .bb-enter .bb-cat-chips { margin-top: 1.5rem; }

/* Eyebrow inside Enter on dark */
body.lbf-bubbles-page .bb-enter .bb-eyebrow {
	background: rgba(243, 195, 3, 0.12);
	border-color: rgba(243, 195, 3, 0.32);
	color: var(--bb-gold);
}
body.lbf-bubbles-page .bb-enter .bb-eyebrow::before {
	background: var(--bb-gold);
	box-shadow: 0 0 8px var(--bb-gold);
}

/* Motes in Enter — dark version, no need to change, motes are bluish */

/* ═════════════════════════════════════════════════════════════════
   FAQ SECTION — "LANTERN CARDS" dark redesign
   ───────────────────────────────────────────────────────────────── */

body.lbf-bubbles-page .bb-faq {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	padding: 3rem 1.5rem 3rem;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(243, 195, 3, 0.10), transparent 35%),
		radial-gradient(ellipse at 30% 100%, rgba(74, 58, 140, 0.25), transparent 50%),
		linear-gradient(180deg, #000820 0%, #00154a 60%, #00154a 100%);
	box-shadow: var(--bb-shadow-hero);
	color: #fff;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-faq {
		padding: 3.5rem 3rem 3.5rem;
	}
}

/* String of lantern lights across the top */
body.lbf-bubbles-page .bb-faq-lanterns {
	position: absolute;
	top: 0.5rem;
	left: 0;
	right: 0;
	height: 50px;
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	padding: 0 2rem;
	pointer-events: none;
	z-index: 2;
}
body.lbf-bubbles-page .bb-faq-lantern {
	position: relative;
	width: 14px;
	height: 22px;
	border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
	background: radial-gradient(circle at 50% 40%, rgba(255, 230, 130, 0.95) 0%, rgba(243, 195, 3, 0.85) 50%, rgba(243, 195, 3, 0.5) 80%, transparent 100%);
	box-shadow: 0 0 14px rgba(243, 195, 3, 0.7), 0 0 28px rgba(243, 195, 3, 0.4);
	animation: bb-lantern-glow 3.5s ease-in-out infinite;
}
/* Stagger each lantern's glow cycle */
body.lbf-bubbles-page .bb-faq-lantern:nth-child(1) { animation-delay: 0s;     }
body.lbf-bubbles-page .bb-faq-lantern:nth-child(2) { animation-delay: -0.5s;  }
body.lbf-bubbles-page .bb-faq-lantern:nth-child(3) { animation-delay: -1.1s;  }
body.lbf-bubbles-page .bb-faq-lantern:nth-child(4) { animation-delay: -1.7s;  }
body.lbf-bubbles-page .bb-faq-lantern:nth-child(5) { animation-delay: -2.3s;  }
body.lbf-bubbles-page .bb-faq-lantern:nth-child(6) { animation-delay: -2.9s;  }
body.lbf-bubbles-page .bb-faq-lantern:nth-child(7) { animation-delay: -3.4s;  }
/* String connecting them */
body.lbf-bubbles-page .bb-faq-lantern::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	height: 10px;
	background: rgba(255, 255, 255, 0.2);
}
@keyframes bb-lantern-glow {
	0%, 100% { box-shadow: 0 0 14px rgba(243, 195, 3, 0.6), 0 0 28px rgba(243, 195, 3, 0.3); }
	50%      { box-shadow: 0 0 22px rgba(243, 195, 3, 0.95), 0 0 44px rgba(243, 195, 3, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-faq-lantern { animation: none; }
}

/* FAQ inner — make room for the lantern row at top */
body.lbf-bubbles-page .bb-faq-inner {
	position: relative;
	z-index: 3;
	max-width: 760px;
	margin: 0 auto;
	padding-top: 1.5rem;
}
body.lbf-bubbles-page .bb-faq-h {
	color: #fff;
}
body.lbf-bubbles-page .bb-faq-h .bb-h-accent {
	color: var(--bb-gold);
}

/* Each FAQ item becomes a "lantern card" — translucent dark with glow */
body.lbf-bubbles-page .bb-faq .bb-faq-item {
	background: rgba(0, 21, 74, 0.4);
	border: 1px solid rgba(207, 226, 255, 0.15);
	backdrop-filter: blur(6px);
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 8, 32, 0.3);
	transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
body.lbf-bubbles-page .bb-faq .bb-faq-item[open] {
	background: rgba(0, 21, 74, 0.65);
	border-color: rgba(243, 195, 3, 0.5);
	box-shadow: 0 6px 24px rgba(0, 8, 32, 0.5), 0 0 0 1px rgba(243, 195, 3, 0.2), 0 0 32px rgba(243, 195, 3, 0.12);
}
body.lbf-bubbles-page .bb-faq .bb-faq-item:hover {
	background: rgba(0, 21, 74, 0.55);
	border-color: rgba(207, 226, 255, 0.3);
}
body.lbf-bubbles-page .bb-faq .bb-faq-q { color: #fff; }
body.lbf-bubbles-page .bb-faq .bb-faq-q::after { color: var(--bb-blue-soft); }
body.lbf-bubbles-page .bb-faq .bb-faq-item[open] .bb-faq-q::after { color: var(--bb-gold); }
body.lbf-bubbles-page .bb-faq .bb-faq-a { color: rgba(255, 255, 255, 0.75); }

/* Numbered chip inside FAQ on dark */
body.lbf-bubbles-page .bb-faq .bb-faq-q::before {
	background: rgba(77, 127, 255, 0.25);
	color: var(--bb-blue-soft);
	border: 1px solid rgba(207, 226, 255, 0.35);
}
body.lbf-bubbles-page .bb-faq .bb-faq-item[open] .bb-faq-q::before {
	background: var(--bb-gold);
	color: var(--bb-blue-night);
	border-color: var(--bb-gold);
	box-shadow: 0 0 14px rgba(243, 195, 3, 0.6);
}

/* Eyebrow inside FAQ on dark */
body.lbf-bubbles-page .bb-faq .bb-eyebrow {
	background: rgba(243, 195, 3, 0.12);
	border-color: rgba(243, 195, 3, 0.32);
	color: var(--bb-gold);
}
body.lbf-bubbles-page .bb-faq .bb-eyebrow::before {
	background: var(--bb-gold);
	box-shadow: 0 0 8px var(--bb-gold);
}

/* ═════════════════════════════════════════════════════════════════
   CLOSING SECTION — "PURE NIGHT" dark redesign
   ───────────────────────────────────────────────────────────────── */

body.lbf-bubbles-page .bb-close {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	padding: 4rem 1.5rem 4.5rem;
	background:
		radial-gradient(ellipse at 50% 50%, rgba(77, 127, 255, 0.10), transparent 50%),
		radial-gradient(circle at 20% 30%, rgba(74, 58, 140, 0.18), transparent 50%),
		linear-gradient(180deg, #000515 0%, #00154a 50%, #000515 100%);
	box-shadow: var(--bb-shadow-hero);
	color: #fff;
	text-align: center;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* The moon — soft glowing disc, top center */
body.lbf-bubbles-page .bb-close-moon {
	position: absolute;
	top: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 100px;
	z-index: 1;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-close-moon {
		width: 140px;
		height: 140px;
		top: 2rem;
	}
}
body.lbf-bubbles-page .bb-close-moon-glow {
	position: absolute;
	inset: -40%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 240, 200, 0.18) 0%, rgba(243, 195, 3, 0.08) 40%, transparent 70%);
	filter: blur(20px);
	animation: bb-moon-pulse 6s ease-in-out infinite;
}
body.lbf-bubbles-page .bb-close-moon-disc {
	position: absolute;
	inset: 25%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(255, 255, 230, 0.95) 0%, rgba(252, 238, 168, 0.7) 40%, rgba(243, 195, 3, 0.25) 80%, transparent 100%);
	box-shadow: 0 0 20px rgba(243, 195, 3, 0.4), inset -4px -4px 8px rgba(180, 140, 50, 0.25);
}
@keyframes bb-moon-pulse {
	0%, 100% { opacity: 0.85; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
	body.lbf-bubbles-page .bb-close-moon-glow { animation: none; }
}

/* The closing line — bigger, italic, atmospheric */
body.lbf-bubbles-page .bb-close-p {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	max-width: 720px;
	color: #fff;
	font-family: 'Outfit', sans-serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.3rem, 2.6vw, 1.85rem);
	line-height: 1.4;
	letter-spacing: -0.005em;
	text-shadow: 0 0 28px rgba(207, 226, 255, 0.25);
	padding-top: 6rem;
}
@media (min-width: 768px) {
	body.lbf-bubbles-page .bb-close-p {
		padding-top: 7rem;
	}
}

/* Light string in the closing — make it sit between moon and text */
body.lbf-bubbles-page .bb-close-lights {
	position: relative;
	z-index: 2;
	max-width: 300px;
	margin: 0 auto 1.5rem;
}

/* Motes inside closing — already styled, but make sure they layer */
body.lbf-bubbles-page .bb-close > * {
	position: relative;
}
body.lbf-bubbles-page .bb-close .bb-section-motes {
	position: absolute;
	inset: 0;
	z-index: 0;
}


/* ═════════════════════════════════════════════════════════════════
   GRAVITY FORMS — Dark-mode field styling for Blue Lights & Bubbles
   Entry form on the navy "Application Desk" panel (v29.6.1)
   ───────────────────────────────────────────────────────────────── */

/* Field labels — white on dark panel */
body.lbf-bubbles-page .bb-enter-form .gform_wrapper label.gfield_label,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_label,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper legend.gfield_label {
	color: #fff;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: -0.005em;
	margin-bottom: 0.45rem;
}

/* Required-field asterisks — gold */
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_required,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_required_text,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_required *,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper span.gfield_required_asterisk {
	color: var(--bb-gold);
}

/* Field descriptions / sub-labels — light muted */
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_description,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .ginput_complex label,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gform_fileupload_rules,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gform_drop_instructions {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.78rem;
}

/* Section headers in the form */
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gsection,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gsection_title {
	color: #fff;
	border-color: rgba(243, 195, 3, 0.35);
}

/* Inputs / textareas / selects — cream fill, navy text, gold focus ring */
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="text"],
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="email"],
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="tel"],
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="url"],
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="number"],
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="password"],
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="date"],
body.lbf-bubbles-page .bb-enter-form .gform_wrapper select,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper textarea {
	background: #FBF7EE;
	color: #0e1525;
	border: 1px solid rgba(243, 195, 3, 0.35);
	border-radius: 10px;
	padding: 0.7rem 0.85rem;
	font-family: 'Outfit', sans-serif;
	font-size: 0.95rem;
	font-weight: 500;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

body.lbf-bubbles-page .bb-enter-form .gform_wrapper textarea {
	min-height: 110px;
	line-height: 1.5;
}

body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="text"]:focus,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="email"]:focus,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="tel"]:focus,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="url"]:focus,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="number"]:focus,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="password"]:focus,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="date"]:focus,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper select:focus,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper textarea:focus {
	background: #fff;
	border-color: var(--bb-gold);
	outline: none;
	box-shadow: 0 0 0 3px rgba(243, 195, 3, 0.22);
}

body.lbf-bubbles-page .bb-enter-form .gform_wrapper input::placeholder,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper textarea::placeholder {
	color: rgba(14, 21, 37, 0.45);
}

/* Radio / checkbox labels — white text, gold-tinted bullets */
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_radio label,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_checkbox label {
	color: #fff;
	font-weight: 500;
	font-size: 0.92rem;
	margin-left: 0.4rem;
	cursor: pointer;
}
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_radio,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_checkbox {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_radio > div,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_checkbox > div,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gchoice {
	display: flex;
	align-items: center;
	padding: 0.5rem 0.85rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(207, 226, 255, 0.18);
	border-radius: 8px;
	transition: background 0.15s ease, border-color 0.15s ease;
}
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_radio > div:hover,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_checkbox > div:hover,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gchoice:hover {
	background: rgba(243, 195, 3, 0.08);
	border-color: rgba(243, 195, 3, 0.35);
}

/* Native radio/checkbox accent for browsers that support it */
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="radio"],
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="checkbox"] {
	accent-color: var(--bb-gold);
	width: 1.05rem;
	height: 1.05rem;
	cursor: pointer;
}

/* Complex address / name fields — keep inputs in line */
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .ginput_complex .ginput_full,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .ginput_complex .ginput_left,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .ginput_complex .ginput_right {
	margin-bottom: 0.5rem;
}
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .ginput_complex label {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-top: 0.35rem;
	display: block;
}

/* Validation errors */
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_error,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield.gfield_error {
	background: transparent;
	border: none;
	padding: 0;
}
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_error input,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_error textarea,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_error select,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_error .ginput_container input {
	border-color: #ff7878;
	box-shadow: 0 0 0 2px rgba(255, 120, 120, 0.22);
}
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield_validation_message,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .validation_message,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gform_validation_errors {
	color: #ffbcbc;
	background: rgba(180, 30, 30, 0.18);
	border: 1px solid rgba(255, 120, 120, 0.3);
	border-radius: 8px;
	padding: 0.6rem 0.85rem;
	font-size: 0.85rem;
	margin-top: 0.35rem;
}

/* Submit button — gold with navy text, matches "Enter the Parade" CTA grammar */
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gform_footer,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gform_page_footer {
	padding-top: 1.5rem;
	border-top: 1px solid rgba(207, 226, 255, 0.12);
	margin-top: 1.5rem;
	text-align: center;
}
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="submit"],
body.lbf-bubbles-page .bb-enter-form .gform_wrapper button[type="submit"],
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gform_button {
	background: var(--bb-gold);
	color: var(--bb-blue-night, #00154a);
	border: none;
	border-radius: 999px;
	padding: 0.95rem 2.2rem;
	font-family: 'Outfit', sans-serif;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(243, 195, 3, 0.28), 0 0 0 0 rgba(243, 195, 3, 0);
	transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="submit"]:hover,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper button[type="submit"]:hover,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gform_button:hover {
	background: #ffd633;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(243, 195, 3, 0.38), 0 0 0 6px rgba(243, 195, 3, 0.12);
}
body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="submit"]:active,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper button[type="submit"]:active,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gform_button:active {
	transform: translateY(0);
}

/* PayPal Checkout field — keep its iframe legible (no override needed for the iframe itself) */
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield--type-paypal,
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .ginput_container_paypal {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(207, 226, 255, 0.18);
	border-radius: 10px;
	padding: 0.85rem;
}

/* Conditional-logic transitions — smooth */
body.lbf-bubbles-page .bb-enter-form .gform_wrapper .gfield {
	transition: opacity 0.18s ease;
}

/* Mobile spacing */
@media (max-width: 640px) {
	body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="text"],
	body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="email"],
	body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="tel"],
	body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="url"],
	body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="number"],
	body.lbf-bubbles-page .bb-enter-form .gform_wrapper input[type="password"],
	body.lbf-bubbles-page .bb-enter-form .gform_wrapper select,
	body.lbf-bubbles-page .bb-enter-form .gform_wrapper textarea {
		font-size: 1rem; /* avoid mobile-Safari zoom on focus */
	}
}