/* ══════════════════════════════════════════════════════════════════════════
   AGRICOL — Engine Genérica de Aparência de Hero (Sprint 5.2)
   ──────────────────────────────────────────────────────────────────────────
   Classes GENÉRICAS (prefixo .hero-ap-*) aplicáveis a QUALQUER seção de hero
   do sistema. Nesta Sprint são usadas apenas pela Home Institucional
   (#hero-institucional) e pelo preview do editor, mas nada aqui é amarrado a
   esse ID — preparado para reuso futuro (Landing de produto, Empresa, etc.).

   REGRESSÃO ZERO: nenhuma regra abaixo tem efeito até que a engine adicione
   uma classe .hero-ap-* à seção. O tema padrão (escuro) NÃO tem classe → a
   aparência default do site permanece intacta. Todos os temas/efeitos são
   estados NOVOS, opt-in, aplicados só quando o admin os seleciona.

   Convenção de marcação (mesma dos heroes do site):
     .hero-bg-image  → camada de imagem de fundo (z-index:0)
     .hero-overlay   → camada de overlay        (z-index:1)
     .hero-ap-fx-layer → camada de efeito (injetada em runtime, z-index:1)
     .hero-content   → conteúdo (z-index:2, sempre acima)
     .hero-max / .hero-split → alvos de layout (alinhamento/posição)
   ════════════════════════════════════════════════════════════════════════ */

/* ── LAYOUT (reproduz o comportamento atual de home-align-*/home-pos-*) ───── */
.hero-ap-align-center .hero-max{ text-align:center; margin-left:auto; margin-right:auto; }
.hero-ap-align-right  .hero-max{ text-align:right;  margin-left:auto; }
.hero-ap-pos-center   .hero-split{ justify-content:center; }
.hero-ap-pos-right    .hero-split{ justify-content:flex-end; }

/* ── TEMAS ─────────────────────────────────────────────────────────────────
   'escuro' = SEM classe = aparência atual (não redefinido aqui).
   Cada tema muda a base visível (--hero = fundo da seção) e os acentos do
   hero. Escopado à classe do tema → só afeta quando selecionado. ───────────── */

/* VERDE — fundo verde-floresta profundo, texto claro (mantém acentos verdes) */
.hero-ap-tema-verde{ --hero:#0A2A18; --hero-overlay-cor: var(--forest,#0D3D1F); }

/* AZUL — fundo azul-marinho, acentos em azul */
.hero-ap-tema-azul{ --hero:#06121F; --hero-overlay-cor:#0B2A4A; }
.hero-ap-tema-azul .hero-badge{ border-color:rgba(90,170,255,.35); background:rgba(90,170,255,.08); color:#8FC0FF; }
.hero-ap-tema-azul .hero-badge-dot{ background:#8FC0FF; }
.hero-ap-tema-azul .hero-trust-item svg{ color:#8FC0FF; }
.hero-ap-tema-azul .btn-hero-secondary{ border-color:rgba(90,170,255,.4); background:rgba(90,170,255,.06); color:#8FC0FF; }

/* DOURADO — fundo escuro quente, acentos dourados */
.hero-ap-tema-dourado{ --hero:#17110A; --hero-overlay-cor:#3A2C10; }
.hero-ap-tema-dourado .hero-badge{ border-color:rgba(201,168,76,.42); background:rgba(201,168,76,.10); color:#E5C877; }
.hero-ap-tema-dourado .hero-badge-dot{ background:#E5C877; }
.hero-ap-tema-dourado .hero-trust-item svg{ color:#E5C877; }
.hero-ap-tema-dourado .btn-hero-secondary{ border-color:rgba(201,168,76,.45); background:rgba(201,168,76,.07); color:#E5C877; }

/* CLARO — fundo claro, texto escuro (inverte a paleta com segurança) */
.hero-ap-tema-claro{ --hero:#EEF2EE; }
.hero-ap-tema-claro .hero-h1{ color:#0D3D1F; }
.hero-ap-tema-claro .hero-sub{ color:rgba(13,61,31,.72); }
.hero-ap-tema-claro .hero-trust-item{ color:rgba(13,61,31,.60); }
.hero-ap-tema-claro .hero-badge{ border-color:rgba(26,107,53,.30); background:rgba(26,107,53,.08); color:var(--emerald,#1A6B35); }
.hero-ap-tema-claro .hero-badge-dot{ background:var(--emerald,#1A6B35); }
.hero-ap-tema-claro .hero-trust-item svg{ color:var(--emerald,#1A6B35); }
.hero-ap-tema-claro .btn-hero-secondary{ border-color:rgba(26,107,53,.4); background:rgba(26,107,53,.06); color:var(--emerald,#1A6B35); }
/* As camadas decorativas escuras (mesh/line) não combinam com fundo claro. */
.hero-ap-tema-claro .hero-bg-mesh, .hero-ap-tema-claro .hero-line{ display:none; }

/* ── CAMADA DE EFEITO (injetada em runtime pela engine) ────────────────────
   z-index:1 → acima da imagem/overlay, SEMPRE abaixo de .hero-content (z:2).
   A intensidade (0..1) controla a opacidade global da camada. ─────────────── */
.hero-ap-fx-layer{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity: var(--hero-ap-fx-intensidade, .5);
  transition: opacity .25s ease;
}

/* GRID — malha de linhas finas (acento de marca) */
.hero-ap-fx-grid{
  background-image:
    linear-gradient(rgba(46,204,113,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,204,113,.18) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* MALHA — brumas radiais suaves (verde + dourado) */
.hero-ap-fx-malha{
  background:
    radial-gradient(ellipse 60% 55% at 18% 30%, rgba(46,204,113,.12) 0%, transparent 62%),
    radial-gradient(ellipse 55% 60% at 82% 68%, rgba(201,168,76,.10) 0%, transparent 62%);
}

/* GLOW — brilho central pulsante */
.hero-ap-fx-glow{
  background: radial-gradient(circle at 50% 42%, rgba(46,204,113,.22) 0%, transparent 55%);
}

/* DEGRADÊ — reflexo diagonal deslizante */
.hero-ap-fx-degrade{
  background: linear-gradient(120deg, transparent 0%, rgba(46,204,113,.14) 45%, rgba(201,168,76,.10) 55%, transparent 100%);
  background-size: 220% 220%;
  background-position: 0% 50%;
}

/* PARTÍCULAS — pontos discretos em deriva lenta */
.hero-ap-fx-particulas{
  background-image: radial-gradient(circle, rgba(255,255,255,.45) 1px, transparent 1.6px);
  background-size: 34px 34px;
}

/* Animações (apenas quando o usuário não pediu movimento reduzido) */
@media (prefers-reduced-motion: no-preference){
  .hero-ap-fx-glow{ animation: heroApGlow 6s ease-in-out infinite; }
  .hero-ap-fx-degrade{ animation: heroApDegrade 12s linear infinite; }
  .hero-ap-fx-particulas{ animation: heroApDrift 24s linear infinite; }
}
@keyframes heroApGlow{
  0%,100%{ transform:scale(1);   opacity:calc(var(--hero-ap-fx-intensidade,.5) * .8); }
  50%    { transform:scale(1.08); opacity:var(--hero-ap-fx-intensidade,.5); }
}
@keyframes heroApDegrade{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}
@keyframes heroApDrift{
  0%{ background-position:0 0; }
  100%{ background-position:34px 68px; }
}