/* ==========================================================================
   BLOCO: Abertura — vídeo de entrada em tela cheia
   HTML: <div class="intro" data-intro>  ·  JS: js/sections/abertura.js
   Toca uma vez a cada carregamento (inclusive ao recarregar, como pedido) e
   se dissolve na página. O arquivo certo é escolhido pelo formato da tela:
     Assets/videos/abertura-desktop.mp4  1920×1080 · 4,0s · telas deitadas
     Assets/videos/abertura-mobile.mp4   1080×1920 · 3,2s · telas em pé
   O enquadramento também se adapta (abertura.js alterna entre preencher e
   mostrar o vídeo inteiro), então 21:9, 4:3, tablet em pé ou celular deitado
   funcionam sem barras à vista — o fundo do vídeo é o mesmo preto da página.
   Sem JS (sem .js no <html>) a abertura não aparece.
   ========================================================================== */

.intro {
  display: none;
}

html.js .intro {
  --intro-out: 700ms;
  position: fixed;
  inset: 0;
  z-index: 300; /* acima da nav (100) e do skip link (200) */
  display: block;
  background: var(--c-bg);
  transition: opacity var(--intro-out) var(--ease);
}

/* Enquanto a abertura toca, a página não rola (a classe sai no fim do vídeo,
   em js/sections/abertura.js) */
html.is-intro,
html.is-intro body {
  overflow: hidden;
}

.intro__video {
  width: 100%;
  height: 100%;
  /* "contain" entra no lugar deste valor quando a tela foge muito do formato
     do vídeo — quem decide é o abertura.js */
  object-fit: cover;
  object-position: center;
  transition: transform var(--intro-out) var(--ease);
}

/* Saída: a tela se dissolve enquanto o vídeo avança um pouco */
.intro.is-leaving {
  opacity: 0;
  pointer-events: none;
}
.intro.is-leaving .intro__video {
  transform: scale(1.06);
}

/* --- Pular -----------------------------------------------------------------
   Aparece depois de 1,2s para não disputar com o começo da animação.
   ------------------------------------------------------------------------ */
.intro__skip {
  position: absolute;
  right: var(--grid-margin);
  bottom: var(--grid-margin);
  padding: 10px var(--s-20);
  border: var(--stroke) solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  color: var(--c-text-muted);
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  letter-spacing: var(--t-tag-ls);
  text-transform: uppercase;
  opacity: 0;
  animation: bd-intro-skip-in var(--dur) var(--ease) 1200ms forwards;
  transition: color var(--dur-fast) var(--ease);
}
.intro__skip:hover {
  color: var(--c-text-strong);
}

@keyframes bd-intro-skip-in {
  to {
    opacity: 1;
  }
}

/* Com "reduzir movimento" a abertura continua (decisão, como o letreiro, a
   galeria e a nav), mas a saída fica só no fade: sem o avanço do vídeo.
   Sobrepõe a regra global de base.css, que zera as transições. */
@media (prefers-reduced-motion: reduce) {
  html.js .intro {
    transition-duration: var(--intro-out) !important;
  }
  .intro__video {
    transition: none;
  }
  .intro.is-leaving .intro__video {
    transform: none;
  }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 768px) {
  .intro__skip {
    padding: 8px var(--s-16);
  }
}