/* Connect Home round 3: the hero (variants g "Atmosphere" and h "Split"). Brief: _dev/BRIEF-v3.md, Hero.
 * Markup and behaviour: hero.js. The live cover: glyph.js (Sajad's Glyph shader). */

.r3h {
	--r3h-ink: #040814;
	--r3h-on: #fff;
	--r3h-on-2: rgba(255, 255, 255, 0.78);
	--r3h-on-3: rgba(255, 255, 255, 0.6);
	--r3h-ring: #9db0ff;
	position: relative;
	font-family: var(--font-sans);
	isolation: isolate;
}
.r3h *, .r3h *::before, .r3h *::after { box-sizing: border-box; }

/* ---- the cover layer (shared): ink first, then the shader or the artwork fades in over it ---- */
.r3h-art { position: absolute; inset: 0; overflow: hidden; background: var(--r3h-ink); z-index: 0; }
.r3h-art .r3-glyph, .r3h-art .r3h-img {
	position: absolute; inset: 0; width: 100%; height: 100%; display: block;
	opacity: 0; transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1);
}
.r3h-art .r3h-img { object-fit: cover; object-position: center; }
.r3h-art .r3-glyph.is-ready, .r3h-art .r3h-img.is-ready { opacity: 1; }

/* ---- buttons ---- */
.r3h-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.4286rem; flex: none;
	height: 2.4286rem; padding: 0 1rem; border-radius: 0.6429rem; border: 1px solid transparent;
	font: 600 0.9286rem/1 var(--font-sans); white-space: nowrap; cursor: pointer; text-decoration: none;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.r3h-btn svg { width: 1.0714rem; height: 1.0714rem; flex: none; }
.r3h-btn:active { transform: scale(0.98); }
.r3h-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.r3h-btn--light { background: #fff; color: var(--navy); }
.r3h-btn--light:hover { background: #e9edff; }
.r3h-btn--glass { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.24); color: #fff; }
.r3h-btn--glass:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.34); }
.r3h-btn--outline { background: var(--card); border-color: var(--border-strong); color: var(--fg); }
.r3h-btn--outline:hover { background: var(--subtle); }
.r3h-btn--ghost { background: transparent; color: var(--fg-2); }
.r3h-btn--ghost:hover { background: var(--subtle); color: var(--fg); }
.r3h-btn--brand { background: var(--primary); color: #fff; }
.r3h-btn--brand:hover { background: var(--primary-ink); }
.r3h--g .r3h-btn:focus-visible, .r3h-side .r3h-btn:focus-visible { outline-color: var(--r3h-ring); }

/* ---- logo tile ---- */
.r3h-tile {
	flex: none; display: grid; place-items: center; background: #fff; color: var(--primary);
	width: 3.4286rem; height: 3.4286rem; border-radius: 0.8571rem;
}
.r3h-tile svg { width: 46%; height: auto; display: block; }

/* ---- status dot + links ---- */
.r3h-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; display: inline-block; }
.r3h-dot.is-live { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22); }
.r3h-dot.is-off { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; opacity: 0.7; }
.r3h-link {
	color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
	border-radius: 4px; cursor: pointer; transition: color 140ms ease, text-decoration-color 140ms ease;
}
.r3h-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.r3h-trunc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r3h-sep { opacity: 0.5; padding: 0 0.1rem; }

/* ---- entrance: content rises 6px and fades, one stagger ---- */
@keyframes r3h-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.r3h.is-entering [data-rise] { animation: r3h-rise 520ms cubic-bezier(0.23, 1, 0.32, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
@media (prefers-reduced-motion: reduce) {
	@keyframes r3h-fade { from { opacity: 0; } to { opacity: 1; } }
	.r3h.is-entering [data-rise] { animation-name: r3h-fade; }
	.r3h-art .r3-glyph, .r3h-art .r3h-img { transition-duration: 300ms; }
}

/* =====================================================================================================
   Variant g, "Atmosphere": a wide low band; the content sits on the shader in white and the band dissolves
   into the page at its foot.
   ===================================================================================================== */
.r3h--g { --r3h-h: 10.75rem; --r3h-tail: 3rem; --r3h-mark-gap: 11.5rem; }
.r3h--g .r3h-band {
	position: relative; min-height: var(--r3h-h); border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden;
	/* The foot dissolves into the page: see the veil below for why it stays blue on the way. */
	-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--r3h-tail)), transparent 100%);
	mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--r3h-tail)), transparent 100%);
}
/* A dark band faded straight to the light canvas passes through slate grey (navy at 50% over #f9f9fb is
   #828998). The veil turns the foot Connect blue before the mask takes it out, so the mid-fade is a clear
   periwinkle instead. Measured in _qa/r3-hero-fade.json. */
.r3h--g .r3h-veil {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(4, 8, 20, 0) 0, rgba(4, 8, 20, 0) calc(100% - var(--r3h-tail) * 2.1), rgba(36, 62, 214, 0.62) calc(100% - var(--r3h-tail) * 0.6), rgba(60, 88, 255, 0.5) 100%);
}
.r3h--g.is-art .r3h-veil {
	background:
		linear-gradient(90deg, rgba(4, 8, 30, 0.6) 0, rgba(4, 8, 30, 0.28) 45%, rgba(4, 8, 30, 0) 75%),
		linear-gradient(180deg, rgba(4, 8, 20, 0) 0, rgba(4, 8, 20, 0) calc(100% - var(--r3h-tail) * 2.1), rgba(36, 62, 214, 0.5) calc(100% - var(--r3h-tail) * 0.6), rgba(60, 88, 255, 0.45) 100%);
}
.r3h--g.edge-crisp .r3h-band { -webkit-mask-image: none; mask-image: none; border-radius: var(--r-xl); }
.r3h--g.edge-crisp .r3h-veil { display: none; }
.r3h--g.edge-plain .r3h-veil { display: none; }

.r3h--g .r3h-in {
	position: relative; z-index: 2; display: flex; align-items: center; gap: 1.5rem;
	min-height: calc(var(--r3h-h) - var(--r3h-tail) * 0.55);
	padding: 1.5rem var(--r3h-mark-gap) 1.25rem 1.7143rem; color: var(--r3h-on);
}
.r3h--g.is-art .r3h-in { padding-right: 1.7143rem; }
.r3h--g .r3h-id { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 1rem; }
.r3h--g .r3h-tile {
	width: 3.7143rem; height: 3.7143rem; border-radius: 1rem;
	/* glass edge: a translucent ring outside the white tile */
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 5px rgba(255, 255, 255, 0.1), 0 8px 24px -10px rgba(0, 0, 0, 0.6);
}
.r3h--g .r3h-txt { min-width: 0; display: flex; flex-direction: column; gap: 0.3571rem; }
.r3h--g .r3h-name {
	margin: 0; font: 600 1.7143rem/1.15 var(--font-display); letter-spacing: -0.02em; color: #fff;
}
.r3h--g .r3h-meta {
	display: flex; align-items: center; flex-wrap: wrap; column-gap: 0.5rem; row-gap: 0.2rem;
	font-size: 0.9643rem; line-height: 1.35; color: var(--r3h-on-2); min-width: 0;
}
.r3h--g .r3h-meta > * { min-width: 0; }
.r3h--g .r3h-status { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; max-width: 100%; }
.r3h--g .r3h-link:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.6); }
.r3h--g .r3h-link:focus-visible { outline-color: var(--r3h-ring); }
.r3h--g .r3h-act { flex: none; display: flex; align-items: center; gap: 0.5rem; }
.r3h--g .r3h-pitch { margin-right: 0.5rem; text-align: right; font-size: 0.9286rem; line-height: 1.3; color: var(--r3h-on-2); }
.r3h--g .r3h-pitch b { display: block; font: 600 0.9643rem/1.3 var(--font-display); color: #fff; letter-spacing: -0.005em; }

/* =====================================================================================================
   Variant h, "Split": one card. Left on white: date, greeting, company row, today's counts. Right ~40%:
   the shader behind a soft curved edge, holding the mark (or the artwork, or the upsell card).
   ===================================================================================================== */
.r3h--h {
	display: flex; min-height: 11.4286rem; background: var(--card); border: 1px solid var(--border);
	border-radius: var(--r-xl); overflow: hidden;
}
.r3h--h .r3h-main {
	flex: 1 1 60%; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.2857rem;
	padding: 1.4286rem 3.5rem 1.4286rem 1.7143rem; position: relative; z-index: 2;
}
.r3h--h .r3h-date { font-size: 0.9286rem; color: var(--muted-fg); }
.r3h--h .r3h-greet { margin: 0; font: 600 1.7143rem/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--ats-title, var(--fg)); }
.r3h--h .r3h-co { display: flex; align-items: center; gap: 0.7143rem; margin-top: 0.7143rem; min-width: 0; }
.r3h--h .r3h-tile { width: 2.5714rem; height: 2.5714rem; border-radius: 0.6429rem; box-shadow: inset 0 0 0 1px var(--border); }
.r3h--h .r3h-co-txt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.r3h--h .r3h-name { margin: 0; font: 600 1rem/1.3 var(--font-display); color: var(--fg); }
.r3h--h .r3h-status { display: flex; align-items: center; gap: 0.4286rem; font-size: 0.8929rem; color: var(--muted-fg); min-width: 0; }
.r3h--h .r3h-status .r3h-dot.is-off { color: var(--muted-fg); }
.r3h--h .r3h-link:hover { color: var(--primary); text-decoration-color: var(--primary-line); }
.r3h--h .r3h-act { flex: none; display: flex; align-items: center; gap: 0.3571rem; }
.r3h--h .r3h-act .r3h-btn { height: 2.2857rem; padding: 0 0.8571rem; }
.r3h--h .r3h-counts {
	display: flex; align-items: center; flex-wrap: wrap; column-gap: 0.25rem; row-gap: 0.2rem;
	margin-top: 0.8571rem; padding-top: 0.8571rem; border-top: 1px solid var(--hair);
	font-size: 0.9286rem; color: var(--muted-fg);
}
.r3h--h .r3h-count {
	display: inline-flex; align-items: baseline; gap: 0.3rem; color: var(--fg-2); cursor: pointer;
	margin: -0.2143rem -0.6rem; padding: 0.2143rem 0.6rem; border-radius: 0.5rem; border: 0; background: none; font: inherit;
	transition: background-color 140ms ease, color 140ms ease;
}
.r3h--h .r3h-count b { font: 600 0.9643rem/1 var(--font-display); color: var(--fg); font-variant-numeric: tabular-nums; transition: color 140ms ease; }
.r3h--h .r3h-count:hover { background: var(--primary-wash); color: var(--primary); }
.r3h--h .r3h-count:hover b { color: var(--primary); }
.r3h--h .r3h-count:active { background: var(--primary-soft); }
.r3h--h .r3h-count:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.r3h--h .r3h-counts .r3h-sep { margin: 0 0.5rem; }
.r3h--h .r3h-count.is-zero b { color: var(--muted-fg); }

.r3h--h .r3h-side {
	flex: 0 0 48%; position: relative; min-width: 0;
	/* Round 4: a long, eased fade from the white into the image (smootherstep over the panel's first 52%, 14 stops),
	   the Fireflies / Relevance blend: no edge, no ellipse, no banding. The text column ends where the image is
	   still under ~5% (main's right padding sits inside the overlap), and the offer card sits on the solid part. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.003) 3.7%, rgba(0,0,0,0.023) 7.4%, rgba(0,0,0,0.069) 11.1%, rgba(0,0,0,0.145) 14.9%, rgba(0,0,0,0.246) 18.6%, rgba(0,0,0,0.368) 22.3%, rgba(0,0,0,0.500) 26.0%, rgba(0,0,0,0.632) 29.7%, rgba(0,0,0,0.754) 33.4%, rgba(0,0,0,0.855) 37.1%, rgba(0,0,0,0.931) 40.9%, rgba(0,0,0,0.977) 44.6%, rgba(0,0,0,0.997) 48.3%, rgba(0,0,0,1.000) 52.0%);
	mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.003) 3.7%, rgba(0,0,0,0.023) 7.4%, rgba(0,0,0,0.069) 11.1%, rgba(0,0,0,0.145) 14.9%, rgba(0,0,0,0.246) 18.6%, rgba(0,0,0,0.368) 22.3%, rgba(0,0,0,0.500) 26.0%, rgba(0,0,0,0.632) 29.7%, rgba(0,0,0,0.754) 33.4%, rgba(0,0,0,0.855) 37.1%, rgba(0,0,0,0.931) 40.9%, rgba(0,0,0,0.977) 44.6%, rgba(0,0,0,0.997) 48.3%, rgba(0,0,0,1.000) 52.0%);
	margin-left: -7rem;
}
.r3h--h.is-art .r3h-art::after {
	content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 8, 30, 0.35), rgba(4, 8, 30, 0) 60%);
}
.r3h--h .r3h-offer {
	position: absolute; z-index: 2; right: 1.1429rem; left: auto; bottom: 1.1429rem; max-width: calc(46% - 1.1429rem);
	display: flex; align-items: center; gap: 0.8571rem; padding: 0.6429rem 0.6429rem 0.6429rem 1rem;
	border-radius: 0.8571rem; color: #fff;
	background: rgba(14, 26, 64, 0.42); border: 1px solid rgba(255, 255, 255, 0.18);
	-webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.r3h--h .r3h-offer-txt { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.r3h--h .r3h-offer-txt b { font: 600 0.9643rem/1.25 var(--font-display); white-space: nowrap; }
.r3h--h .r3h-offer-txt span { font-size: 0.8571rem; line-height: 1.3; color: var(--r3h-on-2); }
.r3h--h .r3h-deal { margin-top: 0.2857rem; font-style: normal; font-size: 0.8214rem; font-weight: 600; line-height: 1.3; color: #fff; white-space: nowrap; }
.r3h--h .r3h-offer .r3h-btn { height: 2.2857rem; padding: 0 0.8571rem; }

/* ---- narrower desktops: the counts line wraps before anything truncates ---- */
@media (max-width: 1100px) {
	.r3h--g { --r3h-mark-gap: 9.5rem; }
	.r3h--g .r3h-pitch { display: none; }
}

/* ---- phones: stacked and shorter ---- */
@media (max-width: 760px) {
	.r3h--g { --r3h-h: 0px; --r3h-tail: 2.25rem; --r3h-mark-gap: 1.25rem; }
	.r3h--g .r3h-in { flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.25rem 1.25rem calc(var(--r3h-tail) * 0.7); min-height: 0; }
	/* tile and name side by side (clear of the mark), the meta lines full width under them */
	.r3h--g .r3h-id { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.875rem; row-gap: 0.75rem; }
	.r3h--g .r3h-txt { display: contents; }
	.r3h--g .r3h-tile { width: 3rem; height: 3rem; border-radius: 0.8rem; }
	.r3h--g .r3h-name { font-size: 1.25rem; margin-right: 4.25rem; }
	.r3h--g .r3h-meta { grid-column: 1 / -1; font-size: 0.875rem; }
	.r3h--g .r3h-meta .r3h-sep-st { display: none; }
	.r3h--g .r3h-meta .r3h-status { flex: 1 0 100%; }
	.r3h--g .r3h-act { flex-wrap: wrap; }
	.r3h--g .r3h-act .r3h-btn { flex: 1 1 auto; }
	.r3h--g .r3h-pitch { display: block; flex: 1 0 100%; text-align: left; margin: 0 0 0.25rem; }

	.r3h--h { flex-direction: column-reverse; }
	.r3h--h .r3h-side {
		flex: none; height: 7rem; margin: 0 0 -1.25rem;
		-webkit-mask-image: linear-gradient(0deg, transparent 0, rgba(0,0,0,0.005) 5.8%, rgba(0,0,0,0.035) 11.7%, rgba(0,0,0,0.104) 17.5%, rgba(0,0,0,0.210) 23.3%, rgba(0,0,0,0.347) 29.2%, rgba(0,0,0,0.500) 35.0%, rgba(0,0,0,0.653) 40.8%, rgba(0,0,0,0.790) 46.7%, rgba(0,0,0,0.896) 52.5%, rgba(0,0,0,0.965) 58.3%, rgba(0,0,0,0.995) 64.2%, rgba(0,0,0,1.000) 70.0%);
		mask-image: linear-gradient(0deg, transparent 0, rgba(0,0,0,0.005) 5.8%, rgba(0,0,0,0.035) 11.7%, rgba(0,0,0,0.104) 17.5%, rgba(0,0,0,0.210) 23.3%, rgba(0,0,0,0.347) 29.2%, rgba(0,0,0,0.500) 35.0%, rgba(0,0,0,0.653) 40.8%, rgba(0,0,0,0.790) 46.7%, rgba(0,0,0,0.896) 52.5%, rgba(0,0,0,0.965) 58.3%, rgba(0,0,0,0.995) 64.2%, rgba(0,0,0,1.000) 70.0%);
	}
	/* the offer card is never masked: on phones the fade lives on the image and its veil, not on the side panel,
	   and with an offer the panel is tall enough that the whole card sits above a short, fixed-length fade */
	.r3h--h.has-offer .r3h-side { height: 11.25rem; -webkit-mask-image: none; mask-image: none; }
	.r3h--h.has-offer .r3h-art, .r3h--h.has-offer .r3h-side::after {
		-webkit-mask-image: linear-gradient(0deg, transparent 0, rgba(0,0,0,0.005) 0.229rem, rgba(0,0,0,0.035) 0.458rem, rgba(0,0,0,0.104) 0.688rem, rgba(0,0,0,0.210) 0.917rem, rgba(0,0,0,0.347) 1.146rem, rgba(0,0,0,0.500) 1.375rem, rgba(0,0,0,0.653) 1.604rem, rgba(0,0,0,0.790) 1.833rem, rgba(0,0,0,0.896) 2.062rem, rgba(0,0,0,0.965) 2.292rem, rgba(0,0,0,0.995) 2.521rem, rgba(0,0,0,1.000) 2.75rem);
		mask-image: linear-gradient(0deg, transparent 0, rgba(0,0,0,0.005) 0.229rem, rgba(0,0,0,0.035) 0.458rem, rgba(0,0,0,0.104) 0.688rem, rgba(0,0,0,0.210) 0.917rem, rgba(0,0,0,0.347) 1.146rem, rgba(0,0,0,0.500) 1.375rem, rgba(0,0,0,0.653) 1.604rem, rgba(0,0,0,0.790) 1.833rem, rgba(0,0,0,0.896) 2.062rem, rgba(0,0,0,0.965) 2.292rem, rgba(0,0,0,0.995) 2.521rem, rgba(0,0,0,1.000) 2.75rem);
	}
	.r3h--h .r3h-offer { left: 0.75rem; right: auto; bottom: auto; top: 0.75rem; max-width: calc(100% - 7rem); flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.625rem 0.75rem; }
	.r3h--h .r3h-offer .r3h-btn { height: 2.125rem; }
	.r3h--h .r3h-main { padding: 1.25rem; }
	.r3h--h .r3h-greet { font-size: 1.375rem; }
	.r3h--h .r3h-co { flex-wrap: wrap; }
	.r3h--h .r3h-act { flex: 1 0 100%; }
	.r3h--h .r3h-act .r3h-btn { flex: 1 1 0; }
	.r3h--h .r3h-counts { flex-direction: column; align-items: flex-start; row-gap: 0.4rem; }
	.r3h--h .r3h-counts .r3h-sep { display: none; }
}

/* Round 4: a Connect-blue veil under the fade's soft half, so the image never mixes with the white as a muddy grey:
   the blend runs white -> pale Connect blue -> the image. Sits over the shader or cover, under the offer card. */
.r3h--h .r3h-side::after {
	content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, rgba(92, 116, 255, 0.92) 0, rgba(76, 102, 255, 0.7) 16%, rgba(60, 88, 255, 0.36) 32%, rgba(48, 78, 255, 0.12) 46%, rgba(48, 78, 255, 0) 58%);
}
@media (max-width: 760px) {
	.r3h--h .r3h-side::after { background: linear-gradient(0deg, rgba(92, 116, 255, 0.92) 0, rgba(76, 102, 255, 0.6) 22%, rgba(48, 78, 255, 0.18) 45%, rgba(48, 78, 255, 0) 62%); }
	.r3h--h.has-offer .r3h-side::after { background: linear-gradient(0deg, rgba(92, 116, 255, 0.92) 0, rgba(76, 102, 255, 0.6) 0.875rem, rgba(48, 78, 255, 0.18) 1.75rem, rgba(48, 78, 255, 0) 2.5rem); }
}

/* the offer card stacks its button under the copy until the side panel has room for one line of each */
@media (min-width: 761px) and (max-width: 1599px) {
	.r3h--h .r3h-offer { flex-direction: column; align-items: flex-start; gap: 0.5714rem; max-width: calc(52% - 1.1429rem); padding: 0.7857rem 0.8571rem; }
	.r3h--h .r3h-offer-txt span { white-space: nowrap; }
}