/* Full-bleed evolution of Figma 458:2. One video decode, two independent masks. */
@font-face{font-family:Anton;src:url('/fontes/anton-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url('/fontes/roboto-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.kd-hero{position:relative;background:var(--base,#040404);color:white;height:100vh;height:100svh;isolation:isolate}
.kd-hero[data-motion="ready"]{height:245vh;height:245svh}
.kd-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
/* A CAIXA DO FILME. Em paisagem ela e' o palco inteiro e a cena e' a de sempre;
   em retrato ela vira a caixa do cartao e o filme vive dentro dela na propria
   proporcao. Separar a CAIXA do VIDEO e' o que deixa a cena animar o recorte
   sem nunca mexer na proporcao do material. */
.kd-faixa{position:absolute;inset:0;overflow:hidden}
.kd-veu{position:absolute;inset:0;background:#0B0906;opacity:0;pointer-events:none}
.kd-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.025);background:#040404}
/* O cartao de retrato so' existe no celular; o JS o dimensiona em pixel. */
.kd-retrato{display:none}
.kd-shroud{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;z-index:1}
.kd-panel{position:absolute;top:26%;left:4%;width:92%;height:min(48vw,59%);max-height:560px;z-index:2;transform-origin:50% 100%;will-change:transform}
/* White HTML travels WITH transparent vector letters; crop only source whitespace. */
.kd-white{position:absolute;inset:0;background:#fff;-webkit-mask:url('/assets/kidsday/hero/white-panel.svg') center bottom/100% 141.451% no-repeat;mask:url('/assets/kidsday/hero/white-panel.svg') center bottom/100% 141.451% no-repeat;mask-mode:alpha}
/* ---- DORMENTE (14/09/2026): as pecas abaixo sairam do HTML quando o hero
   virou so' a apresentacao. O desenho fica aqui, nao apagado, porque nenhuma
   delas foi rejeitada — elas foram TIRADAS DE CIMA DO FILME. Voltar qualquer
   uma e' devolver a marcacao em `kids-day.html`; o JS ja' trata as duas como
   opcionais. Sao ~1,3 KB de CSS que o navegador casa contra nada. ---- */
.kd-panel-meta{position:absolute;top:7%;left:4.2%;right:4.2%;display:flex;justify-content:space-between;gap:20px;color:#333;font:400 clamp(9px,.72vw,12px)/1.3 Roboto,sans-serif;letter-spacing:.11em}
.kd-panel-meta span:nth-child(2){color:#818181}
.kd-reveal-caption{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:0 7% 10%;background:linear-gradient(transparent 28%,rgba(0,0,0,.64));opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,28px,0)}
.kd-eyebrow{font:400 11px/1.5 Roboto,sans-serif;letter-spacing:.16em;margin-bottom:18px}
.kd-reveal-caption p{margin:0;font:400 clamp(34px,4.6vw,76px)/1.04 'Inter Display',sans-serif;letter-spacing:-.045em;color:white;text-shadow:0 2px 22px #0002}
.kd-reveal-caption strong{font-weight:600}
.kd-reveal-caption a{pointer-events:auto;display:flex;align-items:center;gap:30px;background:#fff;color:#111;text-decoration:none;border-radius:50px;margin-top:26px;padding:16px 22px;font:500 14px/1.2 Roboto,sans-serif}
.kd-reveal-caption a span{font-size:22px;line-height:1}
.kd-bottom{position:absolute;z-index:4;bottom:25px;left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.kd-scroll-cue{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font:400 11px/1.4 Roboto,sans-serif;letter-spacing:.03em;text-shadow:0 1px 5px #000}
.kd-scroll-line{width:25px;height:1px;background:currentColor;transform-origin:left}
.kd-film-toggle{border:1px solid #ffffff70;background:#0008;color:#fff;border-radius:40px;padding:11px 16px;min-height:44px;font:400 11px/1.2 Roboto,sans-serif;cursor:pointer}
.kd-film-toggle:hover{background:#fff;color:#111}
.kd-film-toggle:focus-visible,.kd-hero a:focus-visible{outline:2px solid var(--logo-amarelo);outline-offset:5px}
/* ---- fim do trecho dormente ---- */
.kd-details.ft{margin-top:20px}
/* ============================================================================
   RETRATO — A CENA E' OUTRA, E PRECISA SER

   O que existia aqui era a cena de paisagem com as medidas encolhidas, e ela
   quebrava em tres lugares que sao de construcao, nao de gosto (medidos num
   390x844 @3x em 14/09/2026):

   1. O LETREIRO SAIA ESTICADO 2,45x NA VERTICAL. O `.kd-white` e' uma imagem
      SVG com `preserveAspectRatio="none"` e proporcao natural 2,209; a mascara
      e' desenhada em 100% x 141,451% da caixa do cartao, e essa caixa era
      `34%` de altura por `94%` de largura, ou seja proporcao 0,903. Anton e'
      uma condensada: esticada 2,45x ela deixa de ser Anton.

   2. O FILME APARECIA AMPLIADO 6,2x EM PIXEL DE APARELHO. O arquivo do celular
      era 720x406 e cobria uma tela de 390x844 — ampliacao de 2,08x em CSS, que
      num aparelho 3x vira 6,2x. E `object-fit:cover` de um quadro 16:9 numa
      tela 9:19,5 mostra 26% da LARGURA do quadro: sobrava a tira do meio, que
      neste filme e' o piso do galpao.

   3. A TELA FECHAVA EM TRES BLOCOS MORTOS: preto vazio em cima, letreiro
      distorcido no meio, piso chapado embaixo.

   A CENA DE RETRATO RESOLVE OS TRES DE UMA VEZ:

   · O filme ganha uma JANELA COM A PROPORCAO DELE (16:9, largura cheia). Num
     390 isso pede 1170x658 pixels de aparelho, e o arquivo novo tem 1280x720 —
     o filme aparece INTEIRO e em escala 1:1, sem ampliacao nenhuma. Foi por
     isso que a janela nao virou 4:5 nem 1:1: qualquer caixa mais alta que 16:9
     volta a cortar a largura e a ampliar o pixel.
   · O letreiro vira TEXTO, empilhado e justificado, dimensionado em pixel pelo
     JS. Texto com corpo real nao distorce.
   · A cena termina quando o FILME ENCONTRA O PROPRIO FORMATO: ele comeca
     preenchendo a caixa do cartao (ampliado, e visto so' por dentro das letras,
     onde ampliacao nao se le) e assenta na faixa 16:9 exata, onde ele fica
     nitido e inteiro. O que se anima e' o recorte da caixa e a escala do video,
     nunca a caixa do video.
   ========================================================================== */
/* O CORTE E' A ORIENTACAO, NAO O TAMANHO. Com o limite em 700px um tablet em
   pe' (768x1024) continuava na cena de paisagem, e ali ela quebra igual: o
   letreiro saia distorcido 1,63x e o filme aparecia com 42% da largura,
   ampliado 2,02x em pixel de aparelho. Tela mais alta que larga pede a cena de
   retrato, tenha ela 320 ou 900 de largura. */
@media(max-width:900px) and (orientation:portrait){
 /* O TRILHO E' O TAMANHO DA CENA, e nao um numero redondo. A cena de retrato
    fecha em p=0,88 (o cartao sai em 0,74 e o filme assenta em 0,88); o que
    passa disso e' rolagem com a tela parada. Em 165svh o ultimo movimento cai
    a ~14svh do fim, que e' o respiro antes da proxima secao — nao um vazio. */
 .kd-hero[data-motion="ready"]{height:165vh;height:165svh}

 /* O cartao e a faixa sangram de ponta a ponta: em retrato, margem lateral
    rouba o unico eixo em que o filme ainda tem largura para dar. Posicao e
    tamanho saem do JS, em pixel. */
 .kd-panel{left:0;width:100%;top:auto;height:auto;max-height:none}
 .kd-faixa{inset:auto 0 auto 0}

 .kd-white{display:none}
 .kd-retrato{display:block;position:absolute;inset:0;width:100%;height:100%}

 /* O VEU PRETO SAI DE CENA. Ele existe para vazar as letras externas e a janela
    do filme, e as duas sao peca de paisagem: em retrato as letras externas
    sangravam 51px a esquerda e 59 a direita num 390 (o K e o Y ficavam fora da
    tela) e a janela virou a propria faixa. O chao preto do `.kd-hero` ja' e' o
    fundo, entao nao ha o que o veu pinte aqui. */
 .kd-shroud{display:none}

 /* o filme nao pinta o fundo da faixa: em retrato a caixa e' menor que a tela
    e um poster esticado apareceria nas bordas durante a abertura */
 .kd-film{background-color:#040404;background-image:none}
}

/* Paisagem em tela pequena (celular deitado) continua na cena de paisagem: ali
   a tela TEM a proporcao do filme, que e' o caso em que a cena original acerta. */
@media(max-width:900px) and (orientation:landscape){
 .kd-hero[data-motion="ready"]{height:200vh;height:200svh}
 .kd-panel{top:24%;height:52%;width:94%;left:3%}
}
@media(prefers-reduced-motion:reduce){
 .kd-hero[data-motion="ready"]{height:100vh;height:100svh}
 .kd-panel{will-change:auto}
}
@supports not (mask-image:url('')){
 .kd-white{background:transparent url('/assets/kidsday/hero/white-panel.svg') center bottom/100% 141.451% no-repeat}
}