/* =========================================================================
   Vital Glow Labs — home motion & interaction layer (Phase 4)

   Progressive enhancement over the EXISTING Elementor layout. No structural
   changes. Everything is inert (or reduced to a static affordance) under
   prefers-reduced-motion; heavier hero effects are desktop-only.
   ========================================================================= */

:root {
	--vgl-navy: #000B60;
	--vgl-blue: #0048FF;
}

/* ---- global: scroll progress bar ------------------------------------- */
.vgl-scroll-progress {
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	height: 2px;
	background: var(--vgl-blue, #0048FF);
	background: linear-gradient( 90deg,
		var(--vgl-s1, #7631DD), var(--vgl-s2, #4C31DD), var(--vgl-s3, #313FDD),
		var(--vgl-s4, #3168DD), var(--vgl-s5, #3192DD), var(--vgl-s6, #31BBDD) );
	transform: scaleX(0);
	transform-origin: 0 50%;
	z-index: 99999;
	pointer-events: none;
	will-change: transform;
}

/* ---- hero: layered parallax (H2) + living-image effects (H1) ------- */
.elementor-element-180f9a3 { position: relative; overflow: hidden; }

.vgl-hero-back,
.vgl-hero-figure,
.vgl-hero-glow,
.vgl-hero-sweep,
.vgl-hero-fx {
	position: absolute;
	pointer-events: none;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.vgl-hero-back {
	inset: -4%;
	z-index: 0;
	will-change: transform;
}
.vgl-hero-figure {
	inset: -4%;
	z-index: 2;
	will-change: transform;
}
.vgl-hero-glow {
	left: -10%; top: -10%;
	width: 75%; height: 90%;
	background: radial-gradient(circle at 45% 45%, rgba(255, 110, 90, 0.20), rgba(255, 110, 90, 0) 68%);
	mix-blend-mode: screen;
	opacity: 0;
	z-index: 0;
	will-change: transform, opacity;
}
.vgl-hero-sweep {
	inset: 0;
	width: 100%;
	background: linear-gradient(115deg, transparent 42%, rgba(150, 185, 255, 0.14) 50%, transparent 58%);
	mix-blend-mode: screen;
	opacity: 0;
	z-index: 1;
	will-change: transform, opacity;
}
.vgl-hero-fx {
	inset: 0;
	width: 100%; height: 100%;
	mix-blend-mode: screen;
	opacity: 0.9;
	z-index: 2;           /* drifting embers play in front of the scene */
	will-change: transform;
}

/* keep hero copy above every effect layer */
.elementor-element-180f9a3 > .e-con-inner,
.elementor-element-180f9a3 > .elementor-element { position: relative; z-index: 3; }

/* ---- hero + Be Bold: headline word reveal ------------------------- */
.vgl-word { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.06; }
.vgl-word > span { display: inline-block; will-change: transform; }

/* hero copy block is capped at 45% width + pulled 130px left — fine on
   desktop, broken on tablet/phone (headline wrapped to 3 lines and clipped
   off the left edge). Below 1024px: drop the negative pull, widen the
   inner, and use fluid type so the headline stays two lines on-screen. */
@media (max-width: 1024px) {
	.elementor-element-64a156d { margin-left: 0 !important; }
	.elementor-element-64a156d > .e-con-inner { max-width: 86% !important; }
	.elementor-element-64a156d h1.e-heading-base,
	.elementor-element-64a156d h1.elementor-heading-title {
		font-size: clamp(1.6rem, 5.4vw, 2.7rem) !important;
		line-height: 1.12 !important;
	}
}

/* ---- section "scanner" sweep ------------------------------------- */
.vgl-scan {
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--vgl-blue, #0048FF), transparent);
	background: linear-gradient( 90deg, transparent 0%,
		var(--vgl-s1, #7631DD) 22%, var(--vgl-s4, #3168DD) 50%, var(--vgl-s6, #31BBDD) 78%,
		transparent 100% );
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
	z-index: 4;
}

/* ---- product sections: heading underline + card shine ------------ */
.elementor-element-b0af210 .elementor-heading-title,
.elementor-element-a36418f .elementor-heading-title { position: relative; display: inline-block; }
.vgl-head-ul {
	position: absolute;
	left: 0;
	bottom: -0.35rem;
	width: 100%;
	height: 3px;
	background: var(--vgl-blue, #0048FF);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.vgl-pcard { position: relative; }
.vgl-pcard__body { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
	.vgl-pcard__body::after {
		content: "";
		position: absolute;
		top: 0; left: -75%;
		width: 45%; height: 100%;
		background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
		transform: skewX(-16deg);
		transition: left 0.6s ease;
		pointer-events: none;
	}
	.vgl-pcard:hover .vgl-pcard__body::after { left: 130%; }

	.vgl-pcard { transition: transform 0.3s ease, box-shadow 0.3s ease; }
	.vgl-pcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0, 11, 96, 0.35); }
	.vgl-pcard img { transition: transform 0.45s ease; }
	.vgl-pcard:hover img { transform: scale(1.035); }

	.elementor-element-cdb0a33 .elementor-widget-icon .elementor-icon { transition: transform 0.3s ease; }
	.elementor-element-cdb0a33 .elementor-widget-icon:hover .elementor-icon { transform: translateY(-3px); }

	.elementor-button { transition: transform 0.2s ease, box-shadow 0.2s ease; }
	.elementor-button:hover { transform: translateY(-2px); }
}

/* ---- Testimonial ------------------------------------------------- */
.vgl-tm { position: relative; }
.vgl-tm-quote {
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4.5rem;
	line-height: 0.7;
	color: var(--vgl-blue, #0048FF);
	opacity: 0.5;
	margin-bottom: 0.2rem;
}

/* ---- Pathways: interactive "explore by goal" -------------------
   One continuous colour spectrum along the brand's own axis (purple ->
   blue -> cyan): the 6 goal accents are HSL siblings, so the chip row
   reads as one system. Each chip: quiet at rest (neutral brand-tinted
   frame + a single dot of its accent); hover = accent frame + a light
   same-hue tint + dark ink + lift; active = a soft same-hue sheen +
   inset ring + glow. The content frame carries a neutral prompt until a
   goal is picked, then echoes that goal's accent (top edge + wash +
   caret), full section width so the caret always lands true. */
/* "Evidence-Based Wellness Pathways" heading — brand purple
   (Elementor writes the kit colour into its own late per-page CSS at the
   same specificity, so this override needs !important) */
.elementor-element-74ba0fd .elementor-heading-title { color: var(--vgl-purple, #6D35BB) !important; }

.vgl-goals { width: 100%; margin-top: 2.4rem; text-align: center; }
.vgl-goals__label {
	margin: 0 0 1.1rem;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--vgl-blue, #0048FF);
}

.vgl-goals__chips {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.6rem;
	width: 100%;
}
.vgl-goal-chip {
	--accent: var(--vgl-purple, #6D35BB);
	--ink: #33246B;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	width: 100%;
	margin: 0;
	border: 1.5px solid #cdd3e6;
	border-color: color-mix(in srgb, var(--vgl-purple, #6D35BB) 26%, #cfd6e6);
	background: transparent;
	color: var(--vgl-purple, #6D35BB);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.2;
	padding: 0.62rem 0.55rem;
	border-radius: 999px;
	cursor: pointer;
	transition: color 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
}
.vgl-goal-chip__t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vgl-goal-chip__dot {
	width: 7px; height: 7px;
	flex: 0 0 7px;
	border-radius: 50%;
	background: var(--accent);
	transition: background 0.22s ease;
}
.vgl-goal-chip:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
/* hover — the accent frame (same colour as the dot) + a light same-hue tint */
.vgl-goal-chip:hover {
	border-color: var(--accent);
	color: var(--ink);
	background-color: #eef1fa;
	background-color: color-mix(in srgb, var(--accent) 14%, #fff);
}
/* active — the accent frame + a deeper same-hue sheen + ring + glow */
.vgl-goal-chip[aria-expanded="true"] {
	border-color: var(--accent);
	color: var(--ink);
	background-color: color-mix(in srgb, var(--accent) 30%, #fff);
	background-image: linear-gradient( 180deg,
		color-mix(in srgb, var(--accent) 34%, #fff),
		color-mix(in srgb, var(--accent) 20%, #fff) );
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 46%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
	.vgl-goal-chip { transition: color 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, transform 0.2s ease, box-shadow 0.25s ease; }
	.vgl-goal-chip:hover { transform: translateY(-2px); }
	.vgl-goal-chip[aria-expanded="true"] {
		box-shadow:
			inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 46%, transparent),
			0 12px 26px -14px color-mix(in srgb, var(--accent) 70%, transparent);
	}
}

.vgl-goal-panel {
	--pa: #cdd3e6; --pink: var(--vgl-navy, #000B60);
	position: relative;
	width: 100%;
	margin-top: 0.85rem;                       /* tight to the chips */
	padding: 1.55rem 1.7rem;
	text-align: center;
	border: 1px solid rgba(0, 11, 96, 0.1);
	border-top: 2px solid rgba(0, 11, 96, 0.12);
	border-radius: 16px;
	background: #f8fafc;
	transition: background 0.3s ease, border-color 0.3s ease;
}
/* selected — the frame echoes the goal's accent: a tinted band at the top
   fading into a very light same-hue field (matches the chip's sheen) */
.vgl-goal-panel.is-active {
	border-color: color-mix(in srgb, var(--pa) 24%, rgba(0, 11, 96, 0.1));
	border-top-color: var(--pa);
	background:
		linear-gradient( 180deg,
			color-mix(in srgb, var(--pa) 22%, #fff) 0%,
			color-mix(in srgb, var(--pa) 9%, #fff) 46px,
			color-mix(in srgb, var(--pa) 5%, #fff) 100% );
}
.vgl-goal-panel::before {                 /* caret — hidden until a goal is active */
	content: "";
	position: absolute;
	top: -9px;
	left: var(--caret-x, 50%);
	width: 0; height: 0;
	margin-left: -9px;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	border-bottom: 9px solid var(--pa);
	opacity: 0;
	transition: left 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, border-bottom-color 0.3s ease;
}
.vgl-goal-panel.is-active::before { opacity: 1; }

.vgl-goal-panel__rest {
	margin: 0;
	color: rgba(0, 11, 96, 0.6);
	font-size: 1.02rem;
}
.vgl-goal-panel__title {
	margin: 0 0 0.4rem;
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--vgl-navy, #000B60);
}
.vgl-goal-panel__blurb {
	margin: 0 auto 1.1rem;
	max-width: none;                          /* let it use the full frame — one line on desktop */
	color: rgba(0, 11, 96, 0.82);
	font-size: 1.04rem;
	line-height: 1.5;
}
.vgl-goal-panel__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.vgl-goal-panel__links a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--pink);
	text-decoration: none;
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--pink) 22%, transparent);
	padding: 0.44rem 1rem;
	border-radius: 999px;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.vgl-goal-panel__links a::after { content: "\2192"; }
.vgl-goal-panel__links a:hover {
	border-color: transparent;
	background: color-mix(in srgb, var(--pa) 24%, #fff);
	transform: translateY(-1px);
}

@media (max-width: 991px) {
	.vgl-goals__chips { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
	.vgl-goal-panel__blurb { font-size: 1rem; }
}
@media (max-width: 560px) {
	.vgl-goals__chips { grid-template-columns: repeat(2, 1fr); }
	.vgl-goal-chip { font-size: 0.8rem; }
	.vgl-goal-panel__title { font-size: 1.1rem; }
}

/* ---- reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.vgl-pcard:hover { box-shadow: 0 10px 28px -16px rgba(0, 11, 96, 0.3); }
	.vgl-hero-back,
	.vgl-hero-figure,
	.vgl-hero-glow,
	.vgl-hero-sweep,
	.vgl-hero-fx,
	.vgl-hero-motes,
	.vgl-scan,
	.vgl-scroll-progress { display: none !important; }
	.vgl-head-ul { transform: scaleX(1) !important; }
	.vgl-goal-chip, .vgl-goal-panel { opacity: 1 !important; }
}

/* ---- mobile ---------------------------------------------------- */
@media (max-width: 767px) {
	.vgl-hero-fx { display: none; }   /* canvas is full-tier only; glow + sweep stay */
	.vgl-goals { margin-top: 1.8rem; }
	.vgl-goal-panel { padding: 1.1rem 1.15rem; }
	.vgl-tm-quote { font-size: 3.4rem; }
}

/* ---- lite tier: CSS embers (phones + folded foldables + weak devices) ---
   A few compositor-only dots — no canvas, no requestAnimationFrame. */
.vgl-hero-motes {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 2;
	mix-blend-mode: screen;
}
.vgl-hero-motes i {
	position: absolute;
	bottom: -12px;
	width: var(--s, 6px);
	height: var(--s, 6px);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 179, 102, 0.9), rgba(255, 140, 60, 0) 70%);
	opacity: 0;
	will-change: transform, opacity;
	animation-name: vgl-mote-rise;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes vgl-mote-rise {
	0%   { transform: translateY(0) scale(0.7);    opacity: 0; }
	12%  { opacity: 0.85; }
	85%  { opacity: 0.55; }
	100% { transform: translateY(-78vh) scale(1);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.vgl-hero-motes { display: none !important; }
}