/* ============================================================
   MOCKUP DE CELULAR COM CONVERSA ANIMADA · HYPERFLOW
   ------------------------------------------------------------
   Portado do site principal (hyperflow.global). Mesmo desenho,
   mesmo ritmo de 16 segundos, mesma linguagem de balões.

   COMO USAR na LP:
     <link rel="stylesheet" href="brand/hyperflow-mockup.css">
   e o bloco de marcação em brand/MOCKUP-MODELO.html

   A peça inteira escala pelo font-size do .hfm-fone, então ela
   encolhe sozinha no celular, sem media query por pedaço.

   PROTEÇÃO: o .hfm-fone já vem com a classe .hf-keep no modelo.
   O reset editorial não pode quadrar os cantos: um iPhone com
   canto vivo não parece um iPhone.
   ============================================================ */

@keyframes hfm-floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.8em); }
}

/* ── Aparelho ─────────────────────────────────────────────── */

.hfm-fone {
  font-size: clamp(7.4px, 0.95vw, 11.6px);
  position: relative;
  width: 100%;
  max-width: 30em;
  margin: 0 auto;
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  filter: drop-shadow(0 3em 6em rgba(10, 5, 30, 0.45));
  animation: hfm-floaty 5s ease-in-out infinite;
}
.hfm-frame {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.hfm-tela {
  position: absolute;
  top: 3.7%; bottom: 5.7%; left: 8.8%; right: 6.2%;
  border-radius: 14.3% / 6.8%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #efeae2;
  z-index: 2;
}
/* recorte da câmera */
.hfm-tela::before {
  content: "";
  position: absolute; top: .6em; left: 50%;
  transform: translateX(-50%);
  width: 7.3em; height: 1.8em;
  background: #0b0b0f; border-radius: 999px; z-index: 6;
}

/* ── Barra de status e cabeçalho da conversa ──────────────── */

.hfm-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: .82em 1.64em .27em;
  font-size: 1em; font-weight: 700; color: #111; background: #f6f5f3;
}
.hfm-status span:last-child { display: flex; gap: .45em; font-size: .9em; }

.hfm-topo {
  display: flex; align-items: center; gap: .73em;
  padding: .64em 1.1em .82em;
  background: #f6f5f3; border-bottom: 1px solid #e2ded6;
}
.hfm-voltar { color: #0a84ff; font-size: 1.27em; }
.hfm-av {
  width: 2.73em; height: 2.73em; border-radius: 50%; background: #efedff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.hfm-av img { width: 1.64em; height: 1.64em; object-fit: contain; }
.hfm-nome { display: flex; flex-direction: column; line-height: 1.2; }
.hfm-nome > span {
  display: flex; align-items: center; gap: .36em;
  font-size: 1.14em; font-weight: 700; color: #111;
}
.hfm-nome > span img { width: 1.18em; height: 1.18em; }
.hfm-nome small { font-weight: 500; color: #7a7a7a; font-size: .91em; }
.hfm-acoes {
  margin-left: auto; display: flex; gap: 1.27em;
  color: #0a84ff; font-size: 1.18em;
}

/* ── Corpo da conversa ────────────────────────────────────── */

.hfm-corpo {
  flex: 1; position: relative; overflow: hidden;
  /* o CSS mora em brand/, a imagem mora na raiz das LPs */
  background: url("../mockup-bg-whats.webp") center/cover, #efeae2;
}
.hfm-msgs {
  position: absolute; inset: .73em;
  display: flex; flex-direction: column; gap: .5em;
  justify-content: flex-end; overflow: hidden;
}

.hfm-sis {
  align-self: center; background: #fdf6d8; color: #5c5340;
  font-size: .86em; text-align: center; border-radius: .73em;
  padding: .45em .91em; max-width: 92%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
}
.hfm-sis i { color: #b09a4f; margin-right: .36em; }

.hfm-msg {
  max-width: 84%; padding: .64em .91em .55em; border-radius: .91em;
  font-size: 1.09em; line-height: 1.42; color: #111b21; position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.hfm-msg .h {
  display: block; text-align: right; font-size: .78em;
  color: #8696a0; margin-top: .18em;
}
.hfm-msg.hfm-entra { background: #fff; border-top-left-radius: .27em; align-self: flex-start; }
.hfm-msg.hfm-sai   { background: #d9fdd3; border-top-right-radius: .27em; align-self: flex-end; }
.hfm-msg.hfm-sai .h i { color: #53bdeb; margin-left: .18em; }

/* botões de resposta rápida */
.hfm-chips { display: flex; flex-direction: column; gap: .45em; align-self: stretch; padding: .09em .18em 0; }
.hfm-chips span {
  background: #fff; color: #0061c7; font-weight: 600; font-size: 1.05em;
  text-align: center; border-radius: 999px; padding: .64em .91em;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}

/* digitando… */
.hfm-typing {
  display: inline-flex; gap: .36em; align-items: center; background: #fff;
  border-radius: .91em; border-top-left-radius: .27em; padding: .91em 1.09em;
  align-self: flex-start; overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.hfm-typing b {
  width: .55em; height: .55em; border-radius: 50%; background: #9aa8b2;
  animation: hfm-tp 1.2s infinite;
}
.hfm-typing b:nth-child(2) { animation-delay: .18s; }
.hfm-typing b:nth-child(3) { animation-delay: .36s; }
@keyframes hfm-tp {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-.27em); }
}

/* ── Campo de digitar ─────────────────────────────────────── */

.hfm-campo {
  display: flex; align-items: center; gap: .82em;
  padding: .64em .91em .82em;
  background: #f6f5f3; border-top: 1px solid #e2ded6;
  color: #54656f; font-size: 1.18em;
}
.hfm-campo span {
  flex: 1; background: #fff; border-radius: 999px;
  padding: .5em 1em; color: #8a959e; font-size: .88em;
}

/* ── O CICLO: 16s, mensagens entrando em sequência ──────────
   Use as classes .hfm-p1 a .hfm-p6 na ordem em que cada peça deve
   aparecer. É o mesmo ritmo do mockup do site principal. */

/* No celular a conversa aparece completa de imediato (o Google mede
   o celular em rede lenta e conta conteúdo atrasado contra a nota).
   No desktop a sequência roda UMA vez e fica: sem loop, sem esconder
   o que já foi pintado. */
.hfm-typing { display: none; }
@keyframes hfm-in {
  from { opacity: 0; transform: translateY(.9em); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 1024px) {
  .hfm-p1, .hfm-p2, .hfm-p3, .hfm-p4, .hfm-p5, .hfm-p6 {
    animation: hfm-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .hfm-p1 { animation-delay: 0.4s; }
  .hfm-p2 { animation-delay: 1.6s; }
  .hfm-p3 { animation-delay: 2.3s; }
  .hfm-p4 { animation-delay: 3.0s; }
  .hfm-p5 { animation-delay: 3.7s; }
  .hfm-p6 { animation-delay: 4.4s; }
  .hfm-typing { display: inline-flex; animation: hfm-tp-once 1.2s linear 0.5s both; }
}
@keyframes hfm-tp-once {
  0%       { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -.64em; }
  18%, 82% { opacity: 1; max-height: 3.3em; padding: .91em 1.09em; margin-top: 0; }
  100%     { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -.64em; }
}

@media (prefers-reduced-motion: reduce) {
  .hfm-fone,
  .hfm-typing b,
  .hfm-p1, .hfm-p2, .hfm-p3, .hfm-p4, .hfm-p5, .hfm-p6 { animation: none !important; }
  .hfm-p1, .hfm-p2, .hfm-p3, .hfm-p4, .hfm-p5, .hfm-p6 { opacity: 1 !important; transform: none !important; }
  .hfm-typing { display: none; }
}