/* O ramo que cresce com a rolagem.
   Tudo aqui depende de classes que o ramo.js põe no <html>: sem o JS (ou se
   ele falhar) a página fica exatamente como sem o ramo, nada escondido.
   - html.ramo-c       o ramo existe (também para quem pede menos movimento)
   - html.ramo-c-vivo  o ramo cresce com a rolagem e o texto se revela */

/* A camada do ramo mora dentro da .page, atrás da coluna. A .col só vira
   `position: relative` SEM z-index: com z-index ela viraria um contexto de
   empilhamento e prenderia o popup (.pop, fixed, z-index 60) abaixo da cena. */
.ramo-c .page { position: relative; }
.ramo-c .col { position: relative; }
/* overflow hidden: as folhas da borda do celular passam da tela e não podem
   abrir rolagem para o lado. `contain` isola o ramo do layout do texto. */
.rc-camada { position: absolute; inset: 0; overflow: hidden; pointer-events: none; contain: layout paint style; }

/* caule: um SVG pequeno por trecho, com as folhas daquele trecho dentro, para
   que só o trecho que está crescendo seja redesenhado a cada quadro */
.rc-c { position: absolute; overflow: visible; transition: opacity .3s ease; }
/* remontar com a mesma largura (abrir o formulário): o trecho que mudou entra
   e o antigo sai com um fade curto; enquanto o .fold abre, o que está abaixo
   dele some de leve, para o conteúdo não deslizar por baixo do ramo */
.rc-c.rc-fora, .rc-c.rc-some { opacity: 0; }
.rc-c.rc-some { transition-duration: .15s; }
.rc-c path { fill: none; stroke-linecap: round; stroke-dasharray: 1 2; }

/* folha e azeitona: um <use> cada. A posição e o ângulo ficam em
   `translate`/`rotate`; o brotar mexe só em `transform` e `opacity`. A origem
   (0 0) é a base da folha — o <use> é desenhado com a base no ponto zero.
   Fechada, a folha está encolhida e virada para o caule; aberta, `transform:
   none` — em repouso não sobra nada além da própria posição. */
.rc-f { transform-box: view-box; transform-origin: 0 0; opacity: 0;
        transform: rotate(var(--r0, 0deg)) scale(.12);
        transition: transform .5s cubic-bezier(.55,0,.8,.2), opacity .35s ease-in; }
.rc-f.on { opacity: var(--o, .55); transform: none;
           transition: transform 1.25s cubic-bezier(.22,1,.36,1), opacity .8s ease-out; }
/* a azeitona pende do caule (a origem é o topo dela) e chega depois das
   folhas. Mais cheia que a folha: clara demais, parecia sujeira no papel. */
.rc-f.rc-az { --o: .85; }
.rc-f.rc-az.on { transition: transform 1.6s cubic-bezier(.22,1,.36,1) .15s, opacity 1s ease-out .15s; }
/* folha que acende muito atrás da ponta (ela saltou até a tela): já aberta */
.rc-f.rc-ja { transition: none !important; }

/* a emenda do caule com o fio da divisória: mora dentro da divisória, mas é
   posicionada pela coluna (a .rule não vira `relative`: mudaria as medidas
   dos fios) e fica por cima do fio, afinando */
.rc-e { position: absolute; display: block; pointer-events: none; }

/* a ponta que cresce: um par de folhinhas novas, como no broto de verdade.
   Esconde o corte seco do traço e mostra para onde o ramo está indo. */
.rc-ponta { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; opacity: 0; transition: opacity .3s ease; }
.rc-ponta.on { opacity: 1; }
.rc-ponta svg { position: absolute; overflow: visible; }

/* ao remontar (girar o aparelho, abrir o formulário) nada deve re-brotar */
.rc-sem, .rc-sem * { transition: none !important; }

/* a cena fora da tela: as animações sem fim dela param onde estão (ninguém
   as vê) e o navegador deixa de redesenhar a página a cada quadro */
.screen.rc-longe * { animation-play-state: paused !important; }

/* ---------- as divisórias brotam quando a ponta do ramo chega nelas ---------- */
/* os fios se estendem (o JS dá a escala quadro a quadro, a partir do lado em
   que o ramo chega) e o raminho do meio abre como as folhas */
.ramo-c-vivo .rule > i { transform: scaleX(0); }
/* divisória que ficou pronta antes de a ponta chegar (rolagem rápida, parada
   com ela na tela): os fios se completam sozinhos, sem estalo */
.ramo-c-vivo .rule.rc-pula > i { transition: transform .7s cubic-bezier(.22,1,.36,1); }
.ramo-c-vivo .rule > svg { opacity: 0; transform: rotate(var(--rc-g, -22deg)) scale(.3);
                           transition: transform .45s cubic-bezier(.55,0,.8,.2), opacity .3s ease-in; }
.ramo-c-vivo .rule.rc-on > svg { opacity: .9; transform: none;
                                 transition: transform 1.2s cubic-bezier(.22,1,.36,1), opacity .7s ease-out; }

/* ---------- o monograma do fim ---------- */
/* a moldura é revelada por dois meios-anéis que partem do ponto onde o ramo
   para e se encontram do outro lado; as letras, traço e depois tinta, como no
   cartão. Em repouso: anel cheio, letras cheias, sem contorno, sem máscara. */
.end svg .rc-a { fill: none; stroke: #fff; stroke-width: 19; stroke-dasharray: .5 1; stroke-dashoffset: 0; }
.end svg .rc-l { stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 1 2; stroke-dashoffset: 0; stroke-opacity: 0; }
.ramo-c-vivo .end.rc-espera svg .rc-a { stroke-dashoffset: .5; }
.ramo-c-vivo .end.rc-espera svg .rc-l { fill-opacity: 0; }
.ramo-c-vivo .end.rc-espera p { opacity: 0; }

/* ---------- o texto de cada seção entra quando a divisória brota ---------- */
.ramo-c-vivo .rc-alvo:not(.rc-visto) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .rc-camada *, .rule > svg, .rule > i { transition: none !important; }
}