/* ================================================================
   BEN-BATI — FOND ARCHITECTURAL ANIMÉ
   Planos técnicos con desplazamiento continuo (CSS Keyframes)
   Capa de fondo pura — z-index negativo, no afecta contenido
   60 FPS — GPU-accelerated via transform
   ================================================================ */

/* ================================================================
   1. CAPA BASE — Fondo sólido + override del grid estático anterior
   ================================================================ */
html {
    background-color: #0b1f36;
}

/* Desactivar los pseudo-elementos de grid estáticos del blueprint.css original */
html::before,
html::after {
    display: none;
}

/* Eliminar el grid drift viejo de animations.css */
@keyframes grid-drift-old {
    0%, 100% { background-position: 0 0; }
}

/* ================================================================
   2. CONTENEUR DE FOND ANIMÉ
   Se inserta como primer hijo del body vía JS (o como capa fixed)
   ================================================================ */
.blueprint-animated-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}

/* ================================================================
   3. CAPA 1 — Cuadrícula estructural mayor (60px) con deriva lenta
   ================================================================ */
.blueprint-animated-bg__grid-major {
    position: absolute;
    inset: -60px; /* Déborde pour couvrir le décalage de l'animation */
    background-image:
        linear-gradient(rgba(0, 200, 240, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 200, 240, 0.055) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: bg-scroll-slow 80s linear infinite;
}

/* ================================================================
   4. CAPA 2 — Cuadrícula técnica fina (20px) con deriva media
   ================================================================ */
.blueprint-animated-bg__grid-minor {
    position: absolute;
    inset: -20px;
    background-image:
        linear-gradient(rgba(120, 220, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 220, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: bg-scroll-medium 45s linear infinite;
}

/* ================================================================
   5. CAPA 3 — Croquis de maisons / lignes architecturales (SVG base64)
   Patron subtil de formes de bâtiments — dérive très lente
   ================================================================ */
.blueprint-animated-bg__sketches {
    position: absolute;
    inset: -200px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='rgba(0,210,255,0.06)' stroke-width='1'%3E%3C!-- Maison 1 --%3E%3Cpath d='M40 200 L40 140 L70 110 L100 140 L100 200'/%3E%3Cpath d='M55 200 L55 160 L85 160 L85 200'/%3E%3Cpath d='M65 140 L65 125 L75 125 L75 140'/%3E%3C!-- Maison 2 --%3E%3Cpath d='M180 220 L180 150 L220 120 L260 150 L260 220'/%3E%3Cpath d='M195 220 L195 180 L245 180 L245 220'/%3E%3Cpath d='M210 150 L210 135 L230 135 L230 150'/%3E%3Crect x='215' y='195' width='15' height='25'/%3E%3C!-- Tour / immeuble --%3E%3Crect x='270' y='100' width='20' height='120'/%3E%3Cline x1='270' y1='115' x2='290' y2='115'/%3E%3Cline x1='270' y1='130' x2='290' y2='130'/%3E%3Cline x1='270' y1='145' x2='290' y2='145'/%3E%3Cline x1='270' y1='160' x2='290' y2='160'/%3E%3Cline x1='270' y1='175' x2='290' y2='175'/%3E%3C!-- Cercle technique / boussole --%3E%3Ccircle cx='50' cy='80' r='20'/%3E%3Ccircle cx='50' cy='80' r='14' stroke-dasharray='4 3'/%3E%3Cline x1='50' y1='60' x2='50' y2='100'/%3E%3Cline x1='30' y1='80' x2='70' y2='80'/%3E%3Cline x1='36' y1='66' x2='64' y2='94'/%3E%3Cline x1='64' y1='66' x2='36' y2='94'/%3E%3Ccircle cx='50' cy='80' r='3'/%3E%3C!-- Cotations --%3E%3Cline x1='80' y1='45' x2='140' y2='45'/%3E%3Cline x1='80' y1='40' x2='80' y2='50'/%3E%3Cline x1='140' y1='40' x2='140' y2='50'/%3E%3Ctext x='95' y='42' font-size='7' fill='rgba(0,200,240,0.08)' font-family='monospace'%3E6,00 m%3C/text%3E%3C!-- Grue simplifiée --%3E%3Cline x1='160' y1='50' x2='160' y2='80'/%3E%3Cline x1='145' y1='50' x2='175' y2='50' stroke-width='1.5'/%3E%3Cline x1='160' y1='80' x2='160' y2='200' stroke-dasharray='3 6'/%3E%3Cline x1='175' y1='60' x2='175' y2='80'/%3E%3Cline x1='145' y1='60' x2='145' y2='80'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 300px 300px;
    animation: bg-scroll-very-slow 120s linear infinite;
    opacity: 0.7;
}

/* ================================================================
   6. CAPA 4 — Croix de repère (targets) éparses — deriva inversa
   ================================================================ */
.blueprint-animated-bg__targets {
    position: absolute;
    inset: -80px;
    background-image:
        radial-gradient(circle, rgba(0, 220, 255, 0.05) 0.5px, transparent 0.5px);
    background-size: 120px 120px;
    background-position: 30px 30px;
    animation: bg-scroll-reverse 65s linear infinite;
}

/* ================================================================
   KEYFRAMES — Desplazamientos continuos
   Cada capa se mueve a velocidad y dirección distintas
   → efecto parallax arquitectónico
   ================================================================ */
@keyframes bg-scroll-slow {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(60px, 30px); }
}

@keyframes bg-scroll-medium {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-20px, 20px); }
}

@keyframes bg-scroll-very-slow {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(15px, -25px); }
}

@keyframes bg-scroll-reverse {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-40px, 15px); }
}

/* ================================================================
   7. PARTÍCULAS — Reemplazo de las viejas partículas
   ================================================================ */
.blueprint-animated-bg__particles {
    position: absolute;
    inset: 0;
}

/* Cada partícula se genera por JS con estilos inline */

/* ================================================================
   8. RESPETO DE PREFERENCIAS DEL SISTEMA
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .blueprint-animated-bg__grid-major,
    .blueprint-animated-bg__grid-minor,
    .blueprint-animated-bg__sketches,
    .blueprint-animated-bg__targets {
        animation: none !important;
    }
}