/**
 * Duplo D . o filme do hero da home.
 *
 * Porta para o WordPress a peca construida em 29/08/2026 ("A Mesa"): plano
 * fixo, camera parada, e os cinco agentes chegando um a um ate formarem um
 * grupo em volta da mesa de duas xicaras.
 *
 * O QUE MUDA EM RELACAO A PECA SOLTA
 *
 * 1. Sem Lenis. A home tem ancora (#frentes, #agentes), cabecalho fixo do
 *    Betheme e o duplod-scroll-reveal.php rodando na mesma pagina. Rolagem
 *    suavizada por biblioteca sequestra os tres. O scrub de 0.6 do
 *    ScrollTrigger entrega quase a mesma maciez sem tomar a rolagem de
 *    ninguem.
 *
 * 2. Nenhum position:fixed, em lugar nenhum. O .mcb-section do Betheme que
 *    embrulha o conteudo tem transform: matrix(1,0,0,1,0,0) . uma matriz
 *    identidade, que nao move nada, mas que faz do elemento o bloco contentor
 *    de qualquer position:fixed abaixo dele. Um balao fixo aqui se ancora
 *    naquela secao, nao na tela. Sticky nao sofre disso: quem quebra sticky e
 *    overflow de ancestral, e a cadeia inteira ate o body esta em visible.
 *
 * 3. O celular e a versao sem movimento sao a MESMA composicao estatica: o
 *    quadro do grupo inteiro seguido das cinco falas em coluna. Na peca solta
 *    o celular ganhou uma faixa animada propria, que ali cabia porque a pagina
 *    nao tinha mais nada. Aqui o hero ainda precisa carregar h1, lead, dois
 *    botoes e quatro selos por cima do mundo.
 *
 * 4. A altura do trilho e escrita no CSS, nao pelo JS. Definida so no script
 *    ela chegava depois do primeiro quadro e empurrava a pagina inteira para
 *    baixo . deslocamento de layout no elemento LCP da home.
 */

/* ============================================================ TOKENS */

.dd-film {
  /* Falta so a tinta de texto: tint/line/mark/deep ja vem do duplod-v2.css.
     14% de luminancia sobre a superficie de 93% e o par que resolve o balao
     por construcao, em vez de depender de veu. */
  --lume-ink: hsl(4 40% 14%);
  --node-ink: hsl(214 40% 14%);
  --signal-ink: hsl(34 40% 14%);
  --contextus-ink: hsl(128 40% 14%);
  --pharos-ink: hsl(262 40% 14%);

  /* O mundo e 16:9. Com a caixa sempre nessa proporcao, uma posicao em %
     bate com o mesmo ponto da arte em qualquer viewport. */
  --world-w: max(100vw, calc(100svh * 16 / 9));
  --world-h: max(100svh, calc(100vw * 9 / 16));

  /* Altura do cabecalho fixo, medida no load. O valor aqui e so o piso para
     o primeiro quadro. */
  --head-h: 90px;

  /* Ritmo, em telas de rolagem. O JS le estes mesmos numeros do data-* do
     elemento: uma fonte so para a altura do trilho e para a linha do tempo. */
  --screens: 12.65;
}

/* ====================================================== SANGRIA TOTAL

   O conteudo da v2 vive dentro da coluna de 1058px do Betheme. O filme sai
   dela para ocupar a largura da tela. O html esta com overflow-x: hidden,
   entao os poucos pixels da barra de rolagem que o 100vw inclui a mais sao
   aparados sem criar rolagem lateral . e o mundo e maior que a moldura de
   qualquer jeito, entao nada de importante mora nesses pixels.            */

.dd-film {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: calc(var(--screens) * 100svh);
  background: hsl(200 45% 88%);
}

/* ============================================================== PALCO */

.dd-film__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.dd-film__world {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--world-w);
  height: var(--world-h);
  transform: translate(-50%, -50%);

  /* Quanto o mundo transborda a tela, de cada lado.

     O mundo cobre a tela como object-fit: cover faria, entao numa janela mais
     alta que 16:9 ele fica mais largo que ela e sobra arte para fora nos dois
     lados. Para a arte isso e o efeito desejado. Para o texto nao e: num
     1440x900 o mundo tem 1600px e comeca 80px a esquerda da tela, entao o
     balao do Signal, posicionado a 3% do mundo, nascia 32px fora dela e
     aparecia cortado ao meio. */
  --bleed-x: max(0px, calc((var(--world-w) - 100vw) / 2));
  --bleed-y: max(0px, calc((var(--world-h) - 100svh) / 2));
}

/* Tres caixas, nao uma, e cada uma existe por um motivo.

   .dd-film__world  o envelope. Na coluna ele cresce para caber os baloes.
   .dd-film__frame  o enquadramento. E ele que corta, e so ele.
   .dd-film__scene  a arte 16:9 com os agentes posicionados em % dela.

   No desktop as tres coincidem e a divisao parece inutil. Ela paga na tela
   estreita: la a cena continua 16:9 (a arte nao pode distorcer, e os % dos
   agentes contam com isso), a moldura vira 4:3 e mostra so o miolo, e os
   baloes saem para fora da moldura em vez de serem cortados por ela. */
.dd-film__frame {
  position: absolute;
  inset: 0;
}
.dd-film__scene {
  position: absolute;
  inset: 0;
}

.dd-film__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* A caixa ja tem a proporcao exata da arte, entao fill nao distorce e nao
     corta . e cover aqui reintroduziria o corte que as % nao preveem. */
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

/* Luz que se recolhe para a cadeira vazia no fim do ato. */
.dd-film__spot {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 68% 72%, hsl(38 80% 88% / .34), transparent 70%),
    linear-gradient(to right, hsl(214 28% 22% / .30), transparent 46%);
  mix-blend-mode: multiply;
}
.dd-film__spot--warm {
  mix-blend-mode: screen;
  background: radial-gradient(30% 38% at 68% 70%, hsl(40 90% 78% / .30), transparent 72%);
}

/* ============================================================ O ELENCO

   largura% = altura% x (9/16) x (largura/altura do recorte)
   esquerda% = centro% menos metade da largura

   Medido sobre a arte, um por um. Sem a razao do recorte na conta, quatro
   dos cinco entram com a altura errada.                                  */

.dd-film__agent {
  position: absolute;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  opacity: 0;
}
.dd-film__agent img { display: block; width: 100%; height: auto; -webkit-user-drag: none; }

/* Sombra de contato: e o que cola o recorte no gramado em vez de deixar o
   personagem flutuando um palmo acima dele. */
.dd-film__agent::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%; bottom: -2.5%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(50% 50%, hsl(28 30% 18% / .34), transparent 72%);
  z-index: -1;
}

.dd-film__agent--lume      { left: 34.6%; bottom: 18.8%; width: 15.9%; z-index: 5; }
.dd-film__agent--node      { left: 25.6%; bottom: 22.5%; width:  8.8%; z-index: 4; }
.dd-film__agent--signal    { left: 13.5%; bottom: 25.8%; width: 10.0%; z-index: 3; }
.dd-film__agent--contextus { left: 19.8%; bottom: 31.4%; width:  9.5%; z-index: 1; }

/* O Pharos deu dois trabalhos. Em 32,3% sumia inteiro atras do Lume, que
   ocupa de 34,6% a 50,5%; em 51,3% tapava a xicara da esquerda, que e o
   desfecho da peca. Foi para o outro lado da mesa, dentro da sombra da
   arvore: fecha a roda, equilibra um grupo que estava todo a esquerda, nao
   encosta em nenhuma das duas xicaras, e e o unico ponto do quadro onde a
   lanterna dele tem escuro para acender. */
.dd-film__agent--pharos    { left: 71.8%; bottom: 22.5%; width:  6.4%; z-index: 3; }

.dd-film__lantern {
  position: absolute;
  left: 2%; bottom: 26%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(50% 50%, hsl(40 95% 72% / .55), transparent 68%);
  mix-blend-mode: screen;
}

/* ============================================================= BALOES

   Superficie opaca, nunca veu. A grama e verde-clara: o verde da referencia
   mede 2,95:1 contra branco, e o veu diagonal do hero antigo ja reprovou em
   3,49:1 e 4,30:1 neste mesmo site. tint(93%) + ink(14%) resolve sem medir. */

.dd-film__balloon {
  position: absolute;
  z-index: 20;
  width: min(30ch, 34vw);
  max-width: 340px;

  /* A posicao de projeto e --x, em % do mundo: e o que mantem o bico
     apontando para quem fala. O clamp so entra quando essa posicao cairia
     fora da tela . ai o balao encosta na margem em vez de ser cortado, e o
     bico erra alguns pixels, que e o lado certo de errar. */
  left: clamp(
    calc(var(--bleed-x) + 16px),
    var(--x),
    calc(100vw + var(--bleed-x) - 356px)
  );

  padding: 14px 16px 15px;
  background: var(--fam-tint);
  border: 1px solid var(--fam-line);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 10px 22px hsl(28 30% 18% / .18), 0 2px 5px hsl(28 30% 18% / .12);
  opacity: 0;
  will-change: transform, opacity;
}
.dd-film__balloon::after {
  content: "";
  position: absolute;
  left: var(--tail, 22%);
  bottom: -9px;
  width: 16px; height: 16px;
  transform: rotate(45deg) translateX(-50%);
  background: var(--fam-tint);
  border-right: 1px solid var(--fam-line);
  border-bottom: 1px solid var(--fam-line);
  border-bottom-right-radius: var(--radius-sm, 4px);
}
.dd-film__who {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-family: var(--font-ui, Poppins, system-ui, sans-serif);
  line-height: 1;
}
.dd-film__name { font-size: 16px; font-weight: 700; color: var(--fam-deep); }
/* deep, e nao mark.
   O rotulo tem 11px em caixa alta: e texto normal para o criterio, e precisa
   de 4,5:1. Com --fam-mark (46% 44%) ele media 2,78:1 no Contextus e 3,44:1
   no Signal sobre a propria tinta do balao . reprovado, e justamente nas duas
   familias mais claras. Com --fam-deep vai a 6,23:1 no pior caso, e de quebra
   passa a bater com os cards de agente do resto do site, que ja usam deep
   tanto no nome quanto no papel. */
.dd-film__role {
  font-size: 11px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--fam-deep);
}
.dd-film__line {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fam-ink);
  /* Piso so de seguranca. A altura real de cada balao e medida no load, com
     a fonte ja carregada, e escrita inline: fixa em 4.5em o balao curto do
     Contextus ficava com um vazio embaixo. */
  min-height: 1.5em;
}
.dd-film__caret {
  display: inline-block;
  width: .55ch;
  margin-left: .05ch;
  background: var(--fam-deep);
  color: transparent;
  animation: dd-film-blink 1s steps(1) infinite;
}
@keyframes dd-film-blink { 50% { opacity: 0; } }

.dd-film__balloon[data-balloon="lume"]      { --fam-tint: var(--lume-tint);      --fam-line: var(--lume-line);      --fam-mark: var(--lume-mark);      --fam-deep: var(--lume-deep);      --fam-ink: var(--lume-ink); }
.dd-film__balloon[data-balloon="node"]      { --fam-tint: var(--node-tint);      --fam-line: var(--node-line);      --fam-mark: var(--node-mark);      --fam-deep: var(--node-deep);      --fam-ink: var(--node-ink); }
.dd-film__balloon[data-balloon="signal"]    { --fam-tint: var(--signal-tint);    --fam-line: var(--signal-line);    --fam-mark: var(--signal-mark);    --fam-deep: var(--signal-deep);    --fam-ink: var(--signal-ink); }
.dd-film__balloon[data-balloon="contextus"] { --fam-tint: var(--contextus-tint); --fam-line: var(--contextus-line); --fam-mark: var(--contextus-mark); --fam-deep: var(--contextus-deep); --fam-ink: var(--contextus-ink); }
.dd-film__balloon[data-balloon="pharos"]    { --fam-tint: var(--pharos-tint);    --fam-line: var(--pharos-line);    --fam-mark: var(--pharos-mark);    --fam-deep: var(--pharos-deep);    --fam-ink: var(--pharos-ink); }

/* A mesa e as duas xicaras ocupam x 50-72%, y 35-62%, e sao o assunto da
   imagem do primeiro ao ultimo pixel. Nenhum balao entra ali. Como so um
   aparece por vez, todos podem dividir a mesma faixa de ceu a esquerda. */
.dd-film__balloon--lume      { --x: 24.0%; bottom: 50.0%; --tail: 56%; }
.dd-film__balloon--node      { --x: 13.0%; bottom: 58.0%; --tail: 48%; }
.dd-film__balloon--signal    { --x:  3.0%; bottom: 54.0%; --tail: 55%; }
.dd-film__balloon--contextus { --x:  8.0%; bottom: 65.0%; --tail: 60%; }
/* O Pharos fala do outro lado. Em bottom 64% o balao ja esta acima das
   xicaras, entao pode ocupar a direita sem tapar o desfecho. */
.dd-film__balloon--pharos    { --x: 56.0%; bottom: 64.0%; --tail: 80%; }

/* ====================================================== ABRE E FECHA

   Painel a esquerda, nao faixa centralizada. A metade esquerda do quadro e
   campina vazia e a mesa mora na direita: o texto ocupa o vazio e a cena
   continua a vista. Centralizado, o cartao sentaria em cima da mesa.

   Superficie opaca pelo mesmo motivo dos baloes. O hero antigo resolvia com
   texto branco sobre veu escuro e o pior pixel do lead media 4,06:1, abaixo
   do minimo. Aqui o texto e escuro sobre superficie clara, e o pior caso e
   o proprio par de tokens.                                               */

.dd-film__card {
  position: absolute;
  z-index: 30;
  left: max(24px, 5vw);
  top: calc(var(--head-h) + 4vh);
  width: min(46rem, 46vw);
  padding: 28px 30px 30px;
  background: hsl(12 4% 98% / .94);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 16px 40px hsl(28 30% 18% / .18);
}
.dd-film__card--end { opacity: 0; }

.dd-film .dd-film__card h1,
.dd-film .dd-film__card h2 {
  margin: 0 0 10px;
  color: var(--neutral-900);
  text-wrap: balance;
}
.dd-film .dd-film__card h1 { font-size: var(--size-display, 48px); line-height: var(--lh-display, 56px); }
.dd-film .dd-film__card p { color: var(--neutral-700); }
.dd-film__card .dd-eyebrow { color: var(--accent-ink, hsl(180 60% 24%)); }
.dd-film__card .dd-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.dd-film__card .dd-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
  font-family: var(--font-ui, Poppins, system-ui, sans-serif);
  font-size: 13px;
  color: var(--neutral-600);
}
.dd-film__card .dd-proof span { display: inline-flex; align-items: center; gap: 8px; }

/* ================================================= TELA ESTREITA / BAIXA

   Com object-fit cover, a fatia visivel de um mundo 16:9 e
   (largura/altura da tela) x 9/16. Num 390x844 isso da 26%: via-se de 37% a
   63% do mundo, e o elenco vai de 13,5% a 78,2%. Quatro dos cinco ficariam
   fora da tela.

   Aqui, diferente da peca solta, o hero ainda tem h1, lead, dois botoes e
   quatro selos para carregar. Entao abaixo de 5/4 o filme para de ser filme
   e vira o que ele sempre vira sem movimento: o quadro do grupo, e as cinco
   falas em coluna embaixo. Uma composicao so para os dois casos, em vez de
   uma terceira que so o celular veria.                                    */

@media (max-aspect-ratio: 5/4), (prefers-reduced-motion: reduce) {
  .dd-film {
    height: auto;
    width: auto;
    margin-inline: 0;
    background: none;
    /* A mesma goteira das bandas. Sem ela o h1 encostava na borda da tela
       enquanto o resto da home respeitava os 20px. */
    padding: 0 var(--content-gutter) var(--band-pad);
  }
  .dd-film__stage {
    position: relative;
    height: auto;
    overflow: visible;
    display: block;
  }
  .dd-film__world {
    position: relative;
    width: 100%;
    height: auto;
    left: auto; top: auto;
    transform: none;
  }
  /* A moldura guarda a proporcao e o corte; os baloes saem dela e viram
     coluna embaixo. Enquanto eles eram filhos diretos do mundo, ou o overflow
     os cortava, ou a altura deles entrava na conta de bottom% dos agentes e o
     elenco subia para fora do quadro. */
  .dd-film__frame {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
    margin-bottom: 20px;
  }
  .dd-film__plate { position: absolute; inset: 0; }

  /* Ninguem caminha: tudo ja chegou e tudo ja esta escrito. */
  .dd-film__agent,
  .dd-film__balloon,
  .dd-film__card--end,
  .dd-film__lantern { opacity: 1 !important; transform: none !important; }
  .dd-film__caret { display: none; }
  .dd-film__spot { display: none; }

  .dd-film__balloon {
    position: static;
    width: auto;
    max-width: none;
    margin: 0 0 10px;
  }
  .dd-film__balloon::after { display: none; }  /* longe do corpo, o bico apontaria para nada */

  .dd-film__card {
    position: static;
    width: auto;
    margin: 0 0 24px;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
  }
  .dd-film__card--end { margin: 20px 0 0; }
}

/* O recorte fica pequeno demais para ler num mundo de 100% da coluna, mas a
   cena inteira continua legivel como quadro. Abaixo de 560px a fala e que
   manda, entao o mundo encolhe para uma faixa e o texto ganha o resto. */
/* Num 390 de largura a cena inteira tem 219px de altura e o elenco desenha
   45px: da para ver que sao cinco, nao da para ver quem. A moldura fecha em
   4:3 e a cena entra 33% mais larga que ela, centrada e apoiada embaixo . a
   arte continua 16:9, ninguem distorce, e o que sai do quadro sao as pontas
   da campina, que nao tem ninguem. Sobra de 12,5% a 87,5% do mundo, e o
   elenco vai de 13,5% a 78,2%. */
@media (max-width: 560px) {
  .dd-film__frame { aspect-ratio: 4 / 3; }
  .dd-film__scene {
    width: 133.4%;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    transform: translateX(-50%);
  }
  .dd-film__line { font-size: 14px; }
}