/* Bussolas - camada de movimento. * * PRINCIPIO * O movimento aqui e subordinado a leitura, nunca o contrario. Tudo o * que se move usa `transform` e `opacity` — as duas unicas propriedades * que o navegador anima sem recalcular layout — e nada se move por mais * de meio segundo. * * ESTADO INICIAL SEGURO * Nenhum conteudo comeca invisivel por CSS sozinho. Quem esconde e a * classe `.movimento-ligado`, posta no pelo movimento.js depois * de confirmar que ha JavaScript e que o sistema nao pediu menos * movimento. Sem JavaScript, ou com movimento reduzido, a pagina aparece * inteira e parada — que e como ela deve aparecer. * * A regra global de prefers-reduced-motion vive em styles.css e mata as * animacoes; aqui a guarda e explicita para o que depende de JavaScript. */ /* ================================================================== Revelacao ao rolar ================================================================== */ .movimento-ligado [data-revelar] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1), transform 620ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--atraso, 0ms); will-change: opacity, transform; } .movimento-ligado [data-revelar="lado"] { transform: translate3d(-24px, 0, 0); } .movimento-ligado [data-revelar="escala"] { transform: translate3d(0, 14px, 0) scale(0.975); } .movimento-ligado [data-revelar].revelado { opacity: 1; transform: none; will-change: auto; } /* ================================================================== Profundidade do hero ================================================================== */ .hero { isolation: isolate; } /* Duas camadas atras do conteudo, em ritmos diferentes. A de tras anda menos, como o horizonte; a da frente anda mais. O deslocamento vem de --parallax, escrito pelo movimento.js. */ .hero__profundidade { position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none; z-index: -1; transform: translate3d(0, calc(var(--parallax, 0) * 1px), 0); } .hero__profundidade::before, .hero__profundidade::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); } .hero__profundidade::before { inset: 8% 30% auto 12%; height: 340px; background: radial-gradient( ellipse at center, rgba(212, 176, 108, 0.16), transparent 70% ); } .hero__profundidade::after { inset: 26% 8% auto auto; width: 420px; height: 420px; background: radial-gradient( circle at center, rgba(115, 49, 44, 0.34), transparent 68% ); } /* O emblema flutua devagar, e sobe um pouco mais que o fundo ao rolar. */ .hero__emblem { transform: translate3d(0, calc(var(--parallax, 0) * -0.45px), 0); } .movimento-ligado .hero__emblem { animation: flutuar 9s ease-in-out infinite; } @keyframes flutuar { 0%, 100% { transform: translate3d(0, calc(var(--parallax, 0) * -0.45px), 0); } 50% { transform: translate3d(0, calc(var(--parallax, 0) * -0.45px - 9px), 0); } } /* ================================================================== Faixa de prazo — brilho que atravessa uma vez a cada volta ================================================================== */ .deadline { position: relative; overflow: hidden; } .movimento-ligado .deadline::after { content: ""; position: absolute; inset: 0 auto 0 -30%; width: 30%; background: linear-gradient( 100deg, transparent, rgba(235, 215, 168, 0.10), transparent ); animation: atravessar 7s ease-in-out infinite; pointer-events: none; } @keyframes atravessar { 0%, 62% { transform: translateX(0); } 100% { transform: translateX(560%); } } /* ================================================================== Cartoes: elevacao e foco de luz seguindo o ponteiro ================================================================== */ .card, .scenario { position: relative; transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), border-color 320ms ease, box-shadow 320ms ease; } .card::after, .scenario::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity 320ms ease; pointer-events: none; background: radial-gradient( 340px circle at var(--luz-x, 50%) var(--luz-y, 0%), rgba(212, 176, 108, 0.10), transparent 62% ); } @media (hover: hover) { .card:hover, .scenario:hover { transform: translateY(-4px); border-color: var(--border-gold); box-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.9); } .card:hover::after, .scenario:hover::after { opacity: 1; } } /* ================================================================== Botoes ================================================================== */ .btn { position: relative; overflow: hidden; transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), background-color var(--transition), border-color var(--transition), color var(--transition); } @media (hover: hover) { .btn:hover { transform: translateY(-2px); } } .btn:active { transform: translateY(0) scale(0.985); } /* ================================================================== Barra de leitura — paginas longas (Duvidas, Termos, Privacidade) ================================================================== */ .leitura { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; background: transparent; pointer-events: none; } .leitura__barra { height: 100%; width: 0; background: linear-gradient(90deg, var(--vinho-600), var(--ouro-500)); transform-origin: left center; transition: width 120ms linear; } /* ================================================================== Questionario: troca de tela ================================================================== */ .movimento-ligado .form-card[data-entrando] { animation: entrar 380ms cubic-bezier(0.16, 1, 0.3, 1); } @keyframes entrar { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } } .opcao { transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), background-color var(--transition), border-color var(--transition); } @media (hover: hover) { .opcao:hover { transform: translateX(3px); } } .opcao:active { transform: scale(0.993); } .progresso__barra { transition: width 520ms cubic-bezier(0.16, 1, 0.3, 1); } /* ================================================================== Diagnostico: o termometro caminha ate o valor ================================================================== */ .movimento-ligado .termo__marca { animation: apontar 900ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes apontar { from { left: 0; opacity: 0; } to { opacity: 1; } } .movimento-ligado .termo__faixa { transform-origin: left center; animation: abrir 640ms cubic-bezier(0.16, 1, 0.3, 1) both; } .movimento-ligado .termo__faixa:nth-child(2) { animation-delay: 90ms; } .movimento-ligado .termo__faixa:nth-child(3) { animation-delay: 180ms; } @keyframes abrir { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ================================================================== Quem pediu menos movimento nao recebe nenhum ================================================================== */ @media (prefers-reduced-motion: reduce) { .movimento-ligado [data-revelar] { opacity: 1 !important; transform: none !important; transition: none !important; } .hero__profundidade, .hero__emblem, .movimento-ligado .deadline::after, .movimento-ligado .termo__marca, .movimento-ligado .termo__faixa, .movimento-ligado .form-card[data-entrando] { animation: none !important; transform: none !important; } .card:hover, .scenario:hover, .btn:hover, .opcao:hover { transform: none !important; } }