/* ===================================================================
   P8W PUBLIC · pub-animations-extended
   Extensão da camada de animações públicas (namespace pub-anim-*).
   Carrega DEPOIS de public-layout.css.

   Inclui:
     • .pub-anim-scrollbar    — barra de progresso de scroll (topo)
     • .pub-anim-input-halo   — halo expansivo no foco (inputs/textarea)
     • .pub-anim-marquee      — faixa rolante (logos/integrações)

   Tudo respeita prefers-reduced-motion.
   =================================================================== */

/* ===================================================================
   Scroll progress bar (topo do viewport)
   Ativada via assets/js/public/pub-animations.js
   =================================================================== */
.pub-anim-scrollbar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 9999;
    background: var(--pub-gradient-1);
    box-shadow: 0 0 10px var(--pub-accent-glow);
    transition: width 80ms linear;
    pointer-events: none;
}

/* ===================================================================
   Halo expansivo no foco — para inputs/textareas isolados
   (search-bar tem o halo via :focus-within no wrapper)
   =================================================================== */
.pub-anim-input-halo {
    transition:
        border-color var(--pub-transition-fast),
        box-shadow var(--pub-transition-spring);
}

.pub-anim-input-halo:focus,
.pub-anim-input-halo:focus-within {
    outline: none;
    border-color: var(--pub-accent);
    box-shadow:
        0 0 0 4px var(--pub-accent-subtle),
        0 0 24px var(--pub-accent-glow);
}

/* ===================================================================
   Marquee — faixa rolante infinita (logos/integrações)
   Use:
     <div class="pub-anim-marquee">
       <div class="pub-anim-marquee-track">
         <!-- itens duplicados para loop sem corte -->
       </div>
     </div>
   =================================================================== */
.pub-anim-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.pub-anim-marquee-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 3rem;
    animation: pub-anim-marquee-scroll 30s linear infinite;
}

.pub-anim-marquee:hover .pub-anim-marquee-track {
    animation-play-state: paused;
}

@keyframes pub-anim-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Item padrão dentro do marquee (opcional — pode usar o seu próprio) */
.pub-anim-marquee-item {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    height: 44px;
    padding: 0 0.5rem;
    color: var(--pub-text-secondary);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    opacity: 0.85;
    white-space: nowrap;
    transition:
        opacity var(--pub-transition-fast),
        color var(--pub-transition-fast);
}

.pub-anim-marquee-item:hover {
    opacity: 1;
    color: var(--pub-accent);
}

.pub-anim-marquee-item svg,
.pub-anim-marquee-item img {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* ===================================================================
   ▼ BIBLIOTECA TEMÁTICA · TECH / MARKETING / IA
   12 animações opt-in (4 por tema). Use a classe na tag certa.
   Tudo respeita prefers-reduced-motion.
   =================================================================== */

/* ──────────────────────────────────────────────────────────────────
   GRUPO TECH (4) — sensação dev/engenharia/segurança
   ────────────────────────────────────────────────────────────────── */

/* TECH · 01 · Glitch — texto com falha digital */
/* Uso: títulos de páginas /reportsec, /seo, /tools */
.pub-anim-glitch {
    position: relative;
    display: inline-block;
    color: var(--pub-text);
    animation: pub-anim-glitch-shake 5s infinite;
}
.pub-anim-glitch::before,
.pub-anim-glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: var(--pub-bg);
}
.pub-anim-glitch::before {
    color: var(--pub-info, #3b82f6);
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    animation: pub-anim-glitch-1 4s infinite linear alternate-reverse;
}
.pub-anim-glitch::after {
    color: var(--pub-accent);
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    animation: pub-anim-glitch-2 3s infinite linear alternate-reverse;
}
@keyframes pub-anim-glitch-shake { 0%,90%,100%{transform:translate(0)} 92%{transform:translate(-2px,1px)} 94%{transform:translate(2px,-1px)} 96%{transform:translate(-1px,0)} }
@keyframes pub-anim-glitch-1 { 0%,90%,100%{transform:translate(0)} 92%{transform:translate(-3px,0)} 94%{transform:translate(3px,0)} }
@keyframes pub-anim-glitch-2 { 0%,90%,100%{transform:translate(0)} 92%{transform:translate(3px,1px)} 94%{transform:translate(-3px,-1px)} }

/* TECH · 02 · Terminal cursor — caret piscando ao final do texto */
/* Uso: hero secundário, code blocks, mensagens "ao vivo" */
.pub-anim-terminal-cursor::after {
    content: "▊";
    display: inline-block;
    margin-left: 4px;
    color: var(--pub-success);
    animation: pub-anim-terminal-blink 1s steps(2) infinite;
    font-weight: 400;
}
@keyframes pub-anim-terminal-blink { 50%{opacity:0} }

/* TECH · 03 · Code stream — sequência de pontos digitando */
/* Uso: indicador de "processando código/análise" */
.pub-anim-code-stream {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: var(--pub-text-muted);
}
.pub-anim-code-stream::before {
    content: "›";
    color: var(--pub-success);
    animation: pub-anim-code-cursor 1.2s ease-in-out infinite;
}
@keyframes pub-anim-code-cursor { 0%,100%{opacity:.3;transform:translateX(0)} 50%{opacity:1;transform:translateX(2px)} }

/* TECH · 04 · Grid tech — grade animada de fundo decorativa */
/* Uso: hero de páginas técnicas. Aplicar em wrapper position:relative */
.pub-anim-grid-tech {
    position: relative;
    overflow: hidden;
}
.pub-anim-grid-tech::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--p8-grad-rgb,236,72,153),.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--p8-grad-rgb,236,72,153),.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, #000 30%, transparent 75%);
    animation: pub-anim-grid-drift 12s linear infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes pub-anim-grid-drift { from{background-position:0 0,0 0} to{background-position:48px 48px,48px 48px} }

/* ──────────────────────────────────────────────────────────────────
   GRUPO MARKETING (4) — sensação crescimento/conversão
   ────────────────────────────────────────────────────────────────── */

/* MKT · 01 · Trend arrow — seta apontando crescimento */
/* Uso: badges de KPI ("ROI +340%", "+89 leads") */
.pub-anim-trend-arrow {
    display: inline-block;
    color: var(--pub-success);
    animation: pub-anim-trend-rise 2.5s ease-in-out infinite;
}
@keyframes pub-anim-trend-rise { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-4px) rotate(2deg)} }

/* MKT · 02 · Funnel fill — funil que vai preenchendo */
/* Uso: ilustração de conversão. Wrapper precisa --p (% target) */
.pub-anim-funnel-fill {
    position: relative;
    width: 100%;
    height: 4px;
    background: var(--pub-border);
    border-radius: 9999px;
    overflow: hidden;
}
.pub-anim-funnel-fill::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--p, 70%);
    background: linear-gradient(90deg, var(--pub-accent-2, #f97316), var(--pub-accent), var(--pub-purple, #8b5cf6));
    border-radius: inherit;
    animation: pub-anim-funnel-shine 3s ease-in-out infinite;
    transform-origin: left;
}
@keyframes pub-anim-funnel-shine {
    0%,100% { filter: brightness(1) saturate(1); }
    50%     { filter: brightness(1.15) saturate(1.2); }
}

/* MKT · 03 · ROI bounce — número com bounce sutil ao destacar */
/* Uso: badge "+340%" no hero */
.pub-anim-roi-bounce {
    display: inline-block;
    animation: pub-anim-roi-pop 4s ease-in-out infinite;
}
@keyframes pub-anim-roi-pop {
    0%,90%,100% { transform: scale(1); }
    93%         { transform: scale(1.08); }
    96%         { transform: scale(0.98); }
}

/* MKT · 04 · Conversion pulse — anel verde pulsando (CTA forte) */
/* Uso: botão CTA principal, badges "ao vivo" */
.pub-anim-conversion-pulse {
    position: relative;
}
.pub-anim-conversion-pulse::before {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid var(--pub-success);
    border-radius: inherit;
    opacity: 0;
    animation: pub-anim-conversion-ring 2s ease-out infinite;
    pointer-events: none;
}
@keyframes pub-anim-conversion-ring {
    0%   { transform: scale(1); opacity: .55; }
    100% { transform: scale(1.15); opacity: 0; }
}

/* ──────────────────────────────────────────────────────────────────
   GRUPO IA (4) — sensação inteligência artificial / agentes
   ────────────────────────────────────────────────────────────────── */

/* IA · 01 · Neural dots — 3 pontos pulsando (rede neural ativa) */
/* Uso: badge "Agente IA ativo", indicadores de processamento */
.pub-anim-neural-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.pub-anim-neural-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pub-purple, #8b5cf6);
    animation: pub-anim-neural-pulse 1.4s ease-in-out infinite;
}
.pub-anim-neural-dots span:nth-child(2) { animation-delay: .2s; background: var(--pub-accent); }
.pub-anim-neural-dots span:nth-child(3) { animation-delay: .4s; background: var(--pub-info, #3b82f6); }
@keyframes pub-anim-neural-pulse {
    0%,100% { transform: scale(.7); opacity: .4; }
    50%     { transform: scale(1.1); opacity: 1; }
}

/* IA · 02 · Thinking dots — "..." digitando (resposta de IA) */
/* Uso: chat bubbles, mensagens "pensando" */
.pub-anim-thinking-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}
.pub-anim-thinking-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: pub-anim-thinking 1.4s ease-in-out infinite;
}
.pub-anim-thinking-dots span:nth-child(2) { animation-delay: .15s; }
.pub-anim-thinking-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes pub-anim-thinking {
    0%,80%,100% { transform: translateY(0); opacity: .35; }
    40%         { transform: translateY(-4px); opacity: 1; }
}

/* IA · 03 · Sparkle — pequenas faíscas (geração mágica) */
/* Uso: ícones de feature IA, headers de seções "powered by AI" */
.pub-anim-sparkle {
    position: relative;
    display: inline-block;
}
.pub-anim-sparkle::before,
.pub-anim-sparkle::after {
    content: "✦";
    position: absolute;
    color: var(--pub-accent);
    font-size: .55em;
    animation: pub-anim-sparkle-twinkle 2.5s ease-in-out infinite;
    opacity: 0;
    pointer-events: none;
}
.pub-anim-sparkle::before { top: -4px; right: -10px; }
.pub-anim-sparkle::after  { bottom: -2px; left: -8px; animation-delay: 1.25s; }
@keyframes pub-anim-sparkle-twinkle {
    0%,100% { opacity: 0; transform: scale(.5) rotate(0deg); }
    50%     { opacity: 1; transform: scale(1) rotate(180deg); }
}

/* IA · 04 · Mesh shift — gradient mesh em movimento (fundo IA) */
/* Uso: hero de páginas IA, cards destacados de feature AI */
.pub-anim-mesh-shift {
    position: relative;
    overflow: hidden;
}
.pub-anim-mesh-shift::before {
    content: "";
    position: absolute;
    inset: -50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(var(--p8-grad-rgb,236,72,153),.18), transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(139,92,246,.18), transparent 40%),
        radial-gradient(circle at 50% 80%, rgba(52,211,153,.12), transparent 40%);
    animation: pub-anim-mesh-rotate 18s linear infinite;
    z-index: 0;
    pointer-events: none;
    filter: blur(40px);
}
@keyframes pub-anim-mesh-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ===================================================================
   prefers-reduced-motion · zera todas as animações temáticas acima
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
    .pub-anim-scrollbar { transition: none; }
    .pub-anim-input-halo { transition: none; }
    .pub-anim-marquee-track { animation: none; }
    .pub-anim-glitch,
    .pub-anim-glitch::before,
    .pub-anim-glitch::after,
    .pub-anim-terminal-cursor::after,
    .pub-anim-code-stream::before,
    .pub-anim-grid-tech::before,
    .pub-anim-trend-arrow,
    .pub-anim-funnel-fill::before,
    .pub-anim-roi-bounce,
    .pub-anim-conversion-pulse::before,
    .pub-anim-neural-dots span,
    .pub-anim-thinking-dots span,
    .pub-anim-sparkle::before,
    .pub-anim-sparkle::after,
    .pub-anim-mesh-shift::before { animation: none !important; }
}