/* animations.css — reveal, body ambiente, tilt 3D, glow, stagger * Tudo aqui é decorativo. prefers-reduced-motion zera todas as durações via tokens * (em tokens.css), mas reforçamos no fim deste arquivo desligando keyframes pesados. */ @layer animations { /* ============ REVEAL ON SCROLL ============ * Duração reduzida e stagger curto — site responde mais rápido. * Antes: 700ms + 80ms stagger (até 1100ms total por grupo) * Agora: 400ms + 40ms stagger (até 560ms total) */ [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out); transition-delay: calc(var(--i, 0) * 40ms); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } /* ============ TILT 3D BASE ============ * Aplicado em qualquer elemento com [data-tilt]. * O JS (effects.js) escreve o `transform` direto; aqui só damos a transição * suave para o estado de repouso e flexibilizamos o compositing. * Perspectiva menor (900px vs antigos 1100) = sensação 3D mais dramática. * Easing spring no retorno dá um "balanço" elegante quando o mouse sai. */ [data-tilt] { transform: perspective(900px) rotateY(0deg) rotateX(0deg); transform-style: preserve-3d; transition: transform 700ms var(--ease-spring); } [data-tilt-inner] { transition: transform 700ms var(--ease-spring); transform: translate3d(0, 0, 0); } /* Glare — brilho diagonal que segue o cursor pela superfície do card. * O JS escreve uma propriedade `background: radial-gradient(...)` no inline style. * No estado de repouso, o gradient inline está vazio e o glare fica invisível. * mix-blend-mode: overlay garante que o brilho funcione tanto em fotos quanto cards escuros. */ .tilt-glare, [data-tilt-glare] { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: overlay; opacity: 0; transition: opacity 400ms var(--ease-out); z-index: 3; } [data-tilt]:hover .tilt-glare, [data-tilt]:hover [data-tilt-glare] { opacity: 0.85; } /* ============ MAGNETIC CTA ============ * O JS escreve --magnetic-x e --magnetic-y; o CSS compõe com o lift do hover * (translateY -2px). Resultado: cursor "puxa" o botão E ele levanta no hover. */ [data-magnetic] { --magnetic-x: 0px; --magnetic-y: 0px; transform: translate(var(--magnetic-x), var(--magnetic-y)); transition: transform 280ms var(--ease-out); } [data-magnetic]:hover { transform: translate(var(--magnetic-x), calc(var(--magnetic-y) - 2px)); } [data-magnetic]:active { transform: translate(var(--magnetic-x), var(--magnetic-y)); } /* ============ BODY AMBIENTE — auroras em movimento + grid sutil ============ * * Sistema com 3 camadas que conversam: * 1. body::before — duas auroras GRANDES que percorrem trajetórias circulares * ao longo de 32s e 44s (vidas independentes, nunca sincronizam). Cor brand. * 2. body::after — grid industrial fino, máscara de viñeta para borda mais escura. * 3. .ambient-particles + .energy-beams + .ambient-noise = camadas declaradas no HTML. * * Performance: tudo em transform/opacity (GPU). Sem JS. ~zero custo. */ body::before, body::after { content: ""; position: fixed; inset: -10%; /* sangra além da viewport para não revelar bordas dos radials */ pointer-events: none; z-index: -1; } body::before { /* Aurora 1: vermelha quente. Centralizada no radial, posição animada via translate. */ background-image: radial-gradient(38rem 28rem at 50% 50%, color-mix(in oklab, var(--brand) 32%, transparent) 0%, color-mix(in oklab, var(--brand) 18%, transparent) 25%, transparent 70%); animation: aurora-orbit-a 32s linear infinite; will-change: transform; filter: blur(8px); } body::after { /* Aurora 2: vermelha-vinho profunda. Trajetória oposta, ciclo diferente. */ background-image: radial-gradient(34rem 26rem at 50% 50%, color-mix(in oklab, var(--brand-soft) 40%, transparent) 0%, color-mix(in oklab, var(--brand-deep) 22%, transparent) 30%, transparent 72%); animation: aurora-orbit-b 44s linear infinite; will-change: transform; filter: blur(10px); } /* Aurora 1: figura-8 horizontal larga */ @keyframes aurora-orbit-a { 0% { transform: translate3d(-30%, -20%, 0); } 25% { transform: translate3d( 20%, -15%, 0); } 50% { transform: translate3d( 30%, 20%, 0); } 75% { transform: translate3d( -20%, 15%, 0); } 100% { transform: translate3d(-30%, -20%, 0); } } /* Aurora 2: contra-orbita, fora de fase, raio menor */ @keyframes aurora-orbit-b { 0% { transform: translate3d( 25%, 15%, 0) scale(1); } 33% { transform: translate3d(-15%, 25%, 0) scale(1.08); } 66% { transform: translate3d(-20%, -20%, 0) scale(0.95); } 100% { transform: translate3d( 25%, 15%, 0) scale(1); } } /* ============ GRID INDUSTRIAL — agora em ::before adicional via overlay próprio ============ * Como o body::before/after viraram auroras, o grid migra para o .ambient-grid declarado no HTML. */ .ambient-grid { position: fixed; inset: 0; pointer-events: none; z-index: -1; background-image: linear-gradient(to right, color-mix(in oklab, var(--fg) 4%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--fg) 4%, transparent) 1px, transparent 1px); background-size: 88px 88px; mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 25%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, black 25%, transparent 85%); opacity: 0.55; } /* ============ ENERGY BEAMS — feixes diagonais que atravessam a tela ============ * 3 elementos. Cada um é uma linha vermelha fina, posicionada em ângulo, que * desliza diagonalmente atravessando a viewport em ~6s. Reaparece em loop de 18-24s, * dando intervalo de respiro. Pico de opacidade no meio do percurso. */ .energy-beams { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; mix-blend-mode: screen; } .energy-beams__line { position: absolute; inline-size: 60vmax; block-size: 2px; background: linear-gradient( 90deg, transparent 0%, color-mix(in oklab, var(--brand) 65%, transparent) 30%, var(--brand-hot) 50%, color-mix(in oklab, var(--brand) 65%, transparent) 70%, transparent 100%); box-shadow: 0 0 24px var(--brand-glow), 0 0 8px var(--brand-hot); opacity: 0; transform-origin: center; will-change: transform, opacity; } .energy-beams__line:nth-child(1) { top: 22%; left: -60vmax; transform: rotate(-18deg); animation: beam-sweep-1 18s var(--ease-in-out) infinite; } .energy-beams__line:nth-child(2) { top: 62%; left: -60vmax; transform: rotate(12deg); animation: beam-sweep-2 24s var(--ease-in-out) -7s infinite; } .energy-beams__line:nth-child(3) { top: 40%; left: -60vmax; transform: rotate(-6deg); animation: beam-sweep-3 21s var(--ease-in-out) -14s infinite; } @keyframes beam-sweep-1 { 0%, 100% { transform: translateX(0) rotate(-18deg); opacity: 0; } 8% { opacity: 0; } 20% { opacity: 0.55; } 40% { transform: translateX(70vw) rotate(-18deg); opacity: 0.7; } 60% { opacity: 0.4; } 72% { transform: translateX(140vw) rotate(-18deg); opacity: 0; } 100% { transform: translateX(140vw) rotate(-18deg); opacity: 0; } } @keyframes beam-sweep-2 { 0%, 100% { transform: translateX(0) rotate(12deg); opacity: 0; } 10% { opacity: 0; } 25% { opacity: 0.5; } 50% { transform: translateX(80vw) rotate(12deg); opacity: 0.65; } 65% { opacity: 0.3; } 78% { transform: translateX(150vw) rotate(12deg); opacity: 0; } 100% { transform: translateX(150vw) rotate(12deg); opacity: 0; } } @keyframes beam-sweep-3 { 0%, 100% { transform: translateX(0) rotate(-6deg); opacity: 0; } 15% { opacity: 0; } 30% { opacity: 0.6; } 55% { transform: translateX(75vw) rotate(-6deg); opacity: 0.8; } 70% { opacity: 0.35; } 82% { transform: translateX(145vw) rotate(-6deg); opacity: 0; } 100% { transform: translateX(145vw) rotate(-6deg); opacity: 0; } } /* ============ PARTÍCULAS — agora maiores, mais visíveis, trajetórias mais amplas ============ * 14 partículas com tamanhos variados (small/medium/large via :nth-child modifiers). * Glow brand forte. Pico de opacidade ~0.9. Tudo translate3d em GPU. */ .ambient-particles { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; mix-blend-mode: screen; } .ambient-particles__dot { position: absolute; inline-size: clamp(3px, 0.5vw, 5px); block-size: clamp(3px, 0.5vw, 5px); background: var(--brand-hot); border-radius: 50%; filter: blur(1px); box-shadow: 0 0 12px var(--brand-hot), 0 0 24px var(--brand-glow); opacity: 0; will-change: transform, opacity; } /* Variação de tamanho — 1 em cada 3 é maior, dá hierarquia */ .ambient-particles__dot:nth-child(3n) { inline-size: clamp(5px, 0.8vw, 8px); block-size: clamp(5px, 0.8vw, 8px); filter: blur(2px); } .ambient-particles__dot:nth-child(5n) { inline-size: clamp(2px, 0.3vw, 3px); block-size: clamp(2px, 0.3vw, 3px); filter: blur(0.5px); } /* Distribuição em zonas — não amontoa */ .ambient-particles__dot:nth-child(1) { top: 12%; left: 10%; animation: drift-1 18s var(--ease-in-out) -0s infinite; } .ambient-particles__dot:nth-child(2) { top: 28%; left: 22%; animation: drift-2 22s var(--ease-in-out) -3s infinite; } .ambient-particles__dot:nth-child(3) { top: 48%; left: 14%; animation: drift-3 26s var(--ease-in-out) -6s infinite; } .ambient-particles__dot:nth-child(4) { top: 68%; left: 28%; animation: drift-1 24s var(--ease-in-out) -9s infinite; } .ambient-particles__dot:nth-child(5) { top: 82%; left: 16%; animation: drift-2 20s var(--ease-in-out) -12s infinite; } .ambient-particles__dot:nth-child(6) { top: 18%; left: 48%; animation: drift-3 28s var(--ease-in-out) -2s infinite; } .ambient-particles__dot:nth-child(7) { top: 55%; left: 50%; animation: drift-1 22s var(--ease-in-out) -8s infinite; } .ambient-particles__dot:nth-child(8) { top: 88%; left: 46%; animation: drift-2 26s var(--ease-in-out) -15s infinite; } .ambient-particles__dot:nth-child(9) { top: 14%; left: 74%; animation: drift-3 20s var(--ease-in-out) -5s infinite; } .ambient-particles__dot:nth-child(10) { top: 32%; left: 86%; animation: drift-1 24s var(--ease-in-out) -11s infinite; } .ambient-particles__dot:nth-child(11) { top: 52%; left: 78%; animation: drift-2 28s var(--ease-in-out) -4s infinite; } .ambient-particles__dot:nth-child(12) { top: 72%; left: 88%; animation: drift-3 22s var(--ease-in-out) -16s infinite; } .ambient-particles__dot:nth-child(13) { top: 90%; left: 70%; animation: drift-1 26s var(--ease-in-out) -13s infinite; } .ambient-particles__dot:nth-child(14) { top: 42%; left: 38%; animation: drift-2 30s var(--ease-in-out) -1s infinite; } /* Trajetórias maiores (90-120px de amplitude vs antigos 40-50px) e picos altos de opacidade */ @keyframes drift-1 { 0%, 100% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { transform: translate3d(20px, -30px, 0); opacity: 0.55; } 50% { transform: translate3d(60px, -120px, 0); opacity: 0.9; } 80% { transform: translate3d(40px, -180px, 0); opacity: 0.3; } } @keyframes drift-2 { 0%, 100% { transform: translate3d(0, 0, 0); opacity: 0; } 18% { transform: translate3d(-25px, -25px, 0); opacity: 0.5; } 50% { transform: translate3d(-80px, -100px, 0); opacity: 0.85; } 82% { transform: translate3d(-50px, -160px, 0); opacity: 0.25; } } @keyframes drift-3 { 0%, 100% { transform: translate3d(0, 0, 0); opacity: 0; } 20% { transform: translate3d(15px, -40px, 0); opacity: 0.45; } 50% { transform: translate3d(45px, -140px, 0); opacity: 0.8; } 78% { transform: translate3d(70px, -200px, 0); opacity: 0.2; } } /* ============ NOISE / GRAIN — textura cinematográfica ============ */ .ambient-noise { position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E"); background-size: 200px 200px; } /* ============ MOBILE: reduz intensidade ============ * Em telas pequenas, menos partículas e beams para preservar bateria/perf. */ @media (max-width: 640px) { .ambient-particles__dot:nth-child(n+9) { display: none; } .energy-beams__line:nth-child(3) { display: none; } body::before { filter: blur(12px); opacity: 0.85; } body::after { filter: blur(14px); opacity: 0.8; } } /* ============ HEADER BANNER — slow Ken-Burns pan ============ */ .site-header__bg { animation: header-pan 28s var(--ease-in-out) infinite alternate; } @keyframes header-pan { 0% { transform: scale(1.05) translate3d(-1%, 0, 0); } 100% { transform: scale(1.05) translate3d(1%, 0, 0); } } /* ============ LOGO GLOW PULSANTE ============ */ .brand__logo { animation: logo-glow 4.2s var(--ease-in-out) infinite; } @keyframes logo-glow { 0%, 100% { filter: drop-shadow(0 6px 18px color-mix(in oklab, var(--brand) 35%, transparent)); } 50% { filter: drop-shadow(0 8px 24px color-mix(in oklab, var(--brand) 60%, transparent)); } } /* ============ NOTIFICATION DOT — CTA WhatsApp no header ============ */ .nav__cta { position: relative; } .nav__cta::after { content: ""; position: absolute; inset-block-start: -2px; inset-inline-end: -2px; inline-size: 12px; block-size: 12px; background: var(--brand-hot); border: 2px solid var(--bg-elev); border-radius: 50%; box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand-hot) 60%, transparent); animation: notification-pulse 2.2s var(--ease-out) infinite; } @keyframes notification-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand-hot) 60%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* ============ DRAWER MOBILE ============ * Animação de entrada agora vive em layout.css junto da estrutura do nav. * Aqui só sobra o link CTA stagger que não migrou. */ /* ============ STATUS DOT — topbar "Atendendo" ============ */ .topbar__status-dot { inline-size: 8px; block-size: 8px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 0 color-mix(in oklab, var(--success) 60%, transparent); animation: status-pulse 2.4s var(--ease-out) infinite; } @keyframes status-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--success) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* ============ RESPEITO ABSOLUTO A REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } body::before, body::after { animation: none; transform: none; } .site-header__bg { animation: none; transform: none; } .brand__logo { animation: none; } .nav__cta::after { animation: none; } .topbar__status-dot { animation: none; } .ambient-particles__dot { animation: none !important; opacity: 0 !important; } .energy-beams__line { animation: none !important; opacity: 0 !important; } .ambient-noise { display: none; } [data-reveal] { opacity: 1; transform: none; } .wa-float { animation: none; } [data-tilt], [data-tilt-inner], [data-magnetic] { transform: none !important; } } }