/* Lobran · motion graphics do site institucional.
   Regras: só transform e opacity; o estado final é o estado natural do elemento
   (sem JS ou com prefers-reduced-motion, tudo aparece completo e parado).
   Orquestração: site.js (revelação ao rolar, trilha, pausa fora da tela, "ver de novo").
   Sem contador animado de números e sem o mesmo fade em todo elemento: os dois são marcas de site
   gerado por template/IA (ver framework/03_modules/lobran_institucional.md §"Design humanizado"). */

:root { --out: cubic-bezier(.22, 1, .36, 1); }

/* ---------- hero com motion graphic lateral ---------- */
.hero__grid { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 1024px) {
  .hero--aside .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--s8); }
  .hero--aside .h1 { font-size: clamp(2.4rem, 4.2vw, 3.6rem); }
}
.hero__bg { transform: translate3d(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -9px), 0) scale(1.05); transition: transform .9s var(--out); }

/* entrada do hero: CSS puro, roda no carregamento */
@keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero__copy > * { animation: heroIn .8s var(--out) both; }
.hero__copy > :nth-child(2) { animation-delay: .08s; }
.hero__copy > :nth-child(3) { animation-delay: .16s; }
.hero__copy > :nth-child(4) { animation-delay: .24s; }
.hero__aside { animation: heroIn .9s var(--out) .3s both; }
.facts > div { animation: heroIn .7s var(--out) both; }
.facts > div:nth-child(1) { animation-delay: .38s; }
.facts > div:nth-child(2) { animation-delay: .46s; }
.facts > div:nth-child(3) { animation-delay: .54s; }
.facts > div:nth-child(4) { animation-delay: .62s; }

/* ---------- revelação ao rolar (site.js aplica só abaixo da dobra) ---------- */
.rv { opacity: 0; transform: translateY(20px); }
.rv.rv-in { opacity: 1; transform: none; transition: opacity .7s var(--out), transform .9s var(--out); }

/* ---------- linha do tempo: trilha preenchida pela rolagem (--p do site.js; sem JS = cheia) ---------- */
.timeline { position: relative; padding-left: 30px; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; border-radius: 2px; }
.timeline::before { background: var(--line); }
.timeline::after { background: var(--petrol); transform-origin: top; transform: scaleY(var(--p, 1)); transition: transform .25s linear; }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: -29px; top: calc(var(--s5) + .5em); width: 12px; height: 12px; border-radius: 50%; background: var(--mist); border: 2px solid var(--petrol-400); z-index: 1; }

/* ---------- cartão de motion graphic ---------- */
.viz { --t0: .75s; margin: 0; border-radius: var(--r-sm); padding: var(--s5);
  background: rgba(11, 26, 34, .72); border: 1px solid rgba(233, 240, 241, .16); }
@media (max-width: 479px) { .viz { padding: var(--s4); } }
.viz__hd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s4); margin-bottom: var(--s3); }
.viz__t { font-family: var(--f-mono); font-weight: 500; color: #fff; font-size: .84rem; }
.viz__lg { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: .72rem; color: var(--on-dark-3); }
.lg { display: inline-block; width: 18px; height: 0; border-top: 2px dashed rgba(233, 240, 241, .55); margin-left: 8px; }
.lg:first-child { margin-left: 0; }
.lg--act { border-top: 2.5px solid var(--amber); }
.viz__ft { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin-top: var(--s3); font-size: .78rem; line-height: 1.5; color: var(--on-dark-3); }
.viz__replay { flex-shrink: 0; font: inherit; font-weight: 600; color: var(--amber); background: rgba(233, 162, 59, .1); border: 1px solid rgba(233, 162, 59, .3); border-radius: var(--r-sm); padding: 6px 12px; cursor: pointer;
  transition: transform .22s var(--spring), background-color .18s var(--ease), border-color .18s var(--ease); }
.viz__replay:hover { background: rgba(233, 162, 59, .18); border-color: rgba(233, 162, 59, .6); transform: translateY(-1px); }
.viz__replay:active { transform: scale(.96); }
.viz.is-wait *, .viz.is-wait *::before, .viz.is-wait *::after { animation-play-state: paused !important; }
.viz.is-replay *, .viz.is-replay *::before, .viz.is-replay *::after { animation: none !important; }

/* ---------- gráfico de geração (SVG) ---------- */
.ch { display: block; width: 100%; height: auto; overflow: visible; }
.ch-grid line { stroke: rgba(233, 240, 241, .08); stroke-width: 1; stroke-dasharray: 2 5; }
.ch-grid .ch-base { stroke: rgba(233, 240, 241, .22); stroke-dasharray: none; }
.ch-band { fill: rgba(47, 167, 154, .14); stroke: rgba(47, 167, 154, .28); stroke-width: 1; }
.ch-zone { fill: rgba(193, 85, 74, .16); }
.ch-exp { fill: none; stroke: rgba(233, 240, 241, .55); stroke-width: 2; stroke-dasharray: 6 6; }
.ch-act { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ch-lead { stroke: rgba(233, 240, 241, .35); stroke-width: 1; stroke-dasharray: 3 3; }
.ch-dot--warn { fill: var(--danger); stroke: #fff; stroke-width: 2; }
.ch-dot--ok { fill: var(--petrol-400); stroke: #fff; stroke-width: 2; }
.ch-tick { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ch-ring { fill: none; stroke: var(--danger); stroke-width: 2; opacity: .35; }
.ch-call rect { fill: var(--ink-700); stroke: rgba(233, 240, 241, .16); }
.ch-call--1 rect { stroke: rgba(193, 85, 74, .6); }
.ch-call--2 rect { stroke: rgba(47, 167, 154, .6); }
.ch-tt { fill: #fff; font: 600 12.5px var(--f-body); }
.ch-ts { fill: rgba(233, 240, 241, .62); font: 500 10.5px var(--f-body); }
.ch-ax { fill: rgba(233, 240, 241, .45); font: 400 10.5px var(--f-mono); }

@keyframes chReveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes chFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes chRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes chPop { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes chPulse { 0% { opacity: .75; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.6); } }

.ch-clip, .ch-pop, .ch-ring, .ch-call, .ch-lead { transform-box: fill-box; }
.ch-clip { transform-origin: 0 0; }
.ch-pop, .ch-ring { transform-origin: center; }
.ch-grid, .ch-band { animation: chFade .7s var(--ease) var(--t0) both; }
.ch-clip--exp { animation: chReveal 1s var(--out) calc(var(--t0) + .2s) both; }
.ch-clip--act { animation: chReveal 2.4s linear calc(var(--t0) + .7s) both; }
/* sincronia: dia 18 = 58,6% da largura -> 0,7 + 2,4 x 0,586 = 2,1s; dia 22 = 72,4% -> 2,44s */
.ch-zone { animation: chFade .6s var(--ease) calc(var(--t0) + 2.05s) both; }
.ch-pop--1 { animation: chPop .55s var(--out) calc(var(--t0) + 2.1s) both; }
.ch-ring { animation: chPulse 1.9s ease-out calc(var(--t0) + 2.4s) infinite both; }
.ch-lead--1, .ch-call--1 { animation: chRise .5s var(--out) calc(var(--t0) + 2.25s) both; }
.ch-pop--2 { animation: chPop .55s var(--out) calc(var(--t0) + 2.9s) both; }
.ch-lead--2, .ch-call--2 { animation: chRise .5s var(--out) calc(var(--t0) + 3.05s) both; }

/* celular: rótulos do SVG ficariam ilegíveis; viram legenda de eventos em HTML, no mesmo tempo */
.viz__ev { display: none; gap: var(--s2); margin-top: var(--s3); font-size: .84rem; color: var(--on-dark-2); }
.viz__ev li { position: relative; padding-left: 20px; }
.viz__ev li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; }
.viz__ev--warn::before { background: var(--danger); }
.viz__ev--ok::before { background: var(--petrol-400); }
.viz__ev strong { color: #fff; margin-right: 4px; }
.viz__ev--warn { animation: chRise .5s var(--out) calc(var(--t0) + 2.2s) both; }
.viz__ev--ok { animation: chRise .5s var(--out) calc(var(--t0) + 2.95s) both; }
@media (max-width: 559px) {
  .ch-call, .ch-lead { display: none; }
  .viz__ev { display: grid; }
  .viz__ft { flex-wrap: wrap; }
}

/* ---------- conferência de fatura ---------- */
.viz--doc { --t0: .7s; }
.doc { position: relative; overflow: hidden; border-radius: var(--r); background: #f7fafa; color: var(--ink); padding: var(--s3) var(--s4) var(--s4); box-shadow: inset 0 0 0 1px rgba(11, 26, 34, .06); }
.doc__rows { display: grid; }
.doc__row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 11px 2px; border-bottom: 1px dashed rgba(11, 26, 34, .12); font-size: .9rem; line-height: 1.4; }
.doc__row span { position: relative; z-index: 1; color: var(--text-2); }
.doc__row.is-flag span { color: var(--ink); font-weight: 600; }
.doc__row.is-flag::before { content: ""; position: absolute; inset: 2px -8px; border-radius: 8px; background: rgba(233, 162, 59, .16); box-shadow: inset 0 0 0 1px rgba(233, 162, 59, .45); }
.doc__st { position: relative; z-index: 1; flex-shrink: 0; font-size: .74rem; font-weight: 700; border-radius: var(--r-pill); padding: 3px 10px; }
.doc__st--ok { color: var(--petrol); background: rgba(18, 102, 95, .1); }
.doc__st--flag { color: #8a4f0c; background: rgba(233, 162, 59, .3); }
.doc__res { margin-top: var(--s4); font-size: .86rem; color: var(--text-2); }
.doc__res strong { color: var(--ink); }
.doc__scan { position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent 0, transparent calc(100% - 46px), rgba(47, 167, 154, .16) calc(100% - 3px), var(--petrol-400) calc(100% - 2px), var(--petrol-400) 100%); }
@keyframes docScan { 0% { opacity: 1; transform: translateY(-100%); } 88% { opacity: 1; transform: translateY(-4%); } 100% { opacity: 0; transform: translateY(0); } }
.doc__scan { animation: docScan 2.6s cubic-bezier(.45, 0, .55, 1) var(--t0) both; }
.doc__st { animation: chPop .45s var(--out) both; }
.doc__row:nth-child(1) .doc__st { animation-delay: calc(var(--t0) + .45s); }
.doc__row:nth-child(2) .doc__st { animation-delay: calc(var(--t0) + .8s); }
.doc__row:nth-child(3) .doc__st { animation-delay: calc(var(--t0) + 1.15s); }
.doc__row:nth-child(4) .doc__st { animation-delay: calc(var(--t0) + 1.5s); }
.doc__row:nth-child(5) .doc__st { animation-delay: calc(var(--t0) + 1.85s); }
.doc__row:nth-child(6) .doc__st { animation-delay: calc(var(--t0) + 2.2s); }
.doc__row.is-flag::before { animation: chFade .5s var(--ease) calc(var(--t0) + 1.85s) both; }
.doc__res { animation: chRise .5s var(--out) calc(var(--t0) + 2.6s) both; }

@media (prefers-reduced-motion: reduce) {
  .hero__bg { transform: none; }
  .rv { opacity: 1; transform: none; }
  .ch-ring { opacity: 0; }
}