/* ============================================================= Conecta Assessoria — animation states Estratégia à prova de falhas: NADA é escondido pelo CSS. O JS (animations.js) esconde os itens via gsap.set() só quando há GSAP de fato. Assim, se o JS/GSAP falhar, todo o conteúdo continua visível — nunca uma seção em branco. ============================================================= */ [data-animate-item] { opacity: 1; } /* ============================================================= Lenis — CSS oficial. Sem isto, o `scroll-behavior: smooth` nativo briga com a inércia do Lenis e o scroll "trava". O Lenis adiciona as classes .lenis / .lenis-smooth ao . ============================================================= */ .lenis, .lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ============================================================= MOTION — estados premium-editorial. Tudo que "começa escondido" vive sob `.js-anim`, classe que o JS só adiciona à quando há GSAP ativo (sem reduced-motion). Sem JS / sem GSAP / movimento reduzido → nada de `.js-anim`, então todo elemento já está no estado final visível. Fail-safe. O ScrollTrigger alterna `.is-revealed` para disparar os "draws". ============================================================= */ /* Hero — título revelado linha a linha (máscara) */ .hero__title[data-split-lines] .line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; } .hero__title[data-split-lines] .line__in { display: block; will-change: transform; } /* Nav — encolhe e ganha presença ao rolar */ .nav__inner { transition: height 0.35s var(--ease); } .nav__logo-img, .nav__logo-word { transition: height 0.35s var(--ease); } .nav--scrolled .nav__inner { height: 60px; } .nav--scrolled .nav__logo-img { height: 34px; } .nav--scrolled .nav__logo-word { height: 28px; } .nav--scrolled { box-shadow: 0 1px 0 rgba(184, 149, 42, 0.35), 0 10px 30px -16px rgba(0, 0, 0, 0.55); } /* Nav — sublinhado dourado animado nos links */ .nav__links a:not(.nav__cta) { position: relative; } .nav__links a:not(.nav__cta)::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 100%; background: var(--gold-soft); transform: scaleX(0); transform-origin: left; transition: transform 0.32s var(--ease); } .nav__links a:not(.nav__cta):hover::after { transform: scaleX(1); } /* ---- Draws disparados no scroll (só quando .js-anim está ativo) ---- */ /* Eyebrow das seções — tracinho dourado que desenha */ .js-anim .section-head__eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform 0.55s var(--ease) 0.1s; } .js-anim .section-head.is-revealed .section-head__eyebrow::before { transform: scaleX(1); } /* Cards de serviço — sublinhado do número desenha */ .js-anim .card-servico__num::after { transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease) 0.18s; } .js-anim .card-servico.is-revealed .card-servico__num::after { transform: scaleX(1); } /* Processo — ponto que surge + linha dourada que desenha no topo do passo */ .js-anim .passo::before { transform: scale(0); transition: transform 0.45s var(--ease); } .js-anim .passo.is-revealed::before { transform: scale(1); } .js-anim .passo::after { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease) 0.05s; } .js-anim .passo.is-revealed::after { transform: scaleX(1); } /* ============================================================= Acessibilidade — quem pediu menos movimento, recebe menos. ============================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }