/* ============================================================
   Animações do site OpenFluxo
   Topo vivo (palavras, destaque, etiqueta, botão) e entrada ao rolar.
   Tudo desliga para quem pede "reduzir movimento" no sistema.
   ============================================================ */

/* ---------- 1. o título só aparece quando as palavras estão prontas ---------- */
.js-anim .hero-conv h1, .js-anim .pl-hero h1 { opacity: 0; animation: anim-seguranca 0s 2.4s forwards; }
.js-anim .hero-conv h1.anim-ok, .js-anim .pl-hero h1.anim-ok { opacity: 1; animation: none; }
@keyframes anim-seguranca { to { opacity: 1; } }

/* ---------- 2. palavras entrando uma a uma ---------- */
.pal {
  display: inline-block;
  opacity: 0;
  transform: translateY(.55em) rotate(3deg);
  filter: blur(6px);
  animation: pal-entra .75s cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: calc(var(--i) * 65ms + 120ms);
}
@keyframes pal-entra { to { opacity: 1; transform: none; filter: blur(0); } }

/* ---------- 3. expressão em destaque: marca-texto que corre e cor que se move ---------- */
.destaque-vivo {
  background-image: linear-gradient(90deg, rgba(124, 58, 237, .16), rgba(6, 182, 212, .22));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% .42em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: marca-texto 1s cubic-bezier(.6, 0, .2, 1) forwards;
  animation-delay: var(--atraso, 1s);
}
@keyframes marca-texto { to { background-size: 100% .42em; } }
.destaque-vivo .pal {
  background: linear-gradient(90deg, #6d28d9 0%, #0e7490 50%, #6d28d9 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pal-entra .75s cubic-bezier(.2, .8, .2, 1) forwards, cor-em-movimento 6s linear infinite;
  animation-delay: calc(var(--i) * 65ms + 120ms), 1.6s;
}
@keyframes cor-em-movimento { to { background-position: 200% 0; } }

/* ---------- 4. etiqueta do topo, com o ponto "ao vivo" ---------- */
.hero-conv .hero-kicker { animation: sobe-suave .6s ease-out both; }
.hero-conv .hero-kicker::before {
  content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%;
  background: #22c55e; margin-right: .55em; vertical-align: .05em;
  animation: pulso-vivo 2.2s ease-out infinite;
}
@keyframes pulso-vivo {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 .6em rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* palavra que gira (Home) */
.giro { display: inline-grid; vertical-align: bottom; overflow: hidden; color: #6d28d9 !important; font-weight: 800; }
.giro > span { grid-area: 1 / 1; white-space: nowrap; transform: translateY(110%); opacity: 0;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .55s; color: #6d28d9 !important; }
.giro > span.at { transform: none; opacity: 1; }
.giro > span.sai { transform: translateY(-110%); opacity: 0; }
.so-leitor { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 5. subtítulo, botões e ilustração entram depois do título ---------- */
@keyframes sobe-suave { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.js-anim .hero-conv .hero-sub, .js-anim .pl-hero .hero-sub { animation: sobe-suave .7s ease-out both; animation-delay: var(--d-hero, .9s); }
.js-anim .hero-conv .cta-row, .js-anim .pl-hero .cta-row { animation: sobe-suave .7s ease-out both; animation-delay: calc(var(--d-hero, .9s) + .15s); }
.js-anim .hero-conv .cta-reassure, .js-anim .pl-hero .pl-meios { animation: sobe-suave .7s ease-out both; animation-delay: calc(var(--d-hero, .9s) + .3s); }
.js-anim .hero-conv .hero-arte { animation: sobe-suave .9s ease-out both; animation-delay: .3s; }
.hero-conv .hero-arte img { animation: flutua 7s ease-in-out 1.4s infinite; }
@keyframes flutua { 50% { transform: translateY(-12px); } }

/* brilho que passa pelo botão principal */
.hero-conv .btn-wa, .pl-hero .btn-wa { position: relative; overflow: hidden; }
.hero-conv .btn-wa::after, .pl-hero .btn-wa::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -70%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  animation: brilho-botao 4.8s ease-in-out 2.4s infinite;
}
@keyframes brilho-botao { 0% { left: -70%; } 28%, 100% { left: 135%; } }

/* ---------- 6. conteúdo entrando ao rolar a página ---------- */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--rd, 0ms); }
.rv.visto { opacity: 1; transform: none; }

/* ---------- 7. quem pede menos movimento vê tudo parado e pronto ---------- */
@media (prefers-reduced-motion: reduce) {
  .pal, .destaque-vivo .pal, .hero-conv .hero-kicker, .hero-conv .hero-arte, .hero-conv .hero-arte img,
  .js-anim .hero-conv .hero-sub, .js-anim .hero-conv .cta-row, .js-anim .hero-conv .cta-reassure,
  .js-anim .pl-hero .hero-sub, .js-anim .pl-hero .cta-row, .js-anim .pl-hero .pl-meios {
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .destaque-vivo { animation: none !important; background-size: 100% .42em !important; }
  .hero-conv .hero-kicker::before, .hero-conv .btn-wa::after, .pl-hero .btn-wa::after { animation: none !important; }
  .js-anim .hero-conv h1, .js-anim .pl-hero h1 { opacity: 1 !important; animation: none !important; }
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .giro > span { transition: none !important; }
}

/* ============================================================
   Recursos gerais: palavra que se transforma, texto que acende,
   títulos que ganham vida e cartões 3D — em todas as páginas
   ============================================================ */
/* palavra que se transforma no título: sai uma, depois entra a outra */
.kinetico { display: inline-grid; vertical-align: baseline; perspective: 600px; transition: width .35s cubic-bezier(.2, .8, .2, 1); }
.kinetico .kw { grid-area: 1 / 1; justify-self: start; white-space: nowrap; visibility: hidden; -webkit-text-fill-color: currentColor; }
.kinetico .kw.ativo, .kinetico .kw.saindo { visibility: visible; }
.kinetico .kl { display: inline-block; opacity: 0; transform-origin: 50% 90%; }
.kinetico .kw.pronto .kl { opacity: 1; animation: none; }
.kinetico .kw.ativo:not(.pronto) .kl { animation: kl-entra .5s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--k) * 34ms); }
.kinetico .kw.saindo .kl { opacity: 1; animation: kl-sai .26s ease-in forwards; animation-delay: calc(var(--k) * 16ms); }
@keyframes kl-entra { from { opacity: 0; transform: translateY(.5em) rotateX(-80deg); } to { opacity: 1; transform: none; } }
@keyframes kl-sai { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-.4em) rotateX(70deg); } }
.kinetico.parado .kw:first-child { visibility: visible; }
.kinetico.parado .kl { opacity: 1; animation: none !important; }
body:not(.escuro) .kinetico .kw { text-shadow: 0 6px 22px rgba(124, 58, 237, .18); }

/* texto que acende conforme a rolagem (fundo branco) */
.acende { padding: 5.5rem 0; position: relative; z-index: 2; }
.acende-texto { max-width: 26ch; margin: 0; font-size: clamp(1.8rem, 5vw, 3.4rem); line-height: 1.2; font-weight: 800; letter-spacing: -.025em; }
.acende-texto .pa { transition: color .35s ease; }
body:not(.escuro) .acende-texto .pa { color: #8b87a8 !important; }
body:not(.escuro) .acende-texto .pa.on { color: #1a1a2e !important; }
body:not(.escuro) .acende-texto .pa.on.cor { color: #6d28d9 !important; }

/* títulos das seções: palavras entram uma a uma e uma barra cresce embaixo */
h2.rv .pw { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(5px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1), filter .6s ease, color .25s ease;
  transition-delay: calc(var(--i) * 55ms + 80ms); }
h2.rv.visto .pw { opacity: 1; transform: none; filter: none; }
h2.rv::after { content: ""; display: block; width: 0; height: 4px; border-radius: 4px; margin-top: .6rem;
  background: linear-gradient(90deg, #7c3aed, #06b6d4, #ec4899); transition: width .9s cubic-bezier(.2, .8, .2, 1) .4s; }
h2.rv.visto::after { width: 64px; }
h2.rv[style*="center"]::after { margin-left: auto; margin-right: auto; }
@media (hover: hover) and (pointer: fine) {
  h2.rv.visto .pw:hover { color: #7c3aed !important; transform: translateY(-4px) scale(1.04); transition-delay: 0s; }
  body.escuro h2.rv.visto .pw:hover { color: #c4b5fd !important; }
}

/* cartões que inclinam em 3D, com reflexo (fundo branco) */
.inclina { position: relative; will-change: transform; }
.inclina .reflexo { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(124, 58, 237, .10), transparent 62%); }
.inclina:hover .reflexo { opacity: 1; }
body:not(.escuro) .inclina:hover { box-shadow: 0 26px 46px -28px rgba(124, 58, 237, .45) !important; }

@media (prefers-reduced-motion: reduce) {
  .kinetico .kl { opacity: 1 !important; animation: none !important; }
  .acende-texto .pa { color: #1a1a2e !important; }
  body.escuro .acende-texto .pa { color: #ffffff !important; }
  h2.rv .pw { opacity: 1 !important; transform: none !important; filter: none !important; }
  h2.rv::after { width: 64px; transition: none; }
}


/* ============================================================
   Transição entre páginas (View Transitions) — Chrome, Edge e Safari recentes
   ============================================================ */
@view-transition { navigation: auto; }
header { view-transition-name: cabecalho; }
::view-transition-old(root) { animation: vt-sai .26s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-entra .44s cubic-bezier(0, 0, .2, 1) .05s both; }
@keyframes vt-sai { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(14px); } }
::view-transition-group(cabecalho) { animation-duration: .3s; }
/* a prévia do celular (Home) se expande até virar o topo da página escolhida */
::view-transition-group(previa) { animation-duration: .62s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); z-index: 50; }
::view-transition-old(previa), ::view-transition-new(previa) { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
::view-transition-old(previa) { animation-duration: .35s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}