/* ===============================================
    ESTILOS GERAIS E LAYOUT DA PÁGINA
    =============================================== */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;              /* Remove barras de rolagem */
    background: black;             /* Fundo preto para transição suave */
    display: flex;
    justify-content: center;       /* Centraliza o vídeo horizontalmente */
    align-items: center;           /* Centraliza o vídeo verticalmente */
    position: relative;
}

/* ===============================================
    ESTILO DO VÍDEO
    =============================================== */
video {
    width: 100%;                   /* Ocupa toda a largura */
    height: 100%;                  /* Ocupa toda a altura */
    object-fit: cover;             /* Cobre toda a área, sem distorcer */
    display: block;
    background: black;
    opacity: 0;                    /* Inicialmente invisível (para o fade-in) */
    animation: fadeInVideo 1.8s ease forwards; /* Animação de entrada Fade do vídeo */
}

/* Animação do vídeo do preto para visível */
@keyframes fadeInVideo {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===============================================
    ÍCONE CENTRAL PLAY/PAUSE
    =============================================== */
#playOverlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centraliza perfeitamente */
    cursor: pointer;
    z-index: 10;                      /* Fica sobre o vídeo */
    opacity: 0;                       /* Começa invisível */
    transition: opacity 0.5s ease;    /* Transição suave do fade */
    width: 120px;
    height: 120px;
    pointer-events: none;             /* Inicialmente, não clicável */
}

/* Classe que torna o ícone visível e clicável */
#playOverlay.visible {
    opacity: 0.3;
    pointer-events: auto;
}

/* Ícone em SVG (vetorial) */
#playOverlay svg {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease, fill 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6)); /* Sombra suave */
}

/* Animação de leve aumento ao passar o mouse */
#playOverlay:hover svg {
    transform: scale(1.1);
    fill: rgba(255, 255, 255, 1);
}

/* ===============================================
    BOTÃO FLUTUANTE DE ÁUDIO (🔊 / 🔇)
    =============================================== */
#audioToggle {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;             /* Botão circular */
    background: rgba(0, 0, 0, 0.6); /* Fundo escuro translúcido */
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    opacity: 0.9;
    transition: opacity 0.4s ease, background 0.3s ease;
}

/* Efeito hover do botão de áudio */
#audioToggle:hover {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

/* Esconde o botão de áudio */
#audioToggle.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ===============================================
    RESPONSIVIDADE — para telas menores (smartphones)
    =============================================== */
@media (max-width: 600px) {
    #playOverlay {
        width: 90px;
        height: 90px;
    }
    #audioToggle {
        width: 44px;
        height: 44px;
        font-size: 20px;
        bottom: 15px;
        right: 15px;
    }
}