/* ============================================================
   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.png") 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: #0a7cff; 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. */

.hfm-p1, .hfm-p2, .hfm-p3, .hfm-p4, .hfm-p5, .hfm-p6 { animation-duration: 16s; animation-iteration-count: infinite; }
.hfm-p1 { animation-name: hfm-p1; }
.hfm-p2 { animation-name: hfm-p2; }
.hfm-p3 { animation-name: hfm-p3; }
.hfm-p4 { animation-name: hfm-p4; }
.hfm-p5 { animation-name: hfm-p5; }
.hfm-p6 { animation-name: hfm-p6; }

@keyframes hfm-p1 { 0%, 2%  { opacity: 0; transform: translateY(.9em); } 5%,  93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes hfm-p2 { 0%, 12% { opacity: 0; transform: translateY(.9em); } 15%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes hfm-p3 { 0%, 27% { opacity: 0; transform: translateY(.9em); } 30%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes hfm-p4 { 0%, 45% { opacity: 0; transform: translateY(.9em); } 48%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes hfm-p5 { 0%, 60% { opacity: 0; transform: translateY(.9em); } 63%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes hfm-p6 { 0%, 72% { opacity: 0; transform: translateY(.9em); } 75%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

/* o "digitando" aparece entre a 1ª e a 2ª resposta e some */
.hfm-typing { animation: hfm-tpb 16s infinite; }
@keyframes hfm-tpb {
  0%, 18%   { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -.64em; }
  20%, 26%  { opacity: 1; max-height: 3.3em; padding: .91em 1.09em; margin-top: 0; }
  28%, 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; }
}