/* =============================================================
   Cenas — o movimento de cada momento da home (set/2026).

   Tudo aqui é desenho em CSS/SVG, sem vídeo: pesa pouco no 4G e fica
   nítido em qualquer tela. O cenas.js põe .cena-fora em quem sai da tela
   (a animação pausa) e cuida das partes que dependem de rolagem ou clique.
   Movimento reduzido: cada cena aparece parada no estado final.
   ============================================================= */

.cena-fora, .cena-fora * { animation-play-state: paused !important; }

/* ---------- Soluções: uma tela pequena no alto de cada cartão ---------- */
.servico .cena {
  position: relative; height: 112px; margin-top: 1.05rem; overflow: hidden;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--cor) 18%, var(--line));
  background:
    linear-gradient(to right, color-mix(in srgb, var(--cor) 7%, transparent) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(to bottom, color-mix(in srgb, var(--cor) 7%, transparent) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(180deg, color-mix(in srgb, var(--cor) 8%, var(--surface)), color-mix(in srgb, var(--cor) 3%, var(--canvas)));
}
.cena__selo {
  position: absolute; top: 9px; left: 10px; z-index: 2; display: flex; align-items: center; gap: 6px;
  font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cor-ink);
}
.cena__selo i { width: 6px; height: 6px; border-radius: 50%; background: var(--mato); animation: brilho-vivo 1.8s var(--saida) infinite; }
@keyframes brilho-vivo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mato) 60%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }

/* AI Agents: cliente pergunta, agente digita e responde */
.cena__chat { position: absolute; inset: 26px 10px 9px; }
.bolha { position: absolute; max-width: 84%; margin: 0; padding: .38rem .6rem; border-radius: 10px; font-size: .73rem; line-height: 1.32; opacity: 0; }
.bolha--cliente { top: 0; left: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 3px; animation: fala-cliente 7s var(--saida) infinite; }
.bolha--digita { right: 0; bottom: 0; display: flex; gap: 3px; padding: .5rem .6rem; background: color-mix(in srgb, var(--cor) 22%, var(--surface)); animation: fala-digita 7s linear infinite; }
.bolha--digita i { width: 5px; height: 5px; border-radius: 50%; background: var(--cor-ink); animation: pula .9s ease-in-out infinite; }
.bolha--digita i:nth-child(2) { animation-delay: .15s; }
.bolha--digita i:nth-child(3) { animation-delay: .3s; }
.bolha--agente { right: 0; bottom: 0; color: var(--cor-sobre); background: linear-gradient(150deg, var(--cor-alto), var(--cor-baixo)); border-bottom-right-radius: 3px; animation: fala-agente 7s var(--saida) infinite; }
@keyframes fala-cliente { 0% { opacity: 0; transform: translateY(6px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes fala-digita  { 0%, 20% { opacity: 0; } 24%, 40% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes fala-agente  { 0%, 42% { opacity: 0; transform: translateY(6px); } 48%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes pula { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-3px); } }

/* Micro SaaS: as barras de assinantes sobem e o número aparece */
.cena__kpi { position: absolute; top: 12px; left: 12px; animation: kpi 6s var(--saida) infinite; }
.cena__kpi small { display: block; font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); }
.cena__kpi strong { display: block; margin-top: .3rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: var(--cor-ink); }
.cena__barras { position: absolute; top: 16px; right: 12px; bottom: 12px; left: 44%; display: flex; align-items: flex-end; gap: 5px; border-bottom: 1px solid color-mix(in srgb, var(--cor) 35%, var(--line)); }
.cena__barras i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--cor-alto), var(--cor-baixo)); transform-origin: bottom; animation: cresce 6s var(--saida) infinite; animation-delay: calc(var(--i) * .07s); }
@keyframes cresce { 0% { transform: scaleY(.06); } 38%, 86% { transform: none; } 100% { transform: scaleY(.06); } }
@keyframes kpi { 0%, 34% { opacity: 0; transform: translateY(4px); } 42%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Cloud: três servidores de pé, luzes piscando e dados passando no fio */
.cena__nuvem { position: absolute; inset: 27px 12px 22px; display: flex; justify-content: center; gap: 10px; }
.servidor {
  position: relative; width: 44px; display: flex; flex-direction: column; gap: 5px; padding: 8px 7px;
  border-radius: 6px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--cor) 35%, var(--line));
  box-shadow: 0 6px 12px -8px rgba(46, 58, 47, .4);
}
.servidor b { height: 5px; border-radius: 2px; background: color-mix(in srgb, var(--cor) 28%, var(--line)); }
.servidor i { position: absolute; right: 6px; bottom: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--mato); animation: led 1.6s steps(2, jump-none) infinite; animation-delay: calc(var(--i) * -.55s); }
.cena__fio { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 2px; background: color-mix(in srgb, var(--cor) 30%, transparent); }
.cena__fio i { position: absolute; top: -2px; left: 0; width: 6px; height: 6px; background: var(--cor-baixo); animation: pacote 2.6s linear infinite; animation-delay: calc(var(--i) * -.65s); }
@keyframes led { from { opacity: 1; } to { opacity: .25; } }
@keyframes pacote { 0% { left: 0; opacity: 0; } 10%, 88% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }

/* Consultoria: a rota se desenha de hoje até a meta, marco por marco */
.cena__rota { position: absolute; inset: 6px 8px; width: calc(100% - 16px); height: calc(100% - 12px); overflow: visible; }
.rota__trilha { fill: none; stroke: color-mix(in srgb, var(--cor) 30%, var(--line)); stroke-width: 2; stroke-dasharray: 3 4; }
.rota__linha { fill: none; stroke: var(--cor); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: traca 7s var(--curva) infinite; }
.rota__marco { fill: var(--surface); stroke: color-mix(in srgb, var(--cor) 45%, var(--line)); stroke-width: 2; animation: marco 7s infinite; animation-delay: calc(var(--i) * 1.3s); }
.rota__meta path:first-child { stroke: var(--cor-ink); stroke-width: 2; }
.rota__bandeira, .arte__bandeira { fill: var(--terra); transform-box: fill-box; transform-origin: left center; animation: bandeira 7s var(--saida) infinite; }
.cena__rota text { font: 500 8px var(--mono); letter-spacing: .06em; fill: var(--subtle); }
@keyframes traca { 0% { stroke-dashoffset: 100; opacity: 1; } 55%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes marco { 0%, 1% { fill: var(--surface); } 4%, 58% { fill: var(--cor); stroke: var(--cor); } 68%, 100% { fill: var(--surface); } }
@keyframes bandeira { 0%, 52% { transform: scaleX(0); } 58%, 90% { transform: none; } 100% { transform: scaleX(0); } }

/* ---------- Modelos: um desenho por forma de trabalhar ---------- */
.modelo { position: relative; }
.modelo__arte { position: absolute; top: 1.4rem; right: 1.3rem; width: 96px; height: 40px; overflow: visible; }
.arte__trilha { fill: none; stroke: color-mix(in srgb, var(--cor) 30%, var(--line)); stroke-width: 2; stroke-dasharray: 2 3; }
.arte__linha { fill: none; stroke: var(--cor); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: traca 5s var(--curva) infinite; }
.arte__no { fill: var(--cor); }
.arte__no--fim { transform-box: fill-box; transform-origin: center; animation: pisca-fim 5s var(--saida) infinite; }
.arte__apagado { fill: var(--line-2); }
.arte__fim path:first-child { stroke: var(--cor-ink); stroke-width: 2; }
.modelo .arte__bandeira { fill: var(--cor); animation-duration: 5s; }
.arte__giro { transform-origin: 48px 20px; animation: gira 3.6s linear infinite; }
.arte__giro path { fill: none; stroke: var(--cor-baixo); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.arte__rotulo { font: 600 6.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--subtle); }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes pisca-fim { 0%, 50% { transform: scale(.4); opacity: .3; } 58%, 90% { transform: none; opacity: 1; } 100% { transform: scale(.4); opacity: .3; } }

/* ---------- Diferenciais: jogo de telefone x linha direta ---------- */
.linha-direta {
  display: grid; gap: .9rem; margin-bottom: 1.5rem; padding: 1.15rem 1.35rem;
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--luz-topo), var(--sombra-1);
}
.ld { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 1rem; }
.ld small { font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--subtle); }
.ld--curta small { color: var(--mato-ink); font-weight: 600; }
.ld__trilha { position: relative; display: flex; justify-content: space-between; align-items: center; }
.ld__trilha::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--line-2); }
.ld--curta .ld__trilha::before { background: color-mix(in srgb, var(--mato) 45%, var(--line)); }
.ld__trilha b { position: relative; z-index: 1; padding: .3rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--ink); background: var(--canvas); border: 1px solid var(--line); }
.ld--curta .ld__trilha b { border-color: color-mix(in srgb, var(--mato) 45%, var(--line)); background: color-mix(in srgb, var(--mato) 8%, var(--canvas)); }
.ld__recado { position: absolute; z-index: 2; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; border-radius: 2px; background: var(--terra); }
.ld--longa .ld__recado { animation: recado-longo 7s linear infinite; }
.ld--curta .ld__recado { background: var(--mato); animation: recado-curto 7s var(--saida) infinite; }
@keyframes recado-longo {
  0%       { left: 0; opacity: 1; filter: none; transform: none; }
  18%, 26% { left: 33%; }
  46%, 54% { left: 64%; opacity: .7; filter: blur(.6px); transform: rotate(20deg); }
  84%      { left: calc(100% - 10px); opacity: .35; filter: blur(1.6px); transform: scale(.6) rotate(45deg); }
  100%     { left: calc(100% - 10px); opacity: 0; }
}
@keyframes recado-curto {
  0%       { left: 0; opacity: 1; transform: none; }
  14%      { left: calc(100% - 10px); transform: none; }
  18%, 76% { left: calc(100% - 10px); transform: scale(1.5); box-shadow: 0 0 0 5px color-mix(in srgb, var(--mato) 22%, transparent); }
  86%, 100%{ left: calc(100% - 10px); opacity: 0; }
}
@media (max-width: 640px) {
  .ld { grid-template-columns: 1fr; gap: .45rem; }
  .ld__trilha b { padding: .25rem .45rem; font-size: .7rem; }
}

/* ---------- Como trabalho: a linha acende com a rolagem ---------- */
.passos::after {
  content: ""; position: absolute; z-index: 0; left: 2%; right: 2%; top: 22px; height: 2px;
  background: linear-gradient(90deg, var(--mato), var(--terra), var(--sol), var(--ink-2));
  transform-origin: left center; transform: scaleX(var(--linha, 1));
}
.passo { z-index: 1; }
.passos--vivo .passo__n { transition: filter .5s var(--curva), opacity .5s var(--curva), transform .5s var(--saida); }
.passos--vivo .passo:not(.aceso) .passo__n { filter: saturate(.25); opacity: .55; transform: scale(.92); }
@media (max-width: 1020px) { .passos::after { display: none; } }

/* ---------- Dúvidas: "digitando…" antes da resposta ---------- */
.faq__digita { display: none; gap: 4px; width: max-content; margin: 0 0 1.25rem; padding: .6rem .75rem; border-radius: 12px; border-bottom-left-radius: 3px; background: var(--surface-2); }
.faq__digita i { width: 6px; height: 6px; border-radius: 50%; background: var(--subtle); animation: pula .9s ease-in-out infinite; }
.faq__digita i:nth-child(2) { animation-delay: .15s; }
.faq__digita i:nth-child(3) { animation-delay: .3s; }
.faq details.digitando .faq__digita { display: flex; }
.faq details.digitando p { display: none; }
.faq details.respondeu p { animation: sobe .45s var(--saida) both; }

/* ---------- Sobre: Anapu no mapa, com rotas até onde já tem projeto ---------- */
.retrato .mapa {
  position: absolute; z-index: 2; left: -1.5rem; bottom: 1.5rem; width: clamp(150px, 40%, 204px);
  padding: .8rem .8rem .65rem; border-radius: var(--r);
  background: rgba(251, 249, 242, .94); border: 1px solid var(--line); box-shadow: var(--sombra-2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mapa__svg { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
.mapa__terra { fill: color-mix(in srgb, var(--mato) 55%, var(--canvas)); }
.mapa__rota { fill: none; stroke: var(--terra); stroke-width: .8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; shape-rendering: geometricPrecision; animation: rota-mapa 6s var(--curva) infinite; animation-delay: calc(var(--i) * .5s); }
.mapa__cidade { fill: var(--terra); animation: cidade 6s infinite; animation-delay: calc(var(--i) * .5s); }
.mapa__base { fill: var(--terra-ink); }
.mapa__onda { fill: none; stroke: var(--terra); stroke-width: .6; shape-rendering: geometricPrecision; transform-box: fill-box; transform-origin: center; animation: onda 2.2s var(--saida) infinite; }
.mapa__legenda { display: flex; align-items: center; gap: .45rem; margin-top: .5rem; font: 600 9.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.mapa__legenda i { width: 7px; height: 7px; flex: none; background: var(--terra-ink); }
@keyframes rota-mapa { 0% { stroke-dashoffset: 100; opacity: 1; } 40%, 86% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes cidade { 0%, 36% { opacity: .3; } 44%, 88% { opacity: 1; } 100% { opacity: .3; } }
@keyframes onda { from { transform: scale(.5); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
@media (max-width: 860px) { .retrato .mapa { left: .75rem; bottom: .75rem; width: clamp(146px, 38%, 176px); padding: .6rem .6rem .5rem; } .mapa__legenda { font-size: 8.5px; letter-spacing: 0; gap: .35rem; } }
.mapa__legenda { white-space: nowrap; }

/* ---------- O que entrego: carimbo de "incluído" quando o cartão entra ---------- */
#entrega .dif__n { position: relative; }
#entrega .dif.in .dif__n::after {
  content: ""; position: absolute; top: -7px; right: -8px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--mato) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
  box-shadow: 0 0 0 2px var(--surface), 0 4px 8px -3px rgba(46, 58, 47, .5);
  animation: carimbo .55s var(--saida) .45s both;
}
@keyframes carimbo { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }

/* ---------- Projetos: o "no ar" pisca como luz de servidor ---------- */
.projeto__estado:not(.cor-ink) { display: inline-flex; align-items: center; gap: .4rem; }
.projeto__estado:not(.cor-ink)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mato-light); animation: brilho-vivo 1.8s var(--saida) infinite; }

/* ---------- Movimento reduzido: tudo parado no estado final ---------- */
@media (prefers-reduced-motion: reduce) {
  .cena, .cena *, .projeto__estado::before, #entrega .dif__n::after { animation: none !important; }
  .bolha--cliente, .bolha--agente, .cena__kpi { opacity: 1; }
  .zap--digita { display: none; }
  .rota__linha, .arte__linha, .mapa__rota { stroke-dashoffset: 0; }
  .ld__recado, .mapa__onda { display: none; }
}

/* ---------- Amanhecer: céu e chão em pixel atrás do hero ----------
   SVG gerado por scripts/gerar-paisagem.py. Ao abrir a página a luz do
   horizonte esquenta, as estrelas esmaecem, o rio brilha e três pássaros
   cruzam o céu. O home.js pausa tudo quando o hero sai da tela. */
.hero--escuro { padding-bottom: max(clamp(2.5rem, 5vw, 3.5rem), calc(clamp(150px, 26vw, 360px) * .27 + 1rem)); }
.amanhecer { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.amanhecer svg { position: absolute; left: 0; width: 100%; shape-rendering: crispEdges; overflow: hidden; }
/* Céu abaixo do cabeçalho e com o miolo vazio, para as estrelas não caírem no texto */
.amanhecer__ceu {
  top: var(--nav-h); height: min(62%, 62vw);
  -webkit-mask-image: radial-gradient(38% 46% at 50% 58%, transparent 45%, #000 100%);
          mask-image: radial-gradient(38% 46% at 50% 58%, transparent 45%, #000 100%);
}
.amanhecer__chao { bottom: 0; height: clamp(150px, 26vw, 360px); }
.amanhecer__luz {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 34% at 50% 100%, rgba(243, 199, 127, .30), transparent 70%),
    radial-gradient(95% 55% at 50% 100%, rgba(214, 104, 58, .30), transparent 75%);
}

.pa-rio        { fill: #1B251E; }
.pa-mata-fundo { fill: #1F2A21; }
.pa-mata       { fill: #121913; }
.pa-margem     { fill: #D9683A; opacity: .4; }
.pa-reflexo    { fill: var(--marca-agua); }
.pa-reflexo-sol{ fill: var(--sol-light); }
.pa-onda       { fill: var(--on-dark); opacity: .1; }
.pa-estrela    { fill: var(--on-dark); opacity: .7; }
.pa-passaro    { fill: #121913; }
.pa-bando      { opacity: 0; }

.anima .amanhecer__luz { animation: amanhece 3.4s var(--saida) .2s both; }
.anima .amanhecer__ceu { animation: esmaece 3.4s var(--saida) .2s both; }
.anima .pa-estrela { animation: pisca var(--t) ease-in-out var(--a) infinite alternate; }
.anima .pa-reflexo, .anima .pa-reflexo-sol { animation: cintila 2.4s steps(2, jump-none) infinite; animation-delay: calc(var(--i) * -.35s); }
.anima .pa-onda { animation: marola 4.2s steps(3, jump-none) infinite; animation-delay: calc(var(--i) * -.6s); }
.anima .pa-bando { opacity: 1; animation: voa 52s linear infinite backwards; animation-delay: calc(2.2s + var(--a)); }
.anima .pa-asa1, .anima .pa-asa2 { animation: bate .56s steps(1, end) infinite; animation-delay: var(--b); }
.anima .pa-asa2 { animation-name: bate2; }
.hero--parado .amanhecer, .hero--parado .amanhecer * { animation-play-state: paused !important; }

@keyframes amanhece { from { opacity: 0; } to { opacity: 1; } }
@keyframes esmaece  { from { opacity: 1; } to { opacity: .5; } }
@keyframes pisca    { from { opacity: .75; } to { opacity: .12; } }
@keyframes cintila  { 0% { opacity: 1; transform: none; } 100% { opacity: .5; transform: translateX(1px); } }
@keyframes marola   { 0% { transform: none; } 100% { transform: translateX(2px); } }
@keyframes voa      { from { transform: translate(-40px, 0); } 50% { transform: translate(140px, -6px); } to { transform: translate(360px, 2px); } }
@keyframes bate     { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes bate2    { 0% { opacity: 0; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .amanhecer *, .amanhecer__ceu { animation: none !important; }
  .pa-bando { display: none; }
}

/* Faixa do dia: embaixo do cabeçalho, avança com a rolagem (home.js põe --dia) */
.topo__dia {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--mato) 0%, var(--terra) 45%, var(--sol) 80%, var(--sol-light) 100%);
  transform-origin: left center; transform: scaleX(var(--dia, 0));
  opacity: 0; transition: opacity .3s var(--curva);
}
.topo.rolou .topo__dia { opacity: 1; }


/* ---------- Tipografia da V4: rótulo acima do título é frase normal ----------
   O tipografia.css do site proíbe caixa alta espaçada; as cenas seguem a regra. */
.cena__selo, .cena__kpi small, .ld small, .mapa__legenda { text-transform: none; letter-spacing: 0; font-family: var(--texto, inherit); }
.cena__selo { font-size: 11px; font-weight: 700; }
.cena__kpi small, .ld small { font-size: 12px; font-weight: 600; }
.mapa__legenda { font-size: 11px; font-weight: 700; }
.arte__rotulo, .cena__rota text { text-transform: none; letter-spacing: 0; font-family: var(--texto, inherit); font-weight: 700; }