:root {
	--orb-glow: rgba(201, 163, 130, .4);
	--orb-shadow: rgba(107, 31, 51, .3);
}

/* Layout do hero em flex, nao grid: evita o bug de "order" que fazia o orb
   aparecer antes do texto no mobile. Aqui a ordem visual segue a ordem do DOM
   (copy primeiro, sempre), tanto em coluna quanto em linha. */
.hero-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(28px, 6vw, 72px);
	flex-wrap: wrap;
}

.hero-copy {
	flex: 1 1 440px;
	min-width: 0;
}

.hero-visual {
	flex: 0 1 300px;
	display: flex;
	justify-content: center;
}

.hero-orb-wrap {
	position: relative;
	width: clamp(180px, 20vw, 300px);
	aspect-ratio: 1 / 1;
}

.hero-orb-wrap::before {
	content: "";
	position: absolute;
	inset: -18%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, var(--orb-glow) 0%, rgba(201, 163, 130, .1) 45%, transparent 72%);
	filter: blur(8px);
	opacity: .85;
	animation: orb-breathe 9s ease-in-out infinite;
}

/* Borda neon animada (port simplificado do componente "Neon Border" -
   Originkit). Em vez do rastreio de perimetro via JS do componente original,
   aqui um conic-gradient gira sobre um circulo perfeito: geometria simples,
   sem distorcao de cantos, leve e 100% CSS. Um traco de luz dourado/vinho
   percorre o anel do orb continuamente. */
.hero-orb-wrap::after {
	content: "";
	position: absolute;
	inset: -5%;
	border-radius: 50%;
	padding: 2px;
	background: conic-gradient(
		from 0deg,
		rgba(201, 163, 130, 0) 0deg,
		rgba(201, 163, 130, 0) 250deg,
		var(--gold-deep) 288deg,
		var(--gold) 312deg,
		var(--wine) 336deg,
		rgba(201, 163, 130, 0) 360deg
	);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px));
	pointer-events: none;
	animation: orb-ring 10s linear infinite;
}

.hero-orb-wrap canvas {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #4d1524 0%, #241318 70%);
	box-shadow:
		0 24px 56px -18px var(--orb-shadow),
		inset 0 0 60px rgba(0, 0, 0, .35);
	opacity: 0;
	transition: opacity .8s ease;
}

.hero-orb-wrap.is-live canvas { opacity: 1; }
.hero-orb-wrap.orb-fallback canvas { opacity: 1; }

@keyframes orb-breathe {
	0%, 100% { transform: scale(1); opacity: .7; }
	50% { transform: scale(1.05); opacity: .95; }
}

@keyframes orb-ring {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Acessibilidade (regras extraidas do design system GetSamba):
   - grid de toque minimo de 44px preservado nos controles da hero (herdado de .btn/.chip)
   - prefers-reduced-motion respeitado: nenhuma animacao do orb roda
   - o orb e puramente decorativo (aria-hidden no HTML), entao nao precisa de rotulo textual */
@media (max-width: 760px) {
	.hero-inner { flex-direction: column; align-items: flex-start; gap: 0; }
	/* O hero ja tem padding-bottom proprio e a secao seguinte (#projetos) tem
	   padding-top proprio: juntos eles formam o espaco "abaixo" do globo. Para
	   nao duplicar espaco, zeramos o padding-bottom do hero no mobile e usamos
	   a MESMA formula de clamp como margem "acima" do globo, garantindo que os
	   dois lados usem exatamente a mesma regua de espacamento. */
	.hero { padding-bottom: 0; }
	.hero-visual { flex-basis: auto; width: 100%; order: 0; margin: clamp(40px, 6vw, 72px) 0 0; }
	.hero-orb-wrap { width: min(48%, 190px); margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-orb-wrap::before,
	.hero-orb-wrap::after { animation: none; }
	.hero-orb-wrap canvas { transition: none; opacity: 1; }
}