/* Overlay visível por padrão */
#intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #000;
  opacity: 1;
  transition: opacity .6s ease, filter .6s ease; /* <— transição suave */
}

/* Vídeo com o teu zoom já definido */
#intro video {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  animation: introZoom 4s ease-out forwards;
  transform-origin: center;
  will-change: transform;
}

@keyframes introZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Mobile: mais zoom */
@media (max-width: 768px){
  #intro video { animation-name: introZoomMobile; }
  @keyframes introZoomMobile {
    from { transform: scale(1.08); }
    to   { transform: scale(2.5); } /* ajusta se for demais */
  }
}

/* Estado de saída do overlay (aplicado via JS) */
#intro.exiting {
  opacity: 0;
  filter: blur(8px);
  pointer-events: none; /* não bloqueia cliques durante o fade */
}

/* Crossfade do site (opcional, dá um toque extra de suavidade) */
body:not(.site-ready) > :not(#intro) { opacity: 0; }
body.site-ready > :not(#intro) {
  animation: siteFadeIn .5s ease .05s both;
}
@keyframes siteFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  #intro,
  #intro video { animation: none !important; transition: none !important; }
  #intro.exiting { opacity: 0; filter: none; }
}