/* ===========================================================
   Trust Strip — Nantatech-inspired two-row marquee.

   A heading sits above two opposite-direction auto-scrolling
   tracks of industry chips. Each chip is an icon + label in a
   dark pill with a subtle lime accent on hover. Edge-fade masks
   on each lane prevent the visible "reset" at the loop boundary;
   hover anywhere in the strip pauses both lanes for readability.
   =========================================================== */

.ced-trust-strip {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
	position: relative;
	overflow: hidden;
	/* Same viewport-breakout pattern as other full-bleed sections
	   on this theme. The page template constrains contentSize so
	   the marquee needs to escape that constraint to span edge-to-
	   edge. */
	max-width: none !important;
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	border-radius: 0 !important;
	border-top: 1px solid var(--ced-line-08);
	border-bottom: 1px solid var(--ced-line-08);
}

/* Soft ambient backdrop so the dark band doesn't read flat. */
.ced-trust-strip::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(45% 50% at 50% 0%, rgba(203, 108, 230, 0.06) 0%, transparent 70%),
		radial-gradient(35% 50% at 20% 100%, rgba(20, 110, 245, 0.05) 0%, transparent 70%);
	pointer-events: none;
}

/* ── HEADER ──────────────────────────────────────────────── */
.ced-trust-strip__head {
	max-width: var(--page-max);
	margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
	padding: 0 var(--gutter-x);
	display: grid;
	gap: 0.65rem;
	text-align: left;
	position: relative;
	z-index: 1;
}
.ced-trust-strip__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	letter-spacing: 0.18em;
	color: rgba(232, 229, 222, 0.6);
	width: fit-content;
}
.ced-trust-strip__eyebrow-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--lime);
	box-shadow: 0 0 0 0 rgba(203, 108, 230, 0.6);
	animation: ced-trust-strip-pulse 2s ease-out infinite;
}
@keyframes ced-trust-strip-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(203, 108, 230, 0.55); }
	70%  { box-shadow: 0 0 0 8px rgba(203, 108, 230, 0); }
	100% { box-shadow: 0 0 0 0 rgba(203, 108, 230, 0); }
}
.ced-trust-strip__title {
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0;
	max-width: 36ch;
	color: var(--wp--preset--color--paper);
}
.ced-trust-strip__title-mark {
	color: var(--wp--preset--color--lime);
	position: relative;
	display: inline-block;
}
.ced-trust-strip__title-mark::after {
	content: "";
	position: absolute;
	left: -0.05em; right: -0.05em;
	bottom: 0.08em;
	height: 0.18em;
	background: rgba(203, 108, 230, 0.2);
	z-index: -1;
	border-radius: 2px;
}

/* ── LANE (one per row) ──────────────────────────────────── */
.ced-trust-strip__lane {
	position: relative;
	overflow: hidden;
	padding-block: 0.65rem;
	z-index: 1;
	/* Edge-fade mask — soft fade at left + right so the loop
	   reset point isn't visible. Same idea as the ticker stream
	   in the SPT hero. */
	mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 8%,
		#000 92%,
		transparent 100%
	);
}
.ced-trust-strip__lane + .ced-trust-strip__lane { margin-top: 0.85rem; }

/* The track that actually animates. Width: max-content so it
   can extend past the viewport without wrapping. */
.ced-trust-strip__track {
	display: flex;
	width: max-content;
	gap: 0;
	animation: ced-trust-strip-roll 48s linear infinite;
	will-change: transform;
}
.ced-trust-strip__track--reverse {
	/* Row 2: same animation but reversed direction. We shift the
	   start offset so the two rows don't sync. */
	animation: ced-trust-strip-roll 56s linear infinite reverse;
	animation-delay: -8s;
}

/* Pause both lanes when the visitor hovers anywhere in the strip
   so they can read the chips. */
.ced-trust-strip:hover .ced-trust-strip__track {
	animation-play-state: paused;
}

@keyframes ced-trust-strip-roll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ── ROW (a single copy of all chips) ────────────────────── */
.ced-trust-strip__row {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0;
	padding: 0 0.85rem 0 0;
	list-style: none;
}

/* ── CHIP (individual industry pill) ──────────────────────
   This is the visual "logo card" — icon on left, label on
   right, rounded rectangle with subtle hairline border. The
   chip is the centerpiece of the trust strip's visual identity. */
.ced-trust-strip__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1.15rem 0.85rem 0.85rem;
	background:
		linear-gradient(165deg, rgba(232, 229, 222, 0.035) 0%, rgba(232, 229, 222, 0.015) 100%);
	border: 1px solid var(--ced-line-08);
	border-radius: 14px;
	flex-shrink: 0;
	cursor: default;
	transition:
		border-color 280ms var(--ease-smooth),
		background 280ms var(--ease-smooth),
		transform 280ms var(--ease-smooth);
}
.ced-trust-strip__chip:hover {
	border-color: rgba(203, 108, 230, 0.5);
	background:
		linear-gradient(165deg, rgba(203, 108, 230, 0.08) 0%, rgba(232, 229, 222, 0.03) 100%);
	transform: translateY(-2px);
}

.ced-trust-strip__chip-mark {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: rgba(10, 10, 13, 0.5);
	border: 1px solid var(--ced-line-08);
	color: var(--wp--preset--color--lime);
	flex-shrink: 0;
	transition: background 280ms var(--ease-smooth), color 280ms var(--ease-smooth);
}
.ced-trust-strip__chip:hover .ced-trust-strip__chip-mark {
	background: rgba(203, 108, 230, 0.1);
	color: var(--wp--preset--color--lime);
}

.ced-trust-strip__chip-name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: rgba(232, 229, 222, 0.85);
	white-space: nowrap;
	transition: color 280ms var(--ease-smooth);
}
.ced-trust-strip__chip:hover .ced-trust-strip__chip-name {
	color: var(--wp--preset--color--paper);
}

/* ── FOOTER ──────────────────────────────────────────────── */
.ced-trust-strip__foot {
	max-width: var(--page-max);
	margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
	padding: 0 var(--gutter-x);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	color: rgba(232, 229, 222, 0.65);
	font-size: 0.9rem;
	line-height: 1.5;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}
.ced-trust-strip__foot-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--wp--preset--color--lime);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 0.55rem 0.95rem;
	border: 1px solid rgba(203, 108, 230, 0.32);
	border-radius: 999px;
	transition:
		background 220ms var(--ease-smooth),
		color 220ms var(--ease-smooth),
		border-color 220ms var(--ease-smooth);
}
.ced-trust-strip__foot-link:hover,
.ced-trust-strip__foot-link:focus-visible {
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--lime);
}
.ced-trust-strip__foot-link:hover svg { color: var(--wp--preset--color--ink); }

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 640px) {
	.ced-trust-strip__chip {
		padding: 0.7rem 1rem 0.7rem 0.7rem;
		gap: 0.6rem;
	}
	.ced-trust-strip__chip-mark { width: 30px; height: 30px; }
	.ced-trust-strip__chip-name { font-size: 0.85rem; }
	.ced-trust-strip__row { gap: 0.6rem; padding-right: 0.6rem; }
	/* Faster on small screens so the loop feels alive */
	.ced-trust-strip__track { animation-duration: 32s; }
	.ced-trust-strip__track--reverse { animation-duration: 38s; }
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.ced-trust-strip__track,
	.ced-trust-strip__track--reverse,
	.ced-trust-strip__eyebrow-dot {
		animation: none !important;
	}
	/* Without animation we just show the first copy of chips
	   statically — second copy becomes redundant but harmless. */
}

/* ── EDITOR PREVIEW ──────────────────────────────────────── */
.editor-styles-wrapper .ced-trust-strip,
.block-editor-block-list__layout .ced-trust-strip {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}