/* =====================================================================
   DigitalRadar — Hero Radar
   O centro do conceito: radar com varredura + sinais (blips) que são
   os posts em destaque. Leve (CSS puro), acessível e on-brand.
   ===================================================================== */

/* ---------- Layout do hero em duas colunas ---------- */
.dr-hero--radar .dr-hero__inner {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
	max-width: var(--dr-container);
}
.dr-hero--radar .dr-hero__copy { max-width: 600px; }

/* Entrada: anima as colunas (sobrescreve o rise genérico do hero). */
.dr-hero--radar .dr-hero__inner > * { animation: none; }
.dr-hero--radar .dr-hero__copy > * { animation: dr-rise .7s var(--dr-ease-out) both; }
.dr-hero--radar .dr-hero__copy > *:nth-child(2) { animation-delay: .08s; }
.dr-hero--radar .dr-hero__copy > *:nth-child(3) { animation-delay: .16s; }
.dr-hero--radar .dr-hero__copy > *:nth-child(4) { animation-delay: .24s; }
.dr-hero--radar .dr-hero__stage { animation: dr-rise .9s var(--dr-ease-out) .18s both; }

/* ---------- O radar ---------- */
.dr-radar {
	position: relative;
	width: min(100%, 540px);
	aspect-ratio: 1;
	margin-inline: auto;
}
.dr-radar__scope {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--dr-border-neon);
	background:
		radial-gradient(circle at 50% 50%, rgba(0, 180, 255, .10), transparent 70%),
		var(--dr-bg-2);
	box-shadow: inset 0 0 70px rgba(0, 180, 255, .12), var(--dr-glow-lg);
}

/* Anéis concêntricos */
.dr-radar__ring {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1px solid rgba(0, 180, 255, .14);
}
.dr-radar__ring--1 { width: 34%;  height: 34%; }
.dr-radar__ring--2 { width: 67%;  height: 67%; }
.dr-radar__ring--3 { width: 99%;  height: 99%; }

/* Eixos */
.dr-radar__axis { position: absolute; background: rgba(0, 180, 255, .12); }
.dr-radar__axis--x { left: 0; right: 0; top: 50%; height: 1px; }
.dr-radar__axis--y { top: 0; bottom: 0; left: 50%; width: 1px; }

/* Varredura (sweep) */
.dr-radar__sweep {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		rgba(0, 180, 255, .35) 0deg,
		rgba(0, 180, 255, .08) 26deg,
		transparent 62deg,
		transparent 360deg
	);
	animation: dr-sweep 5s linear infinite;
	transform-origin: center;
}
.dr-radar__sweep::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 50%; height: 1px;
	/* Aponta para o topo (0°), alinhada com o início do brilho do conic. */
	transform: rotate(-90deg);
	transform-origin: left center;
	background: linear-gradient(90deg, var(--dr-neon), transparent);
	box-shadow: var(--dr-glow-sm);
}

/* Núcleo */
.dr-radar__core {
	position: absolute;
	top: 50%; left: 50%;
	width: 10px; height: 10px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--dr-neon);
	box-shadow: var(--dr-glow);
}

/* ---------- Sinais (blips) ---------- */
.dr-radar__signals {
	position: absolute;
	inset: 0;
	margin: 0; padding: 0;
	list-style: none;
	z-index: 3;
}
.dr-blip {
	position: absolute;
	left: var(--x); top: var(--y);
	transform: translate(-50%, -50%);
}
.dr-blip__dot {
	display: block;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: var(--dr-neon);
	box-shadow: var(--dr-glow-sm);
	position: relative;
	transition: transform var(--dr-dur) var(--dr-ease), box-shadow var(--dr-dur) var(--dr-ease);
	/* Pisca no instante em que o feixe passa (sincronizado por --d). */
	animation: dr-blip-flash 5s linear infinite;
	animation-delay: var(--d, 0s);
}
@keyframes dr-blip-flash {
	0%   { box-shadow: 0 0 26px 6px rgba(0, 180, 255, .95); background: #e6f6ff; }
	8%   { box-shadow: var(--dr-glow-sm); background: var(--dr-neon); }
	100% { box-shadow: var(--dr-glow-sm); background: var(--dr-neon); }
}
.dr-blip--lg .dr-blip__dot { width: 17px; height: 17px; }
.dr-blip--sm .dr-blip__dot { width: 11px; height: 11px; }
.dr-blip__dot:hover,
.dr-blip__dot:focus-visible {
	transform: scale(1.25);
	box-shadow: var(--dr-glow);
	outline: none;
}

/* "Ping" de detecção — escalonado por --d para casar com o sweep */
.dr-blip__ping {
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 1px solid rgba(0, 180, 255, .8);
	opacity: 0;
	animation: dr-ping 5s var(--dr-ease) infinite;
	animation-delay: var(--d, 0s);
}
@keyframes dr-ping {
	0%   { transform: scale(1);   opacity: .85; }
	28%  { transform: scale(3.4); opacity: 0; }
	100% { transform: scale(3.4); opacity: 0; }
}

/* Card de preview do sinal */
.dr-blip__card {
	position: absolute;
	bottom: 150%;
	left: 50%;
	width: max-content;
	max-width: 230px;
	transform: translate(-50%, 8px);
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: .7rem .85rem;
	background: var(--dr-surface-2);
	border: 1px solid var(--dr-border-neon);
	border-radius: var(--dr-r-md);
	box-shadow: var(--dr-shadow), var(--dr-glow-sm);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--dr-dur) var(--dr-ease), transform var(--dr-dur) var(--dr-ease), visibility var(--dr-dur);
	z-index: 5;
}
.dr-blip__card::after {
	content: "";
	position: absolute;
	top: 100%; left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--dr-surface-2);
}
.dr-blip:hover .dr-blip__card,
.dr-blip:focus-within .dr-blip__card {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
.dr-blip__cat {
	font-family: var(--dr-font-alt);
	font-size: var(--dr-fs-xs);
	font-weight: var(--dr-fw-semi);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dr-neon-2);
}
.dr-blip__title {
	font-family: var(--dr-font-head);
	font-weight: var(--dr-fw-semi);
	font-size: var(--dr-fs-sm);
	line-height: 1.25;
	color: var(--dr-heading);
}

/* ---------- Responsivo ---------- */
@media (max-width: 980px) {
	.dr-hero--radar .dr-hero__inner { grid-template-columns: 1fr; }
	.dr-hero--radar .dr-hero__copy { max-width: none; }
	.dr-radar { width: min(86vw, 420px); }
}
@media (max-width: 520px) {
	.dr-radar { width: min(90vw, 340px); }
	.dr-blip__card { max-width: 180px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.dr-radar__sweep { animation: none; opacity: .5; }
	.dr-blip__ping { animation: none; opacity: 0; }
	.dr-blip__dot { animation: none; }
	.dr-hero--radar .dr-hero__copy > *,
	.dr-hero--radar .dr-hero__stage { animation: none; }
}