/* ============================================================
   CG LUB — MOVIMENTO
   Depende de tokens.css. Toda entrada e disparada por
   IntersectionObserver (motion.js), que apenas acrescenta a
   classe .is-in. O CSS faz o resto.

   Principio: uma unica direcao de leitura — de baixo para cima,
   da esquerda para a direita. Nada gira, nada quica, nada
   aparece de tres lugares diferentes na mesma dobra.
   ============================================================ */

/* ---------- ESTADO INICIAL ----------------------------------
   So ganha estado escondido se o JS estiver vivo (.has-js).
   Sem JS, o conteudo aparece normalmente — nunca fica invisivel. */

.has-js [data-reveal]{
  opacity:0;
  will-change:opacity,transform;
  transition:
    opacity   var(--dur-entrance) var(--ease-out),
    transform var(--dur-entrance) var(--ease-out),
    clip-path var(--dur-entrance) var(--ease-out);
  transition-delay:var(--delay,0ms);
}

/* --- variantes de entrada --- */

/* padrao: sobe e revela. o gesto base de todo o site */
.has-js [data-reveal="up"]      { transform:translate3d(0,28px,0) }
/* bloco lateral de uma secao dividida */
.has-js [data-reveal="left"]    { transform:translate3d(-32px,0,0) }
/* titulo grande: sobe menos e com escala minima, para nao "pular" */
.has-js [data-reveal="title"]   { transform:translate3d(0,20px,0) scale(.985);transform-origin:left bottom }

/* ---------- ESTADO FINAL ------------------------------------ */

.has-js [data-reveal].is-in{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 0 0);
  will-change:auto;
}

/* ---------- GRUPO REVELADO ----------------------------------
   Um unico atributo no container revela todos os filhos diretos,
   ja escalonados. O JS numera os filhos em --i; cada um entra
   70ms depois do anterior, com teto em --stagger-max.        */

.has-js [data-reveal-group] > *{
  opacity:0;
  transform:translate3d(0,22px,0);
  will-change:opacity,transform;
  transition:
    opacity   var(--dur-entrance) var(--ease-out),
    transform var(--dur-entrance) var(--ease-out);
  transition-delay:calc(var(--i,0) * var(--stagger-step));
}
.has-js [data-reveal-group].is-in > *{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* ---------- HEADER AO ROLAR ---------------------------------- */

.c-header{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-header);
  transition:background var(--dur) var(--ease),
             box-shadow  var(--dur) var(--ease),
             transform   var(--dur-slow) var(--ease);
  background:transparent;
}
.c-header.is-stuck{
  background:rgba(4,13,6,.90);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line), var(--shadow-2);
}
/* esconde ao descer, devolve ao subir — libera tela no celular */
.c-header.is-hidden{ transform:translateY(calc(-100% - 30px)) }

/* ---------- PARALAXE DISCRETA --------------------------------
   Amplitude pequena de proposito. Foto de hero se move ~5% da
   distancia rolada; mais que isso enjoa e denuncia o efeito.  */

.c-parallax{ will-change:transform }
.c-parallax img{ transform:translate3d(0,var(--py,0px),0);transition:none }

/* ---------- MICROINTERACOES ---------------------------------- */

/* card de segmento: a foto respira, a barra de cor cresce */
.c-seg{ transition:transform var(--dur) var(--ease-out),border-color var(--dur) var(--ease) }
.c-seg .c-arc > img{ transition:transform var(--dur-slow) var(--ease-out) }
.c-seg:hover{ transform:translateY(-4px);border-color:var(--line-strong) }
.c-seg:hover .c-arc > img{ transform:scale(1.05) }
.c-seg::before{ transition:height var(--dur) var(--ease) }
.c-seg:hover::before{ height:8px }

/* link de texto: filete que cresce da esquerda */
.c-link{
  position:relative;display:inline-block;
  color:var(--lime);text-decoration:none;
}
.c-link::after{
  content:"";position:absolute;left:0;bottom:-2px;
  width:100%;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur) var(--ease-out);
}
.c-link:hover::after{ transform:scaleX(1) }

/* botao flutuante: entra depois do hero, nao junto com ele */
.c-fab{
  position:fixed;left:var(--s-5);bottom:var(--s-5);z-index:var(--z-fab);
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
}
.c-fab.is-in{ opacity:1;transform:none;pointer-events:auto }

/* ---------- RESPEITO A PREFERENCIA DO SISTEMA ----------------
   Quem pediu menos movimento recebe a pagina inteira, pronta.
   Nada some, nada fica esperando observer.                    */

@media (prefers-reduced-motion: reduce){
  .has-js [data-reveal],
  .has-js [data-reveal].is-in,
  .has-js [data-reveal-group] > *,
  .has-js [data-reveal-group].is-in > *{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    transition:none !important;
  }
  .c-parallax img{ transform:none !important }
  .c-header{ transition:none }
  *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important }
}