/* /home/evodrones/backend/static/assets/css/home_animation_layout1.css */

#evo-sky-drones-v1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Mantém no fundo, atrás de todo o conteúdo */
    overflow: hidden; /* Garante que drones e nuvens não saiam da área visível */
    background: linear-gradient(to bottom, #87CEEB 0%, #ADD8E6 70%, #B0E0E6 100%);
    animation: skyBackgroundTransition-layout1 120s ease infinite alternate;
}

@keyframes skyBackgroundTransition-layout1 {
    0% {
        background: linear-gradient(to bottom, #87CEEB 20%, #B0E0E6 100%); /* Manhã Clara */
    }
    25% {
        background: linear-gradient(to bottom, #4682B4 0%, #87CEFA 60%, #ADD8E6 100%); /* Meio-dia */
    }
    50% {
        background: linear-gradient(to bottom, #ff7e5f 0%, #feb47b 50%, #87CEFA 100%); /* Entardecer */
    }
    75% {
        background: linear-gradient(to bottom, #2c3e50 0%, #4a69bd 50%, #6a89cc 100%); /* Crepúsculo */
    }
    100% {
        background: linear-gradient(to bottom, #000030 0%, #2c3e50 70%, #4a69bd 100%); /* Noite (estrelas podem ser adicionadas via JS) */
    }
}

.cloud-layout1 {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50px;
    opacity: 0.6;
    filter: blur(8px);
    animation-name: cloudDrift-layout1;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
    pointer-events: none; /* Nuvens não devem interceptar cliques */
}

.cloud-layout1::before, .cloud-layout1::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    filter: blur(6px);
}

/* Tipos de Nuvens */
.cloud-layout1.typeA { width: 220px; height: 70px; }
.cloud-layout1.typeA::before { width: 130px; height: 130px; top: -65px; left: 20px; }
.cloud-layout1.typeA::after { width: 150px; height: 100px; top: -45px; right: 15px; }

.cloud-layout1.typeB { width: 330px; height: 100px; }
.cloud-layout1.typeB::before { width: 190px; height: 190px; top: -90px; left: 30px; }
.cloud-layout1.typeB::after { width: 220px; height: 150px; top: -70px; right: 20px; }

.cloud-layout1.typeC { width: 160px; height: 50px; }
.cloud-layout1.typeC::before { width: 90px; height: 90px; top: -40px; left: 12px; }
.cloud-layout1.typeC::after { width: 110px; height: 80px; top: -30px; right: 8px; }

@keyframes cloudDrift-layout1 {
    0% { transform: translateX(-450px); }
    100% { transform: translateX(calc(100vw + 450px)); }
}

.drone-layout1 {
    position: absolute;
    width: 80px; /* Tamanho do drone, pode ajustar */
    height: auto;
    will-change: transform, opacity;
    transition: opacity 0.5s ease;
    z-index: 10; /* Drones acima das nuvens, mas abaixo de outros conteúdos se necessário */
}

.drone-layout1 svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}

/* Estilos para as hélices do SVG, se o SVG tiver classes para elas */
.drone-layout1 .propeller-path {
    animation: spin-propeller-layout1 0.05s linear infinite;
    transform-origin: center;
}

/* Header Text Visibility & Hero Text Readability Fixes */
.orbitron.neon-blue {
    color: #00E5FF; /* Bright cyan */
    text-shadow: 0 0 5px #00E5FF, 0 0 10px #00E5FF, 0 0 15px #00E5FF; /* Neon glow */
}

.nav-link.neon-cyan,
.orbitron.neon-cyan {
    color: black; /* Black text */
    text-shadow: none; /* Remove neon glow */
}
.nav-link.neon-cyan:hover,
.orbitron.neon-cyan:hover {
    color: black; /* Black text on hover */
    text-shadow: none; /* Remove neon glow */
}

.hero h2.text-sky-700,
.hero p.text-slate-600 {
    /* Tailwind classes text-sky-700 and text-slate-600 might be overridden by specificity */
    /* Consider adding a custom class or using !important if issues persist */
    color: #E0F2FE; /* A very light blue, good for most backgrounds */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6), 0 0 5px rgba(0,0,0,0.4);
}

/* Ensure hero paragraph also has a contrasting color if default slate is too dark */
.hero p.text-slate-600 {
    color: #D1D5DB; /* Lighter gray, adjust as needed */
}

@keyframes spin-propeller-layout1 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}