/* ===================================================================
   AVATAR VIVO — "Sinal de Vida" (efeito de branding do avatar da Jade)

   MÓDULO REUTILIZÁVEL — FONTE ÚNICA deste efeito.
   Consumido por:
     • o chat (Shadow DOM) — carregado como stylesheet adicional em
       jade-chat.js (setupCSS) e aplicado ao avatar via classes portáveis;
     • qualquer avatar da Jade no site (landing /sobre-a-jade/, hero da home)
       — o tema enfileira este mesmo arquivo (functions.php).

   DIRETIVA DO PROJETO: NÃO duplicar estas regras em nenhum outro CSS
   (tema ou plugin). Mudou aqui, muda em todos os lugares. Se o efeito
   evoluir, edite só este arquivo.

   API de classes (portável, sem acoplamento a markup específico):
     .am-vivo            → contêiner circular (position:relative)
     .am-vivo__media     → o retrato/imagem (respira)
     .am-vivo__ring      → o anel dourado (Sinal de Vida: expande + glow)

   Dois gatilhos de ativação:
     .am-vivo--alive                         → sempre ligado (avatares
                                                decorativos: landing, home)
     .am-vivo[data-state="idle"]:not(.am-paused)
                                             → por estado (chat: só em
                                                repouso e não pausado)

   Ritmo/curva idênticos nos dois casos (4s ease-in-out) — o retrato e o
   anel pulsam como um organismo só. Depende de var(--am-gold) (definido
   no :root do tema e no :host do chat); fallback embutido por segurança.
=================================================================== */

.am-vivo {
	position: relative;
	border-radius: 50%;
}

.am-vivo__media {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.am-vivo__ring {
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 1px solid var(--am-gold, #C8A153);
	opacity: 0.5;
	pointer-events: none;
}

/* Camada de vídeo (Tier 2) — MESMO loop do avatar do chat (idle.mp4), injetada
   por avatar-vivo.js sobre o retrato. object-fit:cover recorta o clipe 16:9 no
   círculo. Aparece só quando pronto (.is-playing); se falhar, o retrato por
   baixo permanece. O frame 0 do clipe == o retrato (jade-portrait/anchor),
   então a entrada é imperceptível. */
.am-vivo__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}
.am-vivo__video.is-playing { opacity: 1; }

/* Respiração do retrato */
@keyframes am-vivo-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.015); }
}

/* Sinal de Vida: o anel expande e ganha glow no MESMO ritmo/curva da
   respiração — anel e retrato pulsam sincronizados. */
@keyframes am-vivo-life {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 4px rgba(200, 161, 83, 0.25);
		opacity: 0.5;
	}
	50% {
		transform: scale(1.055);
		box-shadow: 0 0 18px rgba(200, 161, 83, 0.65), 0 0 34px rgba(200, 161, 83, 0.25);
		opacity: 0.9;
	}
}

/* Ativação sempre-ligada (avatares decorativos do site) */
.am-vivo--alive .am-vivo__media { animation: am-vivo-breathe 4s ease-in-out infinite; }
.am-vivo--alive .am-vivo__ring  { animation: am-vivo-life 4s ease-in-out infinite; }

/* Ativação por estado (avatar do chat: só em idle e não pausado) */
.am-vivo[data-state="idle"]:not(.am-paused) .am-vivo__media { animation: am-vivo-breathe 4s ease-in-out infinite; }
.am-vivo[data-state="idle"]:not(.am-paused) .am-vivo__ring  { animation: am-vivo-life 4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
	.am-vivo__media,
	.am-vivo__ring { animation: none !important; }
	.am-vivo__video { display: none !important; }
}