/* palco em pé (celular e tablet em pé, html.empe, que o celular.js liga): os capítulos 01 a 06 dividem um palco de 100svh
   preso à rolagem, como a cena do computador. Composição igual em todos: aparelho na metade de cima, texto na de baixo.
   O celular.js escreve transform e opacity; aqui só a casa de cada peça. Sem a classe, vale a página empilhada */

/* o fundo é o próprio trilho, que rola por trás do palco: a cor da hora do dia muda sem nenhum corte entre capítulos.
   Cada parada fica no meio da tela quando a rolagem está nela (telas de rolagem x 100svh + meia tela) */
html.empe .trilho{background:linear-gradient(180deg,oklch(0.11 0.012 255) 0,oklch(0.11 0.012 255) 50svh,oklch(0.14 0.02 252) 100svh,oklch(0.27 0.045 248) 135svh,oklch(0.62 0.08 238) 155svh,oklch(0.8 0.055 237) 175svh,oklch(0.9 0.035 240) 195svh,var(--nevoa) 225svh,var(--nevoa) 490svh,oklch(0.985 0.004 240) 525svh,oklch(0.975 0.006 240) 565svh,oklch(0.8 0.055 237) 585svh,oklch(0.42 0.07 244) 600svh,oklch(0.2 0.024 250) 615svh,oklch(0.12 0.014 254) 650svh,oklch(0.15 0.018 252) 700svh,var(--chumbo) 750svh,oklch(0.17 0.02 251) 810svh,var(--noite) 880svh,oklch(0.07 0.01 255) 980svh,var(--noite) 1070svh)}
html.empe .presa{position:sticky;top:0;height:100svh;overflow:hidden;--gut:max(16px,5vw)}
html.empe .cena{position:absolute;inset:0}
html.empe .cam{position:absolute;inset:0;display:block;padding:0;background:none;overflow:visible;visibility:hidden}
html.empe .s1{visibility:visible}
html.empe .ceu{display:block;position:absolute;inset:0;pointer-events:none}
html.empe .ceu > :not(.fio){display:none}
html.empe .ceu .fio{top:0;opacity:0;will-change:transform,opacity}
html.empe .mk{display:block;overflow:hidden;padding:.06em .06em .14em;margin:-.06em -.06em -.14em}
html.empe .pi,html.empe .pi-e{display:block;will-change:transform}
html.empe .mk-e{display:block;overflow:hidden;padding:.06em .06em .14em;margin:-.06em -.06em -.14em}
/* o texto de cada capítulo mora na metade de baixo */
html.empe :is(.s4,.pg,.s5) > .tx{position:absolute;left:var(--gut);right:var(--gut);top:54%}

/* 01: a abertura de hoje; a maquininha que sai do conjunto é a .voa, a mesma foto, que vira a da 02 */
html.empe .s1{padding:clamp(84px,11svh,112px) var(--gut) 0;overflow:hidden}
html.empe .s1 .pi{display:inline}
/* celular baixo: o conjunto de aparelhos cede altura para o botão caber na primeira tela */
@media (max-width:599px) and (max-height:740px){
  html.empe .dobra{grid-template-rows:auto minmax(120px,1fr) auto auto}
  html.empe .s1 .tira{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  html.empe .s1 .tira > div{padding:7px 4px 8px}
  html.empe .s1 .tira dt{font-size:10.5px;line-height:1.2;text-wrap:balance}
  html.empe .s1 .tira dd{font-size:19px}
}
html.empe .s1 .mk{display:inline;overflow:visible;padding:0;margin:0}
html.empe .ha-raiz:after{display:none}
html.empe .voa{display:block;position:absolute;z-index:5;left:0;top:0;width:225px;height:418.5px;max-width:none;transform-origin:0 0;visibility:hidden;pointer-events:none;will-change:transform,opacity}

/* 02: abas presas no alto, o aparelho da vez no meio da metade de cima e o cartão de vidro embaixo */
html.empe .s2{color:var(--tinta);--zt:132px;--zh:calc(50svh - 144px);--zw:calc(100vw - 2 * var(--gut))}
html.empe .s2 .cab{position:absolute;left:var(--gut);right:var(--gut);top:calc(50% + 30px)}
html.empe .s2 .abas{position:absolute;left:var(--gut);right:var(--gut);top:72px;width:auto;margin:0}
html.empe .ests{position:absolute;inset:0;display:block;margin:0;overflow:visible;height:auto !important}
html.empe .est{position:absolute;inset:0;display:block;padding:0}
html.empe .face{position:absolute;left:50%;top:calc(var(--zt) + var(--zh) / 2);translate:-50% -50%;opacity:0;visibility:hidden;will-change:transform,opacity}
html.empe .f0{width:calc(var(--zh) * 1094 / 2035)}
html.empe .f1{width:calc(var(--zh) * 236 / 480)}
html.empe .fa{display:none}
html.empe .f2{width:min(var(--zw),var(--zh) * 500 / 351)}
html.empe .f3{width:min(var(--zw),(var(--zh) - 16px) * 1992 / 1400 + 16px)}
html.empe .f4{width:min(var(--zw),(var(--zh) - 16px) * 1740 / 1050 + 16px)}
html.empe .app.sobre{display:block;transform:translateY(104%)}
html.empe .s2 .vidro{display:block;position:absolute;left:var(--gut);right:var(--gut);top:calc(50% + 6px);bottom:16px;border-radius:24px;opacity:0;visibility:hidden;background:linear-gradient(160deg,oklch(1 0 0/.78),oklch(1 0 0/.5));-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);box-shadow:inset 0 1px 0 oklch(1 0 0/.95),inset 0 0 0 1px oklch(1 0 0/.6),0 30px 50px -34px oklch(0.25 0.05 250/.35)}
html.empe .s2 .est-tx{position:absolute;z-index:1;left:var(--gut);right:var(--gut);top:calc(50% + 6px);padding:22px 20px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0;visibility:hidden}
html.empe .est-tx .ok{margin-top:16px}
html.empe .est-tx .ok li:nth-child(n+3),html.empe .est-tx .obs{display:none}
html.empe .est-tx .btn{width:100%;margin-top:14px}
@media (min-width:600px){
  html.empe .est-tx .ok li:nth-child(n+3){display:block}
  html.empe .est-tx .ok li:nth-child(n+6){display:none}
  html.empe .s2 .est-tx{padding:28px 32px}
  html.empe .est-tx .btn{width:max-content}
}

/* 03: o anel de hoje, menor para caber com a ficha; os benefícios ficam na página da maquininha */
html.empe .s3{display:flex;flex-direction:column;padding:84px var(--gut) 16px;--s:min(72vw,360px,36svh);color:var(--tinta)}
html.empe .s3 h2{margin-top:12px}
html.empe .s3 .modelos{margin-top:8px}
html.empe .s3 .mq{transform-origin:50% 60%}
html.empe .s3 .f-bens{display:none}
html.empe .s3 .ficha{margin-top:4px}
html.empe .s3 .f-acao{margin-top:16px}

/* 04: a impressora no fim da metade de cima e o comprovante saindo dela; o celular.js dá a escala do papel (--kb) */
html.empe .s4{--fenda:41%}
html.empe .s4 h2{margin-top:12px}
html.empe .s4 .apoio{margin-top:12px}
html.empe .s4 .btns{margin-top:20px}
html.empe .boca{position:absolute;z-index:2;left:50%;bottom:calc(100% - var(--fenda));width:340px;margin-left:-170px;clip-path:inset(-200vh -200vw 0 -200vw);transform-origin:50% 100%;scale:var(--kb,.6)}
html.empe .boca.voa{clip-path:none}
html.empe .papel-s{transform:translateY(104%);transform-origin:0 0;will-change:transform,opacity}
html.empe .fenda{display:block;position:absolute;left:-10px;right:-10px;bottom:0;height:12px;border-radius:0 0 6px 6px;background:linear-gradient(180deg,oklch(0.06 0.02 250/0),oklch(0.06 0.02 250/.75));opacity:0}
html.empe .s4 .p-recebe{opacity:0}
/* o topo da maquininha escolhida, embaixo da fenda; o corpo some na metade de baixo */
.imp-pe{display:none}
html.empe .imp-pe{display:block;position:absolute;z-index:1;left:50%;top:var(--fenda);width:calc(340px * var(--kb,.6) * 2.5);margin:calc(340px * var(--kb,.6) * -.21) 0 0 calc(340px * var(--kb,.6) * -1.25);aspect-ratio:1;opacity:0;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 14%,transparent 30%);mask-image:linear-gradient(180deg,#000 14%,transparent 30%);will-change:transform,opacity}
html.empe .imp-pe svg{display:block;width:100%;height:100%;overflow:visible}
html.empe .s4.acima{z-index:2}

/* 05: o portal e o celular na metade de cima; o comprovante da 04 pousa na lista do celular */
html.empe .pg-palco{position:absolute;left:50%;top:88px;width:min(calc(100vw - 2 * var(--gut)),(50svh - 104px) / .9);translate:-50% 0}
html.empe .pg-nb,html.empe .pg-cel,html.empe .pg-poca{opacity:0;will-change:translate,opacity}
@media (min-width:600px){html.empe .pg-palco{width:min(calc(100vw - 2 * var(--gut)),(50svh - 104px) * 1.25)}}

/* 05b: a frase da ponte no meio, depois a tela do Nexus sobe na metade de cima */
html.empe .s5 .frase{position:absolute;left:var(--gut);right:var(--gut);top:34%;padding:0}
html.empe .painel-3d{position:absolute;left:var(--gut);right:var(--gut);top:calc(40px + 25%);translate:0 -50%;max-width:560px;margin:0 auto}
html.empe .painel{opacity:0;visibility:hidden;will-change:transform,opacity}

/* 06: o celular da conversa ocupa mais altura, porque a conversa é o assunto; o texto fica no terço de baixo */
html.empe .aparelho{position:absolute;left:50%;top:84px;width:calc((62svh - 100px) * 236 / 480);margin-left:calc((62svh - 100px) * 236 / -960);opacity:0;visibility:hidden;will-change:transform,opacity}
html.empe .s6 .tx{position:absolute;left:var(--gut);right:var(--gut);top:calc(62% + 4px)}
html.empe .s6 h2{margin-top:12px}
html.empe .s6 .apoio{margin-top:12px}
html.empe .s6 .btns{margin-top:20px}

/* 07: um notebook preso na metade de cima e os três momentos trocando embaixo (o gestao.js conduz, como na cena) */
html.empe .s7{height:300svh;padding:0}
html.empe .s7 .in{position:sticky;top:0;height:100svh;max-width:none;overflow:hidden}
html.empe .ceu7{display:block;position:absolute;inset:0;background:linear-gradient(180deg,oklch(0.27 0.045 248) 0,oklch(0.19 0.03 250) 38%,oklch(0.16 0.024 250) 100%);opacity:0;will-change:opacity}
html.empe .palco7{position:absolute;inset:0;display:block}
html.empe .m7{display:contents}
html.empe .m7:not([data-m="0"]) .obj7{display:none}
html.empe .m7[data-m="0"] .obj7{position:absolute;left:var(--gut);right:var(--gut);top:calc(40px + 29%);translate:0 -50%;will-change:transform,opacity}
html.empe .rot7{display:block;position:absolute;left:var(--gut);top:58%;margin:0;opacity:0}
html.empe .passos.rot7{display:flex;top:calc(58% + 24px)}
html.empe .m7-tx{position:absolute;left:var(--gut);right:var(--gut);top:calc(58% + 30px);pointer-events:none}
html.empe .m7-tx.on{pointer-events:auto}
html.empe .m7-tx > :is(.rot,.passos){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.empe .m7 h2{margin-top:0}
html.empe .s7 .apoio{margin-top:14px}
html.empe .s7 .btns{margin-top:20px}
html.empe .m7-tx > :not(h2){will-change:transform,opacity}
@media (max-width:599px){
  /* a tela do notebook do tamanho que a metade de cima comporta; o recorte anda até a caixa do assistente na 07b */
  html.empe .s7{--nbw:calc((58svh - 120px) / .655)}
  html.empe .nb7{width:var(--nbw);margin-left:calc(var(--nbw) * -1 * (.0212 + var(--off) * .9576 / 800));will-change:transform}
}