/* ==========================================================================
   Line Express — as cenas da /ipad/

   Blocos espalhados pela página, um embaixo do outro, cada um com o seu texto
   e a sua imagem. A imagem CHEGA DE BAIXO e assenta no lugar que já é dela
   dentro do bloco — entre o título e o parágrafo.

   POR QUE NÃO É MAIS UM PALCO FIXO. A primeira versão prendia a seção na tela
   e trocava o conteúdo dentro dela. Funcionava, mas não era a referência: no
   site que ele mandou cada assunto tem o seu espaço na página e o aparelho
   sobe para dentro dele. É um gesto por bloco, não uma sequência presa.

   O QUE ISSO SIMPLIFICA. Sem pin não há palco a dimensionar, nem trilho a
   calcular, nem cena que precise caber numa tela: cada bloco tem a altura do
   que tem dentro. O JS que sobra é só a entrada da imagem.
   ========================================================================== */

.cenas{
  position:relative;
  background:var(--black);
  padding:clamp(20px,4vh,48px) 0;
}

/* ------------------------------------------------------------- o bloco ---- */
.cena{
  position:relative;
  max-width:820px;
  margin:0 auto;
  padding:clamp(56px,9vh,110px) var(--pad);
  text-align:center;
}
/* Um fio entre um bloco e outro, para eles não virarem uma coluna só. */
.cena + .cena{ border-top:1px solid var(--line-soft); }

.cena__idx{
  display:block;
  margin:0 0 12px;
  font-size:clamp(10px,1.2vw,12px); font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent-b);
}

.cena__tit{
  margin:0 0 clamp(18px,3vh,34px);
  font-size:clamp(24px,3.2vw,40px);
  font-weight:600; line-height:1.08; letter-spacing:-.035em;
}
.cena__tit .dim{ color:var(--text-dim); }

.cena__txt{
  margin:clamp(20px,3vh,34px) auto 0;
  max-width:52ch;
  font-size:clamp(15px,1.7vw,17px); line-height:1.65;
  color:var(--text-dim);
}

/* ------------------------------------------------------------- o quadro --- */
/* A ALTURA É RESERVADA ANTES DA IMAGEM CHEGAR. Sem uma altura própria o bloco
   encolheria enquanto a foto ainda está fora do lugar, e o texto de baixo
   pularia quando ela assentasse. */
.cena__quadro{
  position:relative;
  margin:0 auto;
  width:min(760px, 100%);
  aspect-ratio:16 / 9;
  /* a perspectiva é o que dá profundidade à subida, em vez de um deslizar
     plano */
  perspective:1200px;
}
.cena__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  will-change:transform, opacity;
  backface-visibility:hidden;
  /* A sombra fica PARADA: animar `filter` custa caro, e foi o `ctx.filter`
     que comeu 59% do orçamento por quadro no canvas da home. */
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.55));

  /* O ESTADO DE PARTIDA VIVE NO CSS, não no JS: se o script não rodar (erro,
     rede, navegador antigo), a imagem tem que estar visível e no lugar certo.
     Por isso o repouso é o padrão, e é o JS que empurra a imagem para baixo
     ao assumir o controle. */
  opacity:1; transform:none;
}

/* UMA DAS CENAS É VÍDEO. Ele entra na mesma classe das fotos de propósito:
   assim herda a entrada, a sombra e o enquadramento sem uma linha a mais, e o
   JS da animação continua achando os três com um seletor só.

   `cover` e não `contain`: o quadro tem a mesma proporção do arquivo (16:9) no
   computador, mas no celular ele é 4:3 — ali o `contain` deixaria duas tarjas.
   Como o fundo do vídeo é preto e a mão fica no meio, cortar as laterais não
   custa nada. */
/* A CENA 02 TEM QUADRO PRÓPRIO. O vídeo da loja é 722x584 e o da cena 01 é
   16:9; um quadro só para os dois obrigaria a cortar um deles. Cada quadro na
   proporção do seu arquivo, e `cover` passa a não cortar nada. */
.cena__quadro--alto{ aspect-ratio:722 / 584; }

.cena__img--video{
  object-fit:cover;

  /* CANTO ARREDONDADO. O vídeo traz o cenário junto — mesa, parede, chão —, e
     um retângulo de foto batendo em quatro cantos vivos no meio de uma página
     preta parece recorte de jornal. O raio é o mesmo dos cards da vitrine: é o
     que faz o bloco ler como peça do site e não como imagem colada.

     Vai no elemento e não num embrulho porque o vídeo é o que precisa ser
     cortado — com `overflow:hidden` no quadro, o Safari ainda deixa o canto do
     vídeo aparecer por cima em algumas versões. */
  border-radius:clamp(14px, 1.6vw, 22px);
}

/* ------------------------------------------------------- a foto que leva ---
   O quadro do Pencil é um link. Sem `display:block` o <a> viraria inline e a
   proporção reservada iria embora junto com a altura do bloco. */
.cena__quadro--link{ display:block; cursor:pointer; }
.cena__quadro--link:focus-visible{
  outline:2px solid var(--accent-b); outline-offset:10px; border-radius:16px;
}

/* O link de texto existe para quem não descobriria o clique na imagem. */
.cena__wa{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:clamp(18px,2.6vh,26px);
  padding:11px 20px;
  border:1px solid rgba(255,194,71,.28);
  border-radius:999px;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  color:var(--accent-b);
  transition:border-color .3s ease, background .3s ease;
}
.cena__wa:hover{ border-color:rgba(255,194,71,.55); background:rgba(255,194,71,.07); }
.cena__wa svg{ width:17px; height:17px; flex:none;
               transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.cena__wa:hover svg{ transform:translateX(4px); }

@media (max-width:820px){
  .cena{ padding:clamp(44px,7vh,72px) var(--pad); }
  .cena__quadro{ aspect-ratio:4 / 3; }
}

/* Sem movimento: os blocos ficam como estão, sem entrada nenhuma. */
@media (prefers-reduced-motion: reduce){
  .cena__img{ opacity:1 !important; transform:none !important; }
}