/* =====================================================================
   cenas-v5.css · 24por7 · composição v5.0
   Roteiro de cenas, fundo de Sinais e suporte às transições.
   Referência: docs/design/composicao-v5-0.html
   Ordem de carga: tokens.css → components.css → composicao.css → cenas-v5.css
   ===================================================================== */

:root { --tela-escura: #0c1a20; }

/* ===== Fundo de Sinais (decidido em 21/10): grade de dados e pulsos, atrás das formas de vidro ===== */
.trama { position: absolute; inset: 0; display: block; pointer-events: none; }
/* C · rede com sinais: grade de dados e pulsos que correm pelas linhas */
.trama--rede {
  background-image:
    linear-gradient(rgba(255,255,255,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.11) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(110% 80% at 50% 20%, #000 35%, transparent 90%);
          mask-image: radial-gradient(110% 80% at 50% 20%, #000 35%, transparent 90%);
}
.trama--sinais i { position: absolute; height: 1px; width: 160px; background: linear-gradient(90deg, transparent, var(--acento)); box-shadow: 0 0 8px var(--acento); opacity: .7; animation: sinal 7s linear infinite; }
.trama--sinais i:nth-child(1) { top: 176px; animation-delay: 0s; }
.trama--sinais i:nth-child(2) { top: 352px; animation-delay: -2.3s; animation-duration: 9s; }
.trama--sinais i:nth-child(3) { top: 528px; animation-delay: -4.1s; }
.trama--sinais i:nth-child(4) { top: 704px; animation-delay: -1.2s; animation-duration: 11s; }
.trama--sinais i:nth-child(5), .trama--sinais i:nth-child(6) { width: 1px; height: 160px; left: 264px; top: 0; background: linear-gradient(transparent, var(--acento)); animation-name: sinal-v; animation-duration: 8s; }
.trama--sinais i:nth-child(6) { left: auto; right: 352px; animation-delay: -3.6s; animation-duration: 10s; }
@keyframes sinal { from { transform: translateX(-200px); } to { transform: translateX(calc(100vw + 200px)); } }
@keyframes sinal-v { from { transform: translateY(-200px); } to { transform: translateY(calc(100vh + 200px)); } }

@media (prefers-reduced-motion: reduce) { .trama--sinais i { animation: none; } .trama--sinais { display: none !important; } }
/* Desempenho: os pulsos correm por baixo de formas com desfoque, o que obriga o navegador a redesenhar o desfoque a cada quadro.
   No celular e em telas de toque, a grade fica parada (sem pulsos): mesma linguagem, sem custo de bateria nem tranco na rolagem. */
@media (max-width: 1023px), (hover: none) { .trama--sinais { display: none; } }


/* ===== Timing de tecnologia =====
   Tokens: entrada rápida, assentamento longo (0,9 s, expo), 70 ms entre elementos, pausas intencionais.
   Os estados iniciais só existem quando o JS dos efeitos roda: sem JS ou com "reduzir movimento", tudo aparece. */
:root { --rev-dur: .9s; --rev-curva: cubic-bezier(.16, 1, .3, 1); --rev-passo: 70ms; }

/* 2 · títulos por palavra, cada uma atrás da sua máscara */
.rev-mascara { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.rev-palavra { display: inline-block; will-change: transform; }

/* 5 · feed como log rodando */
.feed__item--vivo .feed__acao::after { content: ""; display: inline-block; width: .55em; height: 1em; margin-left: .35em; vertical-align: -.15em; background: var(--acento); animation: cursor-pisca 1s steps(1) infinite; }
@keyframes cursor-pisca { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .feed__item--vivo .feed__acao::after { animation: none; } }

/* ===== v4.7 · roteiro de cenas =====
   Cada seção é uma cena com superfície própria, dentro da paleta.
   escuro (topo) → areia (para quem) → petróleo (como funciona) → terminal (operação) → areia (soluções) → cor (contato). */

/* a atmosfera deixa de ser verde: azul-noite com Sinais */
[data-tema="dia"] .s-atmosfera { background: linear-gradient(160deg, #0b1a2b 0%, #0c2a35 55%, #0e3a3c 100%); }
[data-tema="dia"] { --luz-1: rgba(139,255,169,.10); --luz-2: rgba(255,226,180,.12); --luz-3: rgba(44,232,196,.14); }

section[data-cena], footer[data-cena] { isolation: isolate; }
section[data-cena="petroleo"] { background: rgba(5, 38, 40, .84); }
section[data-cena="terminal"] {
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    rgba(3, 8, 11, .96);
}
section[data-cena="cor"] {
  background:
    radial-gradient(110% 80% at 88% 0%, rgba(139,255,169,.20), transparent 55%),
    linear-gradient(160deg, #0c5c53 0%, #083f3e 100%);
}
footer[data-cena="rodape"] { background: var(--tela-escura); position: relative; z-index: var(--z-conteudo); }
[data-tema="noite"] section[data-cena="cor"] { background: radial-gradient(110% 80% at 88% 0%, rgba(0,255,157,.16), transparent 55%), linear-gradient(160deg, #0a3d48 0%, #071f2e 100%); }

/* areia: cena clara. Tokens trocados só dentro dela; o acento escurece para passar no contraste */
section[data-cena="areia"] {
  --fundo: #efe8dc;
  --texto: #10201c; --texto-2: rgba(16,32,28,.80); --texto-3: rgba(16,32,28,.64);
  --linha: rgba(16,32,28,.14);
  --vidro: rgba(255,255,255,.55); --vidro-forte: rgba(255,255,255,.74); --vidro-borda: rgba(16,32,28,.14);
  --vidro-luz: rgba(255,255,255,.9); --vidro-reflexo: rgba(255,255,255,.35);
  --acento: #0a7148; --acento-texto: #f4f7f5; --acento-brilho: none; --foco: #0a7148;
  --cta-fundo: #10201c; --cta-texto: #f4f7f5;
  color: var(--texto);
  background:
    linear-gradient(rgba(16,32,28,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,32,28,.055) 1px, transparent 1px),
    #efe8dc;
  background-size: 88px 88px, 88px 88px, auto;
}
section[data-cena="areia"] .s-selo, section[data-cena="areia"] .selo { background: var(--tela-escura); border-color: transparent; color: #f4f7f5; box-shadow: 0 10px 24px -14px rgba(16,32,28,.6); }
section[data-cena="areia"] .s-selo::before, section[data-cena="areia"] .selo::before { background: rgba(16,32,28,.18); border-color: transparent; }
/* a areia é clara nos dois temas (decisão do dono, 21/10): Para quem e Soluções continuam brancos à noite */
/* Soluções: cena clara, mas os mini-UIs continuam escuros (a "tela" do produto) */
section[data-cena="areia"] .mini {
  --texto: #eef3f1; --texto-2: rgba(238,243,241,.8); --texto-3: rgba(238,243,241,.6); --linha: rgba(255,255,255,.12);
  --vidro-forte: rgba(255,255,255,.04); --vidro-borda: rgba(255,255,255,.12); --acento: #8BFFA9; --fundo: var(--tela-escura);
  background: var(--tela-escura); color: var(--texto); border-color: transparent;
}

/* fendas: a linha que marca a virada de cena */
.fenda { position: relative; height: 0; z-index: 5; pointer-events: none; }
.fenda__linha { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--acento) 15%, var(--acento) 85%, transparent); box-shadow: 0 0 14px var(--acento); transform: scaleX(0); opacity: 0; }
.fenda--pulso .fenda__linha { transform-origin: left; }
.fenda--pulso .fenda__linha::after { content: ""; position: absolute; right: 10%; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 16px var(--acento); }
.fenda--terminal .fenda__linha { transform-origin: center; background: linear-gradient(90deg, transparent, #fff 30%, var(--acento) 50%, #fff 70%, transparent); }
.fenda__texto { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-family: var(--fonte-mono); font-size: 12px; color: var(--acento); letter-spacing: .04em; white-space: nowrap; opacity: 0; }
.fenda__texto::after { content: "_"; animation: cursor-pisca 1s steps(1) infinite; }

/* Soluções sobe como uma folha por cima do terminal */
#solucoes { z-index: calc(var(--z-conteudo) + 1); margin-top: -56px; box-shadow: 0 -30px 60px -30px rgba(0,0,0,.55); border-radius: var(--raio-m); }
#operacao { padding-bottom: calc(var(--secao-y) / 2 + 56px); }
body { background: #0b1a2b; }

/* Como funciona travado: as etapas acendem conforme a rolagem */
.roteiro--percurso .roteiro__etapa { transition: transform .45s var(--rev-curva); }
.roteiro--percurso .roteiro__etapa .roteiro__num { color: var(--texto-3); transition: color .3s; }
.roteiro--percurso .roteiro__etapa.aceso .roteiro__num { color: var(--acento); }
.roteiro--percurso .roteiro__etapa.atual { transform: scale(1.03); }
.roteiro--percurso .roteiro__etapa.atual .selo { box-shadow: 0 0 0 1px var(--acento), 0 0 26px -2px var(--acento); }
.roteiro--percurso .roteiro__etapa.atual .roteiro__cartao { border-color: color-mix(in srgb, var(--acento) 55%, transparent); }
.roteiro--percurso .roteiro__fios path { opacity: .4; transition: opacity .45s var(--rev-curva); }
.roteiro--percurso .roteiro__fios path.aceso { opacity: 1; }
.roteiro__progresso { display: none; }
.roteiro--percurso .roteiro__progresso { display: flex; justify-content: center; gap: 6px; margin-top: var(--esp-24); }
.roteiro__progresso i { width: 22px; height: 3px; border-radius: var(--raio-pilula); background: var(--linha); transition: background .3s; }
.roteiro__progresso i.aceso { background: var(--acento); }

/* terminal: a linha que roda ganha barra de progresso; as anteriores esmaecem */
.feed__item { transition: opacity .5s var(--rev-curva); }
.feed--rodou .feed__item:not(.feed__item--vivo) { opacity: .55; }
.feed__item--vivo { position: relative; }
.feed__item--vivo::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--acento); box-shadow: 0 0 8px var(--acento); }
.feed--rodou .feed__item--vivo::after { animation: progresso-log 2.6s var(--rev-curva) infinite; }
@keyframes progresso-log { 0% { width: 0; opacity: 1; } 80% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .feed--rodou .feed__item--vivo::after { animation: none; width: 100%; } .fenda__texto::after { animation: none; } }

/* fotos com folga para a profundidade */
.pq2__foto img { will-change: transform; }

/* ===== v4.9 · fechamento: a areia de Soluções se desfaz na grade dos Sinais e revela o Contato ===== */
#contato { position: relative; }
.grade-cena { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: grid; overflow: hidden; }
.grade-cena i { display: block; position: relative; background: #efe8dc; box-shadow: inset 0 0 0 1px rgba(16,32,28,.06); will-change: transform, opacity; }
.grade-cena b { position: absolute; inset: 0; background: var(--acento); opacity: 0; will-change: opacity; }
#contato > .s-container { position: relative; z-index: 2; }

/* ===== v5.0 · contraste (medido em todos os textos, dia e noite) ===== */
section[data-cena="cor"] { --texto-3: rgba(244,247,245,.72); }
/* o selo "exemplo" da foto vira pílula: legível sobre qualquer fundo */
.pq2__mini .pq2__exemplo { background: var(--exemplo-suave); color: var(--exemplo-texto); border-radius: 999px; padding: 0 var(--esp-8); line-height: 1.6; }

/* Menu: vidro escuro constante, para ler sobre as cenas claras e escuras */
.nav__barra { background: rgba(9, 22, 30, .78); border-color: rgba(255,255,255,.14); }
.nav__barra .s-btn--link, .nav__barra .nav__links .s-btn { color: rgba(244,247,245,.86); }
.nav__barra .nav__links .s-btn:hover { color: #fff; }

/* Como funciona no desktop: a seção vira uma tela travada e a câmera anda dentro dela */
.roteiro--camera { height: 100vh; height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;
  padding-top: calc(var(--nav-altura) + var(--esp-16) + var(--esp-24)); padding-bottom: var(--esp-16); }
.roteiro--camera > .s-container { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.roteiro--camera .s-cabecalho { margin-bottom: var(--esp-16); display: grid; grid-template-columns: 1fr auto; align-items: end; text-align: left; max-width: none; gap: var(--esp-4) var(--esp-24); }
.roteiro--camera .s-cabecalho .s-h2, .roteiro--camera .s-cabecalho .s-p { grid-column: 1; margin: 0; }
.roteiro__janela { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: var(--raio-m);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%); }
.roteiro__janela .roteiro__palco { will-change: transform; }
.roteiro__contador { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-family: var(--fonte-mono); font-size: var(--t-pequeno); color: var(--acento); letter-spacing: .06em; white-space: nowrap; }
.roteiro--camera .roteiro__progresso { margin-top: var(--esp-12); }

/* Desempenho na rolagem: a atmosfera fixa vira uma camada própria (a rolagem não a redesenha)
   e os pulsos pausam enquanto a página está rolando (o desfoque não precisa ser refeito a cada quadro). */
.s-atmosfera { will-change: transform; contain: strict; }
html.rolando .trama--sinais i { animation-play-state: paused; }

/* ===== v5.4 · Orçamento de desempenho na rolagem =====
   Medido numa tela Retina (densidade 2): o desfoque de fundo (backdrop-filter) dobrava o tempo de cada quadro.
   As cenas agora são superfícies sólidas, então o desfoque atrás dos painéis não mostrava quase nada:
   ele fica só no menu (pequeno e fixo). Os painéis ganham fundo um pouco mais denso para compensar. */
body *:not(.nav__barra) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
section[data-cena] .s-painel { background-color: color-mix(in srgb, var(--fundo) 58%, var(--vidro-forte)); }
section[data-cena="areia"] .s-painel { background-color: rgba(255,255,255,.72); }
/* as telas dos produtos em Soluções continuam escuras (o painel claro acima não vale para elas) */
section[data-cena="areia"] .mini .s-painel, section[data-cena="areia"] .mini__ui { background-color: #0c1a20; }
.forma { background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.02) 50%, rgba(255,255,255,.045)); }
/* cada cena só repinta dentro dela mesma */
section[data-cena], footer[data-cena] { contain: paint; }
/* cortina das passagens: placa na cor da atmosfera, movida só por transform */
.cortina { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: #0b1a2b; will-change: transform; }
[data-tema="noite"] .cortina { background: #070f26; }
section[data-cena] { position: relative; }

/* Como funciona (desktop): a etapa atual acende o ícone em verde, as já vistas ficam com o ícone verde.
   Vale para as duas classes do ícone (.selo na referência, .s-selo no site). */
#como-funciona.roteiro--percurso .roteiro__etapa :is(.selo, .s-selo) { transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s; }
#como-funciona.roteiro--percurso .roteiro__etapa.aceso :is(.selo, .s-selo) { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 45%, transparent); }
#como-funciona.roteiro--percurso .roteiro__etapa.atual :is(.selo, .s-selo) {
  background: var(--acento); color: #0b1a12; border-color: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 22%, transparent), 0 0 28px -2px var(--acento);
}
#como-funciona.roteiro--percurso .roteiro__etapa.atual :is(.selo, .s-selo) .ico { filter: none; }