/**
 * SignalMind — AI intelligence engine
 *
 * A worked analysis panel on the left, a column of floating readouts on the
 * right. Loaded on the front page only.
 *
 * @package SignalMind
 */

/* ==========================================================================
   Section
   ========================================================================== */

.sm-intel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.sm-intel__bg {
	position: absolute;
	inset: 0;
	z-index: var(--sm-z-behind);
	pointer-events: none;
}

.sm-intel__orb {
	position: absolute;
	border-radius: var(--sm-radius-circle);
}

.sm-intel__orb--a {
	top: -18%;
	left: -10%;
	width: 46vw;
	height: 46vw;
	max-width: 720px;
	max-height: 720px;
	background: radial-gradient(circle at center, rgba(0, 229, 168, 0.14) 0%, transparent 66%);
}

.sm-intel__orb--b {
	right: -14%;
	bottom: -22%;
	width: 50vw;
	height: 50vw;
	max-width: 780px;
	max-height: 780px;
	background: radial-gradient(circle at center, rgba(0, 194, 255, 0.13) 0%, transparent 68%);
}

/* Animating background-position rather than transform keeps the grid pinned to
   the section while it drifts, and stays cheap at this duration. */
.sm-intel__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.024) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(100% 70% at 50% 40%, #000 0%, transparent 82%);
	-webkit-mask-image: radial-gradient(100% 70% at 50% 40%, #000 0%, transparent 82%);
	animation: sm-intel-drift 48s linear infinite;
}

.sm-intel__head {
	margin-bottom: var(--sm-space-14);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.sm-intel__layout {
	display: grid;
	gap: var(--sm-grid-gap);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 1100px) {
	.sm-intel__layout {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--sm-space-12);
	}
}

/* ==========================================================================
   Analysis panel
   ========================================================================== */

.sm-ai {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-6);
	padding: var(--sm-space-7);
	border-radius: var(--sm-radius-2xl);
	background-color: var(--sm-color-surface-glass);
	backdrop-filter: blur(var(--sm-blur-md));
	-webkit-backdrop-filter: blur(var(--sm-blur-md));
	box-shadow: var(--sm-shadow-xl);
}

/* Gradient hairline, masked to the card edge. */
.sm-ai::before,
.sm-icard::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: linear-gradient(150deg, var(--sm-alpha-white-16), var(--sm-alpha-white-4) 44%, transparent 66%, var(--sm-alpha-primary-24));
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	pointer-events: none;
}

.sm-ai__head {
	display: flex;
	align-items: center;
	gap: var(--sm-space-3);
	padding-bottom: var(--sm-space-5);
	border-bottom: var(--sm-border-width) solid var(--sm-color-divider);
}

.sm-ai__pair {
	font-size: var(--sm-text-h5);
	font-weight: var(--sm-weight-bold);
	letter-spacing: var(--sm-tracking-snug);
	color: var(--sm-color-text);
}

.sm-ai__tf {
	font-size: var(--sm-text-xs);
	color: var(--sm-color-text-subtle);
}

.sm-ai__live {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-1-5);
	margin-left: auto;
	padding: var(--sm-space-1) var(--sm-space-2-5);
	border-radius: var(--sm-radius-sm);
	background-color: var(--sm-color-primary-subtle);
	font-size: var(--sm-text-2xs);
	font-weight: var(--sm-weight-bold);
	letter-spacing: var(--sm-tracking-widest);
	text-transform: uppercase;
	color: var(--sm-color-primary);
}

.sm-ai__live i {
	width: 5px;
	height: 5px;
	border-radius: var(--sm-radius-circle);
	background-color: currentColor;
	animation: sm-pulse 2.2s var(--sm-ease-in-out) infinite;
}

/* Verdict */

.sm-ai__verdict {
	display: flex;
	align-items: center;
	gap: var(--sm-space-5);
	flex-wrap: wrap;
}

.sm-ai__side {
	display: inline-flex;
	align-items: center;
	padding: var(--sm-space-2) var(--sm-space-5);
	border-radius: var(--sm-radius-md);
	font-size: var(--sm-text-h5);
	font-weight: var(--sm-weight-extrabold);
	letter-spacing: 0.06em;
}

.sm-ai__side.is-buy {
	background-color: var(--sm-color-success-surface);
	color: var(--sm-color-bull);
	box-shadow: inset 0 0 0 1px rgba(18, 201, 127, 0.32);
}

.sm-ai__side.is-sell {
	background-color: var(--sm-color-danger-surface);
	color: var(--sm-color-bear);
	box-shadow: inset 0 0 0 1px rgba(242, 75, 75, 0.32);
}

.sm-ai__confidence {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sm-ai__confidence-label {
	font-size: var(--sm-text-xs);
	letter-spacing: var(--sm-tracking-wide);
	color: var(--sm-color-text-subtle);
}

.sm-ai__confidence-value {
	display: flex;
	align-items: baseline;
	font-size: var(--sm-text-h1);
	font-weight: var(--sm-weight-extrabold);
	line-height: 1;
	letter-spacing: var(--sm-tracking-tighter);
	font-variant-numeric: tabular-nums;
	background-image: var(--sm-gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.sm-ai__confidence-value small {
	font-size: 0.44em;
	font-weight: var(--sm-weight-bold);
	margin-left: 0.08em;
}

/* Metrics */

.sm-ai__metrics {
	display: grid;
	gap: var(--sm-space-3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
}

.sm-ai__metric {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-1);
	padding: var(--sm-space-3) var(--sm-space-4);
	border: var(--sm-border-width) solid var(--sm-color-border-subtle);
	border-radius: var(--sm-radius-lg);
	background-color: var(--sm-alpha-white-2);
}

.sm-ai__metric-label {
	font-size: var(--sm-text-2xs);
	letter-spacing: var(--sm-tracking-wider);
	text-transform: uppercase;
	color: var(--sm-color-text-subtle);
}

.sm-ai__metric-value {
	font-size: var(--sm-text-md);
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-text);
}

.sm-ai__metric-value.is-up { color: var(--sm-color-bull); }
.sm-ai__metric-value.is-warn { color: var(--sm-color-warning); }
.sm-ai__metric-value.is-down { color: var(--sm-color-bear); }

/* Reasoning */

.sm-ai__reasoning-title {
	margin-bottom: var(--sm-space-4);
	font-size: var(--sm-text-2xs);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-widest);
	text-transform: uppercase;
	color: var(--sm-color-text-subtle);
}

.sm-ai__reasons {
	display: grid;
	gap: var(--sm-space-2-5) var(--sm-space-6);
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.sm-ai__reasons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sm-ai__reasons li + li {
	margin-top: 0;
}

.sm-ai__reason {
	display: flex;
	align-items: flex-start;
	gap: var(--sm-space-2-5);
	font-size: var(--sm-text-sm);
	line-height: var(--sm-leading-normal);
	color: var(--sm-color-text-secondary);
}

.sm-ai__check {
	display: grid;
	place-items: center;
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: var(--sm-radius-circle);
	background-color: var(--sm-color-primary-subtle);
	color: var(--sm-color-primary);
	box-shadow: inset 0 0 0 1px var(--sm-alpha-primary-24);
}

/* Score */

.sm-ai__score {
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-3);
	padding-top: var(--sm-space-5);
	border-top: var(--sm-border-width) solid var(--sm-color-divider);
}

.sm-ai__score-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sm-space-4);
}

.sm-ai__score-label {
	font-size: var(--sm-text-2xs);
	letter-spacing: var(--sm-tracking-widest);
	text-transform: uppercase;
	color: var(--sm-color-text-subtle);
}

.sm-ai__score-value {
	display: flex;
	align-items: baseline;
	font-size: var(--sm-text-h3);
	font-weight: var(--sm-weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--sm-tracking-tight);
	color: var(--sm-color-text);
}

.sm-ai__score-value small {
	font-size: 0.6em;
	font-weight: var(--sm-weight-medium);
	color: var(--sm-color-text-subtle);
}

.sm-ai__score-track {
	display: block;
	height: 6px;
	border-radius: var(--sm-radius-pill);
	background-color: var(--sm-alpha-white-8);
	overflow: hidden;
}

.sm-ai__score-fill {
	display: block;
	width: 92%;
	height: 100%;
	border-radius: inherit;
	background-image: var(--sm-gradient-brand);
	box-shadow: 0 0 16px -4px var(--sm-alpha-primary-40);
	transform-origin: left center;
}

/* ==========================================================================
   Floating readouts
   ========================================================================== */

.sm-intel__cards {
	display: grid;
	gap: var(--sm-space-4);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) and (max-width: 1099px) {
	.sm-intel__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sm-icard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sm-space-2-5);
	padding: var(--sm-space-5);
	border-radius: var(--sm-radius-xl);
	background-color: var(--sm-color-surface-glass);
	backdrop-filter: blur(var(--sm-blur-md));
	-webkit-backdrop-filter: blur(var(--sm-blur-md));
	box-shadow: var(--sm-shadow-lg);
	transition: transform var(--sm-duration-base) var(--sm-ease-out),
		box-shadow var(--sm-duration-base) var(--sm-ease-standard);
}

.sm-icard:hover {
	box-shadow: var(--sm-shadow-xl), 0 0 36px -14px var(--sm-alpha-primary-40);
}

.sm-icard__head {
	display: flex;
	align-items: center;
	gap: var(--sm-space-2-5);
}

.sm-icard__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: var(--sm-radius-md);
	background-color: var(--sm-alpha-white-4);
	border: var(--sm-border-width) solid var(--sm-color-border-subtle);
	color: var(--sm-color-primary);
}

.sm-icard__label {
	font-size: var(--sm-text-2xs);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-widest);
	text-transform: uppercase;
	color: var(--sm-color-text-subtle);
}

.sm-icard__body {
	display: flex;
	align-items: baseline;
	gap: var(--sm-space-3);
	flex-wrap: wrap;
}

.sm-icard__symbol {
	font-size: var(--sm-text-h4);
	font-weight: var(--sm-weight-bold);
	letter-spacing: var(--sm-tracking-tight);
	color: var(--sm-color-text);
}

.sm-icard__value {
	display: flex;
	align-items: baseline;
	font-size: var(--sm-text-h3);
	font-weight: var(--sm-weight-extrabold);
	line-height: 1;
	letter-spacing: var(--sm-tracking-tight);
	font-variant-numeric: tabular-nums;
	color: var(--sm-color-text);
}

.sm-icard__value small {
	font-size: 0.55em;
	font-weight: var(--sm-weight-bold);
	margin-left: 0.06em;
}

.sm-icard__value.is-up { color: var(--sm-color-bull); }
.sm-icard__value.is-warn { color: var(--sm-color-warning); }
.sm-icard__value.is-down { color: var(--sm-color-bear); }

.sm-icard__note {
	font-size: var(--sm-text-xs);
	color: var(--sm-color-text-subtle);
}

.sm-icard__meter {
	display: block;
	height: 5px;
	border-radius: var(--sm-radius-pill);
	background-color: var(--sm-alpha-white-8);
	overflow: hidden;
}

.sm-icard__meter-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background-image: var(--sm-gradient-brand);
}

.sm-icard__meter-fill.is-w87 { width: 87%; }
.sm-icard__meter-fill.is-w94 { width: 94%; }

/* BTC mood: a small rising area, drawn the same way as the hero sparklines. */
.sm-icard__spark {
	position: relative;
	display: block;
	height: 30px;
	color: var(--sm-color-bull);
}

.sm-icard__spark::before,
.sm-icard__spark::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sm-icard__spark::before {
	background-image: linear-gradient(180deg, currentColor, transparent 86%);
	opacity: 0.2;
	clip-path: polygon(0% 74%, 20% 60%, 40% 66%, 60% 44%, 80% 34%, 100% 20%, 100% 100%, 0% 100%);
}

.sm-icard__spark::after {
	background-color: currentColor;
	clip-path: polygon(
		0% 74%, 20% 60%, 40% 66%, 60% 44%, 80% 34%, 100% 20%,
		100% 27%, 80% 41%, 60% 51%, 40% 73%, 20% 67%, 0% 81%
	);
}

/* Risk engine: four segments, two lit. */
.sm-icard__segments {
	display: flex;
	gap: 4px;
}

.sm-icard__segments i {
	flex: 1 1 0;
	height: 5px;
	border-radius: var(--sm-radius-pill);
	background-color: var(--sm-alpha-white-8);
}

.sm-icard__segments i.is-on {
	background-color: var(--sm-color-warning);
}

/* Volume scanner */
.sm-icard__bars {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 30px;
}

.sm-icard__bars i {
	flex: 1 1 0;
	border-radius: 2px 2px 0 0;
	background-image: linear-gradient(180deg, var(--sm-alpha-primary-40), var(--sm-alpha-primary-8));
	box-shadow: inset 0 1px 0 var(--sm-color-primary);
}

.sm-icard__bars i:nth-child(1) { height: 42%; }
.sm-icard__bars i:nth-child(2) { height: 58%; }
.sm-icard__bars i:nth-child(3) { height: 36%; }
.sm-icard__bars i:nth-child(4) { height: 72%; }
.sm-icard__bars i:nth-child(5) { height: 54%; }
.sm-icard__bars i:nth-child(6) { height: 100%; }

/* ==========================================================================
   Motion
   Small amplitude, long cycles, each card on its own phase so the column
   never pulses in unison.
   ========================================================================== */

@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
	.sm-icard {
		animation: sm-icard-float 9s var(--sm-ease-in-out) infinite;
	}

	.sm-icard--1 { animation-duration: 9s;  animation-delay: 0s; }
	.sm-icard--2 { animation-duration: 11s; animation-delay: -1.6s; margin-left: var(--sm-space-6); }
	.sm-icard--3 { animation-duration: 10s; animation-delay: -3.2s; }
	.sm-icard--4 { animation-duration: 12s; animation-delay: -4.8s; margin-left: var(--sm-space-8); }
	.sm-icard--5 { animation-duration: 9.5s; animation-delay: -6.4s; }

	/* Settle the card under the pointer so its readout can be read. */
	.sm-icard:hover {
		animation-play-state: paused;
		transform: translateY(-3px);
	}
}

@keyframes sm-icard-float {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}

	50% {
		transform: translate3d(0, -6px, 0);
	}
}

@keyframes sm-intel-drift {
	to {
		background-position: 64px 64px;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1099px) {
	.sm-intel__head {
		margin-bottom: var(--sm-space-10);
	}
}

@media (max-width: 599px) {
	.sm-ai {
		padding: var(--sm-space-5);
	}

	.sm-ai__head {
		flex-wrap: wrap;
		gap: var(--sm-space-2);
	}

	.sm-ai__live {
		margin-left: 0;
	}

	.sm-icard {
		padding: var(--sm-space-4);
	}
}