/* ==========================================================================
   MayFlow — animação exclusiva da logo com circuitos (hero)
   A imagem original fica intacta. Por cima dela, camadas recortadas pela
   própria logo: energia girando no anel, pulsos indo e voltando nos
   circuitos e o núcleo respirando no mesmo compasso.
   Medidas da logo (1764 × 621): centro do anel em 49,72% × 50,9%,
   faixa do anel entre os raios 262 e 312 px (14,85 a 17,7 cqw).
   ========================================================================== */
.hd-simbolo { container-type: inline-size; }
.hd-simbolo__brilho { display: none; } /* varredura antiga substituída por esta animação */

/* ---------- 1. anel: energia girando em sentido horário ---------- */
.hd-logo-anel,
.hd-logo-nucleo {
  position: absolute;
  left: calc(49.72% - 18.6cqw);
  top: calc(50.9% - 18.6cqw);
  width: 37.2cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  -webkit-mask: radial-gradient(circle, transparent 14.5cqw, #000 15.1cqw, #000 17.5cqw, transparent 18.3cqw);
  mask: radial-gradient(circle, transparent 14.5cqw, #000 15.1cqw, #000 17.5cqw, transparent 18.3cqw);
}
.hd-logo-anel {
  mix-blend-mode: screen;
  opacity: 0.85;
  background:
    /* pontos de brilho que acompanham a rotação */
    conic-gradient(from 0deg, transparent 0 8deg, rgba(255, 255, 255, 0.95) 10deg, transparent 13deg 128deg, rgba(230, 255, 250, 0.9) 130deg, transparent 133deg 248deg, rgba(255, 255, 255, 0.9) 250deg, transparent 253deg),
    /* as cores da logo percorrendo a circunferência */
    conic-gradient(from 0deg, rgba(47, 210, 138, 0.75), rgba(25, 199, 193, 0.55) 25%, rgba(92, 225, 230, 0.75) 45%, rgba(42, 125, 225, 0.8) 65%, rgba(42, 125, 225, 0.15) 82%, rgba(47, 210, 138, 0.75));
  filter: blur(0.15cqw) drop-shadow(0 0 0.8cqw rgba(92, 225, 230, 0.6));
}

/* ---------- 3. núcleo: brilho que recebe e envia energia ---------- */
.hd-logo-nucleo {
  mix-blend-mode: screen;
  opacity: 0.35;
  background: radial-gradient(circle, transparent 14cqw, rgba(200, 255, 245, 0.9) 16.3cqw, transparent 18.4cqw);
  filter: blur(0.6cqw);
}

/* ---------- 2. circuitos: pulsos saindo e voltando ---------- */
@property --hd-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.hd-logo-fluxo {
  --hd-r: 17cqw;
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  /* a luz só aparece onde existem trilhas, e fora do anel */
  -webkit-mask: url("mayflow-simbolo-circuito.webp") center / 100% 100% no-repeat, radial-gradient(circle at 49.72% 50.9%, transparent 18cqw, #000 19cqw);
  -webkit-mask-composite: source-in;
  mask: url("mayflow-simbolo-circuito.webp") center / 100% 100% no-repeat intersect, radial-gradient(circle at 49.72% 50.9%, transparent 18cqw, #000 19cqw);
  background:
    radial-gradient(circle at 49.72% 50.9%, transparent calc(var(--hd-r) - 2.2cqw), var(--hd-luz) calc(var(--hd-r) - 0.3cqw), #fff var(--hd-r), transparent calc(var(--hd-r) + 0.9cqw)),
    radial-gradient(circle at 49.72% 50.9%, transparent calc(var(--hd-r) - 9cqw), var(--hd-luz) calc(var(--hd-r) - 7.4cqw), transparent calc(var(--hd-r) - 6.6cqw));
  filter: drop-shadow(0 0 0.5cqw var(--hd-luz));
  opacity: 0;
}
.hd-logo-fluxo--e { --hd-luz: rgba(150, 255, 160, 0.95); clip-path: inset(0 50.28% 0 0); }
.hd-logo-fluxo--d { --hd-luz: rgba(120, 200, 255, 0.95); clip-path: inset(0 0 0 49.72%); }

@media (prefers-reduced-motion: no-preference) {
  .hd-logo-anel { animation: hd-logo-gira 10s linear infinite; }
  .hd-logo-fluxo { animation: hd-logo-fluxo 4s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  .hd-logo-fluxo--d { animation-delay: -0.4s; }  /* lados em tempos levemente diferentes */
  .hd-logo-nucleo { animation: hd-logo-nucleo 4s ease-in-out infinite; }
  .hd-simbolo::before { animation: hd-logo-halo 4s ease-in-out infinite; }
  .hd-simbolo .hd-no { animation: hd-logo-no 4s ease-in-out infinite; animation-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-logo-fluxo { display: none; }
}

@keyframes hd-logo-gira { to { rotate: 360deg; } }
/* saída (0–45%) → pulsos somem nas pontas → retorno (55–100%) */
@keyframes hd-logo-fluxo {
  0% { --hd-r: 17cqw; opacity: 0.95; }
  34% { opacity: 0.95; }
  45% { --hd-r: 50cqw; opacity: 0; }
  55% { --hd-r: 50cqw; opacity: 0; }
  64% { opacity: 0.85; }
  100% { --hd-r: 17cqw; opacity: 0.95; }
}
/* o anel se intensifica ao receber (fim) e expande o brilho ao enviar (início) */
@keyframes hd-logo-nucleo {
  0% { opacity: 0.9; scale: 1; }
  10% { opacity: 0.55; scale: 1.025; }
  25%, 80% { opacity: 0.25; scale: 1; }
  100% { opacity: 0.9; scale: 1; }
}
@keyframes hd-logo-halo {
  0% { opacity: 1; scale: 1; }
  10% { opacity: 0.85; scale: 1.06; }
  30%, 80% { opacity: 0.6; scale: 1; }
  100% { opacity: 1; scale: 1; }
}
/* terminais acendem quando o pulso chega às pontas */
@keyframes hd-logo-no {
  0%, 25% { opacity: 0.1; scale: 0.8; }
  42% { opacity: 1; scale: 1.15; }
  58% { opacity: 0.6; scale: 1; }
  80%, 100% { opacity: 0.1; scale: 0.8; }
}

/* equilíbrio: as cores originais do anel continuam mandando; a energia corre por cima */
.hd-logo-anel {
  opacity: 0.8;
  background:
    conic-gradient(from 0deg, transparent 0 7deg, rgba(255, 255, 255, 1) 10deg, transparent 14deg 127deg, rgba(220, 255, 245, 0.95) 130deg, transparent 134deg 247deg, rgba(255, 255, 255, 0.95) 250deg, transparent 254deg),
    conic-gradient(from 0deg, rgba(47, 210, 138, 0.42), transparent 18%, rgba(92, 225, 230, 0.38) 40%, transparent 55%, rgba(42, 125, 225, 0.45) 70%, transparent 88%, rgba(47, 210, 138, 0.42));
}
.hd-logo-fluxo { filter: drop-shadow(0 0 0.7cqw var(--hd-luz)) brightness(1.15); }

/* ==========================================================================
   Circuitos que saem do círculo e se recolhem nele (pedido de 24/10)
   A imagem é a mesma; uma máscara circular revela as trilhas a partir do
   anel e depois as recolhe. O M e o anel ficam sempre visíveis.
   Ciclo de 5 s: aparecem (0–40%) · ficam (40–55%) · recolhem (55–90%) · núcleo recebe (90–100%)
   ========================================================================== */
@property --hd-rv { syntax: "<length>"; inherits: false; initial-value: 0px; }
.hd-simbolo__img {
  --hd-rv: 60cqw;
  -webkit-mask: radial-gradient(circle at 49.72% 50.9%, #000 var(--hd-rv), transparent calc(var(--hd-rv) + 2.5cqw));
  mask: radial-gradient(circle at 49.72% 50.9%, #000 var(--hd-rv), transparent calc(var(--hd-rv) + 2.5cqw));
}
@media (prefers-reduced-motion: no-preference) {
  .hd-simbolo__img { animation: hd-circ-revela 5s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  .hd-logo-fluxo { animation: hd-circ-pulso 5s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  .hd-logo-fluxo--d { animation-delay: 0s; }
  .hd-logo-nucleo { animation: hd-circ-nucleo 5s ease-in-out infinite; }
  .hd-simbolo::before { animation: hd-circ-halo 5s ease-in-out infinite; }
  .hd-simbolo .hd-no { animation: hd-circ-no 5s ease-in-out infinite; animation-delay: 0s; }
  .hd-simbolo .hd-ligacoes { animation: hd-circ-lig 5s ease-in-out infinite; }
}
@keyframes hd-circ-revela {
  0% { --hd-rv: 17.6cqw; }
  40%, 55% { --hd-rv: 56cqw; }
  90%, 100% { --hd-rv: 17.6cqw; }
}
/* o pulso viaja na ponta das trilhas: saindo e depois voltando */
@keyframes hd-circ-pulso {
  0% { --hd-r: 18cqw; opacity: 0; }
  5% { opacity: 1; }
  38% { --hd-r: 53cqw; opacity: 0.9; }
  45%, 52% { --hd-r: 53cqw; opacity: 0; }
  58% { --hd-r: 53cqw; opacity: 0.9; }
  88% { --hd-r: 18.5cqw; opacity: 1; }
  92%, 100% { --hd-r: 18cqw; opacity: 0; }
}
/* anel intensifica ao receber (90–100%) e expande o brilho ao enviar (0–10%) */
@keyframes hd-circ-nucleo {
  0% { opacity: 0.95; scale: 1; }
  10% { opacity: 0.55; scale: 1.025; }
  25%, 82% { opacity: 0.25; scale: 1; }
  95%, 100% { opacity: 0.95; scale: 1; }
}
@keyframes hd-circ-halo {
  0% { opacity: 1; scale: 1; }
  10% { opacity: 0.85; scale: 1.06; }
  30%, 82% { opacity: 0.6; scale: 1; }
  95%, 100% { opacity: 1; scale: 1; }
}
/* terminais e ligações externas só aparecem com as trilhas abertas */
@keyframes hd-circ-no {
  0%, 30% { opacity: 0; scale: 0.6; }
  40% { opacity: 1; scale: 1.15; }
  55% { opacity: 0.7; scale: 1; }
  64%, 100% { opacity: 0; scale: 0.6; }
}
@keyframes hd-circ-lig {
  0%, 30% { opacity: 0; }
  42%, 55% { opacity: 1; }
  66%, 100% { opacity: 0; }
}