/* Mascote animado do login e do cadastro (artefato "Coyote Bot Animado" levado para o painel).
   Tudo com prefixo .coy-: nada aqui mexe em body, html ou nas classes do painel. O tamanho vem da variável --coy-tamanho do elemento
   .coy-palco (o login define um valor no celular e outro no desktop). As cores do brilho usam o laranja da própria arte (#ff7a12), não o
   --or do tema: o brilho precisa combinar com os olhos e os fones da imagem, mesmo que o admin troque a cor de destaque do painel. */
.coy-palco { --coy-brasa: #ff7a12; --coy-brasa-clara: #ffb347; position: relative; width: var(--coy-tamanho, 240px); max-width: 100%; aspect-ratio: 1; perspective: 900px; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.coy-inclina { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .25s ease-out; }
.coy-flutua { position: absolute; inset: 0; animation: coy-flutua 6s ease-in-out infinite; }
.coy-camada { position: absolute; inset: 0; }
.coy-logo { width: 100%; height: 100%; display: block; object-fit: contain; }
/* O brilho (drop-shadow) fica num elemento PRÓPRIO, por fora da camada da revelação: o recorte (clip-path) da revelação continua valendo depois da
   animação e cortaria o brilho nas bordas da caixa, deixando um quadrado visível em volta do mascote. */
.coy-brilha { position: absolute; inset: 0; filter: drop-shadow(0 0 18px rgba(255, 122, 18, .25)); animation: coy-brilho 3.2s ease-in-out infinite; }
.coy-brasas { position: absolute; inset: -22% -12%; width: 124%; height: 144%; pointer-events: none; }

/* aura atrás da logo */
.coy-aura { position: absolute; left: 50%; top: 46%; width: 96%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 122, 18, .28) 0%, rgba(255, 122, 18, .08) 42%, transparent 66%); animation: coy-respira 3.2s ease-in-out infinite; }

/* olhos */
.coy-olho { position: absolute; top: 39.2%; width: 6.5%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255, 220, 140, .95) 0%, rgba(255, 140, 30, .55) 28%, transparent 65%); animation: coy-olho 4s ease-in-out infinite; }
.coy-olho.e { left: 41.5%; }
.coy-olho.d { left: 58.5%; }

/* pulso de sinal nos fones */
.coy-sinal { position: absolute; top: 38.3%; width: 11%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.coy-sinal.e { left: 25.4%; }
.coy-sinal.d { left: 74.8%; }
.coy-sinal i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--coy-brasa); opacity: 0; animation: coy-sinal 2.4s ease-out infinite; }
.coy-sinal i:nth-child(2) { animation-delay: .8s; }
.coy-sinal i:nth-child(3) { animation-delay: 1.6s; }
.coy-sinal .coy-nucleo { position: absolute; inset: 16%; border-radius: 50%; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255, 170, 80, .55), transparent 70%); animation: coy-nucleo 2.4s ease-in-out infinite; }

/* reflexo passando pelo nome, recortado no formato da logo (a imagem entra pela variável --coy-imagem, definida no HTML) */
.coy-reflexo { position: absolute; inset: 0; clip-path: inset(64% 6% 9% 6%); mix-blend-mode: overlay; -webkit-mask: var(--coy-imagem) center/100% 100% no-repeat; mask: var(--coy-imagem) center/100% 100% no-repeat; }
.coy-reflexo::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 28%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95) 50%, transparent); animation: coy-varredura 4.2s cubic-bezier(.6, 0, .3, 1) infinite 2.6s; }

/* entrada: a linha de varredura revela a logo de cima para baixo */
.coy-revela { animation: coy-revela 1.5s cubic-bezier(.7, 0, .2, 1) both .2s; }
.coy-linha { position: absolute; left: -4%; right: -4%; height: 3px; top: 0; background: var(--coy-brasa-clara); box-shadow: 0 0 18px 6px rgba(255, 122, 18, .7); opacity: 0; animation: coy-linha 1.5s cubic-bezier(.7, 0, .2, 1) both .2s; }
.coy-clarao { position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 110, .85), transparent 60%); opacity: 0; mix-blend-mode: screen; animation: coy-clarao 1s ease-out both 1.6s; }
.coy-tarde { opacity: 0; animation: coy-aparece .8s ease forwards 1.7s; }

@keyframes coy-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6%); } }
@keyframes coy-brilho { 0%, 100% { filter: drop-shadow(0 0 14px rgba(255, 122, 18, .2)); } 50% { filter: drop-shadow(0 0 30px rgba(255, 122, 18, .5)); } }
@keyframes coy-respira { 0%, 100% { opacity: .7; scale: .96; } 50% { opacity: 1; scale: 1.04; } }
@keyframes coy-olho { 0%, 100% { opacity: .55; scale: .9; } 45% { opacity: 1; scale: 1.15; } 50% { opacity: .25; scale: .8; } 55% { opacity: 1; scale: 1.1; } }
@keyframes coy-sinal { 0% { opacity: .9; scale: .7; } 100% { opacity: 0; scale: 2.1; } }
@keyframes coy-nucleo { 0%, 100% { opacity: .3; } 20% { opacity: 1; } }
@keyframes coy-varredura { 0% { left: -40%; } 55%, 100% { left: 120%; } }
@keyframes coy-revela { from { clip-path: inset(0 0 100% 0); filter: brightness(2.2) saturate(.4); } to { clip-path: inset(0 0 0 0); filter: none; } }
@keyframes coy-linha { 0% { top: 0; opacity: 1; } 92% { top: 100%; opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes coy-clarao { 0% { opacity: 0; scale: .6; } 25% { opacity: 1; } 100% { opacity: 0; scale: 1.3; } }
@keyframes coy-aparece { to { opacity: 1; } }

/* Sem animação (preferência do sistema): a logo aparece parada, completa, sem entrada nem efeitos. */
@media (prefers-reduced-motion: reduce) {
    .coy-flutua, .coy-brilha, .coy-aura, .coy-olho, .coy-sinal i, .coy-nucleo, .coy-reflexo::before, .coy-revela, .coy-linha, .coy-clarao { animation: none; }
    .coy-tarde { opacity: 1; animation: none; }
    .coy-linha, .coy-clarao, .coy-sinal, .coy-brasas { display: none; }
}