/* Projeto Gerado pelo Prompt Mestre do Desenvolvedor Claudio Moreira — www.site4u.com.br */
/* Site4u — refinos sobre o Tailwind (microinterações + a11y). */

html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }

/* ===== Formas abstratas temáticas (hero) ===== */
.shapes, .site-shapes { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.site-shapes .sh { position:absolute; will-change:transform; color:#FF4D8D; }
.shapes .sh { position:absolute; will-change:transform; color:#FF4D8D; }
.shapes .sh svg { display:block; }
.shapes .c-pink   { color:#FF4D8D; }
.shapes .c-orange { color:#FF9A3D; }
.shapes .c-cyan   { color:#22D3EE; }

@keyframes floaty   { 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-26px) rotate(var(--r,0deg)); } }
@keyframes drifty   { 0%,100%{ transform:translate(0,0) rotate(var(--r,0deg)); } 50%{ transform:translate(20px,-16px) rotate(var(--r,0deg)); } }
@keyframes spinslow { from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
@keyframes pulsey   { 0%,100%{ opacity:.10; } 50%{ opacity:.30; } }

.shapes .a-float { animation: floaty   13s ease-in-out infinite; }
.shapes .a-drift { animation: drifty   16s ease-in-out infinite; }
.shapes .a-spin  { animation: spinslow 40s linear infinite; }
.shapes .a-pulse { animation: pulsey   7s  ease-in-out infinite; }

/* Reveal on scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Nav ao rolar — fundo escuro translúcido (tema vibrante) */
#nav.scrolled {
  background: rgba(14, 18, 48, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

/* Foco visível (acessibilidade) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #22D3EE;
  outline-offset: 2px;
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation: none !important; }
}