/* ==========================================================================
 * Ask AI widget + post tags
 * Glass surfaces on the template tokens (--stoke, --primary, --tertiary).
 * Variants: inline (blog, comparison, footer band), rail (case study:
 * floats in the right gutter only where the gutter is wide enough, and sits
 * inline everywhere else so it never covers content or the chat launcher).
 * ========================================================================== */

@property --ask-ai-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.ask-ai {
	--ask-ai-glass: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025));
	--ask-ai-line: rgba(255, 255, 255, .12);
	--ask-ai-accent: var(--primary, #b638ff);
	--ask-ai-accent-2: var(--tertiary, #7350ff);
	--ask-ai-text: var(--paragraph, #a5a2b8);
	position: relative;
	display: flex;
	font-family: Inter, sans-serif;
	z-index: 2;
}

.ask-ai__panel {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 12px 16px;
	padding: 10px 12px 10px 18px;
	border-radius: 999px;
	background: var(--ask-ai-glass);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 40px -18px rgba(115, 80, 255, .55);
	isolation: isolate;
	animation: ask-ai-in .7s cubic-bezier(.2, .8, .2, 1) both;
}

/* Animated gradient hairline around the glass. */
.ask-ai__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	padding: 1px;
	border-radius: inherit;
	background: conic-gradient(from var(--ask-ai-angle), var(--ask-ai-line) 0%, var(--ask-ai-accent) 12%, var(--ask-ai-line) 25%, var(--ask-ai-line) 50%, var(--ask-ai-accent-2) 62%, var(--ask-ai-line) 75%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: ask-ai-spin 6s linear infinite;
	pointer-events: none;
}

.ask-ai__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text, #f3f3f3);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

.ask-ai__spark {
	flex: none;
	color: var(--ask-ai-accent);
	filter: drop-shadow(0 0 6px rgba(182, 56, 255, .8));
	animation: ask-ai-twinkle 2.4s ease-in-out infinite;
}

.ask-ai__list {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ask-ai__link {
	--ask-ai-c: var(--ask-ai-accent);
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
	animation: ask-ai-pop .55s cubic-bezier(.2, .8, .2, 1.2) both;
	animation-delay: calc(.25s + var(--ask-ai-i, 0) * 70ms);
}

.ask-ai__link img {
	width: 22px;
	height: 22px;
	object-fit: contain;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}

.ask-ai__link:hover,
.ask-ai__link:focus-visible {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--ask-ai-c) 70%, transparent);
	background-color: color-mix(in srgb, var(--ask-ai-c) 16%, transparent);
	box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--ask-ai-c) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12);
	outline: none;
}

.ask-ai__link:hover img,
.ask-ai__link:focus-visible img {
	transform: scale(1.12) rotate(-6deg);
}

.ask-ai__link:focus-visible {
	box-shadow: 0 0 0 2px var(--background, #030014), 0 0 0 4px var(--ask-ai-c);
}

/* ---------- Placements ---------- */

/* Blog: under the title, above the divider. */
.blog-details-ask {
	width: 100%;
	max-width: 890px;
	padding-top: 20px;
}

/* Comparison: between the hero card and the article. */
.prosyo-entry-ask {
	justify-content: center;
	max-width: 780px;
	margin: 0 auto clamp(28px, 4vw, 44px);
}

/* Footer band: centred above the copyright line, sitting on the footer globe. */
.footer-ask {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: clamp(36px, 4vw, 56px) 0 28px;
	text-align: center;
}

/* The band already spaces the divider; drop the line block's own top gap. */
.footer-ask + .footer-line-block {
	padding-top: 0;
}

.footer-ask__stage {
	position: relative;
	isolation: isolate;
	display: flex;
	justify-content: center;
}

.footer-ask__widget {
	justify-content: center;
}

.footer-ask__note {
	position: relative;
	margin: 0;
	color: var(--paragraph, #8e8c99);
	font-size: 14px;
	line-height: 1.5;
}

/*
 * Signal ring: a flat orbit centred on the pill, in a fixed 1280x80 box so
 * the HTML nodes follow the SVG ellipse exactly. The back half (0-50%) runs
 * above the pill's centre line and slips behind the glass; the front half
 * runs below it. Nodes are dimmer and smaller at the back so it reads in
 * depth. The footer section clips anything past the screen edge.
 */
.footer-ask__orbit {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: 1280px;
	height: 80px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.footer-ask__orbit svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.footer-ask__orbit ellipse {
	fill: none;
	stroke: rgba(255, 255, 255, .12);
	stroke-width: 1;
	stroke-dasharray: 2 7;
}

.footer-ask__node {
	--dur: 40s;
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	color: #fff;
	offset-path: path("M20 40A620 30 0 1 1 1260 40A620 30 0 1 1 20 40");
	offset-rotate: 0deg;
	animation: footer-ask-orbit var(--dur) linear infinite;
	/* Even spacing: each traveller starts 1/count of a lap after the last. */
	animation-delay: calc(var(--dur) / var(--count, 10) * var(--n, 0) * -1);
}

.footer-ask__node img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.footer-ask__node--in {
	background: linear-gradient(135deg, #1a86e6, #0a66c2);
	box-shadow: 0 0 0 3px rgba(10, 102, 194, .2), 0 0 18px rgba(10, 102, 194, .7);
}

.footer-ask__node--mail {
	background: linear-gradient(135deg, #b638ff, #7350ff);
	box-shadow: 0 0 0 3px rgba(182, 56, 255, .2), 0 0 18px rgba(182, 56, 255, .7);
}

.footer-ask__node--ai {
	padding: 6px;
	border: 1px solid rgba(255, 255, 255, .14);
	background: rgba(20, 12, 50, .85);
	box-shadow: 0 0 16px rgba(115, 80, 255, .45);
}

.footer-ask__node--ai img {
	object-fit: contain;
}

.footer-ask__node--person {
	border: 2px solid rgba(182, 56, 255, .7);
	box-shadow: 0 0 16px rgba(182, 56, 255, .5);
}

/* Without offset-path the travellers cannot follow the ring; leave it bare. */
@supports not (offset-path: path("M0 0")) {
	.footer-ask__node { display: none; }
}

/* 0-50% runs over the top of the ring (behind the pill), 50-100% in front. */
@keyframes footer-ask-orbit {
	0% { offset-distance: 0%; opacity: .5; transform: scale(.75); }
	25% { offset-distance: 25%; opacity: .3; transform: scale(.6); }
	50% { offset-distance: 50%; opacity: .5; transform: scale(.75); }
	75% { offset-distance: 75%; opacity: .95; transform: scale(1); }
	100% { offset-distance: 100%; opacity: .5; transform: scale(.75); }
}

/*
 * Footer globe: one wide planet rising behind the menus and running to the
 * bottom edge, rimmed like the footer's top glow bar, turning slowly. Kept
 * faint (and under a dark overlay) so the links on top stay easy to read.
 * 1260x560 box (viewBox 1440x640); narrower screens crop the sides.
 */
.footer-wrapper > .section-gap {
	position: relative;
	z-index: 1;
}

/* A soft halo in the page colour keeps footer text crisp where the globe's
 * rim and grid pass behind it. */
.footer-wrapper .footer-title,
.footer-wrapper .footer-nav-link,
.footer-wrapper .footer-except,
.footer-wrapper .footer-copy-text,
.footer-ask__note {
	text-shadow: 0 0 2px var(--background, #030014), 0 0 12px var(--background, #030014);
}

.footer-globe {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 0;
	width: 1260px;
	height: 560px;
	transform: translateX(-50%);
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* Dark overlay in the page colour: keeps the globe a quiet backdrop. */
.footer-globe::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(3, 0, 20, .35), rgba(3, 0, 20, .6));
}

.footer-globe__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.footer-globe__halo {
	fill: none;
	stroke: #7350ff;
	stroke-width: 26;
	opacity: .2;
	filter: blur(22px);
	animation: footer-globe-breathe 7s ease-in-out infinite;
}

.footer-globe__grid path {
	fill: none;
	stroke: rgba(182, 56, 255, .06);
	stroke-width: 1;
}

/* Each meridian sweeps limb to limb; staggered, they read as a turning globe. */
.footer-globe__meridian {
	transform-box: view-box;
	transform-origin: 720px 850px;
	animation: footer-globe-turn 32s linear infinite;
	animation-delay: calc(var(--m, 0) * -4s);
}

@keyframes footer-globe-turn {
	from { transform: scaleX(-1); }
	to { transform: scaleX(1); }
}

@keyframes footer-globe-breathe {
	0%, 100% { opacity: .08; }
	50% { opacity: .18; }
}

/* Case study: inline glass bar by default. */
.cs-ask-section {
	padding: clamp(24px, 4vw, 40px) 16px 0;
}

.ask-ai--rail {
	justify-content: center;
}

/*
 * Wide screens: float as a vertical rail in the right gutter. The container
 * is 1170px up to 1439px and 1312px from 1440px, so the 64px rail fits in the
 * gutter from 1300px. Short windows keep the inline bar so the rail can never
 * reach the chat launcher in the bottom-right corner.
 */
@media (min-width: 1300px) and (min-height: 640px) {
	.cs-ask-section {
		padding: 0;
		height: 0;
	}

	.ask-ai--rail {
		position: fixed;
		top: 50%;
		right: 12px;
		z-index: 50;
		transform: translateY(-50%);
		animation: ask-ai-rail-in .8s cubic-bezier(.2, .8, .2, 1) .4s both;
	}

	.ask-ai--rail .ask-ai__panel {
		flex-direction: column;
		gap: 10px;
		padding: 14px 8px;
		border-radius: 28px;
		animation: ask-ai-float 6s ease-in-out 1.4s infinite;
	}

	.ask-ai--rail .ask-ai__label {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		font-size: 12px;
		letter-spacing: .04em;
		gap: 6px;
	}

	.ask-ai--rail .ask-ai__list {
		flex-direction: column;
	}

	.ask-ai--rail .ask-ai__link:hover,
	.ask-ai--rail .ask-ai__link:focus-visible {
		transform: translateX(-4px);
	}
}

/* Phones: one compact row - "Ask AI" and the icons, nothing wrapping. */
@media (max-width: 479px) {
	.ask-ai__panel {
		gap: 10px;
		padding: 7px 8px 7px 14px;
	}

	.ask-ai__label-rest {
		display: none;
	}

	.ask-ai__list {
		gap: 6px;
	}

	.ask-ai__link {
		width: 34px;
		height: 34px;
	}

	.ask-ai__link img {
		width: 19px;
		height: 19px;
	}
}

/* ---------- Post tags ---------- */

.post-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-top: 8px;
	padding: 18px 20px;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, .1);
	background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font-family: Inter, sans-serif;
}

.post-tags__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--text, #f3f3f3);
	font-size: 14px;
	font-weight: 500;
}

.post-tags__label svg {
	color: var(--primary, #b638ff);
}

/* :not(#_) lifts these above the article list rules in editorial.css and a
 * site-wide `ul { flex-direction: column }` from a plugin stylesheet, either
 * of which would stack the chips one per line. */
.post-tags__list:not(#_) {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-tags__list:not(#_) li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-tags__list:not(#_) li::before,
.post-tags__list:not(#_) li::marker {
	content: none;
}

.post-tags__chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .04);
	color: var(--paragraph, #cfcbe0);
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
	overflow: hidden;
	transition: color .3s ease, border-color .3s ease, background-color .3s ease, transform .3s ease, box-shadow .3s ease;
	animation: ask-ai-pop .5s cubic-bezier(.2, .8, .2, 1.2) both;
	animation-delay: calc(var(--tag-i, 0) * 50ms);
}

.post-tags__hash {
	color: var(--primary, #b638ff);
	font-weight: 600;
}

.post-tags__chip::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .6s ease;
	pointer-events: none;
}

.post-tags__chip:hover,
.post-tags__chip:focus-visible {
	color: var(--text, #fff);
	border-color: rgba(182, 56, 255, .6);
	background-color: rgba(182, 56, 255, .14);
	transform: translateY(-2px);
	box-shadow: 0 8px 22px -10px rgba(182, 56, 255, .8);
}

.post-tags__chip:hover::after {
	transform: translateX(120%);
}

/* ---------- Motion ---------- */

@keyframes ask-ai-spin {
	to { --ask-ai-angle: 360deg; }
}

@keyframes ask-ai-in {
	from { opacity: 0; transform: translateY(10px) scale(.98); }
	to { opacity: 1; transform: none; }
}

@keyframes ask-ai-pop {
	from { opacity: 0; transform: translateY(6px) scale(.85); }
	to { opacity: 1; transform: none; }
}

@keyframes ask-ai-rail-in {
	from { opacity: 0; transform: translate(40px, -50%); }
	to { opacity: 1; transform: translate(0, -50%); }
}

@keyframes ask-ai-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

@keyframes ask-ai-twinkle {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .65; transform: scale(.85); }
}

@media (prefers-reduced-motion: reduce) {
	.ask-ai *,
	.ask-ai,
	.footer-globe *,
	.footer-ask__orbit *,
	.post-tags__chip {
		animation: none !important;
		transition: none !important;
	}
}