/* ============================================================
   pc.css — "Palavras do Coração" mini-app (Parte 2)
   Palco 430×932 nativo; tudo posicionado em px absolutos.
   ============================================================ */

/* ─── Overlay ─── */
#pc-overlay {
  position: absolute; inset: 0; z-index: 200; overflow: hidden;
  background: linear-gradient(to bottom, #ffdea4 0%, #fff4ed 100%);
}

/* ─── Animações de entrada (classes adicionadas via JS com delay) ─── */
.pc-fade  { opacity: 0; transition: opacity .5s var(--ease-out, cubic-bezier(.22,.61,.36,1)); }
.pc-fade.pc-in { opacity: 1; }

.pc-slide-up { opacity: 0; transform: translateY(28px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.pc-slide-up.pc-in { opacity: 1; transform: none; }

.pc-slide-down { opacity: 0; transform: translateY(-28px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.pc-slide-down.pc-in { opacity: 1; transform: none; }

/* Entradas laterais para personagens e balões */
.pc-enter-left  { opacity: 0; transform: translateX(-40px);
  transition: opacity .45s ease, transform .45s ease; }
.pc-enter-left.pc-in  { opacity: 1; transform: none; }
.pc-enter-right { opacity: 0; transform: translateX(40px);
  transition: opacity .45s ease, transform .45s ease; }
.pc-enter-right.pc-in { opacity: 1; transform: none; }

/* Slide lateral (tarja e botão) */
.pc-slide-left {
  transition: left .5s var(--ease-out, cubic-bezier(.22,.61,.36,1));
}
.pc-slide-right {
  transition: left .5s var(--ease-out, cubic-bezier(.22,.61,.36,1));
}

/* ─── Coração ─── */
.pc-heart {
  position: absolute;
  transition: opacity .35s ease, left .4s ease, top .4s ease, width .4s ease, height .4s ease;
}

/* Revelar coração de cima para baixo (PC4) */
@keyframes pcRevealTop {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0   0% 0); }
}
.pc-heart-reveal {
  animation: pcRevealTop var(--pc-reveal-dur, 4s) ease forwards;
}

/* Pop de entrada dos balões — SEM fade (só escala) */
@keyframes pcPop {
  0%   { transform: scale(.55); }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.pc-pop { animation: pcPop .34s cubic-bezier(.2,.8,.3,1.25); }

/* Impacto no coração ao ser machucado/curado (mostra a "pancada") */
@keyframes pcImpact {
  0%   { transform: scale(1)   rotate(0); }
  22%  { transform: scale(.85) rotate(-2.5deg); }
  55%  { transform: scale(1.06) rotate(1.5deg); }
  100% { transform: scale(1)   rotate(0); }
}
.pc-heart-impact { animation: pcImpact .45s cubic-bezier(.36,.07,.19,.97); transform-origin: center center; }

/* Cura — efeito suave (bloom) ao curar (fase das palavras positivas) */
@keyframes pcHeal {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
.pc-heart-heal { animation: pcHeal .5s ease-out; transform-origin: center center; }

/* ─── PC4 — cura final (cross-dissolve do coração + balão com máscara) ─── */
/* cora_A (sólido) surge sobre cora_B (tracejado); opacidade controlada via JS */
.pc-cora-solid { opacity: 0; }

/* Bloom final (frame 39 do print): respiro sutil ao completar a cura */
@keyframes pcCoraBloom {
  0%   { filter: blur(0);     transform: scale(1); }
  45%  { filter: blur(2.5px); transform: scale(1.025); }
  100% { filter: blur(0);     transform: scale(1); }
}
.pc-cora-bloom { animation: pcCoraBloom .5s ease-in-out; transform-origin: center center; }

/* Coração curado: batimento (lub-dub) com glow vermelho, em loop, delicado.
   Não-linear (duas batidas + repouso) e amplitude pequena. */
@keyframes pcHeartGlowPulse {
  0%   { transform: scale(1);     filter: drop-shadow(0 0 5px rgba(216,30,44,.40)); }
  9%   { transform: scale(1.028); filter: drop-shadow(0 0 12px rgba(216,30,44,.78)); }
  18%  { transform: scale(1.002); filter: drop-shadow(0 0 6px rgba(216,30,44,.45)); }
  27%  { transform: scale(1.018); filter: drop-shadow(0 0 9px rgba(216,30,44,.58)); }
  40%  { transform: scale(1);     filter: drop-shadow(0 0 5px rgba(216,30,44,.40)); }
  100% { transform: scale(1);     filter: drop-shadow(0 0 5px rgba(216,30,44,.40)); }
}
.pc-heart-glow-pulse {
  animation: pcHeartGlowPulse 1.5s ease-in-out infinite;
  transform-origin: center center;
}

/* Balões de regra da PC4 (entram com pc-pop, alternando os lados) */
.pc-rule-balloon { position: absolute; transform-origin: center; }

/* Balão de conclusão: 2 camadas sobrepostas (acionado embaixo, ativ por cima).
   A máscara (clip-path) da camada de cima recua esq→dir revelando a de baixo. */
.pc-conclu-wrap { position: absolute; }
.pc-conclu-wrap img { left: 0; top: 0; width: 100%; height: 100%; }
.pc-conclu-bottom { z-index: 1; }
.pc-conclu-top    { z-index: 2; clip-path: inset(0 0 0 0); }

/* Glow "toque aqui" no balão ativ (indicador funcional, antes do clique) */
@keyframes pcConcluCta {
  0%,100% { filter: drop-shadow(0 4px 6px rgba(40,4,55,.25)); }
  50%     { filter: drop-shadow(0 0 11px rgba(255,187,0,.9)); }
}
.pc-conclu-cta { animation: pcConcluCta 1.6s ease-in-out infinite; }

/* Pulsação do coração (PC5) */
@keyframes pcHeartbeat {
  0%,100% { transform: scale(1); }
  14%     { transform: scale(1.07); }
  28%     { transform: scale(1); }
  42%     { transform: scale(1.05); }
  70%     { transform: scale(1); }
}
.pc-heart-pulse {
  animation: pcHeartbeat 1.3s ease-in-out infinite;
  transform-origin: center center;
}

/* ─── Balões ─── */
.pc-balloon {
  position: absolute;
  cursor: pointer;
  transition: opacity .3s ease, transform .15s ease;
  transform-origin: center;
}
.pc-balloon:active { transform: scale(.94); }
.pc-balloon.pc-clicked {
  cursor: default;
  pointer-events: none;
  opacity: .55;
}

/* ─── Texto sobre o coração ─── */
.pc-on-heart {
  position: absolute;
  color: #ffefe3;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 22px;        /* corpo 22 — cabe melhor dentro do coração */
  line-height: 1.18;
  text-align: center;
  margin: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.pc-on-heart.pc-visible { opacity: 1; }

/* ─── Texto fora do coração (PC5 abaixo) ─── */
.pc-txt-below {
  position: absolute;
  color: var(--c-roxo-txt, #730099);
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 20px;        /* Figma: corpo 20 */
  line-height: 1.1;
  text-align: center;
  margin: 0;
  opacity: 0;
  transition: opacity .7s ease;
}
.pc-txt-below.pc-visible { opacity: 1; }

/* ─── Dica "Toque nos balões" ─── */
.pc-hint {
  position: absolute;
  color: var(--c-roxo-txt, #730099);
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 12px;        /* Figma: corpo 12 */
  margin: 0;
  opacity: .8;
}

/* ─── Tarja rosa ─── */
.pc-tarja {
  position: absolute;
  height: 58px;
  background: #E45D6B;                 /* Figma: bt_interação */
  display: flex;
  align-items: center;
  border-radius: 0 29px 29px 0;        /* cantos direitos arredondados */
  border: 1px solid #fff;
  border-left: none;                   /* lado esquerdo sai da borda */
  box-shadow: 0 3px 8px rgba(40,4,55,.22);
}
.pc-tarja-text {
  color: #fff;
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  padding: 0 70px 0 22px;
  flex: 1;
}

/* ─── Botão "Iniciar" (PC1) ─── */
.pc-btn-iniciar {
  cursor: pointer;
  transition: transform .15s ease, opacity .5s ease;
}
.pc-btn-iniciar:active { transform: scale(.95); }

/* ─── Botão de avançar (seta) ─── */
.pc-btn-next {
  position: absolute;
  cursor: pointer;
  transition: transform .15s ease;
}
.pc-btn-next:active { transform: scale(.94); }

/* ─── Hamburguer (PC) ─── */
.pc-hamburger {
  position: absolute;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 45px; height: 45px;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 5px;
}
.pc-hamburger span {
  display: block; width: 26px; height: 3px;
  background: var(--c-roxo, #6B0584);
  border-radius: 2px;
}

/* ─── Cabeçalho roxo (App_cora_final_6) ─── */
.pc-header-roxo {
  position: absolute;
  left: 0; top: 0; right: 0;
  background: var(--c-roxo, #6B0584);
}

/* ─── Caixa bege (App_cora_final_6) ─── */
.pc-box-bege {
  position: absolute;
  background: var(--c-bege, #FFDFC7);
  border-radius: 18px;
  overflow: hidden;
}
.pc-box-bege-text {
  position: absolute;
  color: var(--c-roxo-txt, #730099);
  font-family: var(--font-base, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 18px;        /* Figma: corpo 18 */
  line-height: 1.3;
  margin: 0;
}

/* ─── Ícones sociais (App_cora_final_6) ─── */
.pc-social-icon {
  position: absolute;
  cursor: pointer;
  transition: transform .15s ease, opacity .3s ease;
}
.pc-social-icon:active { transform: scale(.9); }

/* ─── Miniatura do vídeo ─── */
.pc-miniatura {
  position: absolute;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
}
.pc-miniatura img {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
}
.pc-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.pc-play-btn::after {
  content: '';
  display: block;
  width: 0; height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid var(--c-roxo, #6B0584);
  margin-left: 4px;
}