/* ============================================================ GSAP Manager — Frontend Utility Styles Estilos base necessários para as animações por classe. ============================================================ */ /* ── gsap-text-highlight ── */ .gsap-text-highlight { background-image: linear-gradient( 120deg, var(--gsap-highlight-color, #0AE448) 0%, var(--gsap-highlight-color, #0AE448) 100% ); background-repeat: no-repeat; background-position: 0 90%; background-size: 0% 35%; display: inline; padding-bottom: 2px; } /* * gsap-char-reveal / gsap-word-reveal * Os spans gerados pelo JS herdam TUDO do pai (font, color, spacing). * Não adicionamos nenhum estilo aqui para não interferir com o WordPress. * O will-change já é definido inline pelo JS para ativar somente quando necessário. */ /* ── gsap-text-focus ─── esconde antes do JS assumir (com fallback) ──────── */ /* * Anti-FOUC gated por classe em . Fluxo: * 1. PHP injeta inline script no wp_head que adiciona .gsap-loading no * + rescue-timeout de 3s que remove a classe automaticamente. * 2. gsap-animations.js remove a classe assim que inicia (footer, após deps). * 3. Se qualquer coisa quebrar o JS, o timeout garante que em ≤3s a classe * some e o texto aparece — nunca fica invisível pra sempre. * * A regra baseia-se em .gsap-loading estar em , não em .gsap-text-focus * sozinho — sem o gate, qualquer falha no JS travava o título invisível * permanentemente (incidente que quebrou o visual em produção na v3.8.7/8.8). */ html.gsap-loading .gsap-text-focus { visibility: hidden; } /* ── Containers pinados: neutraliza transition:all do Elementor ─────────── CAUSA RAIZ do "efeito gelatina/mola" ao pinar: o Elementor aplica `transition: all 0.3s` por padrão em .e-con. Quando ScrollTrigger.pin injeta `transform` a cada frame pra manter o elemento fixo, a CSS transition tenta suavizar CADA mudança em 0.3s — o elemento oscila em volta da posição alvo em vez de grudar. Override apenas da propriedade transform preserva outras transitions (hover, cores, opacity) nos filhos. Doc GSAP: https://gsap.com/community/forums/topic/40202/ */ .gsap-pin, .gsap-pin-stack, .gsap-pin-stack > *, .gsap-scale-container, .gsap-zoom-reveal { transition-property: none !important; will-change: transform; } /* Container de pin-stack precisa permitir overflow pros cards "saírem" visualmente da posição natural ao pinarem. Elementor aplica overflow:hidden em .e-con por default — essa regra garante que não bloqueie o efeito. */ .gsap-pin-stack { overflow: visible !important; } /* ── gsap-img-reveal / gsap-clip-* ─── clip-path precisa de will-change ── */ .gsap-img-reveal, .gsap-clip-left, .gsap-clip-right, .gsap-clip-top, .gsap-clip-bottom { will-change: clip-path; } /* ── gsap-img-zoom / gsap-scale-* ── */ .gsap-img-zoom, .gsap-scale-in, .gsap-scale-out { will-change: transform, opacity; } /* ── gsap-img-parallax ─── evita overflow ───────────────────────────────── */ .gsap-img-parallax { display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform; } /* ── gsap-scroll-fade-in / gsap-scroll-fade-out ─── opacidade por scroll ── */ .gsap-scroll-fade-in { opacity: 0; /* Evita FOUC antes do ScrollTrigger assumir */ } .gsap-scroll-fade-in, .gsap-scroll-fade-out { will-change: opacity; } /* ── gsap-video-bg ─── vídeo em background com scrub por scroll ─────────── */ /* O wrapper tem altura (1 + factor) × 100vh para definir o trecho de scrub. O sticky fica preso no topo por 100vh enquanto a rolagem avança — o JS escreve em video.currentTime proporcional ao progresso dentro do wrapper. */ .gsap-video-bg-wrapper { position: relative; width: 100%; } .gsap-video-bg-sticky { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; } .gsap-video-bg { display: block; width: 100%; height: 100%; object-fit: cover; will-change: contents; pointer-events: none; } /* ── gsap-tilt ─── preserva 3D ──────────────────────────────────────────── */ .gsap-tilt { transform-style: preserve-3d; } /* ── gsap-marquee ─── container ─────────────────────────────────────────── */ .gsap-marquee { overflow: hidden; display: flex; white-space: nowrap; gap: 0; } .gsap-marquee > * { flex-shrink: 0; will-change: transform; } /* ── gsap-magnetic ──────────────────────────────────────────────────────── */ .gsap-magnetic { display: inline-block; will-change: transform; } /* ── gsap-hover-lift ────────────────────────────────────────────────────── */ .gsap-hover-lift { display: inline-block; will-change: transform; } /* ── gsap-float ─── flutuação vertical em loop (CSS puro, sem GSAP) ─────── */ /* * Animação decorativa — não depende de GSAP nem de ScrollTrigger. * Controle de velocidade: * • Modificadores: .gsap-float--slow (6s) | .gsap-float--fast (2s) * • Atributo: data-gsap-duration="3" (em segundos) * • Inline: style="--gsap-float-duration: 2.5s" * Amplitude (deslocamento vertical) via --gsap-float-distance (padrão: 12px). */ .gsap-float { animation: gsap-float var(--gsap-float-duration, 4s) ease-in-out infinite; will-change: transform; } .gsap-float--slow { --gsap-float-duration: 6s; } .gsap-float--fast { --gsap-float-duration: 2s; } /* Atributo data-gsap-duration="N" → N segundos (só aceita número simples) */ .gsap-float[data-gsap-duration="1"] { --gsap-float-duration: 1s; } .gsap-float[data-gsap-duration="1.5"] { --gsap-float-duration: 1.5s; } .gsap-float[data-gsap-duration="2"] { --gsap-float-duration: 2s; } .gsap-float[data-gsap-duration="2.5"] { --gsap-float-duration: 2.5s; } .gsap-float[data-gsap-duration="3"] { --gsap-float-duration: 3s; } .gsap-float[data-gsap-duration="4"] { --gsap-float-duration: 4s; } .gsap-float[data-gsap-duration="5"] { --gsap-float-duration: 5s; } .gsap-float[data-gsap-duration="6"] { --gsap-float-duration: 6s; } .gsap-float[data-gsap-duration="8"] { --gsap-float-duration: 8s; } @keyframes gsap-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--gsap-float-distance, 12px) * -1)); } } /* ── gsap-progress ─── barra de progresso ───────────────────────────────── */ .gsap-progress { display: block; height: var(--gsap-progress-height, 6px); border-radius: 999px; background: var(--gsap-progress-color, #0AE448); will-change: width; } /* ── Correções globais para compatibilidade com ScrollTrigger/pin ─────────── */ /* * scroll-behavior:smooth no quebra as medições do ScrollTrigger.refresh() * (Bootstrap 5 e Elementor definem isso por padrão). * O JS também sobrescreve via documentElement.style, mas o CSS garante cobertura. * * NOTA: em versões anteriores havia aqui um bloco que desativava transition-property * em todos os containers Elementor (.e-con, .e-con-inner, .elementor-section, etc.). * Era agressivo demais — quebrava hover animations escritas pelo usuário em Custom CSS * do Elementor. Agora o JS aplica transitionProperty:none SÓ nos ancestors de * .gsap-zoom-reveal (onde o conflito com o pin de 60fps realmente acontece). */ html { scroll-behavior: auto !important; } /* ── gsap-zoom-reveal ── container pinado com filho escalando ───────────── */ /* * height:100vh, display:flex e align-items:center são aplicados via JS * para centralizar a imagem na viewport durante o pin. * pinReparent:true (JS) move o elemento para durante o pin, * escapando overflow:hidden de qualquer ancestor (Elementor/theme). */ .gsap-zoom-reveal { overflow: hidden; /* recorta a imagem durante a escala */ width: 100%; position: relative; } /* Cadeia de preenchimento: cada nível precisa herdar a altura. * Elementor injeta .elementor-widget-image > .elementor-widget-container > img * então precisamos forçar height:100% em cada camada. */ .gsap-zoom-reveal > :first-child, .gsap-zoom-reveal > :first-child > :first-child { width: 100%; height: 100%; will-change: transform; } /* A imagem ou vídeo no fundo da cadeia */ .gsap-zoom-reveal img, .gsap-zoom-reveal video { display: block; width: 100%; height: 100%; object-fit: cover; } /* ── gsap-mask-reveal ─── hero com logo-máscara crescente ──────────────── */ /* * A estrutura interna é gerada pelo JS (setupMaskRevealDOM) quando a classe * .gsap-mask-reveal é encontrada. O elemento original recebe a classe * --init quando a estrutura já foi montada. * * Camadas internas (top → bottom no visual): * __mask (div com mask-image: logo.svg) → __mask-image (img igual ao bg) * __overlay (div branco, opacity 0 → 0.8) * __bg (img de fundo, full-screen) * * margin-bottom: -100vh faz a próxima section sobrepor os últimos 100vh do * hero (efeito "exit" combinado com height:0vh animado no sticky). */ .gsap-mask-reveal--init { display: block; width: 100%; position: relative; } .gsap-mask-reveal__scroller { position: relative; width: 100%; } .gsap-mask-reveal__sticky { position: sticky; top: 0; left: 0; width: 100%; height: 100vh; max-height: 100vh; overflow: hidden; } /* * !important aqui é necessário: Elementor + muitos temas WP aplicam * "img { height: auto }" globalmente (especialmente em breakpoints * mobile), o que sobrescreve height:100% e quebra o object-fit. * Usamos 100% (do pai .__sticky que já é 100vh) em vez de 100vh * direto — evita o bug do 100vh no iOS Safari (address bar). */ .gsap-mask-reveal__bg, .gsap-mask-reveal__mask-image { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center !important; display: block !important; } .gsap-mask-reveal__mask-image { will-change: transform; } .gsap-mask-reveal__overlay { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; will-change: opacity; } .gsap-mask-reveal__mask { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; mask-position: center; mask-repeat: no-repeat; will-change: mask-size; } /* ── Acessibilidade: respeita preferência de menos movimento ────────────── */ /* * O JS já tem um early-return quando prefers-reduced-motion está ativo, * mas este bloco CSS cobre o período antes do JS carregar e serve como * camada extra de garantia para todos os elementos com classes GSAP. */ @media (prefers-reduced-motion: reduce) { /* Animações de texto */ .gsap-char-reveal span, .gsap-char-color span, .gsap-char-color-2 span, .gsap-word-reveal span, .gsap-word-blur span, .gsap-text-focus, .gsap-text-focus span, .gsap-text-fade, .gsap-text-blur, .gsap-typewriter, .gsap-scramble, /* Animações de imagem */ .gsap-img-reveal, .gsap-img-zoom, .gsap-img-fade, .gsap-img-parallax, .gsap-img-scroll-scale, .gsap-img-scroll-scale-pin, /* Animações de elemento */ .gsap-fade-up, .gsap-fade-down, .gsap-fade-left, .gsap-fade-right, .gsap-fade-in, .gsap-scale-in, .gsap-scale-out, .gsap-rotate-in, .gsap-flip-in, .gsap-clip-left, .gsap-clip-right, .gsap-clip-top, .gsap-clip-bottom, /* Grupos stagger */ .gsap-stagger > *, .gsap-stagger-left > *, .gsap-stagger-right > *, .gsap-stagger-scale > *, .gsap-stagger-fade > *, .gsap-stagger-rotate > *, .gsap-stagger-center > *, /* Especiais */ .gsap-parallax, .gsap-reveal-line, .gsap-progress, /* SVG */ .gsap-draw-svg, .gsap-morph-svg, /* Zoom Reveal */ .gsap-zoom-reveal > img, .gsap-zoom-reveal > video, .gsap-zoom-reveal > picture > img, .gsap-zoom-reveal > :first-child, /* ScrollSmoother */ .gsap-speed-slow, .gsap-speed-fast, /* Scroll fade */ .gsap-scroll-fade-in, .gsap-scroll-fade-out { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; visibility: visible !important; } /* Marquee: para o loop */ .gsap-marquee > * { animation: none !important; transform: none !important; } /* Float: cancela a flutuação */ .gsap-float { animation: none !important; transform: none !important; } /* Highlight: mostra sublinhado completo imediatamente */ .gsap-text-highlight { background-size: 100% 35% !important; } /* Hover: desabilita efeitos de movimento interativo */ .gsap-magnetic, .gsap-tilt, .gsap-hover-lift, .gsap-char-stretch-hover span { transform: none !important; transition: none !important; } /* Mask reveal: mostra hero estático em 100vh, sem scroll-effect */ .gsap-mask-reveal__scroller { height: 100vh !important; } }