/* ROL-02 · Mídia que expande na rolagem — reescrita do scroll-expansion-hero do 21st.dev sem React,
   Next nem Framer Motion. Um cartão de mídia cresce até quase a tela inteira enquanto a seção é
   rolada; o título se parte em dois e sai pelas laterais, o fundo some e o conteúdo abaixo aparece.

   O que mudou em relação ao original, e por quê:
     - **a rolagem é a da página, não sequestrada.** O original escuta wheel/touchmove no window,
       chama preventDefault e força scrollTo(0, 0) até a mídia abrir: teclado, barra de rolagem e
       leitor de tela ficam presos no topo, e ele só funciona como primeira seção. Aqui um trilho
       alto com palco sticky converte a rolagem nativa em progresso — qualquer meio de rolar serve,
       em qualquer posição da página.
     - **o curso é o do original.** Lá, 1 px de roda vale 0,0009 de progresso: ~1100 px para abrir.
       O trilho padrão é exatamente isso a mais que a tela.
     - **um título, não dois.** O original tem dois <h2> para as duas metades; aqui é um <h2> com
       duas partes, que o leitor de tela lê como uma frase.
     - **cor em token**, não `text-blue-200` cravado.
     - **sem iframe do YouTube embutido.** A mídia é o que você puser dentro de __midia (img, video
       ou iframe) — o componente não monta URL de terceiro.

   `--expande` vai de 0 (cartão pequeno) a 1 (aberto). **O padrão é 1**: sem JS ou com "reduzir
   movimento", o trilho some e a mídia aparece aberta com o título por cima — a falha mostra. */
.c-expandir {
  --c-expandir-trilho: calc(100vh + 1100px);   /* altura total rolável da seção */
  --c-expandir-larg-ini: 300px;
  --c-expandir-larg-ganho: 1250px;
  --c-expandir-alt-ini: 400px;
  --c-expandir-alt-ganho: 400px;
  --c-expandir-afasta: 150vw;                  /* quanto cada metade do título anda até sair */
  --c-expandir-raio: 16px;
  --c-expandir-texto: #ebebeb;
  --c-expandir-veu: #000;
  --c-expandir-sombra: 0 0 50px rgba(0, 0, 0, .3);

  --expande: 1;
  position: relative;
  color: var(--c-expandir-texto);
}
@media (max-width: 767.98px) {
  .c-expandir {
    --c-expandir-larg-ganho: 650px;
    --c-expandir-alt-ganho: 200px;
    --c-expandir-afasta: 180vw;
  }
}

.c-expandir__palco {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;            /* as metades do título saem da tela; sem isto a página ganha rolagem lateral */
  display: grid;
  place-items: center;
}
.c-expandir.is-vivo .c-expandir__trilho { height: var(--c-expandir-trilho); }
.c-expandir.is-vivo .c-expandir__palco { position: sticky; top: 0; }

.c-expandir__fundo {
  position: absolute;
  inset: 0;
  opacity: calc(1 - var(--expande));
}
.c-expandir__fundo > img,
.c-expandir__fundo > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-expandir__fundo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .1); }

.c-expandir__midia {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(95vw, calc(var(--c-expandir-larg-ini) + var(--c-expandir-larg-ganho) * var(--expande)));
  height: min(85vh, calc(var(--c-expandir-alt-ini) + var(--c-expandir-alt-ganho) * var(--expande)));
  border-radius: var(--c-expandir-raio);
  box-shadow: var(--c-expandir-sombra);
}
.c-expandir__midia > img,
.c-expandir__midia > video,
.c-expandir__midia > iframe {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: inherit;
}
.c-expandir__veu {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c-expandir-veu);
  opacity: calc(.5 - .3 * var(--expande));
  pointer-events: none;
}
.c-expandir__legenda {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.c-expandir__data { margin: 0; font-size: 1.5rem; }
.c-expandir__dica { margin: 0; }

.c-expandir__titulo {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}
.c-expandir__parte { display: block; }
.c-expandir[data-mistura="diferenca"] .c-expandir__titulo { mix-blend-mode: difference; }

.c-expandir.is-vivo .c-expandir__parte--a,
.c-expandir.is-vivo .c-expandir__data { transform: translateX(calc(-1 * var(--c-expandir-afasta) * var(--expande))); }
.c-expandir.is-vivo .c-expandir__parte--b,
.c-expandir.is-vivo .c-expandir__dica { transform: translateX(calc(var(--c-expandir-afasta) * var(--expande))); }

.c-expandir__conteudo { padding: 40px 32px; }
@media (min-width: 768px) { .c-expandir__conteudo { padding: 80px 64px; } }
.c-expandir.is-vivo .c-expandir__conteudo { opacity: 0; }
/* a transição só arma depois do primeiro quadro: armada junto com .is-vivo, o conteúdo
   faria um fade de saída no carregamento */
.c-expandir.is-armado .c-expandir__conteudo { transition: opacity .7s ease; }
.c-expandir.is-vivo.is-aberto .c-expandir__conteudo { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .c-expandir { --expande: 1 !important; }
  .c-expandir .c-expandir__trilho { height: auto !important; }
  .c-expandir .c-expandir__palco { position: relative !important; }
  .c-expandir .c-expandir__parte,
  .c-expandir .c-expandir__data,
  .c-expandir .c-expandir__dica { transform: none !important; }
  .c-expandir .c-expandir__conteudo { opacity: 1 !important; transition: none; }
}