/* Estilos dos componentes visuais que no Nuxt viviam em <style scoped>.
   Copiados dos .vue correspondentes — nunca aproximados de memoria:
   AuroraBackground.vue, Meteors.vue, ServiceCycle.vue, RevealOnScroll.vue,
   StatsStrip.vue. */

/* --- AuroraBackground.vue --------------------------------------------------- */
.aurora-bg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #050512;
}

.aurora-layer {
  position: absolute;
  inset: -10px;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(100deg, #050512 0%, #050512 7%, transparent 10%, transparent 12%, #050512 16%),
    repeating-linear-gradient(100deg, #00dc82 10%, #00b368 15%, #1affb0 20%, #16163a 25%, #00e896 30%);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  opacity: 0.35;
  filter: blur(12px);
  will-change: background-position;
  animation: aurora 60s linear infinite;
  mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
}

@keyframes aurora {
  from { background-position: 50% 50%, 50% 50%; }
  to   { background-position: 350% 50%, 350% 50%; }
}

/* --- Meteors.vue ------------------------------------------------------------ */
.meteor {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 9999px;
  background: rgba(0, 220, 130, 0.6);
  box-shadow: 0 0 0 1px rgba(0, 220, 130, 0.1);
  transform: rotate(215deg);
  animation: meteor linear infinite;
}

.meteor::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, rgba(0, 220, 130, 0.4), transparent);
}

@keyframes meteor {
  0%   { transform: rotate(215deg) translateX(0); opacity: 1; }
  70%  { opacity: 0.8; }
  100% { transform: rotate(215deg) translateX(-600px); opacity: 0; }
}

/* --- ServiceCycle.vue ------------------------------------------------------- */
.center-pulse {
  transform-origin: 200px 200px;
  animation: center-pulse 3s ease-in-out infinite;
}

@keyframes center-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.18); opacity: 0; }
}

/* --- RevealOnScroll.vue ----------------------------------------------------- */
/* No original cada card do v-for recebia :delay="i * 80" — reproduzido por posicao */
.grid > div:nth-child(2) > .reveal-wrap { transition-delay: 80ms; }
.grid > div:nth-child(3) > .reveal-wrap { transition-delay: 160ms; }
.grid > div:nth-child(4) > .reveal-wrap { transition-delay: 240ms; }

.reveal-wrap {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-up    { transform: translateY(28px); }
.reveal-left  { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }
.reveal-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* --- BorderBeam.vue ---------------------------------------------------------- */
.border-beam-outer {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--border-width, 1.5px);
  background: conic-gradient(from var(--angle, 0deg), transparent 25%, var(--color-from, #00dc82), var(--color-to, #00b368), transparent 75%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  animation: border-beam-spin var(--duration, 12s) linear infinite;
  animation-delay: var(--delay, 0s);
  z-index: 0;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes border-beam-spin {
  to { --angle: 360deg; }
}

/* No original cada card de area recebe :delay="i * 2" — reproduzido por posicao no grid */
.grid > div:nth-child(2) .border-beam-outer { --delay: 2s; }
.grid > div:nth-child(3) .border-beam-outer { --delay: 4s; }
.grid > div:nth-child(4) .border-beam-outer { --delay: 6s; }

/* --- Numeracao dos cards de servico (index.vue usava o indice do v-for) ------- */
.grid { counter-reset: service; }
.service-card { counter-increment: service; }
.service-number::before { content: counter(service, decimal-leading-zero); }

/* --- Prose (rich text) -------------------------------------------------------- */
/* No original os <strong> dentro de paragrafos levam text-white; o rich text nao
   carrega classes, entao a cor vem daqui. (historia_p2_bold era text-brand-400 —
   desvio aceito, documentado no MAPEAMENTO-HOME.md) */
.prose-rt b, .prose-rt strong { color: #ffffff; }
[data-theme="light"] .prose-rt b, [data-theme="light"] .prose-rt strong { color: #0d0d26; }

/* --- StatsStrip.vue --------------------------------------------------------- */
.stats-strip {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 220, 130, 0.03) 50%, transparent 100%);
  border-top: 1px solid rgba(0, 220, 130, 0.08);
  border-bottom: 1px solid rgba(0, 220, 130, 0.08);
}

/* --- Destaque de card (#6307) -------------------------------------------------
   Uma classe por cor de destaque, lendo a variavel que a PaletaSite injeta no
   base.html. Antes eram quatro cadeias de {% if %} nos templates cravando classe
   do Tailwind (bg-violet-600 e companhia): as cores vinham da paleta de fabrica,
   fora do alcance do admin e da medicao de contraste do clean().

   O ícone dentro e branco, e e por isso que o clean() exige 3,00 de cada uma
   destas cores contra o branco — WCAG 1.4.11, grafico nao textual. */
.accent-brand  { background-color: rgb(var(--accent-brand)); }
.accent-violet { background-color: rgb(var(--accent-violet)); }
.accent-orange { background-color: rgb(var(--accent-orange)); }
.accent-slate  { background-color: rgb(var(--accent-slate)); }
.accent-green  { background-color: rgb(var(--accent-green)); }

/* --- Tema escuro aninhado (#6312) ---------------------------------------------
   Regras [data-theme="light"] X seguem valendo dentro de uma secao que se declarou
   escura: o seletor casa pelo <html>, que continua claro. Onde a regra clara crava
   valor em vez de ler variavel, ela precisa de contraparte escura — senao o texto
   destacado do hero sairia em verde-escuro sobre o quase-preto da aurora.

   Especificidade identica (0,1,1): quem vence e a ordem, e components.css carrega
   depois do prefitech.css. */
[data-theme="dark"] .gradient-text {
  background-image: linear-gradient(to right, rgb(var(--c-brand-400)), rgb(var(--c-brand-600)));
}

/* O alto contraste vence o escuro aninhado (#6312) ------------------------------
   Uma secao que se declara escura dentro de uma pagina em ALTO CONTRASTE estava
   rebaixando o contraste do usuario que pediu o contrario: o paragrafo saia
   rgb(145,145,169) em vez de branco, e o degrade do titulo voltava no lugar do
   tratamento achatado. Medido no navegador antes de existir esta regra.

   Especificidade 0,2,0 contra os 0,1,0 do [data-theme="dark"]: o contraste ganha
   sem depender de ordem. */
[data-theme="contrast"] [data-theme="dark"] {
  --c-dark-50: 255 255 255; --c-dark-100: 255 255 255; --c-dark-200: 255 255 255;
  --c-dark-300: 255 255 255; --c-dark-400: 255 255 255; --c-dark-500: 255 255 255;
  --c-dark-600: 255 255 255; --c-dark-700: 255 255 255;
  --c-dark-800: 10 10 10; --c-dark-900: 0 0 0; --c-surface-tinted: 10 10 10;
  --c-brand-400: 92 255 175; --c-brand-500: 92 255 175; --c-brand-ink: 92 255 175;
  --c-on-accent: 0 0 0;
}
[data-theme="contrast"] [data-theme="dark"] .gradient-text {
  background: none;
  color: rgb(var(--c-brand-ink));
  -webkit-text-fill-color: rgb(var(--c-brand-ink));
}

/* --- Estilo do trecho em destaque (#6324) --------------------------------------
   O degrade deixou de ser lei: quem decide e o campo "Estilo do trecho em
   destaque" da PaletaSite, que chega aqui como data-destaque no <html>.

   Ate 07/08/2026 os tres temas discordavam sem que ninguem tivesse escolhido:
   degrade escuro no claro (#008a50 -> #003820), degrade claro no escuro, e cor
   solida no alto contraste — este ultimo porque precisava, nao por gosto.

   Especificidade 0,1,1, igual a das regras de tema; components.css carrega
   depois do prefitech.css, entao esta vence por ordem. */
[data-destaque="solido"] .gradient-text {
  background: none;
  color: rgb(var(--c-brand-ink));
  -webkit-text-fill-color: rgb(var(--c-brand-ink));
}