/* ============================================================ AudSaúde — Motion & Micro-interactions ============================================================ */ /* ---------- reveal on scroll ---------- */ /* O estado oculto só vale quando o JS está ativo (classe "js" no , adicionada por script inline no ). Sem JS, o conteúdo nunca fica invisível. */ html.js .reveal { /* O conteúdo não pode depender do JavaScript para existir na página. */ opacity: 1; transform: none; /* transform com easing "spring" para a entrada ter um leve overshoot */ transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.34,1.56,.64,1); will-change: opacity, transform; } html.js .reveal.reveal-left, html.js .reveal.reveal-right, html.js .reveal.reveal-zoom { transform: none; } .reveal.visible { opacity: 1; transform: none; } /* atraso sequencial para grades */ .delay-1 { transition-delay: .08s; } .delay-2 { transition-delay: .16s; } .delay-3 { transition-delay: .24s; } .delay-4 { transition-delay: .32s; } .delay-5 { transition-delay: .40s; } .delay-6 { transition-delay: .48s; } .delay-7 { transition-delay: .56s; } .delay-8 { transition-delay: .64s; } /* ---------- blobs animados no hero ---------- */ .hero-bg::before, .hero-bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .6; animation: blobFloat 14s ease-in-out infinite alternate; } .hero-bg::before { width: 420px; height: 420px; left: -80px; bottom: -120px; background: radial-gradient(circle, rgba(151,206,46,.5), transparent 60%); } .hero-bg::after { width: 480px; height: 480px; right: -60px; top: -120px; background: radial-gradient(circle, rgba(139,92,246,.55), transparent 60%); animation-duration: 18s; } @keyframes blobFloat { from { transform: translate(0,0) scale(1); } to { transform: translate(40px,30px) scale(1.15); } } /* ---------- hero entrada ---------- */ @keyframes heroUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } .hero-inner .hero-tag { animation: heroUp .7s .1s both; } .hero-inner h1 { animation: heroUp .8s .2s both; } .hero-inner .hero-desc { animation: heroUp .8s .3s both; } .hero-inner .hero-chips { animation: heroUp .8s .4s both; } .hero-inner .hero-acoes { animation: heroUp .8s .5s both; } .hero-visual .hero-card { animation: heroUp .9s .6s both; } .hero-visual .squee { animation: heroUp .9s .8s both; } /* ---------- contadores ---------- */ .resultados-grid .valor { display: inline-block; font-variant-numeric: tabular-nums; } /* ---------- shine dos botões ---------- */ .btn-cta, .btn, .btn-azul, .btn-verde { position: relative; overflow: hidden; } .btn-cta::after, .btn-azul::after, .btn-verde::after { content: ""; position: absolute; top: 0; left: -150%; width: 60%; height: 100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); transition: left .6s ease; } .btn-cta:hover::after, .btn-azul:hover::after, .btn-verde:hover::after { left: 150%; } /* ---------- cards: borda brilhante ---------- */ .card-servico, .card-plano, .pilar, .diferencial, .admin-card { position: relative; } .card-servico::before, .card-plano::before, .pilar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: linear-gradient(135deg, var(--verde), rgba(139,92,246,.4), transparent 50%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s; } .card-servico:hover::before, .card-plano:hover::before, .pilar:hover::before { opacity: 1; } /* ---------- ícones dos cards: tilt/breathe ---------- */ .card-servico .icone { transition: transform .35s cubic-bezier(.34,1.56,.64,1); } .card-servico:hover .icone { transform: translateY(-4px) rotate(6deg) scale(1.08); } .card-servico .icone i { transition: transform .4s; } .card-servico:hover .icone i { transform: scale(1.15); } /* ---------- links do nav: rótulo desliza ---------- */ .nav-site a { transition: color .25s; } /* ---------- whatsapp pulse mais vivo ---------- */ .flut-whats::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--verde); animation: waWave 1.8s ease-out infinite; } @keyframes waWave { 0% { transform: scale(.7); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } } /* ---------- evento: emibro de gradiente no texto ---------- */ .hero-inner h1 span { position: relative; } .hero-inner h1 span::after { content: ""; position: absolute; left: -4%; bottom: 4px; width: 108%; height: 12px; background: linear-gradient(90deg, rgba(151,206,46,.9), rgba(139,92,246,.5)); border-radius: 6px; z-index: -1; animation: underlineSweep 1s .6s both; transform-origin: left; } @keyframes underlineSweep { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ---------- selo "Mais Popular": brilho deslizante ---------- */ .badge-destaque { overflow: hidden; } .badge-destaque::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-100%); animation: brilhoSelo 3.4s ease-in-out 1.4s infinite; } @keyframes brilhoSelo { 55%, 100% { transform: translateX(100%); } } /* ---------- motion reduzido (acessibilidade) ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal, .reveal-left, .reveal-right, .reveal-zoom { opacity: 1; transform: none; } }