/*
 * Release Card — Final spec (1.22.518).
 *
 * Digital trophy, not a stats dashboard. Loaded on both the in-site
 * page (/wp{NN}/{user}/) and the full-screen share page
 * (/wp{NN}/{user}/share/). All trading-pack / rotating-border /
 * holographic-shine machinery is gone.
 *
 * Design rules from the final spec:
 *   - Background #0F1419 (deep blue-black, not pure black)
 *   - Card surface #1A1F2E with #2A3142 1px border
 *   - Off-white text #E8EAED, secondary #A1A6B4, tertiary #6B7280
 *   - Accent #174ECF (WordPress blue) used sparingly
 *   - Verified green #10B981, gold for badges only #F59E0B
 *   - No drop shadows, glassmorphism, gradients, animations
 *   - Geist Sans / Inter typography
 *   - 24/30/40/60 spacing system, three equal-width stat boxes
 *   - All content horizontally centered
 */

* { box-sizing: border-box; }

html.release-share-html,
.release-share-body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	/* 1.22.588 — Inter leads the stack (loaded via Google Fonts in
	 * the share page head). System-stack fallbacks remain so the
	 * page is still readable if Google Fonts is blocked. The
	 * html-to-image PNG export embeds Inter glyphs, so downloaded
	 * cards look identical across operating systems. */
	font-family: 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: #0F1419;
	color: #E8EAED;
	overflow-x: hidden;
}

.release-share-body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;
	padding: 60px 24px;
}

/* ---------- Top bar (wordmark + back link) ---------- */
.release-share__top {
	width: 100%;
	max-width: 1200px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40px;
}
.release-share__wordmark {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	opacity: 0.85;
}
.release-share__wordmark:hover { opacity: 1; }
.release-share__wordmark-img {
	display: block;
	height: 24px;
	width: auto;
}
.release-share__back {
	font-size: 13px;
	color: #6B7280;
	text-decoration: none;
	letter-spacing: 0.02em;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.release-share__back:hover { color: #A1A6B4; }
.release-share__back .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* ---------- Stage (centered, single column) ---------- */
.release-share__stage {
	width: 100%;
	max-width: 720px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}
.release-share__brandblock {
	text-align: center;
}
.release-share__brandblock-tagline {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 2px;
	color: #6B7280;
	text-transform: uppercase;
}

/* ============================================================
 * .wpf-card — compact celebration trophy (1.22.519)
 *
 * Sized down from the earlier 720px / 60px-padded version so the
 * card reads as a *celebration artifact*, not a profile page. The
 * celebration banner at the top makes the WP-release context the
 * first thing you see; the owner's optional message anchors the
 * personal tone.
 * ============================================================ */
.wpf-card {
	/* 1.22.520 — accent overridable per-card via inline custom props
	 * (set by the partial when an owner has picked a theme swatch). */
	--card-accent: #174ECF;        /* WordPress blue */
	--card-accent-soft: #93B4F4;   /* light tint for the celebration banner */

	/* 1.22.549 — Light/dark theme tokens. Default values are the
	 * dark palette; .wpf-card--light overrides them below. Every
	 * color in this stylesheet that needs to flip references one
	 * of these vars instead of a literal. */
	--card-bg:         #1A1F2E;
	--card-border:     rgba(42, 49, 66, 0.6);
	--card-surface-2:  #252B3D;
	--card-divider:    rgba(42, 49, 66, 0.5);
	--card-name:       #E8EAED;
	--card-text:       #E8EAED;
	--card-muted:      #A1A6B4;
	--card-muted-2:    #6B7280;
	--card-verified-bg: #10B981;
	--card-verified-ring: #1A1F2E;   /* matches --card-bg */
	--card-wp-mark-opacity: 0.05;

	position: relative;
	width: 100%;
	max-width: 400px;
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 4px;
	padding: 32px 32px 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	overflow: hidden;
	/* 1.22.525 — Entry reveal: card fades in on first paint. */
	animation: wpf-card-enter 700ms cubic-bezier(0.16, 1, 0.3, 1) both;

	/* 1.22.568 — 3D mouse-tilt. Custom props default to 0deg so
	 * the card renders flat until JS sets values on mousemove. The
	 * share page's inline script writes them; the in-site card
	 * page leaves them alone, so the card stays flat there. */
	--tilt-rotate-x: 0deg;
	--tilt-rotate-y: 0deg;
	--shine-x: 50%;
	--shine-y: 50%;
	transform: perspective(1000px) rotateX(var(--tilt-rotate-x)) rotateY(var(--tilt-rotate-y));
	transform-style: preserve-3d;
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* 1.22.568 — Lift the card on hover with a tighter response curve.
 * Combined with the JS-driven tilt this gives a true "trading-card
 * in your hand" feel. Box-shadow strengthens to sell the depth. */
.wpf-card:hover {
	transition: transform 80ms ease-out,
	            box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
	box-shadow:
		0 24px 48px -16px color-mix(in srgb, var(--card-accent) 35%, transparent),
		0 8px 24px -8px rgba(0, 0, 0, 0.35);
}

/* 1.22.568 — Cursor-tracking shine. A radial gradient layered on
 * top of the card that follows the cursor via --shine-x/y. Stays
 * subtle (8% opacity) so it reads as light, not glare. Disabled
 * when the cursor isn't over the card. */
.wpf-card::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at var(--shine-x) var(--shine-y),
		rgba(255, 255, 255, 0.10) 0%,
		rgba(255, 255, 255, 0)    35%);
	opacity: 0;
	transition: opacity 200ms ease;
	z-index: 5;
	border-radius: inherit;
}
.wpf-card:hover::before { opacity: 1; }
.wpf-card--light:hover::before {
	/* On light cards a white shine vanishes — use a soft accent
	 * glow instead so the effect stays visible. */
	background: radial-gradient(circle at var(--shine-x) var(--shine-y),
		color-mix(in srgb, var(--card-accent) 14%, transparent) 0%,
		transparent 40%);
}

/* 1.22.549 — Light-mode overrides. Only the tokens flip; layout +
 * accent gradients + animations are mode-agnostic so light cards
 * keep all the celebration character (confetti, hero glow, etc.)
 * just on a white surface. */
.wpf-card--light {
	--card-bg:         #FFFFFF;
	--card-border:     #E2E8F0;
	--card-surface-2:  #F8FAFC;
	--card-divider:    #E2E8F0;
	--card-name:       #0F172A;
	--card-text:       #0F172A;
	--card-muted:      #475569;
	--card-muted-2:    #64748B;
	--card-verified-ring: #FFFFFF;   /* matches the light --card-bg */
	--card-wp-mark-opacity: 0.07;
}

/* ============================================================
 * 1.22.525 — Celebration animations.
 *
 * All animations are CSS-only and gated behind
 * @media (prefers-reduced-motion: no-preference) at the bottom
 * of this file so users who opt out of motion get the static
 * card. Names are prefixed wpf- to avoid collisions.
 * ============================================================ */
@keyframes wpf-card-enter {
	/* 1.22.568 — Opacity-only entry. The tilt transform on
	 * .wpf-card needs to be the always-live `transform` value, so
	 * the entry animation no longer sets transform (which would
	 * win during + after the animation thanks to `both` fill mode
	 * and steal the tilt). */
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes wpf-confetti-drift {
	0%   { transform: translateY(0)    scale(1);    opacity: var(--cf-op, 0.5); }
	50%  { transform: translateY(-6px) scale(1.15); opacity: 1; }
	100% { transform: translateY(0)    scale(1);    opacity: var(--cf-op, 0.5); }
}
@keyframes wpf-sparkle-twinkle {
	0%, 100% { opacity: 0.35; transform: scale(0.9)  rotate(0deg); }
	50%      { opacity: 1;    transform: scale(1.25) rotate(180deg); }
}
@keyframes wpf-version-glow {
	0%, 100% {
		text-shadow:
			0 0 1px rgba(0, 0, 0, 0.35),
			0 0 18px color-mix(in srgb, var(--card-accent-soft) 50%, transparent);
	}
	50% {
		text-shadow:
			0 0 1px rgba(0, 0, 0, 0.35),
			0 0 36px color-mix(in srgb, var(--card-accent-soft) 85%, transparent);
	}
}
@keyframes wpf-verified-pop {
	0%   { transform: scale(0)    rotate(-30deg); opacity: 0; }
	60%  { transform: scale(1.18) rotate(8deg);   opacity: 1; }
	100% { transform: scale(1)    rotate(0deg);   opacity: 1; }
}

/* 1.22.521 — WordPress logo watermark. Anchored bottom-right,
 * tilted, very low opacity, tinted by the card accent. Pattern
 * mirrors the speakers-card mic watermark — a clear "this is a
 * WordPress thing" signal at a glance without competing with the
 * foreground content. */
.wpf-card__wp-mark {
	position: absolute;
	/* 1.22.547 — Pushed further off-screen + shrunk + faded so it
	 * no longer overlaps the social icons / footer URL. */
	right: -42px;
	bottom: -46px;
	width: 150px;
	height: 150px;
	color: var(--card-accent);
	opacity: var(--card-wp-mark-opacity);
	transform: rotate(-8deg);
	pointer-events: none;
	z-index: 0;
}
/* All in-flow card content sits above the watermark. :not() so the
 * absolute-positioned watermark keeps its own positioning. */
.wpf-card > *:not(.wpf-card__wp-mark) {
	position: relative;
	z-index: 1;
}

/* 1.22.524 — Celebration hero. Owns the top third of the card
 * so it reads as a true launch artifact: prominent WPFolks logo +
 * "Presents" eyebrow, oversized "WordPress 7.0" headline in the
 * accent color, launch-day date line. Decorative confetti dots
 * scatter across the gradient background as a clear celebration
 * cue, not just a tinted strip. Avatar overlaps the hero/body
 * boundary below (margin-top: -28px on .wpf-card__avatar-wrap). */
.wpf-card__hero {
	position: relative;
	/* 1.22.527 — align-self: stretch + negative margins together
	 * make the bar truly full card width. The card is a flex
	 * column with align-items: center, so without `stretch` the
	 * hero is sized to its content and centered — the negative
	 * margins just shifted that narrower box around. Stretch
	 * pulls the box to the cross-axis edges; negative margins
	 * then break out of the card's 32px padding. */
	align-self: stretch;
	margin: -32px -32px 0;
	padding: 22px 20px 36px;
	/* 1.22.526 — Bar is now a true filled band (solid base color)
	 * with decorative radial highlights on top. Earlier version
	 * used transparent fades that made the edges look insetted
	 * against the dark card background. The solid base ensures
	 * the bar reads as full-card-width at a glance. */
	background:
		radial-gradient(circle at 20% 0%,
			color-mix(in srgb, var(--card-accent) 55%, transparent) 0%,
			transparent 55%),
		radial-gradient(circle at 80% 100%,
			color-mix(in srgb, var(--card-accent) 40%, transparent) 0%,
			transparent 55%),
		linear-gradient(180deg,
			color-mix(in srgb, var(--card-accent) 38%, #1A1F2E) 0%,
			color-mix(in srgb, var(--card-accent) 22%, #1A1F2E) 100%);
	border-bottom: 1px solid color-mix(in srgb, var(--card-accent) 50%, transparent);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	overflow: hidden;
}

/* 1.22.525 — Animated particle field. Two primitives: round
 * particles (.wpf-particle) that drift up-and-down with a soft
 * scale pulse, and stars (.wpf-star — actual ✦ glyphs) that
 * twinkle by rotating + scaling + fading. Mixed positions and
 * staggered delays so the field reads organic, not metronomic. */
.wpf-card__hero-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

/* Round particles — drift + soft pulse. --cf-op holds the
 * resting opacity so the keyframe can return to it cleanly. */
.wpf-particle {
	position: absolute;
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--card-accent-soft);
	opacity: var(--cf-op, 0.5);
	will-change: transform, opacity;
}
.wpf-particle:nth-child(1) { top: 14%; left: 8%;  width: 4px; height: 4px; --cf-op: 0.45; }
.wpf-particle:nth-child(2) { top: 38%; left: 14%; width: 8px; height: 8px; background: #FBBF24; --cf-op: 0.55; }
.wpf-particle:nth-child(3) { top: 70%; left: 6%;  width: 5px; height: 5px; --cf-op: 0.4; }
.wpf-particle:nth-child(4) { top: 18%; left: 88%; width: 5px; height: 5px; --cf-op: 0.5; }
.wpf-particle:nth-child(5) { top: 55%; left: 92%; width: 7px; height: 7px; background: #FBBF24; --cf-op: 0.5; }
.wpf-particle:nth-child(6) { top: 80%; left: 84%; width: 4px; height: 4px; --cf-op: 0.45; }
.wpf-particle:nth-child(7) { top: 12%; left: 50%; width: 3px; height: 3px; --cf-op: 0.6; }
.wpf-particle:nth-child(8) { top: 82%; left: 46%; width: 4px; height: 4px; background: #FBBF24; --cf-op: 0.5; }

/* Stars — actual ✦ glyphs styled and twinkled. Sized in font-
 * size so transform: scale() reads naturally. */
.wpf-star {
	position: absolute;
	font-size: 10px;
	line-height: 1;
	color: #FBBF24;
	opacity: 0.5;
	will-change: transform, opacity;
	text-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
}
.wpf-star:nth-child(9)  { top: 26%; left: 28%; font-size: 12px; color: var(--card-accent-soft); }
.wpf-star:nth-child(10) { top: 62%; left: 22%; font-size: 8px; }
.wpf-star:nth-child(11) { top: 32%; left: 72%; font-size: 11px; }
.wpf-star:nth-child(12) { top: 74%; left: 66%; font-size: 9px; color: var(--card-accent-soft); }
.wpf-star:nth-child(13) { top: 50%; left: 50%; font-size: 7px; opacity: 0.4; }
.wpf-star:nth-child(14) { top: 22%; left: 60%; font-size: 9px; }

/* "WPFolks · Presents" branding row — sits above the headline so
 * the WPFolks association is the FIRST thing read in the hero. */
.wpf-card__hero-brand {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #ffffff;
}
.wpf-card__hero-logo {
	display: block;
	height: 18px;
	width: auto;
}
.wpf-card__hero-brand-sep {
	color: var(--card-accent-soft);
	font-weight: 700;
	opacity: 0.7;
}
.wpf-card__hero-brand-text {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--card-accent-soft);
}

/* The headline — the focal point of the card. "WordPress" in
 * white, version number in accent color, oversized. */
.wpf-card__hero-title {
	position: relative;
	margin: 4px 0 0;
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	/* Hero text stays white in both modes — sits on the accent-
	 * colored hero bar, which is already a colored surface. */
	color: #ffffff;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.6px;
	line-height: 1;
}
.wpf-card__hero-wp { color: #ffffff; }
/* 1.22.531 — Version sits ON the accent-colored bar, so an
 * accent fill blended into the background. White fill + soft
 * accent-tinted glow gives crisp contrast on every theme. */
.wpf-card__hero-version {
	color: #FFFFFF;
	font-size: 38px;
	font-weight: 800;
	letter-spacing: -1.5px;
	text-shadow:
		0 0 1px rgba(0, 0, 0, 0.35),
		0 0 24px color-mix(in srgb, var(--card-accent-soft) 60%, transparent);
}

/* Launch-day line — small, accent-soft, with sparkles. Closes out
 * the hero before the avatar overlaps the body below. */
.wpf-card__hero-date {
	position: relative;
	margin-top: 2px;
	color: var(--card-accent-soft);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.wpf-card__hero-spark {
	color: var(--card-accent-soft);
	font-size: 9px;
	opacity: 0.85;
}

/* 1.22.524 — Top row now holds only the role-tag pill (centered).
 * The WPFolks branding moved into the hero, so the right slot is
 * no longer needed. Negative top margin pulls the role tag up so
 * it sits just under the hero's bottom edge as a label flag. */
.wpf-card__top {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: -16px 0 10px;
}
.wpf-card__role-tag {
	display: inline-block;
	padding: 5px 12px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.4px;
	/* Role tag sits on the accent-colored pill in both modes —
	 * white text reads cleanly on every accent color. */
	color: #ffffff;
	background: var(--card-accent);
	border: 1px solid color-mix(in srgb, var(--card-accent) 60%, #ffffff 0%);
	border-radius: 999px;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--card-accent) 35%, transparent);
	/* 1.22.586 — Prevent wrap in the html-to-image PNG capture.
	 * The SVG <foreignObject> layout sometimes resolves box widths
	 * fractionally narrower than the live browser, which pushes
	 * roles like "Contributing Developer" onto two lines in the
	 * exported PNG even when they fit on one in the browser. */
	white-space: nowrap;
}

/* Avatar — 120px (compact). WP-blue border on claimed, neutral on
 * unclaimed (set under .wpf-card--unclaimed below). */
.wpf-card__avatar-wrap {
	position: relative;
	display: inline-flex;
	margin-top: 10px;
	margin-bottom: 14px;
}
.wpf-card__avatar {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--card-accent);
	background: var(--card-surface-2);
}
.wpf-card__verified {
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--card-verified-bg);
	border: 2px solid var(--card-verified-ring);
	border-radius: 50%;
	color: #ffffff;
}
.wpf-card__verified svg {
	display: block;
	width: 14px;
	height: 14px;
}

/* Identity */
.wpf-card__name {
	margin: 0 0 3px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.4px;
	color: var(--card-name);
	line-height: 1.15;
}
.wpf-card__handle {
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--card-muted);
}

/* 1.22.535 — Profile tagline pill. Sits between @handle and the
 * bio. Reads the user's _wpfolks_tagline. Accent-tinted so it
 * picks up the card theme.
 * 1.22.558 — Text uses the saturated --card-accent (not the pale
 * --card-accent-soft) so it reads cleanly on both dark and light
 * card backgrounds. Pale accent washed out on the light surface. */
.wpf-card__tagline {
	display: inline-block;
	margin: 10px;
	padding: 4px 12px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--card-accent);
	background: color-mix(in srgb, var(--card-accent) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--card-accent) 25%, transparent);
	border-radius: 999px;
	max-width: 90%;
}

/* Stats grid — three equal-width boxes, tighter than before. */
.wpf-card__stats {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 8px;
	margin-bottom: 22px;
}
.wpf-card__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 14px 10px;
	background: #252B3D;
	border-radius: 10px;
}
.wpf-card__stat-num {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.4px;
	color: #E8EAED;
	line-height: 1;
}
.wpf-card__stat-label {
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #6B7280;
}

/* Badge row (top 3) */
.wpf-card__badge-row {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 500;
	color: #E8EAED;
	line-height: 1.4;
}
.wpf-card__badge-star {
	color: #F59E0B;
	margin-right: 5px;
}

/* Bio — plain, no italics, no quote marks. */
.wpf-card__bio {
	margin: 16px 0 12px;
	max-width: 380px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--card-muted);
	/* 1.22.546 — Same long-string protection as the celebration
	 * message above. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Celebration message — owner's optional note. Soft border + leading
 * quotation mark makes it clearly a personal voice distinct from
 * the bio. Gold tint reinforces the celebration framing. */
.wpf-card__celebration-msg {
	margin: 14px 0 14px;
	max-width: 380px;
	/* 1.22.547 — Padding trimmed + 3-line cap so the celebration
	 * quote supports the card instead of dominating it. */
	padding: 10px 14px;
	background: rgba(245, 158, 11, 0.06);
	border: 1px solid rgba(245, 158, 11, 0.22);
	border-radius: 10px;
	color: var(--card-text);
	font-size: 12px;
	line-height: 1.45;
	display: flex;
	gap: 8px;
	align-items: flex-start;
	text-align: left;
}
.wpf-card__celebration-msg-icon {
	flex: none;
	color: #F59E0B;
	font-size: 18px;
	line-height: 1;
	margin-top: 1px;
}
.wpf-card__celebration-msg-text {
	flex: 1;
	/* 1.22.546 — Long single-word strings (typos, URLs without
	 * spaces) overflow the flex container. min-width: 0 lets the
	 * flex child shrink below its content size; overflow-wrap +
	 * word-break let any character become a break point. */
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
	/* 1.22.547 — 3-line cap so the celebration quote supports the
	 * card instead of dominating it. WebKit line-clamp + max-height
	 * fallback derived from font-size * line-height * 3. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	max-height: calc(12px * 1.45 * 3);
	overflow: hidden;
}

/* Activity line ("3 plugins · 12 snippets · 5 videos").
 * 1.22.547 — Color bumped from #6B7280 → #A1A6B4 to match the bio
 * tone. Earlier value was ~4.1:1 contrast on the card surface; the
 * new value is ~6:1, comfortably above WCAG AA. */
.wpf-card__activity {
	margin: 10px 0 10px;
	font-size: 11px;
	color: var(--card-muted);
	letter-spacing: 0.02em;
}

/* 1.22.529 — Viral CTA. Routes through the card owner's
 * referral URL (wpfolks_get_user_referral_url) so signups credit
 * them. Claimed cards only. Subtle handle note under the button
 * makes the referral transparent without feeling salesy. */
.wpf-card__join {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 10px 0 10px;
}
.wpf-card__join-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	margin-bottom: 14px;
	background: var(--card-accent);
	color: #ffffff;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: 0.02em;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--card-accent) 30%, transparent);
	transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.wpf-card__join-btn:hover,
.wpf-card__join-btn:focus-visible {
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: 0 8px 22px color-mix(in srgb, var(--card-accent) 40%, transparent);
}
.wpf-card__join-btn span {
	transition: transform 0.15s ease;
}
.wpf-card__join-btn:hover span { transform: translateX(2px); }
.wpf-card__join-note {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--card-muted-2);
	text-transform: uppercase;
}

/* "Credited in WordPress 6.9" line (unclaimed cards) */
.wpf-card__credited {
	margin: 18px 0 20px;
	font-size: 13px;
	color: var(--card-muted);
}

/* Primary Claim CTA */
.wpf-card__claim-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 24px;
	margin-bottom: 22px;
	background: var(--card-accent);
	color: #ffffff;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: filter 0.15s ease, transform 0.15s ease;
}
.wpf-card__claim-btn:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

/* Footer — icon socials row + canonical card URL caption */
.wpf-card__footer {
	width: 100%;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--card-divider);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

/* 1.22.523 — Icon-only social row. wp.org is always first; the
 * rest render only when the WPFolks user has them set. Hover
 * tints to the card accent so the row picks up the owner-chosen
 * color scheme. */
.wpf-card__socials {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
.wpf-card__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--card-surface-2);
	border: 1px solid var(--card-divider);
	color: var(--card-muted);
	text-decoration: none;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.wpf-card__social:hover,
.wpf-card__social:focus-visible {
	color: var(--card-accent);
	background: color-mix(in srgb, var(--card-accent) 14%, var(--card-surface-2));
	border-color: color-mix(in srgb, var(--card-accent) 45%, transparent);
	transform: translateY(-1px);
}
.wpf-card__social svg {
	display: block;
	width: 16px;
	height: 16px;
}

.wpf-card__footer-link {
	font-size: 11px;
	font-weight: 500;
	color: var(--card-muted-2);
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: color 0.15s ease;
}
.wpf-card__footer-link:hover { color: var(--card-muted); }

/* Unclaimed-card adjustments */
.wpf-card--unclaimed .wpf-card__avatar {
	border-color: #2A3142;
	filter: saturate(0.6);
}

/* ---------- Page-level actions (share / login row) ---------- */
.release-share__actions {
	width: 100%;
	max-width: 720px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	position: relative;
}

.release-share__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 220px;
	padding: 12px 24px;
	border: 1px solid rgba(42, 49, 66, 0.8);
	background: transparent;
	color: #E8EAED;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	letter-spacing: 0.02em;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.release-share__cta:hover {
	background: rgba(42, 49, 66, 0.5);
	border-color: rgba(255, 255, 255, 0.18);
}
.release-share__cta--primary {
	background: #174ECF;
	color: #ffffff;
	border-color: #174ECF;
}
.release-share__cta--primary:hover {
	background: #1A56E0;
	border-color: #1A56E0;
}

.release-share__secondary {
	display: flex;
	gap: 14px;
	font-size: 12px;
	color: #6B7280;
}
.release-share__secondary a,
.release-share__secondary button {
	background: none;
	border: 0;
	color: #A1A6B4;
	text-decoration: none;
	cursor: pointer;
	padding: 6px 10px;
	font: inherit;
	font-size: 12px;
	border-radius: 6px;
	transition: color 0.15s ease, background 0.15s ease;
}
.release-share__secondary a:hover,
.release-share__secondary button:hover {
	color: #E8EAED;
	background: rgba(42, 49, 66, 0.5);
}

.release-share__cta-meta {
	margin: 0;
	font-size: 12px;
	color: #6B7280;
	text-align: center;
}
.release-share__cta-meta a {
	color: #A1A6B4;
	text-decoration: none;
	font-weight: 500;
}
.release-share__cta-meta a:hover { color: #E8EAED; }

.release-share__toast {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%);
	padding: 8px 14px;
	background: rgba(15, 20, 25, 0.95);
	border: 1px solid rgba(42, 49, 66, 0.8);
	color: #E8EAED;
	border-radius: 8px;
	font-size: 12px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.release-share__toast.is-visible { opacity: 1; }

/* ---------- Footer (page level) ---------- */
.release-share__footer {
	margin-top: 60px;
	font-size: 11px;
	color: #6B7280;
	text-align: center;
	letter-spacing: 0.02em;
}
.release-share__footer a {
	color: #A1A6B4;
	text-decoration: none;
}
.release-share__footer a:hover { color: #E8EAED; }

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
	.release-share-body { padding: 24px 14px; }
	.wpf-card { padding: 28px 22px 24px; }
	/* 1.22.526 — Hero margin matches the reduced card padding so
	 * the bar still spans card-edge-to-edge without overshooting. */
	.wpf-card__hero { margin: -28px -22px 0; padding: 20px 16px 32px; }
	.wpf-card__hero-version { font-size: 32px; }
	.wpf-card__hero-title { font-size: 22px; }
	.wpf-card__avatar { width: 104px; height: 104px; }
	.wpf-card__name { font-size: 22px; }
	.wpf-card__stat-num { font-size: 18px; }
}

/* ============================================================
 * 1.22.571 — Page-load fireworks burst. Each particle starts at
 * a launch point along the bottom edge of the viewport, fans
 * outward in an upward direction via --end-x / --end-y (set
 * inline per piece in JS), peaks, then drifts slightly down +
 * fades — like a real firework pop with a faint gravity tail.
 * The host element is GC'd by the JS after 5s.
 * ============================================================ */
.wpf-fireworks-burst {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 9999;
}
/* 1.22.573 — Phase 1: rocket streak. Thin elongated dot that
 * rises from the bottom edge to the apex height (set per
 * firework via --apex-y inline). Box-shadow ahead of the rocket
 * gives the bright leading dot a tail. Disappears at apex
 * because the spark burst takes over from there. */
.wpf-fw-rocket {
	position: absolute;
	bottom: 0;
	width: 3px;
	height: 14px;
	border-radius: 2px;
	opacity: 0;
	animation: wpf-fw-rocket-rise 0.7s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
	will-change: transform, opacity;
	transform: translate3d(0, 0, 0);
}
@keyframes wpf-fw-rocket-rise {
	0%   { transform: translate3d(0, 30px, 0);        opacity: 0; }
	8%   { opacity: 1; }
	85%  { opacity: 1; }
	100% { transform: translate3d(0, var(--apex-y), 0); opacity: 0; }
}

/* 1.22.573 — Phase 2: spark burst. Starts at the apex (positioned
 * via inline `bottom: apexPx`), explodes outward in a random
 * 360° direction (--end-x, --end-y), then falls under simulated
 * gravity in the tail of the animation. The 4-keyframe curve is
 * the realistic fireworks parabola — burst-out (10%), reach
 * radial peak (45%), arc-down + fade (100%). */
.wpf-fw-spark {
	position: absolute;
	border-radius: 50%;
	opacity: 0;
	animation-name: wpf-fw-spark-burst;
	animation-timing-function: cubic-bezier(0.3, 0.1, 0.7, 1);
	animation-fill-mode: forwards;
	will-change: transform, opacity;
	transform: translate3d(0, 0, 0);
}
@keyframes wpf-fw-spark-burst {
	/* 1.22.574 — Three-phase trajectory:
	 *
	 *   Phase 2a (0% → 10%):  burst outward fast from apex toward
	 *                         radial peak.
	 *   Phase 2b (10% → 45%): reach the radial peak.
	 *   Phase 3a (45% → 80%): gravity pulls the spark down to the
	 *                         floor. Because each spark started at
	 *                         `bottom: var(--floor-y)`, translateY
	 *                         equal to --floor-y lands it exactly
	 *                         on the bottom edge of the viewport.
	 *   Phase 3b (80% → 100%): spark spreads horizontally along
	 *                         the floor and fades — like real
	 *                         debris settling. --floor-x is wider
	 *                         than --end-x for outward inertia. */
	0%   { transform: translate3d(0, 0, 0) scale(0.4);
	       opacity: 0; }
	8%   { opacity: 1; }
	10%  { transform: translate3d(calc(var(--end-x) * 0.45), calc(var(--end-y) * 0.45), 0) scale(1);
	       opacity: 1; }
	45%  { transform: translate3d(calc(var(--end-x) * 0.98), var(--end-y), 0) scale(1);
	       opacity: 1; }
	80%  { transform: translate3d(calc(var(--end-x) * 1.15), var(--floor-y), 0) scale(0.7);
	       opacity: 0.85; }
	100% { transform: translate3d(var(--floor-x), var(--floor-y), 0) scale(0.3);
	       opacity: 0; }
}

/* ============================================================
 * 1.22.525 — Motion. Everything below is gated behind
 * prefers-reduced-motion: no-preference so users who opt out of
 * motion get the static card (the entry animation on .wpf-card
 * is also disabled below). Keyframes themselves live near the
 * top of this file next to .wpf-card so they're co-located with
 * the styles they target.
 *
 * Animation choreography:
 *   - Card:     gentle fade + slide-up on first paint (700ms)
 *   - Particles (8): drift up-and-down + soft scale pulse,
 *                    each with a unique 3-5s duration + delay
 *                    so the field reads organic, never in sync.
 *   - Stars (6):    twinkle (rotate + scale + opacity), staggered.
 *   - Version "7.0": text-shadow glow pulse, 3s loop.
 *   - Verified ✓:    one-shot pop-in on load (after card enters).
 * ============================================================ */
@media (prefers-reduced-motion: no-preference) {
	.wpf-particle {
		animation: wpf-confetti-drift 4s ease-in-out infinite;
	}
	.wpf-particle:nth-child(1) { animation-duration: 4.2s; animation-delay: 0s; }
	.wpf-particle:nth-child(2) { animation-duration: 3.5s; animation-delay: 0.4s; }
	.wpf-particle:nth-child(3) { animation-duration: 4.8s; animation-delay: 0.8s; }
	.wpf-particle:nth-child(4) { animation-duration: 3.8s; animation-delay: 0.2s; }
	.wpf-particle:nth-child(5) { animation-duration: 4.5s; animation-delay: 1.1s; }
	.wpf-particle:nth-child(6) { animation-duration: 3.2s; animation-delay: 0.6s; }
	.wpf-particle:nth-child(7) { animation-duration: 5.0s; animation-delay: 1.5s; }
	.wpf-particle:nth-child(8) { animation-duration: 4.0s; animation-delay: 0.3s; }

	.wpf-star {
		animation: wpf-sparkle-twinkle 2.4s ease-in-out infinite;
	}
	.wpf-star:nth-child(9)  { animation-duration: 2.4s; animation-delay: 0s; }
	.wpf-star:nth-child(10) { animation-duration: 3.0s; animation-delay: 0.6s; }
	.wpf-star:nth-child(11) { animation-duration: 2.0s; animation-delay: 1.0s; }
	.wpf-star:nth-child(12) { animation-duration: 2.8s; animation-delay: 0.3s; }
	.wpf-star:nth-child(13) { animation-duration: 3.4s; animation-delay: 1.4s; }
	.wpf-star:nth-child(14) { animation-duration: 2.2s; animation-delay: 0.8s; }

	.wpf-card__hero-version {
		animation: wpf-version-glow 3s ease-in-out infinite;
	}
	.wpf-card__hero-spark {
		animation: wpf-sparkle-twinkle 2.8s ease-in-out infinite;
	}
	.wpf-card__hero-spark:last-child { animation-delay: 1.4s; }

	.wpf-card__verified {
		animation: wpf-verified-pop 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 800ms both;
	}
}

/* Static fallback for users with prefers-reduced-motion: reduce.
 * Disables the card entry animation explicitly (the others above
 * never get applied since they're inside the no-preference
 * media query). */
@media (prefers-reduced-motion: reduce) {
	.wpf-card { animation: none; }
}