/* ============================================================
   AGÊNCIA REFERÊNCIA — ANIMAÇÕES
   Reveal por IntersectionObserver (ref-main.js adiciona .is-visible),
   marquee em loop e crescimento de linhas. Sem bounce, sem elastic.
   ============================================================ */

/* Reveal — aplicar a classe .ref-reveal em qualquer container/widget */
.ref-reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur-reveal) var(--ease-editorial),transform var(--dur-reveal) var(--ease-editorial)}
.ref-reveal.is-visible{opacity:1;transform:none}
.ref-reveal--d1{transition-delay:80ms}
.ref-reveal--d2{transition-delay:160ms}
.ref-reveal--d3{transition-delay:240ms}
.ref-reveal--d4{transition-delay:320ms}

/* Clip reveal — para imagens grandes */
.ref-reveal-clip{clip-path:inset(0 0 100% 0);transition:clip-path var(--dur-reveal) var(--ease-editorial)}
.ref-reveal-clip.is-visible{clip-path:inset(0 0 0 0)}

/* Linha que cresce */
.ref-reveal-line{transform:scaleX(0);transform-origin:left;transition:transform var(--dur-reveal) var(--ease-editorial)}
.ref-reveal-line.is-visible{transform:scaleX(1)}

/* Marquee — o JS duplica o conteúdo para o loop ficar contínuo */
.ref-marquee{overflow:hidden;padding:clamp(16px,2vw,26px) 0}
.ref-marquee__track{display:flex;width:max-content;gap:.6em;font-size:clamp(28px,4vw,56px);font-weight:var(--fw-medium);letter-spacing:-.02em;line-height:1;text-transform:uppercase;animation:refMarquee var(--marquee-dur) linear infinite;will-change:transform}
.ref-marquee__item{display:inline-flex;align-items:center;gap:.6em}
.ref-marquee__sep{font-size:.62em}
.ref-marquee--dark{background:var(--ref-black);color:var(--ref-beige)}
.ref-marquee--dark .ref-marquee__sep{color:var(--ref-green)}
.ref-marquee--green{background:var(--ref-green);color:var(--ref-black)}
.ref-marquee--green .ref-marquee__sep{color:var(--ref-black)}
.ref-marquee--beige{background:var(--ref-beige);color:var(--ref-black)}
.ref-marquee--beige .ref-marquee__sep{color:var(--ref-orange)}
.ref-marquee--logos .ref-marquee__track{animation-duration:46s;font-size:inherit;text-transform:none}
@keyframes refMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Parallax muito leve — no máximo 40px de deslocamento, aplicado pelo JS */
.ref-parallax{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .ref-reveal,.ref-reveal-clip,.ref-reveal-line{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .ref-marquee__track{animation:none!important}
  .ref-parallax{transform:none!important}
}