/* ========================================================= VIP CAR ESTÉTICA AUTOMOTIVA Arquivo: animations.css Responsável por: - Animações de entrada - Reveal ao fazer scroll - Marquee infinito - Microanimações do Hero - Scroll indicator - Pulsos e glows - Efeitos decorativos - Classes utilitárias de animação IMPORTANTE: Os elementos com [data-reveal] só serão escondidos quando o JavaScript adicionar a classe .js ao . Dessa forma, se o JavaScript falhar, o conteúdo continua totalmente visível. ========================================================= */ /* ========================================================= CONFIGURAÇÕES GERAIS ========================================================= */ :root { --reveal-distance: 42px; --reveal-duration: 850ms; --reveal-easing: cubic-bezier( 0.22, 1, 0.36, 1 ); } /* ========================================================= REVEAL — BASE Só entra em funcionamento quando: Essa classe será colocada pelo JavaScript. ========================================================= */ .js [data-reveal] { opacity: 0; will-change: opacity, transform, filter; transition: opacity var(--reveal-duration) var(--reveal-easing), transform var(--reveal-duration) var(--reveal-easing), filter var(--reveal-duration) var(--reveal-easing); } /* ========================================================= REVEAL — PARA CIMA ========================================================= */ .js [data-reveal="up"] { transform: translate3d( 0, var(--reveal-distance), 0 ); filter: blur(3px); } /* ========================================================= REVEAL — PARA BAIXO ========================================================= */ .js [data-reveal="down"] { transform: translate3d( 0, calc( var(--reveal-distance) * -1 ), 0 ); filter: blur(3px); } /* ========================================================= REVEAL — ESQUERDA ========================================================= */ .js [data-reveal="left"] { transform: translate3d( calc( var(--reveal-distance) * -1 ), 0, 0 ); filter: blur(3px); } /* ========================================================= REVEAL — DIREITA ========================================================= */ .js [data-reveal="right"] { transform: translate3d( var(--reveal-distance), 0, 0 ); filter: blur(3px); } /* ========================================================= REVEAL — SCALE ========================================================= */ .js [data-reveal="scale"] { transform: scale(0.94); filter: blur(4px); } /* ========================================================= REVEAL — FADE ========================================================= */ .js [data-reveal="fade"] { transform: none; filter: blur(2px); } /* ========================================================= ELEMENTO REVELADO O JavaScript adicionará: .is-visible ========================================================= */ .js [data-reveal].is-visible { opacity: 1; transform: translate3d( 0, 0, 0 ) scale(1); filter: blur(0); } /* ========================================================= DELAYS DE REVEAL Compatíveis com: data-reveal-delay="100" data-reveal-delay="200" etc. ========================================================= */ .js [data-reveal-delay="50"] { transition-delay: 50ms; } .js [data-reveal-delay="75"] { transition-delay: 75ms; } .js [data-reveal-delay="100"] { transition-delay: 100ms; } .js [data-reveal-delay="150"] { transition-delay: 150ms; } .js [data-reveal-delay="200"] { transition-delay: 200ms; } .js [data-reveal-delay="250"] { transition-delay: 250ms; } .js [data-reveal-delay="300"] { transition-delay: 300ms; } .js [data-reveal-delay="350"] { transition-delay: 350ms; } .js [data-reveal-delay="400"] { transition-delay: 400ms; } .js [data-reveal-delay="500"] { transition-delay: 500ms; } /* ========================================================= HERO — ENTRADA DA IMAGEM ========================================================= */ @keyframes heroImageReveal { 0% { transform: scale(1.10); filter: brightness(0.62) saturate(0.75); } 100% { transform: scale(1); filter: brightness(1) saturate(1); } } .hero-media img { animation: heroImageReveal 1800ms cubic-bezier( 0.22, 1, 0.36, 1 ) both; } /* ========================================================= HERO — MOVIMENTO MUITO SUTIL Depois da entrada, aplicamos uma sensação de câmera quase imperceptível. ========================================================= */ @keyframes heroBreathing { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } } @media (min-width: 1025px) { .hero-media img { animation: heroImageReveal 1800ms cubic-bezier( 0.22, 1, 0.36, 1 ) both, heroBreathing 14s ease-in-out 1800ms infinite; } } /* ========================================================= HERO GLOW — AZUL ========================================================= */ @keyframes floatGlowBlue { 0%, 100% { transform: translate3d( 0, 0, 0 ) scale(1); opacity: 0.72; } 50% { transform: translate3d( 45px, 30px, 0 ) scale(1.12); opacity: 1; } } .hero-glow-blue { animation: floatGlowBlue 10s ease-in-out infinite; } /* ========================================================= HERO GLOW — DOURADO ========================================================= */ @keyframes floatGlowGold { 0%, 100% { transform: translate3d( 0, 0, 0 ) scale(1); opacity: 0.55; } 50% { transform: translate3d( -35px, -25px, 0 ) scale(1.18); opacity: 0.90; } } .hero-glow-gold { animation: floatGlowGold 12s ease-in-out infinite; } /* ========================================================= HERO BADGE — PONTO PULSANTE ========================================================= */ @keyframes dotPulse { 0% { transform: scale(0.80); opacity: 0.70; } 60% { transform: scale(1.75); opacity: 0; } 100% { transform: scale(1.75); opacity: 0; } } .hero-badge .dot::after { animation: dotPulse 2.2s ease-out infinite; } /* ========================================================= SCROLL INDICATOR ========================================================= */ @keyframes scrollIndicatorFloat { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } .scroll-indicator { animation: scrollIndicatorFloat 2.2s ease-in-out infinite; } /* ========================================================= SCROLL MOUSE ========================================================= */ @keyframes mouseWheel { 0% { transform: translateX(-50%) translateY(0); opacity: 0; } 20% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translateX(-50%) translateY(14px); opacity: 0; } } .scroll-mouse span { animation: mouseWheel 1.8s ease infinite; } /* ========================================================= MARQUEE INFINITO ========================================================= */ @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee-track { animation: marqueeScroll 34s linear infinite; } /* ========================================================= PAUSA O MARQUEE NO HOVER ========================================================= */ @media (hover: hover) and (pointer: fine) { .service-marquee:hover .marquee-track { animation-play-state: paused; } } /* ========================================================= MARQUEE — FADE NAS BORDAS ========================================================= */ .service-marquee::before, .service-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 3; width: clamp( 30px, 8vw, 140px ); pointer-events: none; } .service-marquee::before { left: 0; background: linear-gradient( 90deg, rgba(5, 11, 19, 1), rgba(5, 11, 19, 0) ); } .service-marquee::after { right: 0; background: linear-gradient( -90deg, rgba(5, 11, 19, 1), rgba(5, 11, 19, 0) ); } /* ========================================================= MARQUEE — PONTOS ========================================================= */ @keyframes marqueeDotGlow { 0%, 100% { opacity: 0.55; text-shadow: 0 0 0 rgba(214, 168, 67, 0); } 50% { opacity: 1; text-shadow: 0 0 12px rgba(214, 168, 67, 0.55); } } .marquee-dot { animation: marqueeDotGlow 2.5s ease-in-out infinite; } /* ========================================================= TEXT GRADIENT — MOVIMENTO SUAVE ========================================================= */ @keyframes gradientTextMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .text-gradient { background-size: 200% 200%; animation: gradientTextMove 7s ease infinite; } /* ========================================================= BOTÃO PRINCIPAL — GLOW RESPIRANDO ========================================================= */ @keyframes primaryButtonGlow { 0%, 100% { box-shadow: 0 9px 28px rgba(214, 168, 67, 0.18); } 50% { box-shadow: 0 12px 38px rgba(214, 168, 67, 0.28); } } .hero-actions .btn-primary { animation: primaryButtonGlow 3.5s ease-in-out infinite; } /* ========================================================= WHATSAPP FLUTUANTE — PULSO ========================================================= */ @keyframes whatsappRing { 0% { transform: scale(0.92); opacity: 0.70; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } .floating-whatsapp-icon::before { animation: whatsappRing 2.6s ease-out infinite; } /* ========================================================= WHATSAPP — LEVE FLUTUAÇÃO ========================================================= */ @keyframes whatsappFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .floating-whatsapp { animation: whatsappFloat 3.5s ease-in-out infinite; } /* ========================================================= CARDS DE SERVIÇO — BRILHO INTERNO ========================================================= */ @keyframes cardGlowMove { 0% { transform: translate3d( 0, 0, 0 ); } 50% { transform: translate3d( -20px, 20px, 0 ); } 100% { transform: translate3d( 0, 0, 0 ); } } .service-card.featured::before { opacity: 0.42; animation: cardGlowMove 7s ease-in-out infinite; } /* ========================================================= ÍCONE DOS CARDS EM DESTAQUE ========================================================= */ @keyframes featuredIconGlow { 0%, 100% { box-shadow: inset 0 0 20px rgba(214, 168, 67, 0.03), 0 0 0 rgba(214, 168, 67, 0); } 50% { box-shadow: inset 0 0 20px rgba(214, 168, 67, 0.06), 0 0 24px rgba(214, 168, 67, 0.10); } } .service-card.featured .service-card-icon { animation: featuredIconGlow 4s ease-in-out infinite; } /* ========================================================= BEFORE / AFTER — FUNDO ========================================================= */ @keyframes beforeAfterGlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .before-after-placeholder { background-size: 180% 180%; animation: beforeAfterGlow 10s ease-in-out infinite; } /* ========================================================= CARD DE LOCALIZAÇÃO SOBRE ========================================================= */ @keyframes locationCardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .about-location-card { animation: locationCardFloat 4.5s ease-in-out infinite; } /* ========================================================= CTA — CÍRCULOS DECORATIVOS ========================================================= */ @keyframes ctaCircleRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .contact-cta-decoration { animation: ctaCircleRotate 28s linear infinite; } /* ========================================================= CTA — GLOW DE FUNDO ========================================================= */ .contact-cta-box::before { content: ""; position: absolute; left: -20%; bottom: -85%; z-index: 0; width: 600px; height: 600px; pointer-events: none; border-radius: 50%; background: radial-gradient( circle, rgba(23, 71, 184, 0.11), transparent 68% ); animation: ctaGlowFloat 9s ease-in-out infinite; } @keyframes ctaGlowFloat { 0%, 100% { transform: translate3d( 0, 0, 0 ) scale(1); } 50% { transform: translate3d( 80px, -25px, 0 ) scale(1.12); } } /* ========================================================= GALERIA — OVERLAY ========================================================= */ .gallery-overlay { transition: background var(--transition-slow); } .gallery-item:hover .gallery-overlay { background: linear-gradient( 180deg, rgba(3, 7, 13, 0.02) 20%, rgba(3, 7, 13, 0.95) 100% ); } /* ========================================================= GALERIA PLACEHOLDER — GLOW ========================================================= */ .gallery-placeholder::before { content: ""; position: absolute; width: 160px; height: 160px; pointer-events: none; border-radius: 50%; background: radial-gradient( circle, rgba(214, 168, 67, 0.09), transparent 70% ); animation: galleryGlow 5s ease-in-out infinite; } @keyframes galleryGlow { 0%, 100% { transform: scale(0.85); opacity: 0.45; } 50% { transform: scale(1.18); opacity: 1; } } /* ========================================================= HEADER — ENTRADA INICIAL ========================================================= */ @keyframes headerReveal { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .site-header { animation: headerReveal 800ms cubic-bezier( 0.22, 1, 0.36, 1 ) both; } /* ========================================================= LOGO — ENTRADA ========================================================= */ @keyframes logoReveal { 0% { opacity: 0; transform: scale(0.90); } 100% { opacity: 1; transform: scale(1); } } .brand-logo { animation: logoReveal 800ms ease 150ms both; } /* ========================================================= LOAD DO HERO SEM JS Como os data-reveal dependem de JS, este efeito garante movimento leve mesmo antes do nosso código existir. ========================================================= */ .hero-content { animation: heroContentFade 700ms ease both; } @keyframes heroContentFade { from { opacity: 0.85; } to { opacity: 1; } } /* ========================================================= ANIMAÇÕES UTILITÁRIAS ========================================================= */ /* --------------------------------------------------------- FLOAT --------------------------------------------------------- */ .animate-float { animation: genericFloat 4s ease-in-out infinite; } @keyframes genericFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* --------------------------------------------------------- PULSE --------------------------------------------------------- */ .animate-pulse { animation: genericPulse 2.4s ease-in-out infinite; } @keyframes genericPulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } } /* --------------------------------------------------------- SPIN LENTO --------------------------------------------------------- */ .animate-spin-slow { animation: genericSpin 18s linear infinite; } @keyframes genericSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* --------------------------------------------------------- SHIMMER --------------------------------------------------------- */ .animate-shimmer { position: relative; overflow: hidden; } .animate-shimmer::after { content: ""; position: absolute; top: -60%; left: -100%; width: 45%; height: 220%; pointer-events: none; transform: rotate(18deg); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.08), transparent ); animation: shimmerMove 4.5s ease-in-out infinite; } @keyframes shimmerMove { 0%, 25% { left: -100%; } 70%, 100% { left: 150%; } } /* ========================================================= HEADER COM SCROLL A classe .is-scrolled virá do JavaScript. ========================================================= */ .site-header.is-scrolled { animation: none; } .site-header.is-scrolled .brand-logo { transform: scale(0.96); } /* ========================================================= MOBILE MENU — LINKS ENTRANDO ========================================================= */ .mobile-menu.is-open .mobile-nav > a { animation: mobileMenuLinkReveal 550ms var(--reveal-easing) both; } .mobile-menu.is-open .mobile-nav > a:nth-child(1) { animation-delay: 70ms; } .mobile-menu.is-open .mobile-nav > a:nth-child(2) { animation-delay: 110ms; } .mobile-menu.is-open .mobile-nav > a:nth-child(3) { animation-delay: 150ms; } .mobile-menu.is-open .mobile-nav > a:nth-child(4) { animation-delay: 190ms; } .mobile-menu.is-open .mobile-nav > a:nth-child(5) { animation-delay: 230ms; } .mobile-menu.is-open .mobile-nav > a:nth-child(6) { animation-delay: 270ms; } .mobile-menu.is-open .mobile-nav > a:nth-child(7) { animation-delay: 310ms; } @keyframes mobileMenuLinkReveal { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } /* ========================================================= FAQ — RESPOSTA ========================================================= */ .faq-item[open] .faq-answer { animation: faqAnswerReveal 380ms ease both; } @keyframes faqAnswerReveal { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= CARD HOVER — SOMENTE DESKTOP ========================================================= */ @media (hover: hover) and (pointer: fine) { .service-card:hover .service-link span { animation: arrowMicroBounce 850ms ease-in-out infinite; } @keyframes arrowMicroBounce { 0%, 100% { transform: translateX(3px); } 50% { transform: translateX(7px); } } } /* ========================================================= TABLETS ========================================================= */ @media (max-width: 1024px) { .hero-glow-blue { animation-duration: 13s; } .hero-glow-gold { animation-duration: 15s; } .marquee-track { animation-duration: 30s; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 768px) { :root { --reveal-distance: 28px; --reveal-duration: 700ms; } /* ----------------------------------------------------- HERO ----------------------------------------------------- */ .hero-glow-blue, .hero-glow-gold { filter: blur(65px); } /* ----------------------------------------------------- MARQUEE ----------------------------------------------------- */ .marquee-track { animation-duration: 25s; } /* ----------------------------------------------------- DESLIGA RESPIRAÇÃO DA IMAGEM ----------------------------------------------------- */ .hero-media img { animation: heroImageReveal 1300ms cubic-bezier( 0.22, 1, 0.36, 1 ) both; } /* ----------------------------------------------------- CTA ----------------------------------------------------- */ .contact-cta-decoration { animation-duration: 35s; } /* ----------------------------------------------------- WHATSAPP ----------------------------------------------------- */ .floating-whatsapp { animation-duration: 4s; } } /* ========================================================= CELULARES PEQUENOS ========================================================= */ @media (max-width: 480px) { :root { --reveal-distance: 22px; } .service-marquee::before, .service-marquee::after { width: 28px; } .about-location-card { animation-duration: 5.5s; } } /* ========================================================= ACESSIBILIDADE — PREFERE MENOS MOVIMENTO Se o usuário do sistema configurou redução de animações, respeitamos essa preferência. ========================================================= */ @media (prefers-reduced-motion: reduce) { .hero-media img, .hero-glow-blue, .hero-glow-gold, .hero-badge .dot::after, .scroll-indicator, .scroll-mouse span, .marquee-track, .marquee-dot, .text-gradient, .hero-actions .btn-primary, .floating-whatsapp, .floating-whatsapp-icon::before, .service-card.featured::before, .service-card.featured .service-card-icon, .before-after-placeholder, .about-location-card, .contact-cta-decoration, .contact-cta-box::before, .gallery-placeholder::before, .site-header, .brand-logo, .hero-content, .animate-float, .animate-pulse, .animate-spin-slow, .animate-shimmer::after { animation: none !important; } .js [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .mobile-menu.is-open .mobile-nav > a { animation: none !important; } .faq-item[open] .faq-answer { animation: none !important; } }