/* ==========================================================================
   Logo animada — Lua de Cristal
   ==========================================================================
   A logo original é um export achatado: os personagens estão dentro de um
   único bitmap e não podem se mover uns em relação aos outros. O que dá para
   separar são 4 camadas, e é sobre elas que a animação acontece:

     1. base      — a silhueta recortada branca (o "adesivo")
     2. cena      — nuvens, lua, urso e as crianças
     3. letreiro  — "Lua de Cristal" em arco
     4. faixa     — "festas e Eventos" + @luadecristal.eventos

   A base também serve de máscara para o brilho, então a luz varre exatamente
   o contorno do adesivo — nunca o retângulo da imagem.
   ========================================================================== */

.logo-animado {
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--logo-tamanho, 200px);
  aspect-ratio: 1264 / 993;      /* declarado: sem isso o rodapé pula ao carregar */
  isolation: isolate;
}

.logo-animado__camada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 62%;      /* o eixo do medalhão, não o centro do arquivo */
  backface-visibility: hidden;
}

/* --- Estado inicial: cada camada espera fora do lugar --------------------- */
.logo-animado[data-logo-anim] .logo-animado__camada {
  opacity: 0;
  will-change: transform, opacity;
}
/* Deslocamentos pequenos de propósito. A logo é UM adesivo físico: se as
   camadas voarem de longe, o olho lê "peça solta", não "adesivo assentando".
   O efeito vem da defasagem entre elas, não da distância que percorrem. */
.logo-animado[data-logo-anim] .camada--base     { transform: scale(.90); }
.logo-animado[data-logo-anim] .camada--cena     { transform: scale(.93); }
.logo-animado[data-logo-anim] .camada--letreiro { transform: translateY(-4%) scale(.95) rotate(-3deg); }
.logo-animado[data-logo-anim] .camada--faixa    { transform: translateY(5%) scale(.97); }

/* --- Entrada: o adesivo se monta ----------------------------------------- */
.logo-animado.is-visible .camada--base {
  animation: logo-base 560ms var(--ease-saltinho) 0ms forwards;
}
.logo-animado.is-visible .camada--cena {
  animation: logo-cena 580ms var(--ease-saltinho) 70ms forwards;
}
.logo-animado.is-visible .camada--letreiro {
  animation: logo-letreiro 640ms var(--ease-saltinho) 150ms forwards;
}
.logo-animado.is-visible .camada--faixa {
  animation: logo-faixa 600ms var(--ease-saltinho) 230ms forwards;
}

/* Saltinho suave, com um leve passar do ponto — é o que dá o ar lúdico
   que combina com o desenho. Sem exagero: 1.03, não 1.2. */
:root { --ease-saltinho: cubic-bezier(.34, 1.56, .48, 1); }

@keyframes logo-base     { to { opacity: 1; transform: scale(1); } }
@keyframes logo-cena     { to { opacity: 1; transform: scale(1); } }
@keyframes logo-letreiro { to { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes logo-faixa    { to { opacity: 1; transform: translateY(0) scale(1); } }

/* --- Repouso: o adesivo respira ------------------------------------------
   Começa só depois da entrada terminar (1,05s), senão as duas animações
   brigam pela mesma propriedade. */
.logo-animado.is-visible {
  animation: logo-flutua 6s ease-in-out 900ms infinite;
}
@keyframes logo-flutua {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -6px, 0); }
}

/* O letreiro balança um pouco depois da cena: a defasagem é o que faz o
   conjunto parecer vivo em vez de uma figura única subindo e descendo. */
.logo-animado.is-visible .camada--letreiro {
  animation:
    logo-letreiro 640ms var(--ease-saltinho) 150ms forwards,
    logo-gangorra 6s ease-in-out 1.2s infinite;
}
@keyframes logo-gangorra {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2.5px) rotate(.8deg); }
}

/* --- Brilho de cristal ---------------------------------------------------
   Uma faixa de luz atravessa o adesivo na diagonal a cada 7s. Recortada
   pela silhueta com mask-image — por isso nunca vaza para fora do desenho. */
.logo-animado__brilho {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 38%,
    rgba(255, 255, 255, .05) 44%,
    rgba(255, 255, 255, .50) 50%,
    rgba(198, 234, 255, .26) 56%,
    transparent 62%
  );
  background-size: 260% 260%;
  background-position: 130% 130%;
  opacity: 0;

  /* `overlay` e `soft-light` somem sobre arte já clara — as nuvens do
     desenho são quase brancas e não há o que clarear. `plus-lighter` soma
     luz de verdade, então o facho aparece nas letras azuis e no laranja.
     Precisa do `isolation: isolate` no contêiner para não vazar. */
  mix-blend-mode: plus-lighter;

  -webkit-mask-image: var(--mascara-logo);
          mask-image: var(--mascara-logo);
  -webkit-mask-size: contain;      mask-size: contain;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
}
.logo-animado.is-visible .logo-animado__brilho { display: none; }
@supports (mix-blend-mode: plus-lighter) {
  .logo-animado.is-visible .logo-animado__brilho {
    display: block;
    animation: logo-brilho 7s ease-in-out 1.4s infinite;
  }
}
@keyframes logo-brilho {
  0%        { background-position: 130% 130%; opacity: 0; }
  6%        { opacity: 1; }
  22%       { background-position: -30% -30%; opacity: 1; }
  26%, 100% { background-position: -30% -30%; opacity: 0; }
}

/* --- Estrelinhas: vetor de verdade, somadas por cima ---------------------
   O SVG original não tem as estrelas como elementos separados. Estas são
   desenhadas por nós — pesam ~1 KB e piscam em ritmos diferentes, o que
   evita o efeito de pisca-pisca sincronizado. */
.logo-animado__estrelas {
  position: absolute;
  inset: -6% -4% 0;
  width: 108%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  overflow: visible;
}
.logo-animado__estrelas path {
  fill: #FFD766;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.logo-animado.is-visible .logo-animado__estrelas path {
  animation: logo-cintila var(--dur, 3.4s) ease-in-out var(--atraso, 0s) infinite;
}
@keyframes logo-cintila {
  0%, 72%, 100% { opacity: 0;   transform: scale(.4) rotate(0deg); }
  80%           { opacity: .95; transform: scale(1)  rotate(22deg); }
  88%           { opacity: .35; transform: scale(.7) rotate(34deg); }
}

/* --- Interação ------------------------------------------------------------
   O adesivo se aproxima um pouco. Nada além disso: o hover não pode
   competir com a animação de repouso. */
/* `a.` de propósito: `.site-footer a { display:inline-flex }` tem
   especificidade (0,1,1) e venceria um seletor de classe única — o resultado
   era o link encolher para 0px de largura e a logo sumir. */
a.logo-animado__gatilho,
.logo-animado__gatilho {
  display: block;
  width: 100%;
  max-width: var(--logo-tamanho, 200px);
  min-height: 0;
  border-radius: var(--radius-md);
  transition: transform var(--dur-base) var(--ease-out);
}
a.logo-animado__gatilho:hover { text-decoration: none; }
.logo-animado__gatilho:hover   { transform: scale(1.035); }
.logo-animado__gatilho:active  { transform: scale(.99); }
.logo-animado__gatilho:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 4px; }

/* No hover o brilho dispara na hora, sem esperar o ciclo de 7s. */
.logo-animado__gatilho:hover .logo-animado__brilho,
.logo-animado__gatilho:focus-visible .logo-animado__brilho {
  animation: logo-brilho 1.5s ease-out forwards;
}

/* --- Tamanhos ------------------------------------------------------------- */
/* A variável precisa estar no <a> e no <span>: o <a> é quem tem o
   max-width, e custom property não sobe na árvore. Por isso a mesma classe
   modificadora vai nos dois elementos. */
.logo-animado--rodape { --logo-tamanho: 176px; }
.logo-animado--grande { --logo-tamanho: min(300px, 74vw); margin-inline: auto; }

/* --- Movimento reduzido: desliga, mostra o resultado final ---------------- */
@media (prefers-reduced-motion: reduce) {
  .logo-animado[data-logo-anim] .logo-animado__camada {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .logo-animado,
  .logo-animado__brilho,
  .logo-animado__estrelas path,
  .logo-animado__gatilho { animation: none !important; transition: none !important; }
  .logo-animado__brilho { opacity: 0; }
  .logo-animado__estrelas path { opacity: .9; }
  .logo-animado__gatilho:hover { transform: none; }
}