﻿/* Parallax Internal - Profundidade e Movimento */
.parallax-internal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Esconder parallax na primeira seçéo (hero) */
body .hero-section,
body .hero-section ~ * .parallax-internal {
    position: relative;
    z-index: 1;
}

.hero-section {
    position: relative;
    z-index: 2;
    background: #0A0A0A;
}

/* Esconder parallax em seções CTA (laranjas) */
.cta-section {
    position: relative;
    z-index: 100;
    isolation: isolate;
    background: var(--primary-color);
}

/* Força esconder todos os elementos do parallax quando CTA está visível */
.cta-section ~ .parallax-internal,
.cta-section + * .parallax-internal {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Partículas - Pequenas esferas flutuantes */
.parallax-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 1s ease-out;
    will-change: transform;
    box-shadow: 0 0 10px currentColor;
    animation: particle-float infinite ease-in-out alternate;
}

.parallax-particle.active {
    opacity: 0.6;
}

@keyframes particle-float {
    0% {
        transform: translateY(0) scale(1);
    }
    100% {
        transform: translateY(-30px) scale(1.2);
    }
}

/* Orbes - Esferas grandes com blur */
.parallax-orb {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 1.5s ease-out;
    will-change: transform;
    animation: orb-pulse infinite ease-in-out alternate;
}

.parallax-orb.active {
    opacity: 0.4;
}

@keyframes orb-pulse {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }
    100% {
        transform: scale(1.15);
        opacity: 0.5;
    }
}

/* Linhas conectoras */
.parallax-line {
    position: absolute;
    height: 1px;
    opacity: 0;
    transition: opacity 1.2s ease-out;
    will-change: transform;
    transform-origin: left center;
}

.parallax-line.active {
    opacity: 0.3;
}

/* Formas geométricas flutuantes */
.parallax-shape {
    position: absolute;
    opacity: 0;
    border: 2px solid;
    transition: opacity 1s ease-out;
    will-change: transform;
    animation: shape-rotate infinite linear;
}

.parallax-shape.active {
    opacity: 0.15;
}

.parallax-shape.circle {
    border-radius: 50%;
}

.parallax-shape.square {
    border-radius: 8px;
}

.parallax-shape.hexagon {
    clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
}

.parallax-shape.triangle {
    width: 0 !important;
    height: 0 !important;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 52px solid;
    background: none !important;
    border-top-color: transparent;
}

@keyframes shape-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Otimizações de performance */
.parallax-internal * {
    backface-visibility: hidden;
    perspective: 1000px;
    transform: translateZ(0);
}

/* Efeitos de profundidade adicionais */
.parallax-particle:nth-child(3n) {
    animation-duration: 18s;
}

.parallax-particle:nth-child(3n+1) {
    animation-duration: 22s;
}

.parallax-particle:nth-child(3n+2) {
    animation-duration: 26s;
}

.parallax-orb:nth-child(2n) {
    animation-duration: 30s;
}

.parallax-orb:nth-child(2n+1) {
    animation-duration: 35s;
}

.parallax-shape:nth-child(4n) {
    animation-duration: 40s;
}

.parallax-shape:nth-child(4n+1) {
    animation-duration: 50s;
}

.parallax-shape:nth-child(4n+2) {
    animation-duration: 60s;
}

.parallax-shape:nth-child(4n+3) {
    animation-duration: 45s;
}

/* Responsive - Reduzir complexidade em mobile */
@media (max-width: 768px) {
    .parallax-particle,
    .parallax-orb,
    .parallax-line,
    .parallax-shape {
        opacity: 0.3 !important;
    }
    
    .parallax-particle:nth-child(n+30),
    .parallax-orb:nth-child(n+5),
    .parallax-line:nth-child(n+8),
    .parallax-shape:nth-child(n+10) {
        display: none;
    }
}

@media (max-width: 480px) {
    .parallax-particle:nth-child(n+20),
    .parallax-orb:nth-child(n+3),
    .parallax-line:nth-child(n+5),
    .parallax-shape:nth-child(n+6) {
        display: none;
    }
}

/* Modo de economia de energia */
@media (prefers-reduced-motion: reduce) {
    .parallax-particle,
    .parallax-orb,
    .parallax-line,
    .parallax-shape {
        animation: none !important;
        opacity: 0.2 !important;
    }
}

/* Elementos Tecnológicos - IA */

/* Nós Neurais */
.neural-node {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 1s ease-out;
    will-change: transform;
    animation: neural-pulse 3s ease-in-out infinite;
}

.neural-node.active {
    opacity: 0.8;
}

@keyframes neural-pulse {
    0%, 100% {
        opacity: 0.6;
        box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 20px currentColor, 0 0 40px currentColor, 0 0 60px currentColor;
    }
}

/* Conexões Neurais */
.neural-connection {
    position: absolute;
    height: 1px;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    will-change: transform;
    transform-origin: left center;
    animation: connection-pulse 4s ease-in-out infinite;
}

.neural-connection.active {
    opacity: 0.3;
}

@keyframes connection-pulse {
    0%, 100% {
        opacity: 0.1;
    }
    50% {
        opacity: 0.4;
    }
}

/* Grid Tecnológico */
.tech-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.15;
}

.grid-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, #3498DB, transparent);
}

.grid-line.horizontal {
    width: 100%;
    height: 1px;
    animation: grid-scan-horizontal 8s ease-in-out infinite;
}

.grid-line.vertical {
    height: 100%;
    width: 1px;
    background: linear-gradient(180deg, transparent, #9B59B6, transparent);
    animation: grid-scan-vertical 10s ease-in-out infinite;
}

@keyframes grid-scan-horizontal {
    0%, 100% {
        opacity: 0.1;
        box-shadow: 0 0 5px #3498DB;
    }
    50% {
        opacity: 0.4;
        box-shadow: 0 0 15px #3498DB, 0 0 30px #3498DB;
    }
}

@keyframes grid-scan-vertical {
    0%, 100% {
        opacity: 0.1;
        box-shadow: 0 0 5px #9B59B6;
    }
    50% {
        opacity: 0.4;
        box-shadow: 0 0 15px #9B59B6, 0 0 30px #9B59B6;
    }
}

/* Fluxo de Dados */
.data-flow {
    position: absolute;
    width: 2px;
    opacity: 0;
    animation: data-stream 5s linear forwards;
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

@keyframes data-stream {
    0% {
        top: -10%;
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        top: 110%;
        opacity: 0;
    }
}

/* Efeitos adicionais para página de IA */
.parallax-internal .parallax-particle {
    box-shadow: 0 0 8px currentColor, 0 0 15px currentColor;
}

.parallax-internal .parallax-orb {
    box-shadow: 0 0 40px currentColor, 0 0 80px currentColor;
}
