/**
 * Tier halos — anel animado em volta do avatar para tiers especiais.
 *
 * Atualmente aplicado em UM ponto do projeto:
 *  - Dashboard greeting (`.dashboard-greeting__avatar--patrono` em
 *    ``users/templates/.../_greeting.html``)
 *
 * O halo do header (`.avatar-hub__avatar-frame--patrono`) foi removido
 * em 2026-05-19 (sexta rodada) — usuário preferiu visual mais limpo no
 * header sticky. A identidade Patrono no header agora é sustentada
 * **apenas pelo glifo ∞ no chip** (`.tier-badge--symbol-only` em
 * ``tier_badges.css``). O wrapper neutro ``.avatar-hub__avatar-frame``
 * permanece em ``_avatar_menu.html`` para preservar a estrutura DOM
 * caso o halo seja reativado no futuro.
 *
 * Seletor do dashboard pertence ao app ``users/`` mas vive aqui por
 * coesão visual — todos os halos Patrono num único lugar, evitando
 * que mantenedores de ``users/css/`` redefinam o mesmo halo. Quem
 * mexer em `_greeting.css` precisa saber que este arquivo controla o
 * estado Patrono daquele avatar.
 *
 * Aciona pelo gate ``billing_status.is_patrono`` (context processor
 * de billing). O halo "Aurora" é um conic-gradient roxo→âmbar
 * girando 12s.
 *
 * Variante escolhida em 2026-05-19. Protótipo de referência em
 * ``docs/design-prototypes/patrono-halo-prototype.html`` (halo "1.
 * Aurora").
 *
 * AVISO técnico: o anel é renderizado via ``mask: radial-gradient`` no
 * ``::before``. Não criar stacking context no container pai (sem
 * ``transform``, ``opacity < 1`` ou ``filter`` no botão/wrapper), caso
 * contrário o avatar pode esconder atrás do gradient. Aplicar esses
 * efeitos no ``::before`` ou em camadas externas.
 */

/* ── HEADER (wrapper neutro — halo Patrono REMOVIDO em 2026-05-19) ──── */

.avatar-hub__avatar-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── DASHBOARD GREETING ────────────────────────────────────────────────
   Avatar regular: 48px mobile / 64px desktop, ocupando 100% do container.
   Quando Patrono, o container CRESCE para 56/72px (mais 8px de cada lado
   para acomodar o anel) e o avatar interno é fixado em 48/64px com
   ``position: relative``. Isso preserva o tamanho visual do avatar e
   adiciona o halo no "espaço externo" criado pelo wrapper maior. */

.dashboard-greeting__avatar--patrono {
  /* Wrapper cresce para criar espaço externo do halo. !important sobrescreve
     o width/height fixos da regra base ``.dashboard-greeting__avatar``. */
  width: 56px !important;
  height: 56px !important;
  position: relative;
  border: none !important;
  overflow: visible !important;
  background: transparent;
}

.dashboard-greeting__avatar--patrono::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #6b21a8,
    #c026d3,
    #fbbf24,
    #f59e0b,
    #6b21a8
  );
  /* Mobile (container 56px raio 28; avatar interno raio 24): mesma
     técnica de "halo difuso" do header — sólido em 23-25.5px com
     fade externo até 28px. */
  -webkit-mask: radial-gradient(
    circle at center,
    transparent 21px,
    #000 23px,
    #000 25.5px,
    rgba(0, 0, 0, 0.45) 27px,
    transparent 28px
  );
          mask: radial-gradient(
    circle at center,
    transparent 21px,
    #000 23px,
    #000 25.5px,
    rgba(0, 0, 0, 0.45) 27px,
    transparent 28px
  );
  animation: avatar-frame-patrono-aurora 12s linear infinite;
  filter: blur(0.8px);
  opacity: 0.95;
  pointer-events: none;
}

/* Avatar interno fica circular e com tamanho fixo (48px mobile / 64px
   desktop). ``position: relative`` + z-index garantem que ele renderiza
   acima do ``::before`` do halo. */
.dashboard-greeting__avatar--patrono .dashboard-greeting__avatar-img,
.dashboard-greeting__avatar--patrono .dashboard-greeting__avatar-initials {
  position: relative;
  z-index: 2;
  border-radius: 50%;
  width: 48px;
  height: 48px;
}

.dashboard-greeting__avatar--patrono .dashboard-greeting__avatar-img {
  object-fit: cover;
}

@media (min-width: 768px) {
  /* Desktop: container 72px (raio 36); avatar interno raio 32. Anel raio
     32.5-36 (≈3.5px wide, encostado no avatar de 64px). */
  .dashboard-greeting__avatar--patrono {
    width: 72px !important;
    height: 72px !important;
  }
  .dashboard-greeting__avatar--patrono::before {
    /* Desktop (container 72px raio 36; avatar interno raio 32):
       sólido em 31-33.5px com fade externo até 36px. */
    -webkit-mask: radial-gradient(
      circle at center,
      transparent 29px,
      #000 31px,
      #000 33.5px,
      rgba(0, 0, 0, 0.45) 35px,
      transparent 36px
    );
            mask: radial-gradient(
      circle at center,
      transparent 29px,
      #000 31px,
      #000 33.5px,
      rgba(0, 0, 0, 0.45) 35px,
      transparent 36px
    );
  }
  .dashboard-greeting__avatar--patrono .dashboard-greeting__avatar-img,
  .dashboard-greeting__avatar--patrono .dashboard-greeting__avatar-initials {
    width: 64px;
    height: 64px;
  }
}

@keyframes avatar-frame-patrono-aurora {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-greeting__avatar--patrono::before {
    animation: none !important;
  }
}