/*
  "Any app" (docs/lp-nova.md, etapa 6): um MacBook sobe na diagonal e abre
  a tampa conforme a rolagem (97 quadros de um video, desenhados num
  canvas). Aberto, a tela acende em HTML por cima do preto: o Face In
  reconhece no notch e aparece a grade de apps, com o seletor Owner/Guest.
  A tela de bloqueio reaproveita as pecas da demo (demo.css: .trava, .data,
  .hora, .login, .campo, .ola); aqui so entram os estados.
*/
.qualquer{position:relative;height:240vh}
.qualquer-fixo{position:sticky;top:0;height:100vh;overflow:hidden}

.qualquer-topo{position:absolute;left:0;right:0;top:92px;z-index:2;text-align:center;padding:0 24px}
.qualquer-topo .olho{display:block;font-size:14px;font-weight:500;color:#8fb4ff}
.qualquer-topo h2{margin:10px 0 0;font-size:clamp(34px, 4vw, 54px);line-height:1.06;font-weight:600;letter-spacing:-.03em}
.qualquer-topo h2 span{color:rgba(245,247,251,.42)}
.qualquer-topo p{margin:18px 0 0;font-size:16px;line-height:1.5;color:rgba(245,247,251,.5)}
.qualquer-topo p b{display:block;font-weight:500;color:var(--ink)}

/* O MacBook: canvas com os quadros e a tela HTML por cima, no mesmo bloco,
   entao andam e giram juntos. */
/* Cabe no espaco abaixo do titulo (~300px): largura limitada pela altura
   livre, e centro no meio desse espaco. */
.portatil{--livre:calc(100vh - 330px);position:absolute;left:50%;top:calc(310px + var(--livre) / 2);
  width:min(800px, 70vw, calc(var(--livre) * .94 * 1130 / 848));aspect-ratio:1130/848;
  transform:translate(-50%,-50%);will-change:transform}
.portatil canvas{display:block;width:100%;height:100%}

/* A tela fica dentro do preto da tampa no ultimo quadro (medido no video:
   tampa de x 502 a 1418, tela de x 519 a 1401 e y 156 a 742), deixando
   uma moldura preta fina como a de um MacBook. */
.tela-mb{position:absolute;left:10.53%;top:3.77%;width:78.05%;height:69.1%;overflow:hidden;border-radius:.8% .8% 0 0 / 1.2% 1.2% 0 0;
  opacity:0;transition:opacity .5s ease;container-type:inline-size}
.tela-mb.acesa{opacity:1}
.tela-mb-dentro{position:absolute;left:0;top:0;width:1024px;height:674px;transform-origin:0 0;transform:scale(var(--k, 1));
  color:#fff;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(201,146,153,.35), transparent 60%),
    linear-gradient(180deg,#010a1f 0%,#06204a 38%,#173e7c 70%,#3f5290 100%)}

/* barra de menus: na tela de bloqueio so a direita */
.tela-mb .mbar .esq{display:flex;gap:16px;opacity:0;transition:opacity .5s ease}
.tela-mb-dentro.aberto .mbar .esq{opacity:1}
.tela-mb .mbar{position:absolute;inset:0 0 auto 0;z-index:5;height:24px;display:flex;align-items:center;gap:16px;padding:0 14px;font-size:12px;
  transition:background .5s ease}
.tela-mb-dentro.aberto .mbar{background:rgba(10,14,30,.3);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}

/* tela de bloqueio se desfazendo e o "Hello" (mesmo efeito da demo) */
.tela-mb-dentro.aberto .trava{opacity:0;transform:translateY(-26px) scale(1.02);filter:blur(8px)}
.tela-mb-dentro.ola-on .ola span{opacity:1;transform:none;filter:none}
.tela-mb .ola span{font-size:56px}
.tela-mb .mbar b{font-weight:600}
.tela-mb .mbar .dir{margin-left:auto;opacity:.85}

/* conteudo: so depois que o Face In reconhece */
.tela-mb .lp{position:absolute;inset:24px 0 0 0;display:flex;flex-direction:column;align-items:center;padding-top:62px;
  opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.tela-mb.pronta .lp{opacity:1;transform:none}

/* seletor Owner / Guest */
.quem-usa{position:relative;display:flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);font-size:15px}
.quem-usa button{position:relative;z-index:1;width:178px;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 5px;border:0;border-radius:999px;
  background:none;color:rgba(255,255,255,.7);font:inherit;cursor:pointer;transition:color .3s ease}
.quem-usa button[aria-pressed="true"]{color:#111}
.quem-usa button img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.quem-usa button small{opacity:.6}
.quem-usa .pilula{position:absolute;top:4px;bottom:4px;left:4px;width:178px;border-radius:999px;background:#fff;
  transition:transform .45s cubic-bezier(.22,1,.36,1)}
.quem-usa.convidado .pilula{transform:translateX(178px)}
.quem-usa button:focus-visible{outline:2px solid #fff;outline-offset:2px}

.grade{display:grid;grid-template-columns:repeat(5, 112px);gap:24px 34px;margin-top:40px}
.grade figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13.5px;color:rgba(255,255,255,.9);
  transition:opacity .45s ease,filter .45s ease}
.grade figure > span{position:relative}
.grade img{width:82px;height:82px;display:block}
.grade .cad{position:absolute;right:-4px;bottom:-4px;width:28px;height:28px;border-radius:50%;background:#1c1c1e;
  box-shadow:0 0 0 2px rgba(0,0,0,.4);display:grid;place-items:center;opacity:0;transform:scale(.4);
  transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.grade .cad svg{width:14px;height:14px}
.grade figure.fechado{opacity:.38;filter:grayscale(1)}
.grade figure.fechado .cad{opacity:1;transform:none}

.tela-mb .resumo{margin-top:30px;font-size:16px;color:rgba(255,255,255,.65);transition:opacity .3s ease}

@media (max-width:800px){
  .qualquer{height:260vh}
  .qualquer-topo{top:80px}
  .portatil{width:94vw}
}