/* A cena é desenhada em 600x415 e escalada pra caber no palco (js/vitrine.js ajusta --s). */
.cena {
  position: absolute; left: 0; top: 0; width: 600px; height: 415px;
  transform-origin: 0 0; transform: scale(var(--s, 1));
}

.aparelho {
  position: absolute; transition: transform .55s cubic-bezier(.5, 0, .2, 1), filter .55s;
  will-change: transform;
}
.aparelho.atras { z-index: 1; filter: brightness(.82) saturate(.8); }
.aparelho.frente { z-index: 3; }

/* ---------- notebook ---------- */
.notebook { left: 20px; top: 24px; width: 470px; }
.notebook.atras { transform: translate(-6px, -10px) scale(.95); }
.notebook.frente { transform: translate(6px, 8px) scale(1.02); }
.nb-tela {
  position: relative; height: 302px; padding: 9px 9px 9px; background: #121016; border-radius: 13px 13px 3px 3px;
  box-shadow: 0 24px 46px rgba(30, 14, 70, .32), inset 0 0 0 1.5px #2b2733;
}
.nb-camera { position: absolute; top: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #2f2b38; }
.nb-vidro { position: relative; width: 452px; height: 284px; border-radius: 3px; overflow: hidden; background: #fff; }
/* o conteúdo é desenhado em 2x (904x568) e reduzido pela metade: dá pra escrever a tela como um app de verdade */
.nb-conteudo { position: relative; width: 904px; height: 568px; overflow: hidden; transform: scale(.5); transform-origin: 0 0; }
.nb-base {
  height: 13px; margin: 0 -26px; border-radius: 2px 2px 12px 12px;
  background: linear-gradient(#cfcbd6, #9d98a6); box-shadow: 0 10px 20px rgba(30, 14, 70, .22);
}
.nb-base::after { content: ""; display: block; width: 70px; height: 5px; margin: 0 auto; border-radius: 0 0 6px 6px; background: #8e8997; }

/* ---------- celular ---------- */
.celular { left: 422px; top: 78px; width: 160px; height: 326px; }
.celular.atras { transform: translate(14px, 8px) scale(.94); }
.celular.frente { transform: translate(-4px, -6px) scale(1.04); }
.cel-moldura {
  position: relative; width: 100%; height: 100%; padding: 6px; border-radius: 28px; background: #121016;
  box-shadow: 0 26px 46px rgba(30, 14, 70, .38), inset 0 0 0 1.5px #2f2b38;
}
.cel-ilha { position: absolute; top: 12px; left: 50%; width: 44px; height: 12px; margin-left: -22px; border-radius: 8px; background: #121016; z-index: 9; }
.cel-vidro { position: relative; width: 148px; height: 314px; border-radius: 22px; overflow: hidden; background: #fff; }
.cel-conteudo { position: relative; width: 296px; height: 628px; overflow: hidden; transform: scale(.5); transform-origin: 0 0; }

/* ---------- cursor do notebook e toque do celular ---------- */
.cursor {
  position: absolute; left: 0; top: 0; width: 15px; height: 18px; z-index: 10; pointer-events: none;
  transition: transform .7s cubic-bezier(.45, 0, .2, 1), opacity .3s; opacity: 0;
}
.cursor.on { opacity: 1; }
.cursor svg { width: 100%; height: 100%; fill: #fff; stroke: #121016; stroke-width: 1.4; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.cursor.clique svg { transform: scale(.82); transition: transform .12s; }
.toque {
  position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; pointer-events: none; z-index: 20;
  background: rgba(255, 255, 255, .55); border: 4px solid rgba(20, 16, 30, .3); animation: toque .55s ease-out forwards;
}
@keyframes toque { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* ---------- peças comuns às réplicas ---------- */
.tela { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.6, 0, .2, 1), opacity .45s; }
.tela.fora { transform: translateX(100%); }
.tela.saiu { transform: translateX(-28%); opacity: 0; }
.tela.baixo { transform: translateY(100%); }
.some { opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s; }
.some.on { opacity: 1; transform: none; }
.pisca { animation: pisca-destaque 1.2s ease-in-out 2; }
@keyframes pisca-destaque { 50% { box-shadow: 0 0 0 3px rgba(255, 200, 40, .55); } }
.digitando::after { content: "|"; animation: cursor-texto 1s steps(1) infinite; margin-left: 1px; opacity: .7; }
@keyframes cursor-texto { 50% { opacity: 0; } }
.pontos { display: inline-flex; gap: 3px; }
.pontos i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .4; animation: ponto 1s infinite; }
.pontos i:nth-child(2) { animation-delay: .15s; }
.pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes ponto { 40% { opacity: 1; transform: translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
  .aparelho, .tela, .cursor { transition-duration: .01s; }
}