/**
 * Preluence News — Social share interface.
 *
 * One variable-driven base plus per-layout and per-location modifiers. The
 * engine sets --pn-share-* on the root; layouts only restyle the surface so a
 * new layout is a handful of rules.
 */

.pn-share {
	--pn-share-icon: 18px;
	--pn-share-btn: 40px;
	--pn-share-radius: 999px;
	--pn-share-gap: 8px;
	--pn-share-pad: 11px;
	--pn-share-opacity: 100%;
	--pn-share-accent: var(--pn-primary, #6d28d9);
	--pn-share-surface: transparent;
	--pn-share-ink: currentcolor;
	--pn-share-border: var(--pn-border, rgb(100 116 139 / 28%));
	--pn-share-ring: color-mix(in srgb, var(--pn-share-accent) 55%, transparent);
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-block: 1rem;
}

.pn-share__label {
	color: var(--pn-text-muted, currentcolor);
	font-family: var(--pn-font-ui, sans-serif);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pn-share__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pn-share-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pn-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	box-sizing: border-box;
	min-width: var(--pn-share-btn);
	height: var(--pn-share-btn);
	padding-inline: var(--pn-share-pad);
	border: 0;
	border-radius: var(--pn-share-radius);
	background: var(--pn-share-surface);
	color: var(--pn-share-icon-color, var(--pn-share-ink));
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	opacity: var(--pn-share-opacity);
	-webkit-tap-highlight-color: transparent;
	transition:
		transform 0.18s var(--pn-ease, ease),
		box-shadow 0.18s var(--pn-ease, ease),
		background-color 0.18s var(--pn-ease, ease),
		color 0.18s var(--pn-ease, ease),
		border-color 0.18s var(--pn-ease, ease);
}

.pn-share__btn:hover,
.pn-share__btn:focus-visible {
	opacity: 1;
}

.pn-share__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pn-share__icon svg {
	display: block;
	width: var(--pn-share-icon);
	height: var(--pn-share-icon);
}

.pn-share__text {
	font-family: var(--pn-font-ui, sans-serif);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.pn-share__count,
.pn-share__done {
	font-size: 0.8rem;
	font-weight: 700;
}

.pn-share__done {
	color: #10b981;
}

/* ---------- Colour modes ---------- */

.pn-share--tone-light {
	--pn-share-surface: #ffffff;
	--pn-share-ink: #0b0d10;
	--pn-share-border: rgb(15 23 42 / 12%);
}

.pn-share--tone-dark {
	--pn-share-surface: #0b1020;
	--pn-share-ink: #ffffff;
	--pn-share-border: rgb(255 255 255 / 16%);
}

.pn-share--tone-auto {
	--pn-share-surface: color-mix(in srgb, currentcolor 8%, transparent);
}

/* ---------- Shared modifiers ---------- */

.pn-share.has-border .pn-share__btn {
	border: 1px solid var(--pn-share-border);
}

.pn-share.has-glow .pn-share__btn {
	box-shadow: 0 0 0 1px var(--pn-share-ring), 0 0 18px -6px var(--pn-share-accent);
}

.pn-share--shadow-soft .pn-share__btn {
	box-shadow: 0 4px 14px -8px rgb(11 16 32 / 45%);
}

.pn-share--shadow-deep .pn-share__btn {
	box-shadow: 0 14px 30px -14px rgb(11 16 32 / 62%);
}

.pn-share--shadow-floating .pn-share__btn {
	box-shadow: 0 18px 40px -18px rgb(11 16 32 / 70%);
}

.pn-share--shadow-layered .pn-share__btn {
	box-shadow:
		0 1px 0 rgb(255 255 255 / 12%) inset,
		0 10px 22px -14px rgb(11 16 32 / 60%),
		0 22px 48px -26px rgb(11 16 32 / 70%);
}

.pn-share--shadow-glow .pn-share__btn {
	box-shadow: 0 0 22px -8px var(--pn-share-accent);
}

/* ---------- Layouts ---------- */

/* Futuristic glass */
.pn-share--layout-glass .pn-share__btn {
	background: color-mix(in srgb, var(--pn-share-surface, #fff) 80%, transparent);
	-webkit-backdrop-filter: blur(12px) saturate(1.2);
	backdrop-filter: blur(12px) saturate(1.2);
	border: 1px solid color-mix(in srgb, currentcolor 14%, transparent);
}

.pn-share--layout-glass .pn-share__btn:hover {
	transform: translateY(-2px);
}

/* Floating neon */
.pn-share--layout-neon {
	--pn-share-surface: #0b1020;
	--pn-share-ink: #fff;
}

.pn-share--layout-neon .pn-share__btn {
	border: 1px solid var(--pn-share-ring);
	box-shadow: 0 0 16px -6px var(--pn-share-accent);
}

.pn-share--layout-neon .pn-share__btn:hover {
	color: var(--pn-share-accent);
	box-shadow: 0 0 26px -4px var(--pn-share-accent);
}

/* 3D depth */
.pn-share--layout-depth {
	perspective: 700px;
}

.pn-share--layout-depth .pn-share__btn {
	transform: translateZ(0);
	box-shadow: 0 10px 20px -12px rgb(11 16 32 / 65%);
}

.pn-share--layout-depth .pn-share__btn:hover {
	transform: translateY(-3px) rotateX(10deg) scale(1.04);
}

/* Minimal editorial */
.pn-share--layout-minimal {
	gap: 1rem;
}

.pn-share--layout-minimal .pn-share__btn {
	min-width: 0;
	height: auto;
	padding: 0.25rem 0;
	border-radius: 0;
	background: none;
	opacity: 1;
}

.pn-share--layout-minimal .pn-share__btn:hover {
	color: var(--pn-share-accent);
}

/* Pill buttons */
.pn-share--layout-pill .pn-share__btn {
	background: color-mix(in srgb, var(--pn-share-accent) 10%, transparent);
	color: var(--pn-share-icon-color, var(--pn-share-accent));
}

.pn-share--layout-pill .pn-share__btn:hover {
	background: var(--pn-share-accent);
	color: var(--pn-on-primary, #fff);
}

/* Circular orbit */
.pn-share--layout-orbit .pn-share__btn {
	border-radius: 50%;
	padding-inline: 0;
}

.pn-share--layout-orbit .pn-share__btn::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px dashed color-mix(in srgb, var(--pn-share-accent) 40%, transparent);
	opacity: 0;
	transition: opacity 0.2s var(--pn-ease, ease), transform 0.4s var(--pn-ease, ease);
}

.pn-share--layout-orbit .pn-share__btn:hover::after {
	opacity: 1;
	transform: rotate(45deg);
}

/* Floating action bar */
.pn-share--layout-fab .pn-share__btn {
	border-radius: 50%;
	padding-inline: 0;
	background: var(--pn-share-surface);
	box-shadow: 0 16px 34px -16px rgb(11 16 32 / 70%);
}

.pn-share--layout-fab .pn-share__btn:hover {
	transform: translateY(-4px);
}

/* Glass dock */
.pn-share--layout-dock {
	display: inline-flex;
	padding: 0.4rem;
	border-radius: var(--pn-share-radius);
	background: color-mix(in srgb, var(--pn-share-surface, #fff) 72%, transparent);
	border: 1px solid color-mix(in srgb, currentcolor 12%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
	box-shadow: 0 20px 45px -26px rgb(11 16 32 / 65%);
}

.pn-share--layout-dock .pn-share__list {
	gap: var(--pn-share-gap);
}

/* Holographic */
.pn-share--layout-holo .pn-share__btn {
	position: relative;
	background: color-mix(in srgb, var(--pn-share-surface, #fff) 70%, transparent);
}

.pn-share--layout-holo .pn-share__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(120deg, #22d3ee, #a855f7, #f472b6, #22d3ee);
	background-size: 300% 100%;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: pn-share-holo 6s linear infinite;
	pointer-events: none;
}

@keyframes pn-share-holo {

	to {
		background-position: 300% 0;
	}
}

/* Compact newsroom */
.pn-share--layout-compact .pn-share__list {
	gap: 0;
}

.pn-share--layout-compact .pn-share__btn {
	border-radius: 0;
	padding-inline: calc(var(--pn-share-pad) * 0.7);
	background: color-mix(in srgb, var(--pn-share-surface, currentcolor) 92%, transparent);
}

.pn-share--layout-compact .pn-share__btn:first-child {
	border-start-start-radius: var(--pn-share-radius);
	border-end-start-radius: var(--pn-share-radius);
}

.pn-share--layout-compact .pn-share__btn:last-child,
.pn-share--layout-compact li:last-child .pn-share__btn {
	border-start-end-radius: var(--pn-share-radius);
	border-end-end-radius: var(--pn-share-radius);
}

.pn-share--layout-compact li + li .pn-share__btn {
	border-inline-start: 1px solid color-mix(in srgb, currentcolor 16%, transparent);
}

/* Vertical rail */
.pn-share--layout-rail .pn-share__list {
	flex-direction: column;
}

.pn-share--layout-rail .pn-share__btn {
	border-radius: var(--pn-share-radius);
}

/* Horizontal bar */
.pn-share--layout-bar {
	display: block;
}

.pn-share--layout-bar .pn-share__list {
	justify-content: space-between;
}

.pn-share--layout-bar .pn-share__btn {
	flex: 1;
}

/* Expandable */
.pn-share--layout-expandable .pn-share__list {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(6px);
	transition: max-height 0.28s var(--pn-ease, ease), opacity 0.2s var(--pn-ease, ease), transform 0.2s var(--pn-ease, ease);
}

.pn-share--layout-expandable.is-open .pn-share__list {
	max-height: 320px;
	opacity: 1;
	transform: none;
}

.pn-share__toggle {
	display: none;
}

.pn-share--layout-expandable .pn-share__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	height: var(--pn-share-btn);
	padding-inline: var(--pn-share-pad);
	border: 0;
	border-radius: var(--pn-share-radius);
	background: var(--pn-share-accent);
	color: var(--pn-on-primary, #fff);
	font-weight: 700;
	cursor: pointer;
}

/* ---------- Entrance animation ---------- */

.pn-share--anim-fade,
.pn-share--anim-slide,
.pn-share--anim-scale,
.pn-share--anim-futuristic {
	opacity: 0;
	transition: opacity 0.4s var(--pn-ease, ease), transform 0.4s var(--pn-ease, ease);
}

.pn-share--anim-slide {
	transform: translateY(12px);
}

.pn-share--anim-scale {
	transform: scale(0.96);
}

.pn-share--anim-futuristic {
	transform: translateY(14px) scale(0.98);
}

.pn-share.is-in {
	opacity: 1;
	transform: none;
}

.pn-share--anim-lift .pn-share__btn:hover {
	transform: translateY(-3px);
}

.pn-share--anim-3d .pn-share__btn:hover {
	transform: translateY(-2px) rotateX(12deg) scale(1.05);
}

.pn-share--anim-glow .pn-share__btn:hover,
.pn-share--anim-futuristic .pn-share__btn:hover {
	box-shadow: 0 0 24px -6px var(--pn-share-accent);
}

.pn-share--intensity-medium .pn-share--anim-lift .pn-share__btn:hover,
.pn-share--intensity-medium.pn-share--anim-lift .pn-share__btn:hover {
	transform: translateY(-5px);
}

.pn-share--intensity-strong .pn-share--anim-lift .pn-share__btn:hover,
.pn-share--intensity-strong.pn-share--anim-lift .pn-share__btn:hover {
	transform: translateY(-8px);
}

/* Ripple feedback */
.pn-share__btn.is-rippling::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle at var(--pn-ripple-x, 50%) var(--pn-ripple-y, 50%), rgb(255 255 255 / 45%), transparent 55%);
	animation: pn-share-ripple 0.5s var(--pn-ease, ease);
	pointer-events: none;
}

@keyframes pn-share-ripple {

	from {
		opacity: 0.7;
		transform: scale(0.6);
	}

	to {
		opacity: 0;
		transform: scale(1.4);
	}
}

/* ---------- Floating locations ---------- */

.pn-share--rail {
	position: fixed;
	inset-block-start: 50%;
	z-index: 60;
	margin: 0;
	transform: translateY(-50%);
}

.pn-share--rail.pn-share--side-right {
	inset-inline-end: 0.75rem;
}

.pn-share--rail.pn-share--side-left {
	inset-inline-start: 0.75rem;
}

.pn-share--rail .pn-share__list {
	flex-direction: column;
}

@media (max-width: 1199px) {

	.pn-share--rail {
		display: none;
	}
}

.pn-share--sticky {
	position: fixed;
	inset-block-start: var(--pn-header-offset, 0px);
	inset-inline: 0;
	z-index: 55;
	margin: 0;
	padding: 0.4rem max(0.75rem, calc((100vw - var(--pn-container, 1280px)) / 2));
	background: color-mix(in srgb, var(--pn-bg, #fff) 88%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-block-end: 1px solid var(--pn-border, rgb(100 116 139 / 20%));
}

.pn-share--mobile-bar {
	position: fixed;
	inset-block-end: 0;
	inset-inline: 0;
	z-index: 55;
	display: none;
	margin: 0;
	padding: 0.4rem 0.5rem;
	padding-block-end: max(0.4rem, env(safe-area-inset-bottom));
	background: color-mix(in srgb, var(--pn-bg, #fff) 92%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-block-start: 1px solid var(--pn-border, rgb(100 116 139 / 20%));
}

@media (max-width: 767px) {

	.pn-share--mobile-bar {
		display: flex;
	}

	.pn-share--mobile-bar .pn-share__list {
		flex: 1;
		justify-content: space-around;
		gap: 0;
	}
}

/* Device visibility */
@media (min-width: 1024px) {

	.pn-share--no-desktop {
		display: none !important;
	}
}

@media (min-width: 600px) and (max-width: 1023px) {

	.pn-share--no-tablet {
		display: none !important;
	}
}

@media (max-width: 599px) {

	.pn-share--no-mobile {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {

	.pn-share,
	.pn-share *,
	.pn-share__btn::before,
	.pn-share__btn::after,
	.pn-share__list {
		animation: none !important;
		transition: none !important;
	}
}

/* JS-positioned rail and sticky bar */
.pn-share--rail.is-positioned {
	inset-block-start: 0;
	transform: none;
	transition: top 0.12s linear;
}

.pn-share--sticky {
	transition: transform 0.22s var(--pn-ease, ease), opacity 0.22s var(--pn-ease, ease);
}

.pn-share--sticky.is-hidden {
	transform: translateY(-120%);
	opacity: 0;
	pointer-events: none;
}

/* Optional share counts */
.pn-share__count:not([hidden]) {
	display: inline-block;
	opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {

	.pn-share--rail.is-positioned {
		transition: none;
	}
}