/**
 * Intelisis banner V2 — vídeo full-bleed detrás del lienzo 300×600.
 * Usar junto a index-video.html + assets/banner-bg-cinematic.mp4
 */

.banner-container--video {
    background-color: #0a1628 !important;
    background-image: none !important;
    animation: none !important;
}

.banner-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
}

.banner-video-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    animation: bannerVideoScrim 8s infinite linear;
}

@keyframes bannerVideoScrim {
    0%, 100% {
        background: rgba(6, 14, 28, 0.48);
    }
    12% {
        background: rgba(6, 14, 28, 0.42);
    }
    22%, 88% {
        background: rgba(4, 12, 26, 0.28);
    }
    96% {
        background: rgba(6, 14, 28, 0.48);
    }
}

.banner-container--video .top-section {
    z-index: 2;
}

.banner-container--video .title-main {
    color: #fff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(0, 0, 0, 0.35);
}

.banner-container--video .subtitle-box {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* V2 elegante: sin panel azul gigante ni olas — el vídeo sigue visible; solo franja inferior legible */
.banner-container--video .wave-container {
    display: none !important;
}

.banner-container--video .solution-wrapper {
    height: 236px;
    transform: translateY(100%);
    /* Una sola vez: sube y NO vuelve a esconderse (nada de loop de 8s aquí) */
    animation: slideUpVideoBarOnce 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.banner-container--video .solution-text {
    margin-bottom: 10px;
    font-size: 16px;
    animation: videoV2SolutionTextEnter 2.2s forwards both;
}

.banner-container--video .solution-text .solution-lead {
    font-size: 17px;
}

.banner-container--video .cta-button {
    margin-bottom: 12px;
    padding: 10px 18px;
    font-size: 12px;
    animation: videoV2CTAEnter 2.2s forwards both;
}

.banner-container--video .logo-container {
    animation: videoV2LogoEnter 2.2s forwards both;
}

.banner-container--video .highlight-ia {
    /* Pulso continuo sin tocar opacidad del bloque */
    animation: videoV2PulseIALoop 2.4s ease-in-out infinite;
}

.banner-container--video .bottom-section {
    top: 0;
    height: 100%;
    padding-top: 24px;
    background: linear-gradient(
        to top,
        rgba(4, 20, 42, 0.88) 0%,
        rgba(4, 20, 42, 0.45) 50%,
        rgba(4, 20, 42, 0) 100%
    );
}

@keyframes slideUpVideoBarOnce {
    0% {
        transform: translateY(100%);
    }
    8% {
        transform: translateY(100%);
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }
    48% {
        transform: translateY(-8px);
        animation-timing-function: cubic-bezier(0.34, 1.25, 0.64, 1);
    }
    58%,
    100% {
        transform: translateY(0);
    }
}

@keyframes videoV2SolutionTextEnter {
    0%,
    48% {
        opacity: 0;
        transform: translateY(12px);
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    58%,
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes videoV2CTAEnter {
    0%,
    52% {
        opacity: 0;
        transform: scale(0.82);
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    62% {
        opacity: 1;
        transform: scale(1.05);
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    68%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes videoV2LogoEnter {
    0%,
    62% {
        opacity: 0;
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    72%,
    100% {
        opacity: 1;
    }
}

@keyframes videoV2PulseIALoop {
    0%,
    100% {
        transform: scale(1) rotate(1deg);
        background-color: var(--intelisis-orange-cta, #f39200);
    }
    50% {
        transform: scale(1.06) rotate(0deg);
        background-color: var(--intelisis-orange-bright, #ffaa00);
    }
}