@charset "utf-8";

/* 1. Força o fundo preto em toda a hierarquia para o blend não ter erro */


.main-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 260px); 
    width: 100%;

    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    /* Isso cria o contexto necessário para o blend mode */
    /* isolation: isolate;  ← remova ou comente */
}

.container-abertura {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

video#vinheta {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    
    /* MODO DE MISTURA */
    mix-blend-mode: screen;
    


    
    z-index: 1;
}

#btn-play {
    position: absolute;
    z-index: 10; /* Garante que fique acima do vídeo */
    width: 75px;
    height: 75px;
    
    /* Posicionamento horizontal central */
    left: 50%;
    
    /* Posicionamento vertical a 75% da área */
    top: 95%;
    
    /* Ajuste para o centro do botão ficar no ponto exato */
    transform: translate(-50%, -50%);
    
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.3s;
}

/* Efeito de feedback ao passar o mouse */
#btn-play:hover {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.8;
}

/* Quando o som estiver ligado ou o vídeo rodando, 
   você pode decidir se esconde o botão via JS */
.video-playing #btn-play {
    opacity: 0;
    pointer-events: none;
}


@media (max-width: 900px) {
	.main-container {
    height: calc(100vh - 560px); 
		    min-height: 60vh;
		
	}
	video#vinheta {
    width: 100%;
    height: 100%;

}
	#btn-play {

    width: 45px;
    height: 45px;
	}
}