/* A travessia (16/10, pedido do Maicon): da abertura ao rito num fundo só, no desktop.
   O rito sobe por baixo da abertura (margem de -100svh) e o palco preso dele recebe a foto e o loop da abertura.
   Rolou um pouco, o vídeo de ida leva da mesa à mão com o celular e o rito começa ali; de volta ao topo, o vídeo
   de volta faz o caminho contrário. Só com html.travessia (desktop, com movimento, com JavaScript): sem ela, as duas
   seções ficam como antes. O site.js liga a classe e move a caixa do vídeo (bloco 2b). */
.trav {
  display: none;
}

@media (min-width: 821px) {
  .travessia .abertura {
    position: relative;
    z-index: 3;
    background: transparent;
  }
  .travessia .abertura-foto::after {
    display: none;
  }
  .travessia .rito {
    margin-top: -100svh;
    height: 400svh;
  }
  .travessia .rito-foto {
    position: absolute;
    inset: 0;
  }
  .travessia .trav {
    display: block;
    position: absolute;
    /* contexto de empilhamento próprio: o vídeo fica embaixo da foto do rito, que traz a conversa projetada */
    z-index: 0;
    inset: 0;
    overflow: hidden;
    background: #0e0f0e;
  }
  /* a foto e o loop da abertura, trazidos para o palco, no mesmo enquadramento */
  .travessia .trav > picture img,
  .travessia .trav > .abertura-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;
    transform: none;
  }
  /* a sombra que segura a frase da abertura: sai quando a travessia começa */
  .travessia .trav::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      linear-gradient(to bottom, rgba(10, 10, 9, 0.55), rgba(10, 10, 9, 0) 22%),
      linear-gradient(to top, rgba(10, 10, 9, 0.86) 0%, rgba(10, 10, 9, 0.5) 40%, rgba(10, 10, 9, 0) 68%),
      linear-gradient(to right, rgba(10, 10, 9, 0.5), rgba(10, 10, 9, 0) 55%);
    pointer-events: none;
    transition: opacity 0.6s var(--curva);
  }
  .travessia.trav-ida .trav::after {
    opacity: 0;
  }

  /* a caixa do vídeo: começa no enquadramento da abertura e chega no da foto do rito (o JS move) */
  .trav-caixa {
    position: absolute;
    z-index: 1;
    transform-origin: 0 0;
    opacity: 0;
    transition: opacity 0.25s linear;
    will-change: transform;
  }
  .travessia.trav-ida .trav-caixa {
    opacity: 1;
  }
  .trav-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .trav-volta {
    opacity: 0;
  }
  .trav-volta.ve {
    opacity: 1;
  }

  /* o texto da abertura sai quando a travessia começa */
  .travessia .abertura h1,
  .travessia .abertura-lede,
  .travessia .portas,
  .travessia .notif-pouso {
    transition: opacity 0.4s var(--curva);
  }
  .travessia.trav-ida .abertura h1,
  .travessia.trav-ida .abertura-lede,
  .travessia.trav-ida .portas,
  .travessia.trav-ida .notif-pouso {
    opacity: 0;
    pointer-events: none;
  }

  /* o rito: a foto com a conversa, a sombra e o texto entram quando o vídeo chega na mão */
  .travessia .placa,
  .travessia .rito-foto::after,
  .travessia .rito-texto {
    opacity: 0;
    transition:
      opacity 0.45s var(--curva),
      transform 0.6s var(--curva);
  }
  .travessia .rito-texto {
    transform: translateY(16px);
  }
  .travessia.trav-chegou .placa,
  .travessia.trav-chegou .rito-foto::after,
  .travessia.trav-chegou .rito-texto {
    opacity: 1;
    transform: none;
  }
}

/* O celular do rito longe do texto (16/10, pedidos do Maicon). A foto do rito já vem composta com o celular em 66%
   da largura e cobre o palco inteiro, no mesmo enquadramento do vídeo da travessia (que termina nela): a caixa do
   vídeo não precisa andar, e nada se revela pela borda esquerda. */
@media (min-width: 821px) {
  .rito .placa {
    --w: max(100vw, calc(100svh * 1600 / 893));
    left: calc(50vw - var(--w) / 2);
    top: calc(50svh - var(--w) * 893 / 1600 / 2);
  }
  .travessia.trav-chegou .trav-caixa {
    opacity: 0;
    transition: opacity 0.3s linear 0.5s;
  }
  /* durante a ida, atrás do vídeo fica o fundo desfocado do rito, não a foto da abertura */
  .travessia.trav-ida .trav {
    background: transparent;
  }
  .travessia.trav-ida .trav > picture,
  .travessia.trav-ida .trav > .abertura-video,
  .travessia.trav-ida .trav::after {
    opacity: 0;
    transition: opacity 0.3s linear 0.25s;
  }
  /* o eco do vídeo (o mesmo quadro, pequeno e desfocado) preenche a borda que a caixa deixa ao andar */
  .trav-eco {
    display: none;
  }
  .travessia .trav-eco {
    display: block;
    position: absolute;
    inset: -60px;
    width: calc(100% + 120px);
    height: calc(100% + 120px);
    filter: blur(28px) brightness(0.92);
    opacity: 0;
    transition: opacity 0.25s linear;
  }
  .travessia.trav-ida .trav-eco {
    opacity: 1;
  }
  .travessia.trav-chegou .trav-eco {
    opacity: 0;
    transition: opacity 0.3s linear 0.5s;
  }
}