/* Tela de entrada */

.entrar-grade { min-height: 100dvh; display: grid; align-content: start; }

/* ---------- vitrine: no celular é o topo da página; no computador, a metade esquerda ---------- */

.vitrine {
  position: relative; overflow: hidden;
  background: oklch(0.12 0.004 270);
  border-bottom: 1px solid var(--linha);
  padding: max(28px, env(safe-area-inset-top)) max(20px, calc((100% - 480px) / 2)) 28px;
}
/* o feixe do projetor: uma luz que desce de cima e acende um quadro 16:9 */
.feixe {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 50% 0%, oklch(1 0 0 / 0.07), transparent 70%),
    conic-gradient(from 180deg at 50% -8%, transparent 168deg, oklch(1 0 0 / 0.045) 180deg, transparent 192deg);
}

/* a cena: o telão aceso e o celular que passa os slides */
.cena {
  position: relative; width: 78%; margin: 0 0 calc(11% + 22px) 2%;
  animation: acender 1600ms 200ms var(--sai) both;
}
@keyframes acender { from { opacity: 0.2; filter: blur(6px); } }
.tela-demo {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; container-type: inline-size;
  background: #060607; border: 1px solid oklch(1 0 0 / 0.16);
  box-shadow: 0 0 140px -10px oklch(1 0 0 / 0.1), 0 40px 80px -40px oklch(0 0 0 / 0.8);
}
.slide-demo {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 0.9em; padding: 0 9%;
  text-align: center; background: radial-gradient(90% 80% at 50% 30%, oklch(0.2 0.004 270), #060607 75%);
}
.tela-demo .verso { font-size: 4.6cqw; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.tela-demo .ref { font-size: 2.1cqw; font-weight: 300; font-stretch: 125%; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-2); }
.tela-demo .titulo-demo { font-size: 6.4cqw; font-weight: 900; font-stretch: 125%; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; }

.celular-demo {
  position: absolute; right: -19%; bottom: -20%; width: 26%; aspect-ratio: 9 / 16;
  border-radius: 15% / 7.5%; background: var(--fundo-2); container-type: inline-size;
  border: 1px solid oklch(1 0 0 / 0.22);
  box-shadow: 0 30px 60px -20px oklch(0 0 0 / 0.9), 0 0 0 5px oklch(0.1 0.003 270);
}
.cel-dentro {
  height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr;
  gap: 7cqw; padding: 13cqw 8cqw 10cqw;
}
.cel-topo { display: flex; justify-content: flex-start; }
.cel-vivo {
  display: inline-flex; align-items: center; gap: 5cqw; padding: 2.5cqw 7cqw; border-radius: 99px;
  background: var(--vivo-escuro); color: #fff; font-size: 7.5cqw; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.cel-vivo::before { content: ""; width: 5cqw; height: 5cqw; border-radius: 50%; background: #fff; }
.cel-slide { position: relative; aspect-ratio: 16 / 9; border-radius: 6cqw; overflow: hidden; outline: 2px solid var(--vivo); outline-offset: 0; }
.cel-slide .slide-demo { padding: 0 8%; }
.cel-slide .verso { font-size: 7.4cqw; line-height: 1.25; font-weight: 500; }
.cel-slide .titulo-demo { font-size: 9cqw; font-weight: 900; font-stretch: 125%; text-transform: uppercase; }
.cel-conta { position: relative; font-size: 9cqw; color: var(--texto-3); }
.cel-conta span { font-weight: 750; color: var(--texto); }
.cel-conta .s-b { position: absolute; left: 0; }
.cel-botoes { display: grid; grid-template-columns: 1fr 2.4fr; gap: 6cqw; align-self: end; }
.cel-botoes span { height: 26cqw; border-radius: 9cqw; }
.cel-ant { background: var(--fundo-4); }
.cel-prox {
  position: relative; display: grid; place-items: center; overflow: hidden;
  background: var(--texto); color: var(--fundo); font-size: 9cqw; font-weight: 700;
  animation: apertar 10s infinite;
}
.toque { position: absolute; width: 30cqw; aspect-ratio: 1; border-radius: 50%; background: oklch(0.155 0.004 270 / 0.25); scale: 0; opacity: 0; animation: tocar 10s infinite; }

/* os dois slides se alternam com corte seco, como no telão, e o celular "aperta" Próximo na hora da troca */
.s-a { animation: mostrar-a 10s infinite steps(1, end); }
.s-b { animation: mostrar-b 10s infinite steps(1, end); }
@keyframes mostrar-a { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mostrar-b { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes apertar { 0%, 46%, 50%, 96%, 100% { scale: 1; } 48.5%, 98.5% { scale: 0.95; } }
@keyframes tocar { 0%, 46%, 51%, 96% { scale: 0; opacity: 0; } 48% { scale: 0.4; opacity: 1; } 50% { scale: 1.6; opacity: 0; } 98% { scale: 0.4; opacity: 1; } 100% { scale: 1.6; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .s-a, .s-b, .cel-prox, .toque { animation: none; }
  .s-b, .toque { opacity: 0; }
}

.vitrine-texto { position: relative; display: grid; gap: 14px; }
.lema {
  font-stretch: 125%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.75rem, 8.2vw, 2.5rem); line-height: 0.95; letter-spacing: 0.005em;
}
.lema-sub { display: none; color: var(--texto-2); max-width: 44ch; }

/* ---------- formulário ---------- */

.painel-entrar {
  display: flex; flex-direction: column; gap: 32px;
  width: min(440px, 100%); margin: 0 auto;
  padding: 32px 20px max(20px, env(safe-area-inset-bottom));
}

.simbolo-grande .simbolo { width: 60px; height: 60px; }

.form-entrar { display: grid; gap: 18px; }
.titulo-form { display: grid; gap: 8px; margin-bottom: 4px; }
.titulo-form h1 { font-size: 1.625rem; letter-spacing: -0.01em; }
.titulo-form p { color: var(--texto-2); }

/* entrada da página: o conteúdo já está visível; o movimento só acompanha */
.assinatura { animation: subir 700ms var(--sai) both; }
.form-entrar { animation: subir 700ms 80ms var(--sai) both; }
@keyframes subir { from { opacity: 0.001; transform: translateY(10px); } }

/* ---------- computador: vitrine à esquerda, formulário à direita ---------- */

@media (min-width: 960px) {
  .entrar-grade { grid-template-columns: minmax(0, 1.15fr) minmax(440px, 0.85fr); align-content: stretch; }

  .vitrine { padding: 0; border-bottom: 0; border-right: 1px solid var(--linha); }
  .cena {
    position: absolute; left: 50%; top: 38%; translate: -58% -50%; margin: 0;
    width: min(58%, 560px, calc((100dvh - 400px) * 1.5));
  }
  .vitrine-texto { position: absolute; left: 56px; right: 56px; bottom: 56px; }
  .lema { font-size: clamp(2.25rem, 3.6vw, 3.5rem); }
  .lema-sub { display: block; }

  .painel-entrar { justify-content: center; padding: 56px 48px; gap: 48px; }
}