*/ .fade-in-load { animation: fadeInPage 1.2s ease-out forwards; opacity: 0; } @keyframes fadeInPage { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* --- 2. Microinterações Suaves (Para botões e links) --- */ .btn-micro { transition: transform 0.2s ease-out; } .btn-micro:active { transform: scale(0.95); /* Clica e diminui levemente */ } /* --- 3. Hover Brilhante Suave --- */ .shiny-hover { position: relative; overflow: hidden; /* Certifique-se que o botão tem cor de fundo definida */ } .shiny-hover::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 100%); transform: skewX(-25deg); pointer-events: none; /* Para não interferir no clique */ } .shiny-hover:hover::after { animation: shineAny 0.75s; left: 200%; /* Move o brilho para fora */ transition: left 0.75s ease-in-out; } /* --- 4. Botão WhatsApp com Pulse --- */ .whatsapp-pulse { position: fixed; bottom: 25px; right: 25px; z-index: 9999; width: 60px; height: 60px; background-color: #25d366; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; text-decoration: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); animation: pulse-green 2s infinite; } .whatsapp-pulse:hover { background-color: #128C7E; /* Cor mais escura ao passar o mouse */ } @keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); transform: scale(1); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); transform: scale(1.05); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); transform: scale(1); } } /* --- 5. Scroll Reveal Minimalista (Classes para o JS) --- */ .reveal-on-scroll { opacity: 0; transform: translateY(40px); transition: all 1s ease-out; } .reveal-on-scroll.active { opacity: 1; transform: translateY(0); } /* --- Wrapper (A caixa que segura o texto) --- */ .rotating-text-box { display: inline-block; vertical-align: bottom; height: 1.25em; overflow: hidden; position: relative; padding-left: 10px; } /* --- A lista de palavras --- */ .rotating-words { display: block; /* 12 palavras × 2s cada = 24s total */ animation: rotateAnimation 24s cubic-bezier(0.23, 1, 0.32, 1) infinite; } .rotating-words span { display: block; height: 1.25em; line-height: 1.25em; white-space: nowrap; color: var(--color-green, #70C25B); font-weight: 700; } /* --- A Animação --- 12 itens → passo = 100/12 ≈ 8.333% Cada palavra fica visível ~4% e transiciona em ~4.333% */ @keyframes rotateAnimation { 0%, 4% { transform: translateY(0); } 8.33%, 12.33% { transform: translateY(-8.333%); } 16.66%, 20.66% { transform: translateY(-16.666%); } 25%, 29% { transform: translateY(-25%); } 33.33%, 37.33% { transform: translateY(-33.333%); } 41.66%, 45.66% { transform: translateY(-41.666%); } 50%, 54% { transform: translateY(-50%); } 58.33%, 62.33% { transform: translateY(-58.333%); } 66.66%, 70.66% { transform: translateY(-66.666%); } 75%, 79% { transform: translateY(-75%); } 83.33%, 87.33% { transform: translateY(-83.333%); } 91.66%, 96% { transform: translateY(-91.666%); } 100% { transform: translateY(-91.666%); } }