/*! * Spirit Core — camada de animação (docs/MOTION.md). Author: Lui. * Só transform/opacity/clip-path (sem CLS). Tudo desligado com prefers-reduced-motion. */ /* ---------- Reveal ao rolar (o recebe .sp-motion antes da pintura) ---------- */ .sp-motion .sp-reveal, .sp-motion .sp-reveal-stagger > *, .sp-motion.sp-motion-auto .sp-section > :not(.e-con-inner), .sp-motion.sp-motion-auto .sp-section > .e-con-inner > * { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity var(--sp-dur-slow, 1200ms) var(--sp-ease, cubic-bezier(.22, 1, .36, 1)), transform var(--sp-dur-slow, 1200ms) var(--sp-ease, cubic-bezier(.22, 1, .36, 1)); transition-delay: calc(var(--sp-i, 0) * 100ms); } .sp-motion .sp-reveal-clip > * { /* O recorte fica no filho: o IntersectionObserver continua enxergando o container */ clip-path: inset(100% 0 0 0); transition: clip-path var(--sp-dur-slow, 1200ms) var(--sp-ease-in-out, cubic-bezier(.65, 0, .35, 1)); transition-delay: calc(var(--sp-i, 0) * 100ms); } .sp-motion .sp-reveal-clip img, .sp-motion .sp-reveal-clip video { transform: scale(1.12); transition: transform var(--sp-dur-xslow, 1800ms) var(--sp-ease, cubic-bezier(.22, 1, .36, 1)); } .sp-motion .is-in, .sp-motion .sp-reveal-stagger > .is-in, .sp-motion.sp-motion-auto .sp-section > .is-in, .sp-motion.sp-motion-auto .sp-section > .e-con-inner > .is-in { opacity: 1; transform: none; } .sp-motion .sp-reveal-clip.is-in > * { clip-path: inset(0 0 0 0); } .sp-motion .sp-reveal-clip.is-in img, .sp-motion .sp-reveal-clip.is-in video { transform: none; } /* Trava de segurança e editor do Elementor: tudo visível, sem esconder nada */ .sp-motion-done .sp-reveal, .sp-motion-done .sp-reveal-stagger > *, .sp-motion-done .sp-section > *, .sp-motion-done .sp-section > .e-con-inner > *, .elementor-editor-active .sp-reveal, .elementor-editor-active .sp-reveal-stagger > *, .elementor-editor-active .sp-section > *, .elementor-editor-active .sp-section > .e-con-inner > * { opacity: 1 !important; transform: none !important; } .sp-motion-done .sp-reveal-clip > *, .elementor-editor-active .sp-reveal-clip > * { clip-path: none !important; } /* ---------- Hero: Ken Burns sutil ---------- */ .sp-kb .sp-hero-media { overflow: hidden; } .sp-kb .sp-hero-media img, .sp-kb .sp-hero-media video, .sp-kb img.sp-hero-media { animation: sp-kenburns var(--sp-dur-xslow, 1800ms) var(--sp-ease, cubic-bezier(.22, 1, .36, 1)) both; transform-origin: 50% 40%; } @keyframes sp-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } } /* ---------- Hovers (movimento só se o visitante não pediu menos movimento) ---------- */ .sp-link a[href], a.sp-link, .sp-text a[href] { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; } a.sp-link:hover, a.sp-link:focus-visible, .sp-link a[href]:hover, .sp-link a[href]:focus-visible, .sp-text a[href]:hover, .sp-text a[href]:focus-visible { background-size: 100% 1px; background-position: 0 100%; } /* Botões */ .sp-btn, .sp-btn .elementor-button, a.sp-btn { position: relative; isolation: isolate; overflow: hidden; } .sp-btn::before, .sp-btn .elementor-button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; } .sp-btn:hover::before, .sp-btn:focus-visible::before, .sp-btn:hover .elementor-button::before { transform: scaleX(1); transform-origin: 0 50%; } .sp-btn:hover, .sp-btn:focus-visible, .sp-btn:hover .elementor-button { color: var(--sp-btn-invert, var(--sp-yellow, #FAFA2F)); } .sp-btn:hover::before, .sp-btn:hover .elementor-button::before { background: var(--sp-btn-fill, var(--sp-ink, #181818)); } .sp-btn--yellow:hover, .sp-btn--yellow:focus-visible { background-color: var(--sp-ink, #181818); color: var(--sp-yellow, #FAFA2F); } .sp-btn--yellow::before { display: none; } .sp-btn--yellow .sp-icon--play, .sp-btn--yellow .sp-icon { transition: transform var(--sp-dur, 600ms) var(--sp-ease, cubic-bezier(.22, 1, .36, 1)); } .sp-btn--yellow:hover .sp-icon { transform: translateX(4px); } /* Imagens de projeto / cards */ .sp-zoom { overflow: hidden; } .sp-zoom img { transition: transform var(--sp-dur-slow, 1200ms) var(--sp-ease, cubic-bezier(.22, 1, .36, 1)), filter var(--sp-dur-slow, 1200ms) ease; } .sp-zoom:hover img { transform: scale(1.06); filter: brightness(.88); } /* Logos de clientes */ .sp-logos img { opacity: .55; transition: opacity var(--sp-dur, 600ms) var(--sp-ease, cubic-bezier(.22, 1, .36, 1)), transform var(--sp-dur, 600ms) var(--sp-ease, cubic-bezier(.22, 1, .36, 1)); } .sp-logos img:hover, .sp-logos a:hover img { opacity: 1; transform: translateY(-4px); } /* Ícones seta-círculo (sprite): giram/deslizam dentro do link */ a .sp-icon--arrow-se-circle, a .sp-icon--arrow-ne-circle, a .sp-icon--arrow-right-circle, a .sp-icon--arrow-left-circle, button .sp-icon--arrow-right-circle, button .sp-icon--arrow-left-circle, .sp-arrow { transition: transform var(--sp-dur, 600ms) var(--sp-ease, cubic-bezier(.22, 1, .36, 1)); } a:hover .sp-icon--arrow-se-circle, a:focus-visible .sp-icon--arrow-se-circle, .sp-arrow:hover .sp-icon--arrow-se-circle { transform: rotate(-45deg); } a:hover .sp-icon--arrow-ne-circle, a:focus-visible .sp-icon--arrow-ne-circle { transform: rotate(45deg); } a:hover .sp-icon--arrow-right-circle, button:hover .sp-icon--arrow-right-circle { transform: translateX(4px); } a:hover .sp-icon--arrow-left-circle, button:hover .sp-icon--arrow-left-circle { transform: translateX(-4px); } /* Redes sociais: círculo preenche do centro e o ícone inverte */ .sp-social__link { position: relative; isolation: isolate; border-radius: 50%; } .sp-social__link::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform var(--sp-dur, 600ms) var(--sp-ease, cubic-bezier(.22, 1, .36, 1)); } .sp-social__link:hover::before, .sp-social__link:focus-visible::before { transform: scale(1); } .sp-social__link .sp-icon { transition: color var(--sp-dur-fast, 300ms) ease; } .sp-social__link:hover .sp-icon, .sp-social__link:focus-visible .sp-icon { color: var(--sp-social-invert, var(--sp-ink, #181818)); } @media (prefers-reduced-motion: no-preference) { .sp-link a[href], a.sp-link, .sp-text a[href] { transition: background-size var(--sp-dur, 600ms) var(--sp-ease, cubic-bezier(.22, 1, .36, 1)); } .sp-btn, .sp-btn .elementor-button { transition: color var(--sp-dur, 600ms) var(--sp-ease, cubic-bezier(.22, 1, .36, 1)), background-color var(--sp-dur, 600ms) var(--sp-ease, cubic-bezier(.22, 1, .36, 1)); } .sp-btn::before, .sp-btn .elementor-button::before { transition: transform var(--sp-dur, 600ms) var(--sp-ease, cubic-bezier(.22, 1, .36, 1)); } } @media (prefers-reduced-motion: reduce) { .sp-reveal, .sp-reveal-stagger > *, .sp-section > *, .sp-section > .e-con-inner > * { opacity: 1 !important; transform: none !important; } .sp-reveal-clip > * { clip-path: none !important; } .sp-kb .sp-hero-media img, .sp-kb .sp-hero-media video, .sp-kb img.sp-hero-media { animation: none !important; } .sp-zoom img, .sp-logos img, .sp-social__link::before, a .sp-icon, button .sp-icon { transition: none !important; } .sp-zoom:hover img, .sp-logos img:hover, a:hover .sp-icon, button:hover .sp-icon { transform: none !important; } }