/* === MOTION === Camada de movimento da landing do Foto IA. COMO ISSO FUNCIONA (leia antes de mexer): 1) Este arquivo é SÓ enfeite. Ele não sabe nada sobre pedido, Pix, upload ou e-mail. Se você apagar este arquivo e a linha do no index.php, o site volta exatamente ao que era antes, sem quebrar nada. 2) Tudo aqui está trancado atrás de DUAS chaves ao mesmo tempo: a) "html.m-on" -> a classe que o motion.js coloca no . Sem JavaScript, a classe nunca aparece e NADA aqui liga. Por isso a página continua 100% legível com o JS desligado: nada fica invisível esperando uma animação que não vai rodar. b) "@media (prefers-reduced-motion: no-preference)" -> só anima se o aparelho NÃO pediu para reduzir movimento. Quem liga "reduzir movimento" no celular vê a página parada, como é hoje. 3) As cores NÃO são inventadas aqui. Todas saem das variáveis que já existem no index.php: --verde-500, --ouro-500, --branco, --tinta-900 etc. Onde um degradê precisa de transparência, uso color-mix() com a variável e deixo uma linha de segurança logo acima com o mesmo tom em rgba, para navegador antigo. 4) Regra de desempenho: só animo "transform" e "opacity", que o celular resolve na placa de vídeo. Nada de animar largura, altura, top/left ou sombra em repetição. ÍNDICE 1. Entrada dos blocos ao rolar (scroll reveal) 2. Hero: brilho de fundo (aurora), granulado e título por linhas 3. Moldura do vídeo 4. Botões amarelos 5. Cards dos cenários 6. "Como funciona": linha que se desenha e números 7. Card de preço: feixe na borda, destaque do valor e lista 8. Rodapé e barra fixa */ @media (prefers-reduced-motion: no-preference) { /* Rolagem suave para links âncora. Exceção importante: o funil do pedido usa scrollTo(0,0) para voltar ao topo ao trocar de etapa. Se ele herdasse a rolagem suave, a troca de etapa ficaria com um deslize estranho. Então forço "auto" nele. */ html.m-on { scroll-behavior: smooth; } html.m-on .funil { scroll-behavior: auto; } /* ─────────────────────────────────────────────────────────────── 1. ENTRADA DOS BLOCOS AO ROLAR O motion.js coloca a classe .m-rev nos blocos e, quando o bloco entra na tela, troca para .m-in. A descida de 24px e o fade de 0.6s acontecem só na transição — uma vez só. A variável --m-atraso é o "stagger": o JS dá 80ms a mais para cada irmão (card 1 = 0ms, card 2 = 80ms, card 3 = 160ms...). ─────────────────────────────────────────────────────────────── */ html.m-on .m-rev { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.16,1,.3,1) var(--m-atraso, 0ms), transform .6s cubic-bezier(.16,1,.3,1) var(--m-atraso, 0ms); } /* Variante usada só no card de preço: entra subindo E crescendo de 0.98 */ html.m-on .m-rev.m-escala { transform: translateY(24px) scale(.98); } /* Estado final: no lugar, opaco. "transform:none" zera qualquer variante. */ html.m-on .m-rev.m-in { opacity: 1; transform: none; } /* ─────────────────────────────────────────────────────────────── 2. HERO ─────────────────────────────────────────────────────────────── */ /* O hero vira o "quadro" onde o brilho e o granulado moram. overflow:hidden impede que o brilho desfocado vaze e crie rolagem horizontal. isolation cria um contexto próprio de empilhamento, para o z-index daqui não brigar com o resto. */ html.m-on .hero { position: relative; overflow: hidden; isolation: isolate; } /* O conteúdo sobe para o topo da pilha, acima do brilho e do granulado. */ html.m-on .hero > .wrap { position: relative; z-index: 2; } /* AURORA: um brilho radial verde, bem apagado (opacidade 10%), muito desfocado, que passeia devagar em looping de 14s. Fica atrás do texto e não atrapalha a leitura. Anima só transform. */ html.m-on .hero::before { content: ''; position: absolute; z-index: 0; top: -30%; left: 50%; width: 140%; aspect-ratio: 1; margin-left: -70%; /* linha de segurança para navegador antigo (é o --verde-500 em rgba) */ background: radial-gradient(circle, rgba(27,107,69,.55), rgba(27,107,69,0) 62%); /* linha boa: usa a variável da paleta de verdade */ background: radial-gradient(circle, color-mix(in srgb, var(--verde-500) 55%, transparent), transparent 62%); filter: blur(60px); opacity: .10; pointer-events: none; will-change: transform; animation: m-aurora 14s ease-in-out infinite; } @keyframes m-aurora { 0%, 100% { transform: translate3d(-6%, -4%, 0) scale(1); } 33% { transform: translate3d( 7%, 3%, 0) scale(1.12); } 66% { transform: translate3d(-3%, 6%, 0) scale(1.05); } } /* GRANULADO (grain): um ruído em SVG, a 3,5% de opacidade, para o verde escuro não ficar "chapado". É uma imagem gerada no próprio CSS — não baixa nada da internet. Parado, sem animação. */ html.m-on .hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E"); } /* TÍTULO POR LINHAS O motion.js quebra o H1 em palavras, descobre quais palavras caíram na mesma linha e dá a cada linha um atraso de 120ms. Cada linha sobe 16px. Quando a animação acaba, o JS devolve o texto puro ao H1 — ou seja, o HTML final fica idêntico ao original. Aqui eu desligo a animação de entrada que o H1 já tinha, senão as duas rodariam juntas e brigariam. */ html.m-on .hero h1.m-titulo { animation: none; } html.m-on .m-titulo .m-p { display: inline-block; /* precisa disso para aceitar transform */ opacity: 0; transform: translateY(16px); animation: m-linha .6s cubic-bezier(.16,1,.3,1) var(--m-atraso, 0ms) forwards; } @keyframes m-linha { to { opacity: 1; transform: none; } } /* ─────────────────────────────────────────────────────────────── 3. MOLDURA DO VÍDEO A flutuação contínua já existia no index.php com 6px. A pedido, reduzi para 2px — mais discreto e mais leve para o player. ─────────────────────────────────────────────────────────────── */ html.m-on .fone { animation: m-flutuar 6s ease-in-out 760ms infinite; transition: box-shadow .25s ease, border-color .25s ease; } @keyframes m-flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } /* Brilho dourado discreto ao passar o mouse. Só em aparelho com mouse de verdade (hover:hover + pointer:fine): no celular isso nunca liga, porque "hover" no toque fica grudado e fica feio. */ @media (hover: hover) and (pointer: fine) { html.m-on .fone:hover { border-color: color-mix(in srgb, var(--ouro-500) 50%, transparent); box-shadow: 0 24px 52px -16px rgba(0,0,0,.55), 0 0 34px -6px color-mix(in srgb, var(--ouro-500) 38%, transparent); } } /* ─────────────────────────────────────────────────────────────── 4. BOTÕES AMARELOS Vale para todo .btn amarelo. O .btn.ghost (verde) e os desativados ficam de fora de propósito. ─────────────────────────────────────────────────────────────── */ html.m-on .btn:not(.ghost):not(:disabled) { position: relative; overflow: hidden; /* segura o brilho do shimmer dentro do botão */ /* sombra na própria cor do botão + a sombra escura que já existia */ box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--ouro-500) 55%, transparent), 0 8px 20px -12px rgba(0,0,0,.4); transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease, background-color .22s ease; } /* Hover: sobe 2px e cresce 2%. Só com mouse. */ @media (hover: hover) and (pointer: fine) { html.m-on .btn:not(.ghost):not(:disabled):hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--ouro-500) 75%, transparent), 0 8px 20px -12px rgba(0,0,0,.4); } } /* Clique: encolhe de leve. Sobrescreve o scale(.97) antigo. */ html.m-on .btn:not(:disabled):active { transform: scale(.99); } /* SHIMMER: uma faixa clara atravessa o botão da esquerda para a direita. O ciclo inteiro dura 5s, mas a travessia leva só 1s (de 0% a 20% do tempo) — nos 4s restantes a faixa fica parada fora do botão. É por isso que não vira pisca-pisca. position:absolute é essencial: o .btn é flex, e um pseudo-elemento posicionado NÃO vira item do flex, então não desloca o texto. */ html.m-on .btn:not(.ghost):not(:disabled)::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-180%); pointer-events: none; animation: m-brilho 5s ease-in-out 2s infinite; } @keyframes m-brilho { 0% { transform: translateX(-180%); } 20% { transform: translateX( 320%); } 100% { transform: translateX( 320%); } } /* ─────────────────────────────────────────────────────────────── 5. CARDS DOS CENÁRIOS ─────────────────────────────────────────────────────────────── */ @media (hover: hover) and (pointer: fine) { html.m-on .card { transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .25s ease; } /* sobe 6px, borda amarela, sombra maior */ html.m-on .card:hover { transform: translateY(-6px); border-color: var(--ouro-500); box-shadow: 0 18px 34px -18px rgba(14,26,20,.45); } /* zoom na imagem: o .card já tem overflow:hidden, então a foto cresce por dentro sem vazar da borda arredondada */ html.m-on .card .img img { transition: transform .4s cubic-bezier(.16,1,.3,1); } html.m-on .card:hover .img img { transform: scale(1.05); } } /* No celular não existe hover: o retorno vem do toque. */ html.m-on .card { transition: transform .2s cubic-bezier(.16,1,.3,1); } html.m-on .card:active { transform: scale(.99); } /* ─────────────────────────────────────────────────────────────── 6. "COMO FUNCIONA" ─────────────────────────────────────────────────────────────── */ /* A linha vertical que liga os 3 passos se desenha de cima para baixo. Uso scaleY (transform) em vez de animar a altura — muito mais leve. */ html.m-on .passos::before { transform: scaleY(0); transform-origin: top; transition: transform .9s cubic-bezier(.16,1,.3,1) .15s; } html.m-on .passos.m-in::before { transform: scaleY(1); } /* Cada número dá um "pulse" único quando entra na tela. */ html.m-on .passo.m-in b { animation: m-pulso .7s cubic-bezier(.16,1,.3,1) var(--m-atraso, 0ms) both; } @keyframes m-pulso { 0% { transform: scale(.6); opacity: 0; } 55% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* ─────────────────────────────────────────────────────────────── 7. CARD DE PREÇO ─────────────────────────────────────────────────────────────── */ /* FEIXE NA BORDA (border beam) Truque: um quadrado gigante com degradê cônico gira devagar ATRÁS do card (::before). Por cima dele, um retângulo branco (::after) cobre o miolo, deixando aparecer só uma faixa de 1,5px na borda — que é o feixe girando. Como o card tem overflow:hidden, o quadrado girando nunca vaza. Isso anima SÓ transform (rotate), que é o jeito leve de fazer. */ html.m-on .preco { position: relative; overflow: hidden; } /* o conteúdo real do card sobe para cima das duas camadas */ html.m-on .preco > * { position: relative; z-index: 2; } html.m-on .preco::before { content: ''; position: absolute; z-index: 0; top: 50%; left: 50%; width: 190%; aspect-ratio: 1; margin: -95% 0 0 -95%; background: conic-gradient( from 0deg, transparent 0 58%, var(--ouro-500) 72%, var(--verde-500) 82%, transparent 92% ); opacity: .85; will-change: transform; animation: m-feixe 10s linear infinite; } /* a tampa branca que transforma o quadrado girando em "só uma borda" */ html.m-on .preco::after { content: ''; position: absolute; z-index: 1; inset: 1.5px; border-radius: 22.5px; /* 24px do card menos os 1.5px da tampa */ background: var(--branco); } @keyframes m-feixe { to { transform: rotate(360deg); } } /* O valor "R$ 5,00" dá um leve destaque quando o card entra na tela. transform-origin na esquerda para o número não "pular" de lado, já que ele é alinhado à esquerda. */ html.m-on .preco.m-in .v { transform-origin: left center; animation: m-destaque .7s cubic-bezier(.16,1,.3,1) .35s both; } @keyframes m-destaque { 0% { transform: scale(1); } 45% { transform: scale(1.04); } 100% { transform: scale(1); } } /* Lista de garantias: um item por vez. A bolinha (::before) cresce em 0.35s e o texto entra em 0.5s — como a bolinha é mais rápida, ela "chega" visualmente antes do texto. */ html.m-on .preco.m-in .garantias div { animation: m-item .5s cubic-bezier(.16,1,.3,1) var(--m-atraso, 0ms) both; } html.m-on .preco.m-in .garantias div::before { animation: m-ponto .35s cubic-bezier(.16,1,.3,1) var(--m-atraso, 0ms) both; } @keyframes m-item { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes m-ponto { from { transform: scale(0); } to { transform: scale(1); } } /* ─────────────────────────────────────────────────────────────── 8. RODAPÉ E BARRA FIXA O rodapé usa o fade padrão do item 1 (o JS marca ele como .m-rev). A barra fixa do celular JÁ EXISTIA no site e já desliza de baixo — o index.php controla isso com as classes .barra / .visivel, e o próprio site já esconde a barra quando o funil abre. Não recriei nada aqui; só deixo o deslize um pouco mais macio. ─────────────────────────────────────────────────────────────── */ html.m-on .barra { transition: transform .32s cubic-bezier(.16,1,.3,1), visibility 0s .32s; } html.m-on .barra.visivel { transition-delay: 0s; } /* durante o funil, sem transição nenhuma (mantém o comportamento atual) */ html.m-on .funil-aberto .barra { transition: none; } }