.manga-intro {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.manga-intro.is-saindo-tudo {
  transition: opacity 0.5s ease;
  opacity: 0;
}

.manga-intro__pagina {
  position: relative;
  width: min(94vw, calc(94vh * 1.76));
  aspect-ratio: 1663 / 945;
  transition: opacity 0.7s ease;
}

.manga-intro__pagina.is-saindo {
  opacity: 0;
}

/* Pedido #100: fade ~1s mais lento ("sensação de filme"). A opacidade
   agora é UMA `transition` só, igual pras 3 animações — antes cada
   `@keyframes` misturava opacidade E movimento na mesma curva `ease-out`,
   que ADIANTA a opacidade (sobe rápido no início) e só o movimento ficava
   lento; separar deixa o fade sempre no mesmo ritmo, e o zoom/pan livre
   pra continuar devagar por baixo, sem disputar a mesma curva. */
.manga-intro__painel {
  position: absolute;
  object-fit: cover;
  opacity: 0;
  outline: 3px solid #000;
  outline-offset: -1px;
  transition: opacity 1.8s ease;
}

.manga-intro__painel.is-revelado {
  opacity: 1;
}

.manga-intro__painel--zoom.is-revelado {
  animation: manga-zoom 6s ease-out forwards;
}

.manga-intro__painel--slide.is-revelado {
  animation: manga-slide 5s ease-out forwards;
}

@keyframes manga-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

@keyframes manga-slide {
  from { transform: translateX(2.5%); }
  to { transform: translateX(0); }
}

.manga-intro__pular {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.3);
  background: rgb(0 0 0 / 0.45);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.manga-intro__pular:hover {
  background: rgb(255 255 255 / 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .manga-intro__painel--zoom.is-revelado,
  .manga-intro__painel--slide.is-revelado {
    animation: none;
  }
}

/* Zerg 20/09 (#1): "criei a conta e apareceu a escolha de classe e só depois a cutscene". A classe só aparece DEPOIS do mangá
   (`data-manga-passou`, posto por `index.js` ao terminar/pular). Vigia: se o mangá nunca montar, a classe volta sozinha em 7 s
   (o overlay do mangá cobre tudo por cima, então mostrá-la por baixo é inofensivo). */
html:not([data-manga-passou]) .portal__content.classes {
  opacity: 0;
  pointer-events: none;
  animation: manga-mostrar-classes 0s linear 7s forwards;
}
@keyframes manga-mostrar-classes {
  to {
    opacity: 1;
    pointer-events: auto;
  }
}