<!– HTML: Este é o contêiner principal para o vídeo –>
<div id=”intro-video” class=”intro-video” aria-hidden=”true”>
<video id=”intro-video-player” autoplay muted playsinline preload=”auto”>
<source src=”https://hidrolt.com.br/wp-content/uploads/2026/07/wp-1783953352411.mp4″ type=”video/mp4″>
</video>
</div>

<style>
/* Bloqueia rolagem enquanto a introdução estiver ativa */
html.intro-active,
body.intro-active {
width: 100%;
height: 100%;
overflow: hidden;
overscroll-behavior: none;
}

/* Vídeo de abertura */
.intro-video {
position: fixed;
z-index: 999999;
inset: 0;

width: 100vw;
width: 100dvw;

height: 100vh;
height: 100dvh;
min-height: -webkit-fill-available;

display: flex;
align-items: center;
justify-content: center;

overflow: hidden;
background: #000;
opacity: 1;
visibility: visible;
touch-action: none;

transition:
opacity 0.8s ease,
visibility 0s linear 0.8s;
}

.intro-video video {
display: block;
width: 100%;
height: 100%;
background: #000;
object-fit: contain;
}

/* Saída suave ao final do vídeo */
.intro-video.is-fading {
opacity: 0;
visibility: hidden;
pointer-events: none;
}

/*
* No mobile, cobre toda a tela e evita barras pretas
* acima e abaixo do vídeo.
*/
@media (max-width: 767px) {
.intro-video video {
object-fit: cover;
}
}
</style>

<script>
document.addEventListener(‘DOMContentLoaded’, function () {
const intro = document.getElementById(‘intro-video’);
const video = document.getElementById(‘intro-video-player’);

if (!intro || !video) return;

let scrollPosition = window.scrollY || window.pageYOffset;

function lockScroll() {
scrollPosition = window.scrollY || window.pageYOffset;

document.documentElement.classList.add(‘intro-active’);
document.body.classList.add(‘intro-active’);

/*
* position: fixed no body é importante principalmente no iOS,
* onde overflow:hidden pode não bloquear o scroll totalmente.
*/
document.body.style.position = ‘fixed’;
document.body.style.top = `-${scrollPosition}px`;
document.body.style.left = ‘0’;
document.body.style.right = ‘0’;
document.body.style.width = ‘100%’;
}

function unlockScroll() {
document.documentElement.classList.remove(‘intro-active’);
document.body.classList.remove(‘intro-active’);

document.body.style.position = ”;
document.body.style.top = ”;
document.body.style.left = ”;
document.body.style.right = ”;
document.body.style.width = ”;

window.scrollTo(0, scrollPosition);
}

function closeIntro() {
if (intro.classList.contains(‘is-fading’)) return;

intro.classList.add(‘is-fading’);

window.setTimeout(function () {
unlockScroll();
intro.remove();
}, 850);
}

lockScroll();

/*
* Bloqueia gestos de rolagem enquanto a intro estiver visível.
* passive:false é necessário para o preventDefault funcionar.
*/
function preventScroll(event) {
event.preventDefault();
}

document.addEventListener(‘touchmove’, preventScroll, { passive: false });
document.addEventListener(‘wheel’, preventScroll, { passive: false });

video.play().catch(function () {
closeIntro();
});

video.addEventListener(‘ended’, function () {
document.removeEventListener(‘touchmove’, preventScroll);
document.removeEventListener(‘wheel’, preventScroll);

closeIntro();
});

video.addEventListener(‘error’, function () {
document.removeEventListener(‘touchmove’, preventScroll);
document.removeEventListener(‘wheel’, preventScroll);

closeIntro();
});
});
</script>