/* ============================================ MAGEN — Custom CSS · God Mode 2026 Paleta REAL: laranja + amarelo + preto profundo ============================================ */ :root { --base-950: #0a0a0a; --base-900: #111111; --base-800: #1a1a1a; --base-700: #27272a; --ink-100: #f5f5f5; --ink-200: #e4e4e7; --ink-300: #a1a1aa; --ink-400: #71717a; --accent: #ff6b1a; --accent-dim: #e55a0e; --accent-glow: rgba(255, 107, 26, 0.45); --gold: #ffb627; --gold-dim: #e5a01f; } /* scroll-behavior NATIVO removido — Lenis cuida (evita conflito + jank) */ html { scroll-behavior: auto; } body { font-feature-settings: "ss01", "cv11"; } /* Lenis class - aplicada pelo Lenis no . Evita Safari rubber-band conflito */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ====== Grid pattern overlay ====== */ .bg-grid { background-image: linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 60px 60px; } /* ====== Hero background ====== */ .hero-bg { background: radial-gradient(1200px circle at 70% 20%, rgba(255, 107, 26, 0.08), transparent 50%), radial-gradient(900px circle at 20% 80%, rgba(255, 182, 39, 0.05), transparent 50%), linear-gradient(180deg, #0a0a0a 0%, #050505 100%); } /* ============================================ GLOBAL GLOW LAYER — luzes laranja/gold flutuando atras de tudo GPU-friendly: translate3d + will-change, sem repaints ============================================ */ .bg-glow-layer { position: fixed; inset: 0; z-index: -10; pointer-events: none; overflow: hidden; contain: strict; } .glow-orb { position: absolute; border-radius: 50%; filter: blur(120px); will-change: transform, opacity; transform: translate3d(0, 0, 0); } /* 5 orbes em alturas diferentes do scroll */ .glow-orb-1 { top: 5vh; left: -10vw; width: 520px; height: 520px; background: radial-gradient(circle, rgba(255,107,26,0.35) 0%, rgba(255,107,26,0) 70%); animation: drift-1 28s ease-in-out infinite; } .glow-orb-2 { top: 35vh; right: -12vw; width: 480px; height: 480px; background: radial-gradient(circle, rgba(255,182,39,0.28) 0%, rgba(255,182,39,0) 70%); animation: drift-2 34s ease-in-out infinite; } .glow-orb-3 { top: 95vh; left: 30vw; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255,107,26,0.22) 0%, rgba(255,107,26,0) 70%); animation: drift-3 40s ease-in-out infinite; } .glow-orb-4 { top: 165vh; right: 5vw; width: 540px; height: 540px; background: radial-gradient(circle, rgba(255,182,39,0.20) 0%, rgba(255,182,39,0) 70%); animation: drift-4 36s ease-in-out infinite; } .glow-orb-5 { top: 235vh; left: -8vw; width: 580px; height: 580px; background: radial-gradient(circle, rgba(255,107,26,0.25) 0%, rgba(255,107,26,0) 70%); animation: drift-5 32s ease-in-out infinite; } /* Drift animations - cada orbe se move em pattern diferente, infinito */ @keyframes drift-1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; } 50% { transform: translate3d(80px, 60px, 0) scale(1.15); opacity: 0.55; } } @keyframes drift-2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; } 50% { transform: translate3d(-70px, 90px, 0) scale(1.2); opacity: 0.5; } } @keyframes drift-3 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; } 50% { transform: translate3d(60px, -80px, 0) scale(1.1); opacity: 0.45; } } @keyframes drift-4 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.7; } 50% { transform: translate3d(-100px, -50px, 0) scale(1.18); opacity: 0.45; } } @keyframes drift-5 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; } 50% { transform: translate3d(70px, 70px, 0) scale(1.12); opacity: 0.5; } } /* Em telas pequenas: reduzir quantidade pra performance */ @media (max-width: 768px) { .glow-orb-4, .glow-orb-5 { display: none; } .glow-orb { filter: blur(80px); } } /* Respeitar reduced motion */ @media (prefers-reduced-motion: reduce) { .glow-orb { animation: none; } } /* ====== Mesh gradient pulse — leve, sem jank ====== */ @keyframes mesh-pulse { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; } 50% { transform: translate3d(20px, -15px, 0) scale(1.08); opacity: 0.32; } } .mesh-pulse { animation: mesh-pulse 22s ease-in-out infinite; will-change: transform, opacity; transform: translateZ(0); /* força GPU layer */ } /* ====== Header scroll ====== */ #site-header { background: transparent; backdrop-filter: blur(0); transition: all 300ms ease; } #site-header.scrolled { background: rgba(10, 10, 10, 0.75); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(255, 255, 255, 0.05); } /* ====== Nav ====== */ .nav-link { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.8125rem; color: var(--ink-300); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; transition: all 200ms ease; } .nav-link:hover { color: var(--accent); background: rgba(255,107,26,0.06); } .mobile-link { display: block; padding: 1rem 1.25rem; font-size: 0.875rem; color: var(--ink-200); border-radius: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; transition: all 200ms ease; } .mobile-link:hover { background: rgba(255,107,26,0.06); color: var(--accent); } .mobile-link-cta { display: block; padding: 1rem 1.25rem; margin-top: 0.5rem; text-align: center; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--gold)); color: var(--base-950); border-radius: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; } /* ====== Buttons ====== */ .btn-primary, .btn-primary-lg { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; background: var(--accent); color: white; border-radius: 9999px; transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; isolation: isolate; } .btn-primary { padding: 0.625rem 1.25rem; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; } .btn-primary-lg { padding: 1rem 2rem; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.04em; } .btn-primary::before, .btn-primary-lg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent) 0%, var(--gold) 100%); opacity: 0; transition: opacity 300ms ease; z-index: -1; } .btn-primary:hover, .btn-primary-lg:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px var(--accent-glow); } .btn-primary:hover::before, .btn-primary-lg:hover::before { opacity: 1; } .btn-ghost-lg { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2rem; font-weight: 600; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-100); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 9999px; backdrop-filter: blur(10px); transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1); } .btn-ghost-lg:hover { background: rgba(255,107,26,0.06); border-color: rgba(255,107,26,0.3); color: var(--accent); transform: translateY(-2px); } /* ====== Service Pills (lista vertical hero, igual screenshot mas premium) ====== */ .service-pill { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,107,26,0.18); border-radius: 9999px; transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; isolation: isolate; } .service-pill::before { content: ''; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 107, 26, 0.2), transparent 50%); opacity: 0; transition: opacity 350ms ease; z-index: -1; } .service-pill:hover { border-color: rgba(255,107,26,0.55); background: rgba(255,107,26,0.05); transform: translateX(8px); box-shadow: 0 8px 24px -8px var(--accent-glow); } .service-pill:hover::before { opacity: 1; } .service-pill-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: rgba(255,107,26,0.1); border: 1px solid rgba(255,107,26,0.3); border-radius: 9999px; color: var(--accent); flex-shrink: 0; transition: all 300ms ease; } .service-pill:hover .service-pill-icon { background: var(--accent); color: white; transform: scale(1.08); border-color: var(--accent); } .service-pill-title { font-weight: 600; color: var(--accent); font-size: 0.9375rem; transition: color 200ms ease; } .service-pill:hover .service-pill-title { color: var(--gold); } .service-pill-arrow { margin-left: auto; color: var(--ink-400); opacity: 0; transform: translateX(-8px); transition: all 300ms ease; } .service-pill:hover .service-pill-arrow { opacity: 1; transform: translateX(0); color: var(--accent); } /* ====== Bento cards (seção abaixo) ====== */ .bento-card { display: flex; flex-direction: column; padding: 1.75rem; height: 100%; background: linear-gradient(135deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01)); border: 1px solid rgba(255,255,255,0.06); border-radius: 1.25rem; transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; cursor: pointer; } .bento-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 107, 26, 0.1), transparent 40%); opacity: 0; transition: opacity 400ms ease; pointer-events: none; } .bento-card:hover { border-color: rgba(255,107,26,0.25); transform: translateY(-3px); background: linear-gradient(135deg, rgba(255,107,26,0.04), rgba(255,255,255,0.015)); } .bento-card:hover::before { opacity: 1; } .bento-featured { padding: 2.5rem; background: linear-gradient(135deg, rgba(255, 107, 26, 0.08), rgba(255, 182, 39, 0.04)); border-color: rgba(255, 107, 26, 0.25); } .bento-featured::before { background: radial-gradient(800px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 107, 26, 0.2), transparent 50%); } .bento-featured:hover { border-color: rgba(255, 107, 26, 0.5); box-shadow: 0 30px 60px -20px var(--accent-glow); } .bento-card-subtle { background: linear-gradient(135deg, rgba(255,255,255,0.015), transparent); } .bento-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid; border-radius: 0.75rem; transition: transform 300ms ease; } .bento-card:hover .bento-icon { transform: scale(1.06) rotate(-3deg); } .bento-icon-lg { display: inline-flex; align-items: center; justify-content: center; width: 3.75rem; height: 3.75rem; border: 1px solid; border-radius: 1rem; transition: all 350ms ease; } .bento-featured:hover .bento-icon-lg { transform: scale(1.08); background: rgba(255, 107, 26, 0.18); border-color: rgba(255, 107, 26, 0.45); } .badge-featured { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; font-size: 0.6875rem; font-weight: 700; font-family: "Geist Mono", monospace; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); background: rgba(255, 107, 26, 0.1); border: 1px solid rgba(255, 107, 26, 0.3); border-radius: 9999px; } /* ====== Client cards ====== */ .client-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.875rem; padding: 2rem 1.5rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 1rem; transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1); min-height: 140px; } .client-card:hover { background: rgba(255,107,26,0.04); border-color: rgba(255,107,26,0.2); transform: translateY(-3px); } .client-name { font-size: 0.7rem; color: var(--ink-400); text-align: center; font-family: "Geist Mono", monospace; text-transform: uppercase; letter-spacing: 0.06em; } .client-card:hover .client-name { color: var(--accent); } /* ====== Glass card ====== */ .card-glass { background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)); border: 1px solid rgba(255,255,255,0.08); border-radius: 1.25rem; backdrop-filter: blur(20px); } /* ====== Form ====== */ .form-label { display: block; margin-bottom: 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--ink-200); font-family: "Geist Mono", monospace; text-transform: uppercase; letter-spacing: 0.06em; } .form-input { width: 100%; padding: 0.875rem 1rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.625rem; color: var(--ink-100); font-size: 0.9375rem; font-family: inherit; transition: all 200ms ease; } .form-input::placeholder { color: var(--ink-400); } .form-input:focus { outline: none; border-color: rgba(255, 107, 26, 0.5); background: rgba(255, 107, 26, 0.03); box-shadow: 0 0 0 4px rgba(255, 107, 26, 0.1); } /* ====== Contact direct cards ====== */ .contact-direct { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 0.75rem; transition: all 250ms ease; } .contact-direct:hover { background: rgba(255, 107, 26, 0.04); border-color: rgba(255, 107, 26, 0.2); transform: translateX(4px); } .contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 1px solid; border-radius: 0.625rem; flex-shrink: 0; } /* ====== Footer ====== */ .footer-link { color: var(--ink-300); font-size: 0.875rem; transition: color 200ms ease; } .footer-link:hover { color: var(--accent); } .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; color: var(--ink-300); background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 0.5rem; transition: all 250ms ease; } .social-icon:hover { color: var(--accent); background: rgba(255, 107, 26, 0.08); border-color: rgba(255, 107, 26, 0.3); transform: translateY(-2px); } /* ====== WhatsApp FAB ====== */ #wa-fab { position: fixed; bottom: 1.5rem; right: 1.5rem; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: #25d366; color: white; border-radius: 9999px; box-shadow: 0 10px 30px -10px rgba(37, 211, 102, 0.5); z-index: 40; transition: all 250ms ease; } #wa-fab:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 15px 40px -10px rgba(37, 211, 102, 0.7); } .wa-fab-pulse { position: absolute; inset: 0; border-radius: 9999px; background: #25d366; opacity: 0.4; animation: wa-pulse 2.5s ease-out infinite; z-index: -1; } @keyframes wa-pulse { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(1.7); opacity: 0; } } /* ====== Back to top ====== */ .back-to-top { position: fixed; bottom: 1.5rem; right: 6rem; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(255,255,255,0.06); color: var(--ink-100); border: 1px solid rgba(255,255,255,0.1); border-radius: 9999px; backdrop-filter: blur(10px); z-index: 40; transition: all 250ms ease; } .back-to-top:hover { background: rgba(255, 107, 26, 0.12); border-color: rgba(255, 107, 26, 0.3); color: var(--accent); transform: translateY(-2px); } .back-to-top.visible { display: flex; animation: fade-in-up 350ms ease forwards; } @keyframes fade-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ====== Reveal on scroll ====== */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-x { opacity: 0; transform: translateX(30px); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); } .reveal-x.is-visible { opacity: 1; transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-x { opacity: 1; transform: none; transition: none; } .mesh-pulse, .wa-fab-pulse { animation: none; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } .magnetic { transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); } /* ====== Performance: content-visibility nas secoes (browser pula render se fora da viewport) ====== */ section[id="servicos"], section[id="clientes"], section[id="contato"], footer { content-visibility: auto; contain-intrinsic-size: 1px 1000px; } ::selection { background: var(--accent); color: white; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--base-900); } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; border: 2px solid var(--base-900); } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 107, 26, 0.5); } /* ============================================ MAGEUI BANNER — God Mode animated layers Imagem base 1651x953 + camadas overlay com mix-blend-mode Todas GPU-friendly: translate3d + will-change ============================================ */ /* ── Screen-reader only (a11y + SEO) ── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── HERO FULL SCREEN: banner 2:1 + 5rem de header em cima ── */ .hero-fullscreen { position: relative; width: 100%; height: calc(50vw + 5rem); /* banner aspect 2:1 (50vw alt) + header 5rem em cima */ max-height: 100vh; max-height: 100svh; min-height: 500px; margin: 0; padding: 0; background: #000; overflow: hidden; } /* Mobile/tablet (<900px): aspect-ratio do container = aspect-ratio da imagem → imagem fica INTEIRA visível, sem letterbox, sem cortes laterais */ @media (max-width: 900px) { .hero-fullscreen { height: auto !important; min-height: 0 !important; } .banner-fullscreen { position: relative !important; inset: auto !important; height: auto !important; width: 100% !important; aspect-ratio: 4 / 5; /* mobile: 1080x1350 vertical */ } .banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain !important; /* mostra imagem INTEIRA, sem cortar */ object-position: center !important; background: #0a0a0a; animation: none !important; } /* Esconde efeitos pesados (sobrecarregam telas pequenas) */ .fx-floor-pulse-3, .fx-particle-7, .fx-particle-8, .fx-particle-9, .fx-particle-10, .fx-particle-11, .fx-particle-12, .fx-particle-13, .fx-grid-overlay, .fx-shimmer { display: none !important; } } .banner-fullscreen { position: absolute; top: 5rem; /* desce 5rem pra ficar ABAIXO do header */ right: 0; bottom: 0; left: 0; /* ocupa hero menos header → aspect 2:1 exato pra imagem 2400x1200 */ background: #000; isolation: isolate; overflow: hidden; } .banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; /* aspect do container = imagem (2:1) → não corta nada */ animation: banner-parallax 14s ease-in-out infinite; will-change: transform; } /* ── Video HLS Bunny Stream (desktop) ── */ .banner-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border: 0; display: block; background: #000; pointer-events: none; /* sem interação acidental */ } /* ── Imagem mobile (fallback estático) ── */ .banner-img-mobile { display: none; } /* No mobile: esconde video (economia de dados), mostra imagem estática */ @media (max-width: 900px) { .banner-video { display: none; } .banner-img-mobile { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0a0a0a; } } /* ── Hero CTA bar: barra abaixo do banner com CTAs distribuídos ── */ .hero-cta-bar { position: relative; padding: 2rem 0 2.5rem; background: linear-gradient(to bottom, rgba(255, 122, 26, 0.03), transparent), #0a0a0a; border-bottom: 1px solid rgba(255, 122, 26, 0.08); } .hero-cta-bar .btn-primary-lg, .hero-cta-bar .btn-ghost-lg { box-shadow: 0 8px 24px -8px rgba(255, 122, 26, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04); } /* ── Scroll hint (chevron animado) ── */ .scroll-hint { display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--ink-300); font-family: "Geist Mono", monospace; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.65rem; font-weight: 600; text-decoration: none; transition: color 200ms ease; cursor: pointer; } .scroll-hint:hover { color: var(--accent); } .scroll-hint-arrow { display: inline-flex; width: 30px; height: 30px; border: 1px solid rgba(255, 122, 26, 0.4); border-radius: 50%; align-items: center; justify-content: center; color: var(--accent); animation: scroll-hint-bounce 2s ease-in-out infinite; } @keyframes scroll-hint-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @keyframes banner-parallax { 0%, 100% { transform: scale(1.02) translate3d(0, 0, 0); } 50% { transform: scale(1.04) translate3d(-6px, -2px, 0); } } /* Base layer effect class */ .banner-frame .fx { position: absolute; pointer-events: none; mix-blend-mode: screen; will-change: transform, opacity; } /* ── Floor pulse: anéis elípticos expandindo da base do rack ── */ .fx-floor-pulse { /* canto direito-baixo do banner, onde está a base do rack na imagem */ left: 60%; top: 80%; width: 40%; height: 18%; border-radius: 50%; border: 2px solid #ffb066; filter: blur(1.5px); opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.3); animation: floor-pulse 4.8s linear infinite; } .fx-floor-pulse-1 { animation-delay: 0s; } .fx-floor-pulse-2 { animation-delay: 1.6s; } .fx-floor-pulse-3 { animation-delay: 3.2s; } @keyframes floor-pulse { 0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.2); } 20% { opacity: 0.55; } 100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(2.4); } } /* ── Rack glow: barra vertical pulsando levemente ── */ .fx-rack-glow { left: 64%; top: 32%; width: 30%; height: 56%; background: linear-gradient(to right, transparent 0%, rgba(255, 140, 40, 0.12) 50%, transparent 100%); filter: blur(12px); animation: rack-flicker 3.4s ease-in-out infinite; } @keyframes rack-flicker { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.95; } } /* ── Logo K halo: conic gradient girando no canto esquerdo-cima ── */ .fx-logo-halo { left: 5%; top: 11%; width: 8%; aspect-ratio: 1; background: conic-gradient(from 0deg, transparent 0deg, #ff7a1a 80deg, transparent 160deg, #ffb066 240deg, transparent 320deg); border-radius: 50%; filter: blur(8px); opacity: 0.55; animation: logo-halo-rotate 8s linear infinite; } @keyframes logo-halo-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Headline INTELIGENTE glow: pulsa sob a palavra laranja ── */ .fx-headline-glow { left: 4%; top: 38%; width: 35%; height: 10%; border-radius: 6px; box-shadow: inset 0 0 60px rgba(255, 122, 26, 0.45), 0 0 80px rgba(255, 122, 26, 0.25); animation: headline-glow 2.3s ease-in-out infinite; } @keyframes headline-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.85; } } /* ── Light streak: faixa diagonal cruza o banner periodicamente ── */ .fx-streak { top: 0; left: -20%; width: 25%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 180, 100, 0.5), transparent); transform: skewX(-15deg) translate3d(0, 0, 0); filter: blur(3px); opacity: 0; animation: streak-sweep 7s ease-in-out infinite; } @keyframes streak-sweep { 0%, 100% { opacity: 0; transform: skewX(-15deg) translate3d(0, 0, 0); } 10% { opacity: 0.6; } 50% { opacity: 0.7; transform: skewX(-15deg) translate3d(520%, 0, 0); } 60% { opacity: 0; } } /* ── Shimmer: brilho rápido em cima do headline ── */ .fx-shimmer { top: 28%; left: -10%; width: 15%; height: 22%; background: linear-gradient(90deg, transparent, rgba(255, 220, 170, 0.7), transparent); transform: skewX(-18deg) translate3d(0, 0, 0); filter: blur(4px); opacity: 0; mix-blend-mode: overlay !important; animation: shimmer-sweep 5s ease-in-out infinite; animation-delay: 2s; } @keyframes shimmer-sweep { 0%, 100% { opacity: 0; transform: skewX(-18deg) translate3d(0, 0, 0); } 20% { opacity: 0.85; } 60% { opacity: 0; transform: skewX(-18deg) translate3d(450%, 0, 0); } } /* ── Particles: 14 partículas pequenas flutuando da base pra cima ── */ .fx-particles { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; } .fx-particle { position: absolute; width: 4px; height: 4px; background: #ffb066; border-radius: 50%; box-shadow: 0 0 8px #ff7a1a; bottom: 0; opacity: 0; will-change: transform, opacity; animation: particle-rise 8s ease-out infinite; } @keyframes particle-rise { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.5); } 10% { opacity: 0.85; } 100% { opacity: 0; transform: translate3d(var(--px, 0px), -380px, 0) scale(1.2); } } /* Posições e timings escalonados das 14 partículas */ .fx-particle-0 { left: 63%; --px: 8px; animation-delay: 0s; } .fx-particle-1 { left: 67%; --px: -6px; animation-delay: 0.4s; } .fx-particle-2 { left: 71%; --px: 12px; animation-delay: 0.8s; } .fx-particle-3 { left: 75%; --px: -4px; animation-delay: 1.2s; } .fx-particle-4 { left: 79%; --px: 6px; animation-delay: 1.6s; } .fx-particle-5 { left: 83%; --px: -8px; animation-delay: 2.0s; } .fx-particle-6 { left: 87%; --px: 4px; animation-delay: 2.4s; } .fx-particle-7 { left: 91%; --px: -10px;animation-delay: 2.8s; } .fx-particle-8 { left: 65%; --px: 4px; animation-delay: 3.2s; } .fx-particle-9 { left: 69%; --px: -2px; animation-delay: 3.6s; } .fx-particle-10 { left: 73%; --px: 8px; animation-delay: 4.0s; } .fx-particle-11 { left: 77%; --px: -6px; animation-delay: 4.4s; } .fx-particle-12 { left: 81%; --px: 4px; animation-delay: 4.8s; } .fx-particle-13 { left: 85%; --px: -4px; animation-delay: 5.2s; } /* ── Services particles: variante ambiente, espalhada e lenta ── */ .services-particles { position: absolute; inset: 0; pointer-events: none; z-index: 5; /* acima dos cards */ overflow: hidden; mix-blend-mode: screen; } .services-particles > span { position: absolute; width: 3px; height: 3px; background: #ffb066; border-radius: 50%; box-shadow: 0 0 10px #ff7a1a, 0 0 4px #ffb066; bottom: -10px; opacity: 0; will-change: transform, opacity; animation: services-particle-rise var(--dur, 14s) ease-out infinite; } @keyframes services-particle-rise { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.4); } 8% { opacity: 0.8; } 35% { transform: translate3d(calc(var(--px, 0px) * 0.5), -280px, 0) scale(0.9); } 60% { transform: translate3d(calc(var(--px, 0px) * -0.7), -540px, 0) scale(1.05); } 90% { opacity: 0.8; } 100% { opacity: 0; transform: translate3d(var(--px, 0px), -900px, 0) scale(1.2); } } /* posições, drift horizontal e durações intencionalmente caóticos */ .services-particles > span:nth-child(1) { left: 3%; --px: 28px; --dur: 11s; animation-delay: 0s; } .services-particles > span:nth-child(2) { left: 11%; --px:-18px; --dur: 16s; animation-delay: 2.3s; } .services-particles > span:nth-child(3) { left: 17%; --px: 42px; --dur: 13s; animation-delay: 0.9s; } .services-particles > span:nth-child(4) { left: 22%; --px:-32px; --dur: 18s; animation-delay: 4.7s; } .services-particles > span:nth-child(5) { left: 28%; --px: 14px; --dur: 12s; animation-delay: 1.6s; } .services-particles > span:nth-child(6) { left: 31%; --px:-48px; --dur: 15s; animation-delay: 6.2s; } .services-particles > span:nth-child(7) { left: 36%; --px: 22px; --dur: 17s; animation-delay: 3.4s; } .services-particles > span:nth-child(8) { left: 42%; --px:-26px; --dur: 11.5s; animation-delay: 5.1s; } .services-particles > span:nth-child(9) { left: 47%; --px: 36px; --dur: 14.5s; animation-delay: 0.4s; } .services-particles > span:nth-child(10) { left: 52%; --px:-12px; --dur: 19s; animation-delay: 7.8s; } .services-particles > span:nth-child(11) { left: 56%; --px: 30px; --dur: 13.5s; animation-delay: 2.9s; } .services-particles > span:nth-child(12) { left: 61%; --px:-40px; --dur: 16.5s; animation-delay: 8.6s; } .services-particles > span:nth-child(13) { left: 67%; --px: 18px; --dur: 12.5s; animation-delay: 1.2s; } .services-particles > span:nth-child(14) { left: 72%; --px:-24px; --dur: 17.5s; animation-delay: 5.7s; } .services-particles > span:nth-child(15) { left: 76%; --px: 44px; --dur: 14s; animation-delay: 3.1s; } .services-particles > span:nth-child(16) { left: 81%; --px:-16px; --dur: 18.5s; animation-delay: 9.3s; } .services-particles > span:nth-child(17) { left: 86%; --px: 32px; --dur: 11s; animation-delay: 0.7s; } .services-particles > span:nth-child(18) { left: 91%; --px:-36px; --dur: 15.5s; animation-delay: 4.2s; } .services-particles > span:nth-child(19) { left: 94%; --px: 20px; --dur: 13s; animation-delay: 6.8s; } .services-particles > span:nth-child(20) { left: 98%; --px:-28px; --dur: 17s; animation-delay: 2.0s; } /* Garante z-index do conteúdo da seção acima das partículas (exclui o layer de partículas) */ section[id="servicos"] > div:not(.services-particles) { position: relative; z-index: 1; } /* Mobile: reduz partículas pra não pesar */ @media (max-width: 768px) { .services-particles > span:nth-child(n+11) { display: none; } } @media (prefers-reduced-motion: reduce) { .services-particles { display: none; } } /* ── Grid texture sobreposta (cyber feel sutil) ── */ .fx-grid-overlay { inset: 0; background-image: linear-gradient(to right, rgba(255, 122, 26, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 122, 26, 0.04) 1px, transparent 1px); background-size: 80px 80px; mix-blend-mode: overlay !important; opacity: 0.5; } /* ── Vinheta nas bordas (foca o olhar no centro) ── */ .fx-vignette { inset: 0; box-shadow: inset 0 0 120px 30px rgba(0, 0, 0, 0.45); mix-blend-mode: normal !important; pointer-events: none; } /* ── Mobile: reduzir/desligar efeitos pesados ── */ @media (max-width: 768px) { .fx-floor-pulse-3, .fx-particle-7, .fx-particle-8, .fx-particle-9, .fx-particle-10, .fx-particle-11, .fx-particle-12, .fx-particle-13 { display: none; } .banner-img { animation: none; } .fx-grid-overlay { display: none; } } /* ── Reduced motion: stop tudo ── */ @media (prefers-reduced-motion: reduce) { .banner-img, .banner-frame .fx, .fx-particle { animation: none !important; } .fx-logo-halo, .fx-rack-glow, .fx-headline-glow { opacity: 0.5; } .fx-floor-pulse, .fx-streak, .fx-shimmer, .fx-particle { opacity: 0; } } /* ====== Terminal cursor (hero accent) ====== */ .code-cursor::after { content: '_'; display: inline-block; margin-left: 4px; color: var(--accent); animation: blink 1.05s steps(2) infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }