/* ============================================================
   BFT HERO SKY PARALLAX V1
   Cielo + nubes CSS + Parlamento PNG transparente
   ============================================================ */


/* ------------------------------------------------------------
   ESCENA
   Desktop: ocupa el mismo espacio que la antigua hero-poster.
   ------------------------------------------------------------ */

html body #hero .bft-sky-scene{
    position:absolute !important;

    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:46% !important;

    width:54% !important;
    height:100% !important;

    overflow:hidden !important;

    z-index:1 !important;

    background:#75bfe9 !important;

    pointer-events:none !important;

    isolation:isolate !important;
}


/* ------------------------------------------------------------
   CIELO BASE
   No es una imagen: el azul lo genera CSS.
   ------------------------------------------------------------ */

html body #hero .bft-sky-base{
    position:absolute;

    inset:-8%;

    z-index:0;

    background:
        linear-gradient(
            180deg,
            #45a6df 0%,
            #68b9e8 36%,
            #9bd3ef 70%,
            #d7edf6 100%
        );

    transform:scale(1.04);
}


/* ------------------------------------------------------------
   CAPAS DE NUBES
   La primera prueba no necesita imágenes adicionales.
   ------------------------------------------------------------ */

html body #hero .bft-clouds{
    position:absolute;

    top:-12%;
    bottom:-12%;

    left:-20%;

    width:140%;
    height:124%;

    z-index:1;

    background-repeat:no-repeat;
    background-size:100% 100%;

    pointer-events:none;
}


/* NUBES LEJANAS */

html body #hero .bft-clouds-back{
    opacity:.55;

    filter:blur(10px);

    background:
        radial-gradient(
            ellipse at 10% 28%,
            rgba(255,255,255,.82) 0%,
            rgba(255,255,255,.64) 7%,
            rgba(255,255,255,.20) 15%,
            transparent 25%
        ),

        radial-gradient(
            ellipse at 29% 18%,
            rgba(255,255,255,.76) 0%,
            rgba(255,255,255,.52) 8%,
            rgba(255,255,255,.12) 17%,
            transparent 28%
        ),

        radial-gradient(
            ellipse at 51% 36%,
            rgba(255,255,255,.70) 0%,
            rgba(255,255,255,.48) 8%,
            rgba(255,255,255,.12) 18%,
            transparent 29%
        ),

        radial-gradient(
            ellipse at 72% 19%,
            rgba(255,255,255,.78) 0%,
            rgba(255,255,255,.50) 7%,
            rgba(255,255,255,.12) 16%,
            transparent 27%
        ),

        radial-gradient(
            ellipse at 91% 33%,
            rgba(255,255,255,.70) 0%,
            rgba(255,255,255,.42) 8%,
            rgba(255,255,255,.10) 17%,
            transparent 27%
        );

    animation:
        bftCloudBackDrift
        95s
        ease-in-out
        infinite
        alternate;
}


/* NUBES MÁS CERCANAS */

html body #hero .bft-clouds-front{
    z-index:2;

    opacity:.68;

    filter:blur(7px);

    background:
        radial-gradient(
            ellipse at 4% 55%,
            rgba(255,255,255,.94) 0%,
            rgba(255,255,255,.70) 8%,
            rgba(255,255,255,.20) 17%,
            transparent 28%
        ),

        radial-gradient(
            ellipse at 24% 63%,
            rgba(255,255,255,.86) 0%,
            rgba(255,255,255,.62) 7%,
            rgba(255,255,255,.15) 16%,
            transparent 27%
        ),

        radial-gradient(
            ellipse at 58% 57%,
            rgba(255,255,255,.88) 0%,
            rgba(255,255,255,.60) 8%,
            rgba(255,255,255,.14) 18%,
            transparent 29%
        ),

        radial-gradient(
            ellipse at 84% 49%,
            rgba(255,255,255,.92) 0%,
            rgba(255,255,255,.64) 8%,
            rgba(255,255,255,.16) 17%,
            transparent 28%
        );

    animation:
        bftCloudFrontDrift
        62s
        ease-in-out
        infinite
        alternate;
}


/* ------------------------------------------------------------
   MOVIMIENTO
   Alternate evita un salto visible al terminar el ciclo.
   ------------------------------------------------------------ */

@keyframes bftCloudBackDrift{

    from{
        transform:
            translate3d(-4%,0,0)
            scale(1.03);
    }

    to{
        transform:
            translate3d(5%,1%,0)
            scale(1.05);
    }

}


@keyframes bftCloudFrontDrift{

    from{
        transform:
            translate3d(4%,0,0)
            scale(1.04);
    }

    to{
        transform:
            translate3d(-6%,-1%,0)
            scale(1.06);
    }

}


/* ------------------------------------------------------------
   PARLAMENTO
   Siempre delante del cielo y de las nubes.
   ------------------------------------------------------------ */

html body #hero .bft-parliament{
    position:absolute !important;

    z-index:3 !important;

    right:-3% !important;
    bottom:-1% !important;

    width:108% !important;
    max-width:none !important;

    height:101% !important;

    object-fit:cover !important;
    object-position:center bottom !important;

    margin:0 !important;
    padding:0 !important;

    filter:
        saturate(.96)
        contrast(1.02)
        brightness(1.03);

    pointer-events:none !important;
    user-select:none !important;
}


/* ------------------------------------------------------------
   CAPAS EXISTENTES
   Dejamos curva + contenido por encima.
   ------------------------------------------------------------ */

html body #hero .hero-overlay{
    z-index:2 !important;
}

html body #hero .bft-hero-curve{
    z-index:3 !important;
}

html body #hero .hero-content{
    z-index:4 !important;
}


/* ------------------------------------------------------------
   TABLET / MÓVIL
   En móvil la escena vuelve a ocupar todo el hero.
   ------------------------------------------------------------ */

@media (max-width:1099px){

    html body #hero .bft-sky-scene{
        inset:0 !important;

        width:100% !important;
        height:100% !important;
    }


    html body #hero .bft-parliament{
        right:-18% !important;

        bottom:0 !important;

        width:136% !important;
        height:100% !important;

        object-fit:cover !important;
        object-position:55% bottom !important;
    }


    html body #hero .hero-overlay{
        inset:0 !important;

        width:100% !important;
        height:100% !important;

        z-index:2 !important;

        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.10) 0%,
                rgba(0,0,0,.22) 28%,
                rgba(0,0,0,.48) 60%,
                rgba(0,0,0,.78) 100%
            )
            !important;
    }


    html body #hero .bft-hero-curve{
        display:none !important;
    }


    html body #hero .hero-content{
        z-index:4 !important;
    }

}


/* ------------------------------------------------------------
   TELÉFONOS
   Ajuste más cerrado del Parlamento.
   ------------------------------------------------------------ */

@media (max-width:620px){

    html body #hero .bft-parliament{
        right:-31% !important;

        width:162% !important;

        object-position:55% bottom !important;
    }


    html body #hero .bft-clouds-back{
        opacity:.45;
    }


    html body #hero .bft-clouds-front{
        opacity:.56;
    }

}


/* ------------------------------------------------------------
   ACCESIBILIDAD
   Respeta usuarios que desactivan animaciones.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){

    html body #hero .bft-clouds{
        animation:none !important;
        transform:none !important;
    }

}


/* ============================================================
   BFT CLOUD MOTION V2
   Movimiento más visible y natural
   ============================================================ */


/* Nubes lejanas */
html body #hero .bft-clouds-back{
    opacity:.62 !important;

    filter:blur(7px) !important;

    animation:
        bftCloudBackDriftV2
        68s
        ease-in-out
        infinite
        alternate
        !important;
}


/* Nubes cercanas */
html body #hero .bft-clouds-front{
    opacity:.78 !important;

    filter:blur(4px) !important;

    animation:
        bftCloudFrontDriftV2
        42s
        ease-in-out
        infinite
        alternate
        !important;
}


/* La capa lejana recorre bastante distancia */
@keyframes bftCloudBackDriftV2{

    0%{
        transform:
            translate3d(-16%,0,0)
            scale(1.05);
    }

    50%{
        transform:
            translate3d(0,1.5%,0)
            scale(1.08);
    }

    100%{
        transform:
            translate3d(14%,-1%,0)
            scale(1.05);
    }

}


/* La capa cercana se mueve en dirección contraria */
@keyframes bftCloudFrontDriftV2{

    0%{
        transform:
            translate3d(15%,1%,0)
            scale(1.08);
    }

    50%{
        transform:
            translate3d(-2%,-1%,0)
            scale(1.10);
    }

    100%{
        transform:
            translate3d(-19%,1%,0)
            scale(1.08);
    }

}


/* Móvil: un poco más calmado */
@media (max-width:620px){

    html body #hero .bft-clouds-back{
        animation-duration:78s !important;
    }

    html body #hero .bft-clouds-front{
        animation-duration:52s !important;
    }

}



/* ============================================================
   BFT CLOUDS V3
   Nubes mucho más visibles y definidas
   ============================================================ */


/* Cielo con un poco más de contraste */
html body #hero .bft-sky-base{
    background:
        linear-gradient(
            180deg,
            #309edb 0%,
            #55afe1 38%,
            #83c8ea 70%,
            #c9e8f5 100%
        )
        !important;
}


/* ============================================================
   NUBES LEJANAS
   ============================================================ */

html body #hero .bft-clouds-back{

    opacity:.82 !important;

    filter:
        blur(2px)
        drop-shadow(
            0 12px 18px
            rgba(80,130,160,.10)
        )
        !important;

    background:

        /* nube izquierda */
        radial-gradient(
            ellipse at 8% 27%,
            rgba(255,255,255,.96) 0 5%,
            rgba(255,255,255,.78) 9%,
            transparent 17%
        ),

        radial-gradient(
            ellipse at 14% 24%,
            rgba(255,255,255,.98) 0 5%,
            rgba(255,255,255,.82) 9%,
            transparent 17%
        ),

        radial-gradient(
            ellipse at 20% 28%,
            rgba(255,255,255,.94) 0 5%,
            rgba(255,255,255,.74) 9%,
            transparent 17%
        ),


        /* nube centro */
        radial-gradient(
            ellipse at 43% 18%,
            rgba(255,255,255,.92) 0 4%,
            rgba(255,255,255,.72) 9%,
            transparent 17%
        ),

        radial-gradient(
            ellipse at 49% 15%,
            rgba(255,255,255,.98) 0 5%,
            rgba(255,255,255,.80) 9%,
            transparent 18%
        ),

        radial-gradient(
            ellipse at 55% 19%,
            rgba(255,255,255,.94) 0 5%,
            rgba(255,255,255,.72) 9%,
            transparent 17%
        ),


        /* nube derecha */
        radial-gradient(
            ellipse at 76% 31%,
            rgba(255,255,255,.94) 0 5%,
            rgba(255,255,255,.75) 9%,
            transparent 17%
        ),

        radial-gradient(
            ellipse at 82% 27%,
            rgba(255,255,255,.99) 0 5%,
            rgba(255,255,255,.82) 10%,
            transparent 18%
        ),

        radial-gradient(
            ellipse at 89% 31%,
            rgba(255,255,255,.94) 0 5%,
            rgba(255,255,255,.72) 9%,
            transparent 17%
        )

        !important;

}


/* ============================================================
   NUBES DELANTERAS
   Más grandes y blancas
   ============================================================ */

html body #hero .bft-clouds-front{

    opacity:.94 !important;

    filter:
        blur(.8px)
        drop-shadow(
            0 14px 18px
            rgba(65,110,140,.14)
        )
        !important;

    background:

        /* nube grande izquierda-baja */
        radial-gradient(
            ellipse at 5% 55%,
            rgba(255,255,255,1) 0 5%,
            rgba(255,255,255,.90) 10%,
            transparent 19%
        ),

        radial-gradient(
            ellipse at 12% 50%,
            rgba(255,255,255,1) 0 6%,
            rgba(255,255,255,.91) 11%,
            transparent 20%
        ),

        radial-gradient(
            ellipse at 20% 56%,
            rgba(255,255,255,.98) 0 6%,
            rgba(255,255,255,.84) 10%,
            transparent 19%
        ),


        /* nube centro */
        radial-gradient(
            ellipse at 46% 47%,
            rgba(255,255,255,.98) 0 5%,
            rgba(255,255,255,.86) 10%,
            transparent 18%
        ),

        radial-gradient(
            ellipse at 53% 42%,
            rgba(255,255,255,1) 0 6%,
            rgba(255,255,255,.92) 11%,
            transparent 20%
        ),

        radial-gradient(
            ellipse at 61% 49%,
            rgba(255,255,255,.98) 0 6%,
            rgba(255,255,255,.84) 10%,
            transparent 19%
        ),


        /* nube derecha */
        radial-gradient(
            ellipse at 78% 57%,
            rgba(255,255,255,.96) 0 5%,
            rgba(255,255,255,.82) 10%,
            transparent 18%
        ),

        radial-gradient(
            ellipse at 85% 52%,
            rgba(255,255,255,1) 0 6%,
            rgba(255,255,255,.90) 11%,
            transparent 20%
        ),

        radial-gradient(
            ellipse at 93% 58%,
            rgba(255,255,255,.98) 0 5%,
            rgba(255,255,255,.82) 10%,
            transparent 19%
        )

        !important;

}


/* movimiento visible */
html body #hero .bft-clouds-back{
    animation:
        bftCloudBackDriftV3
        52s
        linear
        infinite
        alternate
        !important;
}


html body #hero .bft-clouds-front{
    animation:
        bftCloudFrontDriftV3
        32s
        linear
        infinite
        alternate
        !important;
}


@keyframes bftCloudBackDriftV3{

    from{
        transform:
            translate3d(-13%,0,0)
            scale(1.04);
    }

    to{
        transform:
            translate3d(13%,1%,0)
            scale(1.04);
    }

}


@keyframes bftCloudFrontDriftV3{

    from{
        transform:
            translate3d(14%,0,0)
            scale(1.05);
    }

    to{
        transform:
            translate3d(-15%,-1%,0)
            scale(1.05);
    }

}


@media (max-width:620px){

    html body #hero .bft-clouds-back{
        opacity:.72 !important;
    }

    html body #hero .bft-clouds-front{
        opacity:.84 !important;
    }

}



/* ============================================================
   BFT CLOUDS V4
   Menos nubes, más grandes y más rápidas
   ============================================================ */


/* Cielo un poco más limpio */
html body #hero .bft-sky-base{
    background:
        linear-gradient(
            180deg,
            #3aa8e2 0%,
            #63b9e8 42%,
            #9dd5f0 75%,
            #d8eef8 100%
        )
        !important;
}


/* ------------------------------------------------------------
   CAPA TRASERA
   Solo 2 grupos grandes
   ------------------------------------------------------------ */
html body #hero .bft-clouds-back{
    opacity:.55 !important;
    filter:blur(5px) !important;

    background:

        radial-gradient(
            ellipse at 22% 24%,
            rgba(255,255,255,.92) 0 7%,
            rgba(255,255,255,.62) 12%,
            transparent 22%
        ),

        radial-gradient(
            ellipse at 30% 20%,
            rgba(255,255,255,.98) 0 8%,
            rgba(255,255,255,.66) 13%,
            transparent 23%
        ),

        radial-gradient(
            ellipse at 40% 25%,
            rgba(255,255,255,.90) 0 7%,
            rgba(255,255,255,.58) 12%,
            transparent 22%
        ),


        radial-gradient(
            ellipse at 70% 34%,
            rgba(255,255,255,.90) 0 7%,
            rgba(255,255,255,.60) 12%,
            transparent 22%
        ),

        radial-gradient(
            ellipse at 79% 30%,
            rgba(255,255,255,.98) 0 8%,
            rgba(255,255,255,.68) 13%,
            transparent 23%
        ),

        radial-gradient(
            ellipse at 88% 35%,
            rgba(255,255,255,.88) 0 7%,
            rgba(255,255,255,.56) 12%,
            transparent 22%
        )

        !important;

    animation:
        bftCloudBackDriftV4
        24s
        linear
        infinite
        alternate
        !important;
}


/* ------------------------------------------------------------
   CAPA DELANTERA
   Solo 2 grupos grandes y visibles
   ------------------------------------------------------------ */
html body #hero .bft-clouds-front{
    opacity:.78 !important;
    filter:blur(2px) !important;

    background:

        radial-gradient(
            ellipse at 18% 58%,
            rgba(255,255,255,1) 0 8%,
            rgba(255,255,255,.88) 14%,
            transparent 25%
        ),

        radial-gradient(
            ellipse at 28% 53%,
            rgba(255,255,255,1) 0 9%,
            rgba(255,255,255,.90) 15%,
            transparent 26%
        ),

        radial-gradient(
            ellipse at 40% 60%,
            rgba(255,255,255,.98) 0 8%,
            rgba(255,255,255,.82) 14%,
            transparent 24%
        ),


        radial-gradient(
            ellipse at 60% 48%,
            rgba(255,255,255,.98) 0 8%,
            rgba(255,255,255,.84) 14%,
            transparent 24%
        ),

        radial-gradient(
            ellipse at 72% 43%,
            rgba(255,255,255,1) 0 9%,
            rgba(255,255,255,.90) 15%,
            transparent 26%
        ),

        radial-gradient(
            ellipse at 84% 49%,
            rgba(255,255,255,.97) 0 8%,
            rgba(255,255,255,.80) 14%,
            transparent 24%
        )

        !important;

    animation:
        bftCloudFrontDriftV4
        14s
        linear
        infinite
        alternate
        !important;
}


/* Movimiento más rápido */
@keyframes bftCloudBackDriftV4{
    from{
        transform:
            translate3d(-10%,0,0)
            scale(1.03);
    }
    to{
        transform:
            translate3d(10%,1%,0)
            scale(1.03);
    }
}

@keyframes bftCloudFrontDriftV4{
    from{
        transform:
            translate3d(12%,0,0)
            scale(1.04);
    }
    to{
        transform:
            translate3d(-12%,-1%,0)
            scale(1.04);
    }
}


/* En móvil un poco más moderado */
@media (max-width:620px){

    html body #hero .bft-clouds-back{
        animation-duration:28s !important;
        opacity:.46 !important;
    }

    html body #hero .bft-clouds-front{
        animation-duration:18s !important;
        opacity:.66 !important;
    }

}



/* ============================================================
   BFT STAR VIDEO HERO V1
   Fondo negro animado del proyecto HONOR
   ============================================================ */


/* escena completamente negra */
html body #hero .bft-sky-scene{
    background:#000 !important;
}


/* eliminar visualmente cielo y nubes anteriores */
html body #hero .bft-sky-base,
html body #hero .bft-clouds,
html body #hero .bft-clouds-back,
html body #hero .bft-clouds-front{
    display:none !important;
    animation:none !important;
}


/* video de estrellas */
html body #hero .bft-stars-video{
    position:absolute !important;

    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;

    width:100% !important;
    height:100% !important;

    display:block !important;

    object-fit:cover !important;
    object-position:center center !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    opacity:1 !important;

    z-index:0 !important;

    pointer-events:none !important;
}


/* Parlamento siempre delante del video */
html body #hero .bft-parliament{
    position:absolute !important;
    z-index:3 !important;
}


/* curva y contenido permanecen delante */
html body #hero .hero-overlay{
    z-index:2 !important;
}

html body #hero .bft-hero-curve{
    z-index:4 !important;
}

html body #hero .hero-content{
    z-index:5 !important;
}


/* Escritorio */
@media (min-width:1100px){

    html body #hero .bft-stars-video{
        object-fit:cover !important;
        object-position:center center !important;
    }

}


/* Tablet y móvil */
@media (max-width:1099px){

    html body #hero .bft-stars-video{
        object-fit:cover !important;
        object-position:center center !important;
    }

}


/* El video no necesita ninguna animación CSS adicional */
@media (prefers-reduced-motion:reduce){

    html body #hero .bft-stars-video{
        transform:none !important;
    }

}



/* ============================================================
   BFT HERO LOADING BACKGROUND WHITE
   Fondo visible mientras cargan video + Parlamento
   ============================================================ */

html body #hero .bft-sky-scene{
    background:#ffffff !important;
}

html body #hero .bft-stars-video{
    background:#ffffff !important;
}