/* ==========================================================================
   Logo em ouro escovado (Mosaico)
   O arquivo do logo continua o mesmo: ele vira MOLDE (mask) e o metal é
   desenhado em CSS por cima. Nítido em qualquer tela, sem imagem nova.
   Camadas, de cima para baixo:
     1. reflexo que atravessa o logo a cada ~7 s (some p/ quem pede menos movimento)
     2. faixas finas de luz na diagonal (o "escovado")
     3. brilho largo central
     4. base de ouro: âmbar profundo → ouro saturado → amarelo vivo
   ========================================================================== */
:root {
  --ouro-base: linear-gradient(160deg,
      #6e4b0c 0%, #a87818 18%, #d9a823 34%, #f2cf4a 48%,
      #b8861a 62%, #8a5f10 78%, #c99a22 92%, #7a5410 100%);
  --ouro-brilho: linear-gradient(62deg,
      rgba(255,255,255,0) 30%, rgba(255,246,200,.9) 47%, rgba(255,255,255,0) 60%);
  --ouro-faixas: repeating-linear-gradient(62deg,
      rgba(255,250,225,0) 0, rgba(255,250,225,0) 18%,
      rgba(255,250,225,.55) 20.5%, rgba(255,250,225,0) 23%, rgba(255,250,225,0) 48%);
  --ouro-reflexo: linear-gradient(105deg,
      transparent 42%, rgba(255,255,240,.9) 50%, transparent 58%);
}

a.logo { position: relative; display: inline-flex; }
a.logo .brand-logo-image { opacity: 0; }   /* continua ali: tamanho e texto alternativo */

a.logo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--ouro-reflexo), var(--ouro-faixas), var(--ouro-brilho), var(--ouro-base);
  background-size: 300% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 120% 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
  -webkit-mask: var(--logo-url) center / contain no-repeat;
          mask: var(--logo-url) center / contain no-repeat;
  animation: ouro-reflexo 7s ease-in-out 1.2s infinite;
}

@keyframes ouro-reflexo {
  0%, 70%  { background-position: 120% 0, 0 0, 0 0, 0 0; }
  95%,100% { background-position: -20% 0, 0 0, 0 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  a.logo::after { animation: none; }
}

/* qual logo serve de molde neste site */
:root { --logo-url: url("/images/logo-mosaico-sem-assinatura.webp"); }