/* css/video-scrubber.css */

/* Faz a seção de vídeo ocupar toda a tela e usa um truque de perspectiva para o scroll */
.video-carousel {
    position: relative;
    min-height: 100vh; /* Para garantir que o usuário veja a seção inicial */
    /* Previne saltos visuais */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Força aceleração de hardware */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* O contêiner principal da sequência */
.video-sequence-scroll {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh; /* Ocupa a altura da janela de visualização */
    overflow: hidden;
    /* Previne saltos visuais */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Onde o Canvas será desenhado (fixo) */
.video-sequence-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden; /* Garante que o border-radius funcione */
}

/* Wrapper do canvas para aplicar transformações */
#canvas-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    overflow: hidden; /* Garante que o border-radius funcione */
    will-change: transform, border-radius; /* Otimização de performance */
}

/* Garante que o Canvas preencha o fundo */
#canvas-wrapper #hero-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta o vídeo/frame para cobrir o espaço */
    display: block;
}

/* Fallback caso o canvas não esteja dentro do wrapper */
#hero-canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-out;
}

/* Overlay gradiente para transição suave */
#gradient-overlay {
    position: absolute;
    inset: 0;
    z-index: 15;
    pointer-events: none;
    background: linear-gradient(to bottom right, 
        rgba(2, 25, 22, 0.8), 
        rgba(4, 47, 42, 0.7), 
        rgba(2, 25, 22, 0.6)
    );
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* Onde o conteúdo textual flutua por cima e cria a longa barra de rolagem */
#scrubber-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* ESSENCIAL: Cria o ESPAÇO LONGO de rolagem. 
       Ajuste esta altura para controlar a duração da animação (quanto mais alto, mais lento) */
    min-height: 150vh; 
}

/* Estilo básico para os títulos animados */
.title-sequence {
    position: fixed; /* Fixa o título na mesma posição do Canvas */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; /* Inicia invisível para a animação */
    font-size: 60px;
    color: white;
    text-align: center;
    pointer-events: none; /* Garante que o texto não bloqueie cliques */
}
#final-banner-wrapper {
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Ocupa a tela inteira */
    z-index: 20; /* Garante que fique acima do canvas e overlay */
    
    /* Começa invisível e ligeiramente deslocado para baixo */
    opacity: 0;
    transform: translateY(20px);
    
    /* Impede cliques enquanto estiver invisível */
    pointer-events: none; 

    /* Isso centralizará seu conteúdo (o .banner-top) */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Transição suave */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Estilos específicos para o banner final dentro do video-scrubber */
#final-banner-wrapper .banner-top {
    width: 100%;
    max-width: 1400px; /* Limita a largura para melhor legibilidade */
    padding: 0 50px;
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

/* Remove o background-image do box quando está no final-banner-wrapper */
#final-banner-wrapper .banner-top .box {
    background-image: none !important;
    background: transparent !important;
    height: auto !important;
    padding: 0 !important;
    display: block;
    border-radius: 0 !important;
}

/* Remove o gradiente do ::before quando está no final-banner-wrapper */
#final-banner-wrapper .banner-top .box::before {
    display: none !important;
}

/* Garante que o conteúdo seja visível sobre o canvas */
#final-banner-wrapper .banner-top .box .title-new {
    position: relative;
    z-index: 1;
}
/* Esconde o cursor padrão do mouse QUANDO ele estiver sobre a seção */

/* * O contêiner principal da mensagem.
 * Fica fixo na tela, invisível por padrão, e não pode ser clicado.
*/
#custom-cursor-message {
    position: fixed;
    z-index: 9999; /* Garante que fique acima de tudo */
    opacity: 0;
    pointer-events: none; /* ESSENCIAL: Permite cliques "através" dele */
    
    /* Centraliza no cursor (o JS define top/left) */
    transform: translate(-50%, -50%); 
    
    transition: opacity 0.3s ease-out;
    
    /* Estilo (baseado na sua imagem) */
    background: rgba(0, 0, 0, 0.75); /* Fundo escuro semi-transparente */
    color: #FFF;
    padding: 8px 15px;
    border-radius: 20px; /* Borda arredondada */
    font-family: Arial, sans-serif; /* Use a fonte do seu projeto */
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap; /* Impede que quebre a linha */
}

/* Classe que o JS adicionará para mostrar a mensagem */
#custom-cursor-message.visible {
    opacity: 1;
}