/* MÁQUINA DE ESCREVER =======================================================
   Reprodução do template "AI Typewriter" do cliente. Tipografia grande em
   Urbanist, cursor com piscar suavizado e partículas entrando fora de
   compasso — os tempos vêm do arquivo original (ver maquina.js).

   Fica logo antes do vídeo: prepara a cabeça de quem vai assistir. */

.maquina {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 0%, var(--navy-900) 0%, transparent 62%),
    var(--navy-950);
  padding-block: clamp(4rem, 3rem + 7vw, 8rem);
}

/* Grade técnica quase imperceptível, do mesmo espírito do HUD */
.maquina::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(95, 214, 159, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 214, 159, 0.045) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: radial-gradient(75% 65% at 50% 50%, #000 5%, transparent 100%);
  -webkit-mask-image: radial-gradient(75% 65% at 50% 50%, #000 5%, transparent 100%);
  pointer-events: none;
}

.maquina__palco {
  position: relative;
  min-height: 9rem;   /* reserva a altura das duas linhas: zero salto de layout */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
}

/* ------------------------------------------------------------------ LINHAS */

.maquina__linha {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 3.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: var(--tracking-tight);
  color: var(--sand-100);
  text-wrap: pretty;
  min-height: 1.24em;   /* a linha ocupa espaço antes de existir texto */
  opacity: 0;
}

.maquina__linha.is-visivel {
  opacity: 1;
}

/* A segunda linha é a virada: peso maior e cor cheia */
.maquina__linha--virada {
  font-weight: 700;
}

/* Trecho destacado, como no template: verde da marca */
.maquina__destaque {
  background: none;
  color: var(--green-400);
  /* fio fino sob a palavra, desenhado junto com a digitação */
  box-shadow: inset 0 -0.08em 0 rgba(46, 194, 126, 0.35);
}

/* ------------------------------------------------------------------ CURSOR
   "Blink Easy = 1" no arquivo: o piscar tem suavização, não é liga-desliga. */

.maquina__cursor {
  display: inline-block;
  width: 0.075em;
  height: 0.92em;
  margin-left: 0.06em;
  vertical-align: -0.08em;
  background: var(--green-400);
  box-shadow: 0 0 12px rgba(46, 194, 126, 0.7);
  animation: maquina-piscar 1.06s var(--ease-in-out) infinite;
}

@keyframes maquina-piscar {
  0%, 42% { opacity: 1; }
  50%, 92% { opacity: 0.06; }
  100% { opacity: 1; }
}

/* Enquanto escreve, o cursor fica firme — só volta a piscar nas pausas */
.is-escrevendo .maquina__cursor {
  animation-duration: 1.6s;
}

/* "Hide Cursor After Write = 1" */
.maquina__cursor.is-oculto {
  opacity: 0;
  animation: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

/* --------------------------------------------------------------- ESTRELAS
   Quatro partículas de quatro pontas, iguais às do template. */

.maquina__estrela {
  position: absolute;
  width: var(--tam, 1.25rem);
  height: var(--tam, 1.25rem);
  opacity: 0;
  transform: scale(0.4) rotate(0deg);
  pointer-events: none;
  will-change: opacity, transform;
}

.maquina__estrela::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sand-50);
  /* losango de quatro pontas com laterais côncavas */
  clip-path: polygon(
    50% 0%, 60% 40%, 100% 50%, 60% 60%,
    50% 100%, 40% 60%, 0% 50%, 40% 40%
  );
  filter: drop-shadow(0 0 8px rgba(95, 214, 159, 0.85));
}

.maquina__estrela.is-viva {
  animation: maquina-estrela 433ms var(--ease-out) forwards;
}

/* 3 chaves no arquivo original: entra, pico, sai */
@keyframes maquina-estrela {
  0%   { opacity: 0; transform: scale(0.4) rotate(-25deg); }
  45%  { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(0.55) rotate(20deg); }
}

/* Posições espalhadas ao redor do texto, sem cobrir a leitura */
.maquina__estrela--1 { top: 8%;  left: 4%;   --tam: 1rem; }
.maquina__estrela--2 { top: 62%; right: 12%; --tam: 1.5rem; }
.maquina__estrela--3 { top: 18%; right: 4%;  --tam: 0.875rem; }
.maquina__estrela--4 { top: 78%; left: 16%;  --tam: 1.125rem; }

/* --------------------------------------------------------------- RODAPÉ */

.maquina__nota {
  margin-top: var(--sp-6);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--navy-100);
  max-width: 48ch;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.is-pronto .maquina__nota {
  opacity: 1;
  transform: none;
}

html:not(.js) .maquina__nota {
  opacity: 1;
  transform: none;
}

/* Sem JS, o texto precisa existir de qualquer forma */
html:not(.js) .maquina__linha {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .maquina__cursor { animation: none; }
  .maquina__estrela { display: none; }
  .maquina__nota { opacity: 1; transform: none; }
}

@media (max-width: 39.99rem) {
  .maquina__palco {
    min-height: 11rem;
  }

  .maquina__estrela--2 { right: 4%; }
  .maquina__estrela--4 { left: 6%; }
}

/* ------------------------------------------------------------- FANTASMA
   Cópia invisível do texto completo. Ocupa exatamente o espaço que o texto
   vai ocupar, em qualquer largura de tela, para o bloco não crescer
   enquanto digita — é o que mantém o salto de layout em zero. */

.maquina__linha {
  position: relative;
}

.maquina__fantasma {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

/* O texto animado passa por cima do fantasma */
.maquina__texto {
  position: absolute;
  inset: 0;
}