/* Companion CSS para a versão Tailwind (index.html). Só o que é chato fazer em utilitário puro. */
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased}

/* brilho neon em texto */
.text-glow{text-shadow:0 0 24px rgba(94,240,240,.6)}
.text-glow-violet{text-shadow:0 0 24px rgba(106,92,255,.6)}

/* gradiente de texto ciano */
.text-gradient{
  background:linear-gradient(100deg,#5ef0f0,#33d6e0 45%,#6a5cff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* grid sutil de fundo do hero */
.bg-grid{
  background-image:linear-gradient(rgba(120,160,230,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,160,230,.06) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(800px 560px at 70% 30%,#000,transparent 75%);
  mask-image:radial-gradient(800px 560px at 70% 30%,#000,transparent 75%);
}

/* máscara para fundir o avatar no fundo escuro */
.avatar-fade{-webkit-mask-image:radial-gradient(75% 75% at 50% 42%,#000 60%,transparent 100%);
  mask-image:radial-gradient(75% 75% at 50% 42%,#000 60%,transparent 100%)}
/* fade para o mascote em pé (retrato) — funde as bordas no fundo escuro */
.avatar-fade-stand{-webkit-mask-image:radial-gradient(72% 82% at 50% 48%,#000 62%,transparent 100%);
  mask-image:radial-gradient(72% 82% at 50% 48%,#000 62%,transparent 100%)}

/* inputs do form (placeholder + autofill) */
.field::placeholder{color:#67789c}
.field:focus{outline:none;border-color:#33d6e0;box-shadow:0 0 0 3px rgba(51,214,224,.18)}

/* animações */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.animate-floaty{animation:floaty 4s ease-in-out infinite}
@keyframes wapulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.animate-wapulse{animation:wapulse 2.2s infinite}
@keyframes spin-slow{to{transform:rotate(360deg)}}
.animate-spin-slow{animation:spin-slow 18s linear infinite}