/* * VÉRTICE — camada de movimento. * * Depende dos tokens já definidos em cada tela (--accent âmbar). Onde a tela * não define, cai no âmbar do painel. Nada aqui altera layout: só estado * inicial, transformação e opacidade — para que a camada possa ser removida * sem quebrar a composição. * * Duas intensidades, escolhidas pelo : * [data-motion="cinematic"] — portal do cliente, página que rola * [data-motion="restrained"] — painéis de trabalho, viewport fixo */ :root { --vx-accent: #E8A33D; --vx-accent-rgb: 232, 163, 61; /* Ease exponencial: sai rápido, assenta devagar. Um só, para o conjunto ler como um sistema e não como efeitos avulsos. */ --vx-ease: cubic-bezier(0.16, 1, 0.3, 1); --vx-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --vx-fast: 240ms; --vx-base: 620ms; --vx-slow: 1100ms; } /* ─── Estado de revelação ──────────────────────────────────────────── * O padrão é VISÍVEL. A classe .vx-armed só é aplicada por JS depois de * confirmar que GSAP carregou — assim, se o CDN falhar ou o JS quebrar, * o conteúdo aparece normalmente em vez de ficar invisível para sempre. */ /* Com data-vx-stagger, o JS anima os FILHOS, não o próprio nó — então só o :not([data-vx-stagger]) esconde o nó em si. Sem essa ressalva, o pai fica com opacity:0 pra sempre (regra de CSS, clearProps não alcança) enquanto os filhos animam por baixo dele, e a seção inteira some da tela. */ .vx-armed [data-vx-reveal]:not([data-vx-stagger]) { opacity: 0; will-change: transform, opacity; } .vx-armed [data-vx-reveal="up"]:not([data-vx-stagger]) { transform: translate3d(0, 26px, 0); } .vx-armed [data-vx-reveal="down"]:not([data-vx-stagger]) { transform: translate3d(0, -20px, 0); } .vx-armed [data-vx-reveal="left"]:not([data-vx-stagger]) { transform: translate3d(-28px, 0, 0); } .vx-armed [data-vx-reveal="right"]:not([data-vx-stagger]) { transform: translate3d(28px, 0, 0); } .vx-armed [data-vx-reveal="scale"]:not([data-vx-stagger]) { transform: scale(0.96); } .vx-armed [data-vx-reveal="clip"]:not([data-vx-stagger]) { clip-path: inset(0 100% 0 0); opacity: 1; } /* Estado inicial dos FILHOS quando o pai usa stagger — mesmas magnitudes que setupReveals() usa em vertice-motion.js pro estado "from". */ .vx-armed [data-vx-reveal][data-vx-stagger] > * { opacity: 0; will-change: transform, opacity; } .vx-armed [data-vx-reveal="up"][data-vx-stagger] > * { transform: translate3d(0, 22px, 0); } .vx-armed [data-vx-reveal="down"][data-vx-stagger] > * { transform: translate3d(0, -18px, 0); } .vx-armed [data-vx-reveal="left"][data-vx-stagger] > * { transform: translate3d(-24px, 0, 0); } .vx-armed [data-vx-reveal="right"][data-vx-stagger] > * { transform: translate3d(24px, 0, 0); } .vx-armed [data-vx-reveal="scale"][data-vx-stagger] > * { transform: scale(0.96); } /* Depois que a timeline roda, o will-change sai do caminho: mantê-lo promove camadas de composição eternamente num painel de longa sessão. */ .vx-revealed { will-change: auto !important; } /* ─── Anéis HUD (herdado do site da agência) ─────────────────────── */ .hud-ring { transform-origin: 50% 50%; transform-box: fill-box; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes vxSpinCW { to { transform: rotate(360deg); } } @keyframes vxSpinCCW { to { transform: rotate(-360deg); } } .hud-ring.cw { animation-name: vxSpinCW; } .hud-ring.ccw { animation-name: vxSpinCCW; } @keyframes vxPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .mol-hex-fill, .mol-dot { animation: vxPulse 5s ease-in-out infinite; } .hud-core { animation: vxPulse 3.2s ease-in-out infinite; } @keyframes vxChevron { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } } .hud-chevron { animation: vxChevron 2.4s ease-in-out infinite; } /* ─── Ícones do pacote sci-fi ──────────────────────────────────── * Os SVGs usam fill="currentColor", então a cor vem do `color` do * contêiner — é assim que o mesmo ícone serve de âmbar no cabeçalho e * de cinza no rodapé, sem duplicar arquivo. */ .hud-ico { display: inline-block; line-height: 0; color: var(--vx-accent); vertical-align: middle; /* Trava obrigatória: vários SVGs do pacote são muito largos (rótulos, conectores). Com width:auto eles forçavam a largura do contêiner e estouravam a grade de KPIs para fora da tela. Decoração nunca pode participar do cálculo de largura do layout. */ max-width: 100%; flex-shrink: 0; } .hud-ico > svg { display: block; width: 100%; height: 100%; fill: currentColor; } /* Faixa de ícones do cabeçalho de seção. */ .hud-rail { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; /* quebrar aqui empurra o cabeçalho para duas linhas */ overflow: hidden; min-width: 0; } .hud-rail .hud-ico { height: 16px; width: auto; color: var(--vx-accent); opacity: .85; flex-shrink: 0; } .hud-rail .hud-ico > svg { width: auto; } /* Selo técnico: ícone do pacote dentro de caixa fina, do jeito que a folha de referência usa os rótulos (CAUTION / LEVEL 04 / MODEL). */ .hud-tag { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(var(--vx-accent-rgb), .35); padding: 3px 8px; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } .hud-tag .hud-ico { height: 11px; width: auto; } .hud-tag .hud-ico > svg { width: auto; } /* Cantoneira decorativa em painel — ícone real do pacote (154). */ .hud-corner { position: absolute; width: 18px; height: 18px; pointer-events: none; color: var(--vx-accent); opacity: .45; z-index: 1; } .hud-corner.tr { top: 3px; right: 3px; } .hud-corner.bl { bottom: 3px; left: 3px; transform: rotate(180deg); } /* Marcador antes do título de seção — substitui visualmente a barrinha âmbar genérica pelo desenho do pacote. */ .hud-pt-ico { height: 15px; width: 17px; /* largura fixa: o marcador não pode empurrar o título */ overflow: hidden; color: var(--vx-accent); margin-right: 4px; } .hud-pt-ico > svg { width: 100%; height: 100%; } /* A barra retangular original sai de cena onde o ícone entrou. */ .pt[data-hud-deco]::before, .section-bar[data-hud-deco]::before { display: none; } /* Dial de fundo do terminal: marca d'água central, atrás do texto. */ .hud-term-dial { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 230px; height: 230px; pointer-events: none; opacity: .17; z-index: 0; } .hud-term-dial > svg { width: 100%; height: 100%; overflow: visible; } /* O conteúdo do terminal precisa ficar por cima da marca d'água. */ .term > *:not(.hud-term-dial), #agChat > *:not(.hud-term-dial) { position: relative; z-index: 1; } /* Ícones da barra lateral. */ .hud-sb-ico { width: 26px; height: 14px; color: var(--vx-accent); opacity: .5; flex-shrink: 0; margin-bottom: 6px; } .hud-sb-ico > svg { width: 100%; height: 100%; } .hud-sb-foot { margin-top: auto; margin-bottom: 2px; height: 26px; opacity: .28; } /* Faixa de dados acima das tabelas. */ .hud-strip { display: flex; align-items: center; gap: 10px; height: 12px; margin-bottom: 6px; opacity: .4; overflow: hidden; } .hud-strip .hud-ico { height: 11px; width: auto; color: var(--vx-accent); flex-shrink: 0; } .hud-strip .hud-ico > svg { width: auto; } /* ─── Camadas de parallax ────────────────────────────────────────── */ .vx-layer { position: fixed; pointer-events: none; z-index: 1; opacity: 0.5; } .vx-layer svg { display: block; width: 100%; height: 100%; overflow: visible; } /* Profundidade declarada no HTML via data-vx-depth; o JS lê o número. Aqui só a escala de opacidade que acompanha a distância. */ .vx-layer[data-vx-depth="1"] { opacity: 0.34; } .vx-layer[data-vx-depth="2"] { opacity: 0.24; } .vx-layer[data-vx-depth="3"] { opacity: 0.16; } /* ─── Grade hexagonal de fundo ───────────────────────────────────── */ .vx-hex-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='97' viewBox='0 0 84 97'%3E%3Cpolygon points='42,4 76,24 76,64 42,84 8,64 8,24' fill='none' stroke='%23E8A33D' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E"); background-size: 84px 97px; } /* A linha de varredura foi removida a pedido: atravessava a tela o tempo todo e incomodava durante o uso. Não reintroduzir. */ /* ─── Brilho de varredura em painel (hover) ──────────────────────── */ .vx-sweep { position: relative; overflow: hidden; } .vx-sweep::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(var(--vx-accent-rgb), 0.13) 50%, transparent 62%); transform: translateX(-120%); transition: transform 900ms var(--vx-ease); } .vx-sweep:hover::after, .vx-sweep:focus-within::after { transform: translateX(120%); } /* ─── Contadores ───────────────────────────────────────────────── * Tabular para o número não "dançar" enquanto conta. Sem isso, cada * dígito muda de largura e o valor treme — o defeito clássico de * contador animado. */ [data-vx-count] { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* ─── Draw-on de SVG ─────────────────────────────────────────────── */ .vx-armed svg .draw { opacity: 0; } /* ─── Cintilação de status ───────────────────────────────────────── */ @keyframes vxBlip { 0%, 100% { opacity: 1; box-shadow: 0 0 4px currentColor; } 50% { opacity: 0.45; box-shadow: 0 0 12px currentColor; } } .vx-blip { animation: vxBlip 2.6s ease-in-out infinite; } /* ─── Intensidade cinemática (portal do cliente) ─────────────────── */ /* Mesma razão do modo contido: são contornos preenchidos, então mesmo no portal do cliente eles entram baixos — senão viram mancha sólida em vez de leitura de instrumento. */ [data-motion="cinematic"] .vx-layer { opacity: 0.26; } [data-motion="cinematic"] .vx-layer[data-vx-depth="1"] { opacity: 0.2; } [data-motion="cinematic"] .vx-layer[data-vx-depth="2"] { opacity: 0.16; } [data-motion="cinematic"] .vx-layer[data-vx-depth="3"] { opacity: 0.13; } /* ─── Intensidade contida (painéis de trabalho) ────────────────── * O painel é lido o dia inteiro: movimento de fundo compete com dado. * Aqui as camadas ficam mais apagadas e os anéis giram bem mais devagar. */ /* Os ícones do pacote são contornos PREENCHIDOS, não linha fina: em tamanho grande viram mancha sólida. No fundo eles entram baixos e pequenos — a presença visível do pacote fica na faixa do cabeçalho e nos selos, onde o desenho é legível. */ [data-motion="restrained"] .vx-layer { opacity: 0.16; } [data-motion="restrained"] .vx-layer[data-vx-depth="1"] { opacity: 0.14; } [data-motion="restrained"] .vx-layer[data-vx-depth="2"] { opacity: 0.11; } [data-motion="restrained"] .vx-layer[data-vx-depth="3"] { opacity: 0.09; } /* ─── Telas estreitas ──────────────────────────────────────────── * As camadas são posicionadas para fora da margem de propósito (é o que * dá a sensação de recorte), mas num viewport estreito isso vira scroll * horizontal. Decoração não justifica rolagem lateral: some abaixo de * 860px, onde também não haveria espaço morto para ela ocupar. */ @media (max-width: 860px) { .vx-layer { display: none; } } /* ─── Redução de movimento ─────────────────────────────────────── * Desliga movimento contínuo e neutraliza os estados iniciais, para * que nada dependa de uma animação que não vai rodar. */ @media (prefers-reduced-motion: reduce) { .hud-ring.cw, .hud-ring.ccw, .mol-hex-fill, .mol-dot, .hud-core, .hud-chevron, .vx-blip { animation: none !important; } .vx-armed [data-vx-reveal], .vx-armed [data-vx-reveal][data-vx-stagger] > *, .vx-armed svg .draw { opacity: 1 !important; transform: none !important; clip-path: none !important; } .vx-sweep::after { display: none; } .vx-layer { display: none; } [data-vx-count] { transition: none !important; } }