/* Movimento compartilhado da identidade JotaNexo: preload, entrada
   orquestrada, símbolo das quatro barras e rede viva. Os gestos vêm da
   apresentação do MVP; o JS (assets/js/motion.js) liga as classes.

   Regras que não se negociam (CLAUDE.md):
   - armadilha 3: o conteúdo nasce VISÍVEL. Tudo que esconde para animar mora
     sob `.js-motion`, classe que só o motion.js põe (e não põe com
     prefers-reduced-motion). Sem JS, ou com o observador mudo, nada some.
   - armadilha 4: movimento é `transform`/`opacity`, nunca a propriedade
     `translate`, que o reveal do site público já domina. */

/* ---------- símbolo: as quatro barras ---------- */
.jx-glifo{display:inline-flex;align-items:flex-end;gap:3px;height:20px;}
.jx-glifo i{display:block;width:5px;background:var(--green);border-radius:2px;transform-origin:bottom;}
.jx-glifo i:nth-child(1){height:35%;}
.jx-glifo i:nth-child(2){height:60%;}
.jx-glifo i:nth-child(3){height:85%;}
.jx-glifo i:nth-child(4){height:100%;background:var(--blue);}
.jx-glifo--sm{height:16px;}
.jx-glifo--sm i{width:4px;}
.jx-glifo--lg{height:56px;gap:6px;}
.jx-glifo--lg i{width:14px;border-radius:4px;}

/* ---------- rede viva (canvas de fundo) ---------- */
.jx-rede{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}

/* ---------- preload (criado pelo JS; só existe com JS) ---------- */
.jx-preload{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:var(--navy-900);color:var(--ink-on-dark);transition:opacity .45s var(--ease-out);}
.jx-preload__glifo{display:inline-flex;align-items:flex-end;gap:6px;height:56px;}
.jx-preload__glifo i{display:block;width:14px;border-radius:4px;background:var(--green);transform-origin:bottom;animation:jx-cresce .7s var(--ease-out) both;}
.jx-preload__glifo i:nth-child(1){height:35%;animation-delay:.05s;}
.jx-preload__glifo i:nth-child(2){height:60%;animation-delay:.15s;}
.jx-preload__glifo i:nth-child(3){height:85%;animation-delay:.25s;}
.jx-preload__glifo i:nth-child(4){height:100%;background:var(--blue-lt);animation-delay:.35s;}
.jx-preload__frase{font-family:var(--font-display);font-weight:600;font-size:var(--step-1);letter-spacing:.01em;color:var(--muted-on-dark);}
.js-motion .jx-preload.sai{opacity:0;pointer-events:none;}

/* ---------- entrada orquestrada ---------- */
.js-motion [data-entrada] .ent{opacity:0;transform:translateY(18px);}
.js-motion [data-entrada].on .ent{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
.js-motion [data-entrada].on .ent.d1{transition-delay:.08s;}
.js-motion [data-entrada].on .ent.d2{transition-delay:.16s;}
.js-motion [data-entrada].on .ent.d3{transition-delay:.24s;}
.js-motion [data-entrada].on .ent.d4{transition-delay:.32s;}
.js-motion [data-entrada].on .ent.d5{transition-delay:.40s;}
.js-motion [data-entrada].on .ent.d6{transition-delay:.48s;}
.js-motion [data-entrada].on .ent.d7{transition-delay:.56s;}
.js-motion [data-entrada].on .ent.d8{transition-delay:.64s;}

/* barras crescendo quando a seção liga */
.js-motion [data-entrada] .jx-glifo--enche i{transform:scaleY(0);}
.js-motion [data-entrada].on .jx-glifo--enche i{animation:jx-cresce .7s var(--ease-out) forwards;}
.js-motion [data-entrada].on .jx-glifo--enche i:nth-child(2){animation-delay:.08s;}
.js-motion [data-entrada].on .jx-glifo--enche i:nth-child(3){animation-delay:.16s;}
.js-motion [data-entrada].on .jx-glifo--enche i:nth-child(4){animation-delay:.24s;}

@keyframes jx-cresce{from{transform:scaleY(0);}to{transform:scaleY(1);}}

/* ---------- menos movimento: tudo parado e visível ---------- */
@media (prefers-reduced-motion:reduce){
  .jx-preload{display:none;}
  .jx-preload__glifo i,
  .js-motion [data-entrada].on .jx-glifo--enche i{animation:none;transform:none;}
  .js-motion [data-entrada] .ent{transition:none;}
}