/* =====================================================
   CYCLE TECNOLOGIA E PREVENÇÃO — Efeitos de fundo do Hero
   Cada variante é aplicada com uma classe em .hero:
     .hero--radar    Radar SOC
     .hero--mesh     Malha de Rede
     .hero--circuit  Trilhas de Dados
     .hero--rain     Chuva de Código
     .hero--grid     Grade Cibernética
   Todas usam apenas os tokens de cor da marca e ficam
   atrás do conteúdo (que sobe para z-index 2).
   ===================================================== */

/* conteúdo sempre acima das camadas decorativas */
.hero__container,
.hero__stats-bar {
    position: relative;
    z-index: 2;
}

.hero__fx {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}


/* =====================================================
   1. Radar SOC — varredura contínua de monitoramento
   ===================================================== */
.hero--radar .hero__fx::before,
.hero--radar .hero__fx::after {
    content: '';
    position: absolute;
    left: 68%;
    top: 46%;
    width: 1500px;
    height: 1500px;
    margin: -750px 0 0 -750px;
    border-radius: 50%;
}

/* anéis concêntricos */
.hero--radar .hero__fx::before {
    background: repeating-radial-gradient(
        circle,
        transparent 0 84px,
        rgba(0,194,255,0.10) 84px 85px
    );
    -webkit-mask-image: radial-gradient(circle, #000 8%, rgba(0,0,0,0.35) 45%, transparent 70%);
    mask-image: radial-gradient(circle, #000 8%, rgba(0,0,0,0.35) 45%, transparent 70%);
}

/* feixe de varredura */
.hero--radar .hero__fx::after {
    background: conic-gradient(
        from 0deg,
        rgba(0,194,255,0.20) 0deg,
        rgba(0,128,255,0.06) 26deg,
        transparent 58deg
    );
    -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,0.5) 40%, transparent 68%);
    mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,0.5) 40%, transparent 68%);
    animation: fxRadarSweep 9s linear infinite;
}

@keyframes fxRadarSweep {
    to { transform: rotate(360deg); }
}


/* =====================================================
   2. Malha de Rede — nós e enlaces com pulsos
   ===================================================== */
.hero--mesh .hero__fx svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero--mesh .fx-link {
    stroke: rgba(0,128,255,0.20);
    stroke-width: 1;
    fill: none;
}

.hero--mesh .fx-pulse {
    stroke: rgba(0,194,255,0.85);
    stroke-width: 1.6;
    fill: none;
    stroke-dasharray: 26 460;
    animation: fxDash 5.5s linear infinite;
}

.hero--mesh .fx-node {
    fill: rgba(0,194,255,0.55);
    animation: fxNodePulse 4s ease-in-out infinite;
}

.hero--mesh .fx-node--lg {
    fill: rgba(0,194,255,0.9);
    filter: drop-shadow(0 0 6px rgba(0,194,255,0.8));
}

@keyframes fxDash {
    from { stroke-dashoffset: 486; }
    to   { stroke-dashoffset: 0; }
}

@keyframes fxNodePulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}


/* =====================================================
   3. Trilhas de Dados — traçado de circuito com pulsos
   ===================================================== */
.hero--circuit .hero__fx svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero--circuit .fx-trace {
    stroke: rgba(0,128,255,0.22);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero--circuit .fx-flow {
    stroke: rgba(0,194,255,0.9);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 34 620;
    filter: drop-shadow(0 0 5px rgba(0,194,255,0.7));
    animation: fxFlow 6s linear infinite;
}

.hero--circuit .fx-pad {
    fill: none;
    stroke: rgba(0,194,255,0.5);
    stroke-width: 1.5;
}

@keyframes fxFlow {
    from { stroke-dashoffset: 654; }
    to   { stroke-dashoffset: 0; }
}


/* =====================================================
   4. Chuva de Código — fluxos verticais de dados
   ===================================================== */
.hero--rain .hero__fx::before,
.hero--rain .hero__fx::after {
    content: '';
    position: absolute;
    inset: -20% 0;
    background-repeat: repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 62%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 62%, transparent);
}

/* fluxo lento e largo */
.hero--rain .hero__fx::before {
    background-image:
        linear-gradient(to bottom,
            transparent 0%,
            rgba(0,194,255,0.42) 40%,
            rgba(0,194,255,0.06) 50%,
            transparent 58%),
        linear-gradient(90deg,
            rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 104px 620px, 26px 100%;
    animation: fxRain 11s linear infinite;
}

/* fluxo rápido e fino, deslocado */
.hero--rain .hero__fx::after {
    background-image:
        linear-gradient(to bottom,
            transparent 0%,
            rgba(0,128,255,0.48) 44%,
            transparent 56%);
    background-size: 53px 360px;
    background-position: 26px 0;
    animation: fxRain 6s linear infinite;
}

@keyframes fxRain {
    from { background-position-y: 0; }
    to   { background-position-y: 620px; }
}


/* =====================================================
   5. Grade Cibernética — plano em perspectiva
   ===================================================== */
.hero--grid .hero__fx::before {
    content: '';
    position: absolute;
    left: -50%;
    right: -50%;
    bottom: 0;
    height: 56%;
    background-image:
        linear-gradient(rgba(0,194,255,0.45) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,194,255,0.32) 1px, transparent 1px);
    background-size: 80px 80px;
    transform: perspective(440px) rotateX(72deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.6) 45%, transparent 92%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.6) 45%, transparent 92%);
    animation: fxGrid 5s linear infinite;
}

@keyframes fxGrid {
    from { background-position: 0 0; }
    to   { background-position: 0 80px; }
}

/* brilho de horizonte */
.hero--grid .hero__fx::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 20%;
    width: 1300px;
    height: 300px;
    margin-left: -650px;
    background: radial-gradient(ellipse at center bottom,
        rgba(0,194,255,0.30) 0%, rgba(0,128,255,0.10) 40%, transparent 72%);
    filter: blur(34px);
}


/* =====================================================
   Responsivo — alivia o custo em telas pequenas
   ===================================================== */
@media (max-width: 768px) {
    .hero--radar .hero__fx::before,
    .hero--radar .hero__fx::after {
        left: 50%;
        top: 30%;
        width: 900px;
        height: 900px;
        margin: -450px 0 0 -450px;
    }

    .hero--grid .hero__fx::before { height: 62%; background-size: 54px 54px; }
    .hero--rain .hero__fx::before { background-size: 90px 500px; }
    .hero--rain .hero__fx::after  { background-size: 48px 300px; }
}