/* ============================================================ PARQUE SICÍLIA — CAMADA DE MOVIMENTO (fx) Acompanha o fx.js. Divisão de trabalho: three.js shader de fundo + folhas 3D no hero + maquete 3D do game GSAP + ST coreografia de scroll (hero, títulos, trilho das regras) motion.dev molas de ponteiro, tilt 3D dos cards, reveals, cursor anime.js preloader, cortina de entrada, onda do tema, selos REGRA DE OURO DESTE ARQUIVO Nada aqui vale sem a classe .fx no . O fx.js só a adiciona quando as bibliotecas carregaram E o usuário não pediu "reduzir movimento". Sem JS, sem CDN ou com movimento reduzido, o site continua se comportando exatamente como antes. ============================================================ */ /* ---------- 1. CANVAS 3D DO HERO ---------- */ /* fica dentro de .hero-bg (que já é z-index:-1), por cima dos blobs e da grade, sem nunca capturar clique */ #hero-3d{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity 1.4s ease; } #hero-3d.on{ opacity:1; } /* Com o shader no ar, os blobs borrados do CSS viram poluição: são a mesma ideia, feita pior. A grade fica, dá escala ao fundo. 🔴 `opacity:0` SOZINHO NÃO BASTA — e essa era a versão anterior. O elemento invisível continuava rodando `drift`, que anima `scale` sobre um `filter:blur(90px)`. Escala invalida o borrão: o navegador re-borrava três círculos de meio metro de largura a cada quadro, para sempre, para ninguém ver. Era o segundo item mais caro da primeira página, atrás só do shader de tinta. `animation-play-state:paused` congela a escala na hora (o borrão vira uma camada estática, que o compositor só reaproveita), e o `visibility` com transição de atraso zero **no fim** dos 1.4s tira o elemento da pintura de vez, sem cortar o esmaecimento. */ html.fx .hero.has-3d .blob{ opacity:0; visibility:hidden; animation-play-state:paused; transition:opacity 1.4s ease, visibility 0s linear 1.4s; } /* ---------- 2. O REVEAL DO CSS VIRA PLANO B ---------- */ /* Sem .fx, quem anima é a transição de .reveal → .reveal.in (script.js). Com .fx, o JS assume: zeramos o estado inicial para não brigar com os valores inline que GSAP/motion escrevem. */ html.fx .reveal{ opacity:1; transform:none; transition:none; } /* ---------- 3. ELEMENTOS QUE O JS PASSA A CONTROLAR ---------- */ /* Estes tinham animação/hover em CSS puro. Sob .fx o controle é do JS — deixar os dois ligados faria o keyframe do CSS vencer o transform inline e a animação "travaria" no lugar. */ html.fx .hero-float{ animation:none; } html.fx .marquee-track{ animation:none; } html.fx .hero-cta .btn:hover, html.fx .btn-game:hover, html.fx .btn-outline:hover, html.fx #back-top:hover, html.fx .hour-card:hover, html.fx .rule-card:hover, html.fx .cat-btn:hover, html.fx .gal-card:hover, html.fx .contact-card:hover, html.fx .amenity:hover{ transform:none; } /* #back-top usava transform também para entrar/sair de cena. Como o motion.dev passa a escrever transform inline nele (efeito magnético), o inline venceria a regra do CSS e o botão ficaria preso no lugar errado — então aqui a entrada fica só por opacidade/visibilidade. */ html.fx #back-top, html.fx #back-top.show{ transform:none; } /* ---------- 4. TÍTULOS: DOBRADIÇA 3D ---------- */ /* O h1/h2 são editáveis pelo admin (o script.js reescreve o innerHTML deles quando as edições chegam do Supabase). Por isso NUNCA quebramos o texto em : o fx.js embrulha o elemento INTEIRO neste wrapper — que fica POR FORA e sobrevive à troca de conteúdo — e gira o título como uma placa caindo no lugar. */ .fx-hinge{ perspective:1000px; perspective-origin:50% 0%; } .fx-hinge > *{ transform-origin:50% 0%; will-change:transform, opacity; } /* ---------- 5. TILT 3D DOS CARDS ---------- */ html.fx .gal-card, html.fx .contact-card, html.fx .hour-card, html.fx .app-card{ transform-style:preserve-3d; } /* brilho que varre o card conforme o cursor anda por cima */ .fx-shine{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s; z-index:3; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.38), transparent 62%); } html[data-theme="dark"] .fx-shine{ background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(141,198,63,.22), transparent 62%); } /* ---------- 6. TRILHO DAS REGRAS EM PERSPECTIVA ---------- */ /* O fx.js escreve rotateY/translateZ card a card conforme eles cruzam a tela. A perspectiva precisa morar no trilho, não no card. */ html.fx #h-track{ perspective:1400px; transform-style:preserve-3d; } html.fx #h-track .rule-card{ will-change:transform; } /* ---------- 6b. UMA CENA 3D POR SEÇÃO ---------- */ /* O fx.js insere um como PRIMEIRO filho da seção (ou da .h-sticky, no caso das Regras). Fica absoluto, atrás de tudo e sem capturar clique. A opacidade final vem da variável --fx-op, que cada cena define conforme o peso de texto da seção: quanto mais texto, mais discreta a cena. */ /* 🔴 O canvas é FIXED, colado na janela — nem esticado na seção, nem sticky. Já tentamos as duas outras formas e as duas deixavam CORTE: · esticado na seção inteira → a cena era composta para uma tela que ninguém vê inteira (o horizonte caía abaixo da dobra); · sticky dentro do wrapper → o canvas só gruda enquanto sobra altura no wrapper. Numa seção de 1700px com janela de 800px ele desgruda na metade e desce junto, deixando o RESTO DA SEÇÃO sem efeito — era o corte visível antes de "Conheça cada espaço", e a emenda dura na passagem para as Regras. Fixo, o efeito cobre a janela do começo ao fim da seção. A troca entre cenas vizinhas é um cruzamento de opacidade (o Stage liga e desliga a classe .on conforme a seção entra e sai), não um corte. O wrapper continua existindo: é ele que marca a ÁREA da seção, e as cenas leem o rect dele para saber o progresso da rolagem. Ele NÃO pode ter overflow:hidden — clipar aqui traria o corte de volta. */ .fx-scene-wrap{ position:absolute; inset:0; z-index:0; pointer-events:none; } .fx-scene{ position:fixed; top:0; left:0; display:block; width:100%; height:100vh; height:100svh; pointer-events:none; opacity:0; transition:opacity 1s ease; } .fx-scene.on{ opacity:var(--fx-op, .5); } /* A cena dos Documentos é um