/* ============================================================= SOPHOS — ULTRAMODERN LAYER Camada de aprimoramento visual: efeitos 3D, profundidade, aurora mesh, glass de alta densidade e micro-interações. Aditivo e não-destrutivo: só estende componentes existentes (product-card, testimonial-card-premium, about-feature, cta-final-benefit, etc). Respeita prefers-reduced-motion. Tokens reaproveitados de variables.css (--green, --s*, --t*). ============================================================= */ /* ---------------------------------------------------------------- 0. Variáveis locais da camada 3D ---------------------------------------------------------------- */ :root { --um-tilt-max: 7deg; /* inclinação máxima do tilt */ --um-lift: 18px; /* elevação Z no hover */ --um-glass-blur: 30px; --um-spot: rgba(29,185,84,.20); /* cor do cursor-spotlight */ --um-ease: cubic-bezier(.22,.61,.36,1); } /* ---------------------------------------------------------------- 1. AURORA MESH — fundo animado de profundidade Renderizado uma vez no , atrás de todo o conteúdo. ---------------------------------------------------------------- */ .um-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; /* fica atrás do conteúdo mas à frente do bg sólido do body */ } .um-aurora::before, .um-aurora::after { content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%; filter: blur(120px); opacity: .5; will-change: transform; } .um-aurora::before { top: -15%; left: -10%; background: radial-gradient(circle at 30% 30%, rgba(29,185,84,.38), transparent 60%); animation: um-drift-a 22s var(--um-ease) infinite alternate; } .um-aurora::after { bottom: -20%; right: -12%; background: radial-gradient(circle at 70% 70%, rgba(37,208,102,.28), rgba(45,94,187,.18) 55%, transparent 70%); animation: um-drift-b 28s var(--um-ease) infinite alternate; } .um-aurora .um-aurora-grain { position: absolute; inset: 0; /* grid sutil para sensação de "arquitetura" / blueprint */ background-image: linear-gradient(rgba(160,180,210,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(160,180,210,.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 35%, #000 30%, transparent 80%); } @keyframes um-drift-a { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(8vw,6vh,0) scale(1.18); } } @keyframes um-drift-b { 0% { transform: translate3d(0,0,0) scale(1.05); } 100% { transform: translate3d(-7vw,-5vh,0) scale(1.25); } } /* Garante que main e footer fiquem acima da aurora. NÃO incluir o header aqui: ele é position:fixed e trocar pra relative quebraria o fixed-top. O header já empilha acima por ser fixed + ter z-index próprio. */ body > main, body > footer { position: relative; z-index: 1; } /* ---------------------------------------------------------------- 2. SCROLL PROGRESS — barra fina no topo ---------------------------------------------------------------- */ .um-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(var(--um-scroll, 0)); transform-origin: 0 50%; background: linear-gradient(90deg, var(--green-deep), var(--green-hi)); box-shadow: 0 0 12px var(--green); z-index: 9999; pointer-events: none; } /* ---------------------------------------------------------------- 3. 3D TILT CARDS — perspectiva real reagindo ao mouse Aplicado via .um-3d (adicionado por JS aos cards-alvo). O wrapper recebe a perspectiva; o filho .um-3d-inner gira. ---------------------------------------------------------------- */ .um-3d { perspective: 1100px; transform-style: preserve-3d; } .um-3d-inner { transform: rotateX(var(--um-rx, 0deg)) rotateY(var(--um-ry, 0deg)) translateZ(0); transition: transform .4s var(--um-ease), box-shadow .4s var(--um-ease); transform-style: preserve-3d; will-change: transform; position: relative; } .um-3d:hover .um-3d-inner { box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(160,180,210,.10) inset, 0 0 50px -10px var(--green-glow); } /* Cursor spotlight — elemento que segue o mouse dentro do card */ .um-spot { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 340px circle at var(--um-mx, 50%) var(--um-my, 50%), var(--um-spot), transparent 65%); opacity: 0; transition: opacity .35s var(--um-ease); pointer-events: none; z-index: 2; mix-blend-mode: screen; } .um-3d:hover .um-spot { opacity: 1; } /* Camadas internas com profundidade parallax (ícones/títulos sobem em Z) */ .um-3d:hover .um-3d-inner .product-icon, .um-3d:hover .um-3d-inner .about-feature-icon, .um-3d:hover .um-3d-inner .cta-final-benefit-icon, .um-3d:hover .um-3d-inner .testimonial-avatar-wrapper { transform: translateZ(45px); } .um-3d-inner .product-icon, .um-3d-inner .about-feature-icon, .um-3d-inner .cta-final-benefit-icon, .um-3d-inner .testimonial-avatar-wrapper { transition: transform .4s var(--um-ease); transform-style: preserve-3d; } .um-3d:hover .um-3d-inner h3, .um-3d:hover .um-3d-inner .about-feature-title, .um-3d:hover .um-3d-inner .cta-final-benefit-title { transform: translateZ(28px); } .um-3d-inner h3, .um-3d-inner .about-feature-title, .um-3d-inner .cta-final-benefit-title { transition: transform .4s var(--um-ease); } /* ---------------------------------------------------------------- 4. GLASS UPGRADE — densidade e borda iridescente ---------------------------------------------------------------- */ .um-glass { backdrop-filter: blur(var(--um-glass-blur)) saturate(1.5); -webkit-backdrop-filter: blur(var(--um-glass-blur)) saturate(1.5); border: 1px solid rgba(160,180,210,.10); position: relative; } .um-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(37,208,102,.45), rgba(160,180,210,.06) 35%, transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .8; } /* ---------------------------------------------------------------- 5. SCROLL REVEAL com profundidade (.um-reveal) Entram do fundo (translateZ negativo simulado) + fade + blur. ---------------------------------------------------------------- */ .um-reveal { opacity: 0; transform: translateY(34px) scale(.97); filter: blur(6px); transition: opacity .9s var(--um-ease), transform .9s var(--um-ease), filter .9s var(--um-ease); transition-delay: var(--um-delay, 0ms); will-change: opacity, transform; } .um-reveal.um-in { opacity: 1; transform: none; filter: none; } /* ---------------------------------------------------------------- 6. HERO — parallax + brilho de profundidade ---------------------------------------------------------------- */ #hero { perspective: 1400px; overflow: hidden; } #hero img { transform: translate3d(0, var(--um-hero-y, 0), 0) scale(1.02); transition: transform .1s linear; will-change: transform; } /* Camada cinematográfica: vinheta + "melt" do fundo do hero pra preto (#000 = bg da #services) → costura invisível entre o hero e a próxima seção. Acima do globo (z2), abaixo das hotzones (z5). pointer-events:none mantém tudo clicável. */ #hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 62%, rgba(0,0,0,.6) 86%, #000 100%), radial-gradient(ellipse 72% 58% at 50% 44%, transparent 38%, rgba(0,0,0,.45) 100%); pointer-events: none; z-index: 3; } /* ---------------------------------------------------------------- 6b. HERO GLOBE — canvas da rede de partículas 3D (estilo HealBridge) Fica acima da imagem do hero (z1) e abaixo do overlay (.hero:before z2) não totalmente — usamos screen blend pra brilhar só nas áreas escuras. ---------------------------------------------------------------- */ .hero-globe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; /* acima da img, junto do overlay */ pointer-events: none; /* não bloqueia as hotzones do hero */ mix-blend-mode: screen; /* só clareia — integra com o dashboard */ opacity: .92; /* funde as bordas do canvas pra não criar um retângulo visível */ -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000 55%, transparent 100%); } @media (prefers-reduced-motion: reduce) { .hero-globe { opacity: .55; } } /* ---------------------------------------------------------------- 7. MAGNETIC CTA — botões primários com glow vivo ---------------------------------------------------------------- */ .product-btn-cta, .cta-final-btn-primary, .btn-submit-premium { position: relative; overflow: hidden; isolation: isolate; } .product-btn-cta::before, .cta-final-btn-primary::before, .btn-submit-premium::before { content: ""; position: absolute; top: 0; left: -120%; width: 80%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg); transition: left .65s var(--um-ease); z-index: -1; } .product-btn-cta:hover::before, .cta-final-btn-primary:hover::before, .btn-submit-premium:hover::before { left: 130%; } /* ---------------------------------------------------------------- 8. SECTION HEADINGS — gradient text vivo no / ---------------------------------------------------------------- */ .section-title h2 .hl, .hdg em { background: linear-gradient(100deg, var(--green-hi), #6ee7a0 40%, var(--green) 75%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------------------------------------------------------------- 9. Acessibilidade — reduz tudo se o usuário pediu ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .um-aurora::before, .um-aurora::after { animation: none; } .um-reveal { opacity: 1; transform: none; filter: none; transition: none; } .um-3d-inner, #hero img { transition: none !important; transform: none !important; } .um-3d-inner::after { display: none; } } /* Em telas pequenas o tilt é desligado por JS; aqui suavizamos o resto */ @media (max-width: 768px) { .um-aurora::before, .um-aurora::after { filter: blur(80px); opacity: .35; } }