/* css/brand.css — MIV Oficial Genies ✨ */
/* Identidade Visual: "O G Mágico da Centelha" */

/* ============================================================
   LOGO SVG — ANIMAÇÕES
   ============================================================ */

/* Flutuação suave do símbolo */
@keyframes genies-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-3px); }
}

/* Pulsação da centelha dourada */
@keyframes genies-sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
  50%       { transform: scale(1.18) rotate(12deg); filter: brightness(1.3) drop-shadow(0 0 6px rgba(251,191,36,0.9)); }
}

/* Brilho difuso de fundo */
@keyframes genies-glow-pulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 0.85; }
}

/* ============================================================
   CLASSES DE LOGO
   ============================================================ */

/* Contêiner do logo — compatível com todos os headers existentes */
.logo-icon-genies {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  animation: genies-float 4s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(129,140,248,0.35));
}

/* Texto "Genies" com gradiente aurora */
.logo-text-genies {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.3px;
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 45%, #c084fc 80%, #f472b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Centelha ✨ no logo com animação */
.logo-sparkle-genies {
  display: inline-block;
  font-size: 0.78em;
  animation: genies-sparkle 3s ease-in-out infinite;
  transform-origin: center;
  -webkit-text-fill-color: initial;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}

/* Versão menor para header interno do app */
.logo-icon-genies.sm {
  width: 28px;
  height: 28px;
}
.logo-text-genies.sm {
  font-size: 18px;
}

/* ============================================================
   FAVICON SVG — via <link rel="icon"> (inserido via JS)
   ============================================================ */
/* O favicon é atualizado via script em cada página */

/* ============================================================
   BRILHO DE MARCA NOS HEADERS
   ============================================================ */

/* Realce sutil nos headers — Aurora border glow ao passar o mouse */
header:has(.logo-icon-genies):hover {
  border-color: rgba(129, 140, 248, 0.28);
  box-shadow:
    0 10px 30px rgba(45, 34, 25, 0.04),
    inset 0 0 15px rgba(255, 255, 255, 0.6),
    0 0 0 1px rgba(129, 140, 248, 0.1);
  transition: all 0.4s ease;
}

/* ============================================================
   BADGE PRO com MIV GENIES
   ============================================================ */
.badge-pro-genies {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #fef08a, #f59e0b);
  color: #78350f;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 8px rgba(245,158,11,0.35);
}