/* 08 Produtos, 06:10, amanhece: as três escolhas à vista. Os dois produtos de pé na mesma linha do horizonte, de tamanhos
   diferentes porque têm escopos diferentes; "os dois juntos" mora entre eles, no nó onde a linha se encontra.
   O céu sai da noite da 07c para o azul claro. Na cena (html.viva) a virada e a entrada ficam presas à rolagem e o fim.js
   escreve transform e opacity; empilhada, o céu já vem claro e os blocos entram pelo [data-rv] */
.s8{--c-rot:var(--claro-3,oklch(0.66 0.02 248));--c-tit:var(--claro);--c-ap:var(--claro-2);--c-lk:var(--luz);position:relative;overflow:clip;background:oklch(0.16 0.024 250);color:var(--claro)}
/* o texto troca de claro para tinta num corte, quando o fundo já clareou: cor que muda aos poucos fica ilegível no meio */
.s8.claro8,html:not(.viva) .s8{--c-rot:oklch(0.36 0.04 248);--c-tit:var(--tinta);--c-ap:oklch(0.33 0.035 250);--c-lk:oklch(0.42 0.15 252);--foco:var(--tinta)}
.s8 h2,.s8 h3,.s8 .apoio,.s8 .porta p,.s8 .lk{transition:color .2s}
.ceu8{position:absolute;inset:0;background:linear-gradient(180deg,oklch(0.16 0.024 250) 0,oklch(0.42 0.07 244) 40px,oklch(0.7 0.075 238) 96px,oklch(0.8 0.062 235) 32%,oklch(0.88 0.042 234) 64%,oklch(0.93 0.025 236) 100%)}
.s8 .in{position:relative;display:flex;flex-direction:column}

.s8 h2{max-width:none;color:var(--c-tit)}
.s8 .apoio{margin-top:20px;max-width:460px;font-size:17px;font-weight:500;line-height:1.45;color:var(--c-ap)}
.porta h3{font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.1;color:var(--c-tit)}
.porta p{margin-top:10px;max-width:30em;font-size:17px;font-weight:500;line-height:1.45;color:var(--c-ap)}
.porta .fato{margin-top:14px;font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-rot)}
.porta .btns{align-items:center;gap:12px 24px;margin-top:22px}
.p-jun h3{font-size:20px}
.p-jun p{font-size:15px}
.p-jun .btns{margin-top:6px}
.s8 .lk{gap:9px;font-size:16px;color:var(--c-lk)}
.s8 .btn.pri{box-shadow:inset 0 1px 0 oklch(1 0 0),0 0 0 5px oklch(1 0 0/.35),0 14px 28px -14px oklch(0.25 0.06 250/.6)}

/* a linha do horizonte: a mesma luz das cenas escuras, mais fina sobre o claro; ela passa por trás dos aparelhos */
.horiz8{display:none;height:2px;background:linear-gradient(90deg,transparent,oklch(0.995 0.004 230) 18%,oklch(0.995 0.004 230) 82%,transparent);box-shadow:0 0 14px 2px oklch(0.97 0.03 225/.9),0 0 60px 10px oklch(0.9 0.06 230/.45)}
.sol8,.no8,.corre8{display:none}

/* os aparelhos: maquininha com o app ao lado, e o notebook com a tela Início do Nexus */
.ob8{position:relative}
.sombra8{position:absolute;border-radius:50%;background:radial-gradient(closest-side,oklch(0.35 0.06 245/.28),transparent);filter:blur(3px)}
.mq8{position:absolute;filter:drop-shadow(0 30px 30px oklch(0.3 0.05 245/.35))}
.mq8 > img{display:block;width:auto;max-width:none;height:100%}
/* a tela da maquininha, encaixada nos quatro cantos do visor da foto pelo fim.js: acende, mostra o símbolo e fica pronta
   para a venda. Desenhada em 120 por 276 e levada ao tamanho da foto pela matriz */
.vis8{position:absolute;left:0;top:0;width:120px;height:276px;overflow:hidden;transform-origin:0 0;visibility:hidden;background:oklch(0.99 0.003 240);color:var(--tinta)}
.vis8.ok{visibility:visible}
.sb8{position:absolute;left:43px;top:117px;width:34px;height:auto}
.pr8{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0 10px;text-align:center}
.pr8 small{position:absolute;left:9px;right:9px;top:9px;display:flex;align-items:center;gap:4px;font-size:8px;font-weight:600;line-height:1}
.pr8 small i{width:7px;height:7px;border-radius:2px;background:oklch(0.6 0.19 255)}
.pr8 small em{margin-left:auto;font-style:normal;font-weight:500;color:var(--tinta-2)}
.pr8 svg{width:22px;height:22px;margin-bottom:4px;color:oklch(0.55 0.19 255)}
.pr8 b{font-size:19px;white-space:nowrap;font-weight:700;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.pr8 > span{max-width:8.5em;font-size:9.5px;font-weight:500;line-height:1.3;color:var(--tinta-2)}
.sb8,.anima .vis8,.anima .pr8{opacity:0}
.app8{position:absolute;height:auto;border:4px solid oklch(0.17 0.02 250);border-radius:16px;background:oklch(0.995 0.002 240);box-shadow:0 0 0 1.5px oklch(0.75 0.01 250),0 30px 50px -20px oklch(0.2 0.05 245/.55)}
.nb8{position:absolute}
.nb8 .tampa{box-shadow:inset 0 0 0 1px oklch(0.44 0.03 255),0 40px 70px -30px oklch(0.2 0.05 245/.6)}
.selo8{position:absolute;z-index:2;padding:6px 10px;border-radius:999px;background:oklch(0.99 0.004 240);box-shadow:0 8px 20px -10px oklch(0.25 0.05 250/.5),inset 0 0 0 1px oklch(0.22 0.025 250/.08);font-size:13px;font-weight:600;line-height:1.2;color:var(--tinta);white-space:nowrap;font-variant-numeric:tabular-nums}
.selo8 i{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:oklch(0.62 0.15 152);vertical-align:1px}
/* os selos nascem com o gesto (fim.js); sem movimento ficam parados à vista */
.anima .selo8{opacity:0}

/* empilhada: cabeçalho, maquininha e Pagamentos, notebook e Nexus, e "os dois juntos" por último, como conclusão */
@media (max-width:859px){
  .cab8{order:0}
  .s8 .in > .apoio{order:1;margin-top:14px}
  .ob-pag{order:2}.p-pag{order:3}.ob-nex{order:4}.p-nex{order:5}.p-jun{order:6}
  .ob8{height:250px;margin-top:40px}
  .ob8:after{content:"";position:absolute;left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);bottom:18px;height:2px;background:linear-gradient(90deg,transparent,oklch(0.995 0.004 230) 18%,oklch(0.995 0.004 230) 82%,transparent);box-shadow:0 0 14px 2px oklch(0.97 0.03 225/.9),0 0 50px 8px oklch(0.9 0.06 230/.4)}
  .ob-pag .sombra8{left:calc(50% - 120px);bottom:6px;width:240px;height:30px}
  .ob-pag .app8{left:calc(50% - 100px);bottom:18px;width:84px}
  .ob-pag .mq8{left:calc(50% - 6px);bottom:18px;height:220px}
  .ob-pag .selo8{left:calc(50% - 62px);top:6px}
  .ob-nex{height:240px}
  .ob-nex .sombra8{left:0;right:0;bottom:6px;height:30px}
  .ob-nex .nb8{left:50%;bottom:4px;width:min(330px,86%);translate:-50% 0}
  .ob-nex .selo8{left:max(0px,calc(50% - 175px));top:14px}
  .porta{margin-top:24px}
  .porta .btns{flex-direction:column;align-items:stretch;gap:4px}
  .porta .lk{justify-content:center}
  .p-jun{margin-top:48px;padding-top:22px;box-shadow:inset 0 1px 0 oklch(0.22 0.025 250/.18)}
  .p-jun .lk{justify-content:flex-start}
}
@media (max-width:599px){
  .s8 .apoio,.porta p{font-size:16px}
  .porta .btn{width:100%}
}

/* lado a lado: os três textos embaixo da linha, os aparelhos de pé nela. --s é um pixel do desenho de 1240 */
@media (min-width:860px){
  .s8 .in{display:grid;grid-template-columns:minmax(0,41fr) minmax(0,28fr) minmax(0,44fr);column-gap:clamp(24px,4.4vw,56px);--s:min(1px,calc((100vw - 2 * var(--gut)) / 1240))}
  .cab8{grid-area:1/1/2/3}
  .s8 .in > .apoio{grid-area:1/3;align-self:end;margin:0 0 4px}
  .sol8,.horiz8,.ob8,.no8,.corre8{grid-row:2}
  .ob8{height:calc(330 * var(--s));margin-top:calc(36 * var(--s))}
  .ob-pag{grid-column:1}
  .ob-nex{grid-column:3}
  .ob-pag .sombra8{left:calc(10 * var(--s));bottom:calc(-20 * var(--s));width:calc(330 * var(--s));height:calc(40 * var(--s))}
  .ob-pag .app8{left:calc(70 * var(--s));bottom:0;width:calc(108 * var(--s));border-width:calc(5 * var(--s));border-radius:calc(22 * var(--s))}
  .ob-pag .mq8{left:calc(196 * var(--s));bottom:calc(4 * var(--s));height:calc(300 * var(--s))}
  .ob-pag .selo8{left:calc(120 * var(--s));top:calc(30 * var(--s))}
  .ob-nex .sombra8{left:calc(-40 * var(--s));bottom:calc(-20 * var(--s));width:calc(520 * var(--s));height:calc(40 * var(--s))}
  .ob-nex .nb8{left:calc(-20 * var(--s));bottom:calc(-14 * var(--s));width:calc(470 * var(--s))}
  .ob-nex .selo8{left:calc(-38 * var(--s));top:calc(64 * var(--s))}
  .horiz8{display:block;grid-column:1/-1;align-self:end;margin-inline:calc(50% - 50vw)}
  /* a luz do sol nasce da linha: uma elipse centrada nela, atrás dos aparelhos */
  .sol8{display:block;position:relative;grid-column:1/-1;align-self:end;height:0}
  .sol8:before{content:"";position:absolute;left:50%;top:0;width:calc(1300 * var(--s));height:calc(700 * var(--s));margin:calc(-350 * var(--s)) 0 0 calc(-650 * var(--s));border-radius:50%;background:radial-gradient(closest-side,oklch(0.97 0.025 225/.75),oklch(0.93 0.04 228/.3) 50%,transparent)}
  /* o nó do meio, onde as duas metades da linha se encontram */
  .no8{display:grid;position:relative;z-index:1;grid-column:2;justify-self:center;align-self:end;width:30px;height:30px;margin-bottom:-14px;border-radius:50%;background:oklch(0.995 0.004 230);box-shadow:0 0 0 6px oklch(1 0 0/.35),0 0 24px 6px oklch(0.95 0.04 225/.9)}
  .no8:before,.no8:after{content:"";position:absolute;left:9px;top:14px;width:12px;height:2px;border-radius:2px;background:oklch(0.42 0.15 252)}
  .no8:after{transform:rotate(90deg)}
  /* o ponto de luz que corre pela linha, da maquininha ao nó e do nó ao notebook */
  .corre8{display:block;position:relative;z-index:1;grid-column:1/-1;align-self:end;height:2px}
  .corre8 b{position:absolute;left:-60px;top:-1px;width:120px;height:4px;border-radius:50%;background:radial-gradient(closest-side,oklch(1 0 0),oklch(0.9 0.08 225/.6) 50%,transparent);box-shadow:0 0 18px 4px oklch(0.85 0.1 225/.7);opacity:0}
  .porta{grid-row:3;margin-top:calc(30 * var(--s))}
  .p-pag{grid-column:1}
  .p-jun{grid-column:2;margin-top:calc(46 * var(--s))}
  .p-nex{grid-column:3}
}
/* tela de notebook: a parada inteira cabe na janela. Os aparelhos encolhem pela altura que sobra depois de título e
   textos (cerca de 470 px), o título desce para 40 px e os respiros apertam na mesma proporção */
@media (min-width:860px) and (max-height:860px){
  .s8{padding-block:108px 24px}
  .s8 h2{font-size:40px}
  .s8 .in{--s:min(1px,calc((100vw - 2 * var(--gut)) / 1240),calc((100vh - 470px) / 330))}
  .porta .fato{margin-top:8px}
  .porta .btns{margin-top:14px}
}

/* na cena: o céu claro e a luz do sol começam apagados; a entrada é da rolagem, não da transição do [data-rv] */
.viva .ceu8,.viva .sol8{opacity:0}
.viva .s8 [data-rv]{transition:none}
.viva .s8 :is(.ceu8,.sol8,.horiz8,.cab8,.apoio,.ob8,.porta){will-change:transform,opacity}