/* Animate Flex — camada de fundo animada (vídeo scroll-scrub ou corredor 3D) */

.waf-wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #05070d;
}

/* Camada da animação (vídeo ou corredor) */
.waf-anim {
    position: absolute;
    inset: 0;
    container-type: inline-size;
}
.waf-anim video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
    will-change: transform;
    opacity: 0;
    transition: opacity .6s ease;
}
.waf-anim video.pronto { opacity: 1; }

/* Corredor 3D */
.waf-corridor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.waf-corridor-stage {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}
.waf-card {
    position: absolute;
    overflow: hidden;
    backface-visibility: hidden;
}
.waf-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay */
.waf-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

/* Barra de progresso (vídeo) */
.waf-barra {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(255,255,255,.12);
    z-index: 4;
}
.waf-barra-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.95));
    transform: scaleX(0);
    transform-origin: left center;
}

/* Texto sobreposto */
.waf-texto {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6vh 6%;
    text-align: center;
    pointer-events: none;
}
.waf-texto-inner { max-width: 900px; pointer-events: auto; }
.waf-titulo {
    color: #f2f4f8;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 30px rgba(0,0,0,.5);
}
.waf-sub {
    margin-top: 16px;
    color: rgba(242,244,248,.85);
    line-height: 1.4;
    text-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.waf-btn {
    display: inline-block;
    margin-top: 26px;
    padding: 14px 32px;
    background: #fff;
    color: #05070d;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .2s ease, opacity .2s ease;
    font-family: inherit;
}
.waf-btn:hover { transform: translateY(-2px); opacity: .92; }

/* Herança de fonte */
.waf-titulo, .waf-sub, .waf-btn { font-family: inherit; }

/* ── Modo fundo da seção (100% CSS, funciona no editor) ──
   O wrapper do widget é esticado para preencher a seção-pai, ficando
   atrás dos demais blocos. Não depende de JS nem da versão do Elementor. */
.elementor-widget-wm_animate_flex:has(.waf-modo-fundo) {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
.waf-modo-fundo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.waf-modo-fundo .waf-anim { container-type: inline-size; }
/* Fallback para navegadores sem :has() — usa a classe no wrapper via JS-livre:
   o próprio widget wrapper recebe a classe utilitária abaixo por CSS ancestral. */
.waf-modo-fundo-host {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    height: 100% !important;
    margin: 0 !important;
}

/* ── Modo VÍDEO: trilho sticky ── */
.waf-trilho {
    position: relative;
    width: 100%;
}
.waf-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
.waf-sticky .waf-anim { position: absolute; inset: 0; container-type: inline-size; }
.waf-sticky .waf-texto,
.waf-sticky .waf-overlay,
.waf-sticky .waf-barra { z-index: 3; }

/* Revelação: os estilos iniciais são aplicados via JS; aqui só a transição base */
.waf-revelar .waf-titulo,
.waf-revelar .waf-sub { will-change: transform, filter, opacity; }