/* ============================================================ MABUS LIGHT — AURORA EFFECTS PREMIUM ============================================================ Efeitos avançados scoped em [data-theme="mabus-light"]: 1. Liquid Mercury Hover — specular highlight segue cursor 2. Iridescent Shimmer — linha de luz varre o card no hover 3. Conic Halo Border — gradient cônico rotacionando (60s) 4. Ink Press Headers — relevo em papel premium 5. Frosting Subtle — micro-grain texture nos glass Funciona em conjunto com theme-light-cursor.js que atualiza as CSS vars --mx/--my conforme o mouse se move sobre cards. Performance: tudo CSS puro, transforms + filters em GPU. Respeita prefers-reduced-motion. ============================================================ */ /* ============================================================ 1. LIQUID MERCURY HOVER — specular highlight segue cursor ------------------------------------------------------------ Cada card ganha um pseudo-element ::before com radial-gradient 200px posicionado em (--mx, --my) — coordenadas que o theme-light-cursor.js atualiza conforme o mouse move dentro do card. Opacity 0 default → 1 no hover (fade 300ms). Sensação: luz "vinda da janela" que ilumina exatamente onde o usuário está olhando. Apple Vision Pro materials vibes. ============================================================ */ [data-theme="mabus-light"] .glass-card, [data-theme="mabus-light"] .glass-panel:not(header):not(.navbar), [data-theme="mabus-light"] .jv-metric, [data-theme="mabus-light"] .jv-tool, [data-theme="mabus-light"] .jv-invest-card, [data-theme="mabus-light"] .jv-help-card, [data-theme="mabus-light"] .jv-cal, [data-theme="mabus-light"] .jv-mini-tl, [data-theme="mabus-light"] .lic-card, [data-theme="mabus-light"] .card, [data-theme="mabus-light"] .auth-card, [data-theme="mabus-light"] .stat-card { position: relative; overflow: hidden; --mx: 50%; --my: 50%; } [data-theme="mabus-light"] .glass-card::before, [data-theme="mabus-light"] .glass-panel:not(header):not(.navbar)::before, [data-theme="mabus-light"] .jv-metric::before, [data-theme="mabus-light"] .jv-tool::before, [data-theme="mabus-light"] .jv-invest-card::before, [data-theme="mabus-light"] .jv-help-card::before, [data-theme="mabus-light"] .jv-cal::before, [data-theme="mabus-light"] .jv-mini-tl::before, [data-theme="mabus-light"] .lic-card::before, [data-theme="mabus-light"] .card::before, [data-theme="mabus-light"] .auth-card::before, [data-theme="mabus-light"] .stat-card::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: radial-gradient( circle 220px at var(--mx) var(--my), rgba(232, 240, 254, 0.65), rgba(207, 226, 255, 0.22) 40%, transparent 70% ); transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="mabus-light"] .glass-card:hover::before, [data-theme="mabus-light"] .glass-panel:not(header):not(.navbar):hover::before, [data-theme="mabus-light"] .jv-metric:hover::before, [data-theme="mabus-light"] .jv-tool:hover::before, [data-theme="mabus-light"] .jv-invest-card:hover::before, [data-theme="mabus-light"] .jv-help-card:hover::before, [data-theme="mabus-light"] .jv-cal:hover::before, [data-theme="mabus-light"] .jv-mini-tl:hover::before, [data-theme="mabus-light"] .lic-card:hover::before, [data-theme="mabus-light"] .card:hover::before, [data-theme="mabus-light"] .auth-card:hover::before, [data-theme="mabus-light"] .stat-card:hover::before { opacity: 1; } /* Conteúdo dos cards sempre acima dos pseudo-elements */ [data-theme="mabus-light"] .glass-card > *, [data-theme="mabus-light"] .jv-metric > *, [data-theme="mabus-light"] .jv-tool > *, [data-theme="mabus-light"] .jv-invest-card > *, [data-theme="mabus-light"] .jv-help-card > *, [data-theme="mabus-light"] .jv-cal > *, [data-theme="mabus-light"] .jv-mini-tl > *, [data-theme="mabus-light"] .lic-card > *, [data-theme="mabus-light"] .auth-card > *, [data-theme="mabus-light"] .stat-card > * { position: relative; z-index: 1; } /* ============================================================ 2. IRIDESCENT SHIMMER — linha de luz varre o card no hover ------------------------------------------------------------ Pseudo-element ::after com gradient linear translucent, posicionado fora da view à esquerda (left: -100%). Hover anima pra direita atravessando o card em 700ms — efeito de reflexo de luz em material polido (porcelana, vidro fosco). ============================================================ */ [data-theme="mabus-light"] .glass-card::after, [data-theme="mabus-light"] .jv-metric::after, [data-theme="mabus-light"] .jv-tool::after, [data-theme="mabus-light"] .jv-invest-card::after, [data-theme="mabus-light"] .lic-card::after { content: ''; position: absolute; top: 0; left: -120%; width: 80%; height: 100%; z-index: 2; pointer-events: none; background: linear-gradient( 115deg, transparent 30%, rgba(232, 240, 254, 0.55) 50%, transparent 70% ); transition: left 750ms cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="mabus-light"] .glass-card:hover::after, [data-theme="mabus-light"] .jv-metric:hover::after, [data-theme="mabus-light"] .jv-tool:hover::after, [data-theme="mabus-light"] .jv-invest-card:hover::after, [data-theme="mabus-light"] .lic-card:hover::after { left: 120%; } /* ============================================================ 3. INK PRESS HEADERS — relevo em papel premium ------------------------------------------------------------ Text-shadow stack que simula relevo de letras impressas em papel pergaminho premium: - white inset (topo) = luz refletindo no relevo elevado - warm shadow (bottom) = sombra do relevo Aplica nos headers principais. Headers menores ficam normais. ============================================================ */ [data-theme="mabus-light"] h1:not(.no-emboss), [data-theme="mabus-light"] .jv-greet h1, [data-theme="mabus-light"] .auth-card h1, [data-theme="mabus-light"] .mwt-welcome-modal-title, [data-theme="mabus-light"] .jv-section-title, [data-theme="mabus-light"] .sb-header h1 { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 -1px 1px rgba(20, 30, 50, 0.12); } /* ============================================================ 4. CHAMPAGNE HALO — glow iridescente no hover ------------------------------------------------------------ Cards principais ganham halo dourado-champagne sutil expandido ao redor quando hover. Dual shadow: champagne (próximo) + azul-petróleo (longe) cria iridescência sem precisar de conic-gradient (que tem quirks de compat). ============================================================ */ [data-theme="mabus-light"] .lic-card, [data-theme="mabus-light"] .jv-invest-card, [data-theme="mabus-light"] .auth-card, [data-theme="mabus-light"] .jv-metric { transition: box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1), transform 350ms cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="mabus-light"] .lic-card:hover, [data-theme="mabus-light"] .jv-invest-card:hover, [data-theme="mabus-light"] .auth-card:hover, [data-theme="mabus-light"] .jv-metric:hover { transform: translateY(-3px); box-shadow: var(--mb-shadow-md), 0 0 20px color-mix(in oklch, var(--mb-accent) 22%, transparent), 0 0 56px color-mix(in oklch, var(--mb-primary) 10%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 40px var(--mb-glow-inner); } @media (prefers-reduced-motion: reduce) { [data-theme="mabus-light"] .lic-card:hover, [data-theme="mabus-light"] .jv-invest-card:hover, [data-theme="mabus-light"] .auth-card:hover, [data-theme="mabus-light"] .jv-metric:hover { transform: none; } } /* ============================================================ 5. FROSTING NOISE SUTIL — micro-grain dentro do glass ------------------------------------------------------------ SVG noise pattern via data-URI com opacity 2% aplicado como background-image nos glass surfaces. Mix-blend-mode normal pra não interferir com cores. Subliminal — dá tactilidade de papel/canvas real ao olho sem ser percebido conscientemente. NÃO usa ::after (que causaria conflito com Liquid Mercury). Usa background multi-layer em vez disso. ============================================================ */ [data-theme="mabus-light"] .glass-card, [data-theme="mabus-light"] .jv-metric, [data-theme="mabus-light"] .jv-cal, [data-theme="mabus-light"] .jv-mini-tl, [data-theme="mabus-light"] .lic-card, [data-theme="mabus-light"] .card { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.46 0 0 0 0 0.52 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--mb-surface-glass), var(--mb-surface-glass)); background-size: 256px 256px, 100% 100%; background-blend-mode: overlay, normal; } [data-theme="mabus-light"] .glass-card:hover, [data-theme="mabus-light"] .jv-metric:hover, [data-theme="mabus-light"] .lic-card:hover, [data-theme="mabus-light"] .card:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.46 0 0 0 0 0.52 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--mb-surface-elevated), var(--mb-surface-elevated)); background-size: 256px 256px, 100% 100%; background-blend-mode: overlay, normal; } /* ============================================================ 6. INNER GLOW PULSE — cards principais "respiram" muito sutil. Animação 8s linear, scale 1 → 1.002 (imperceptível conscientemente, sentido pelo olho). DESABILITADO por padrão — opt-in via classe .pulse-breathe ============================================================ */ @keyframes mabusBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.003); } } [data-theme="mabus-light"] .pulse-breathe { animation: mabusBreathe 8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { [data-theme="mabus-light"] .pulse-breathe { animation: none; } }