/* ========================================================================== growthway_ FX — cluster ASSINATURA-FINAL (onda 2, módulo isolado) 1 · growthway_ se monta — cena de assinatura antes do footer: partículas de bronze convergem no wordmark; o underscore chega por último e pisca como cursor de terminal (canvas 2D, decorativo). 2 · Condensação — o dock embaça na rolagem rápida (blur 18→44px + gotículas de bafo) e um rodo de luz o limpa ao parar. Regras de compliance/robustez: — A cena .gw-assinatura funciona 100% sem JS: o

real fica visível com o cursor piscando em CSS. Tudo que depende de JS vive atrás de html.gw-fx-af (classe adicionada por assets/fx/assinatura-final.js) ou da classe .gw-af-live (adicionada só após o 1º frame do canvas). — Nada aqui cobre .topbar nem .footer-legal. ========================================================================== */ /* ============================================================ 1 · Cena da assinatura (HTML adicionável antes do footer) ============================================================ */ .gw-assinatura { min-height: clamp(24rem, 62vh, 36rem); text-align: center; } .gw-assinatura .container { position: relative; z-index: 2; } .gw-assinatura-mark { font-family: var(--font-mono); font-weight: 600; font-size: clamp(2.6rem, 8.5vw, 6.5rem); letter-spacing: -0.045em; line-height: 1.12; white-space: nowrap; color: var(--on-dark); max-width: none; } .gw-assinatura-sub { margin: 1.1rem auto 0; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent); max-width: none; } /* o cursor da assinatura pisca mesmo sem canvas (fallback digno, CSS puro) */ .gw-assinatura-mark .brand-cursor { animation: gwAfBlink 1.1s steps(1) infinite; } @keyframes gwAfBlink { 50% { opacity: 0; } } /* canvas decorativo das partículas: camada da cena, nunca sobre o texto do .container (z2) — e a cena não tem .scene-legal para disputar */ .gw-af-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* com o canvas vivo o h2 real cede o palco — permanece no DOM (leitores de tela e SEO intactos), só a tinta some */ .gw-assinatura.gw-af-live .gw-assinatura-mark { opacity: 0; } /* ============================================================ 2 · Condensação no dock O backdrop do vidro é parametrizado por --gwfog (0→1, unitless): blur 18→44px, saturação 180%→110%, leve clareada — bafo em vidro. Não conflita com o vidro-vivo: ele anima os ATRIBUTOS do filtro SVG #liquidGlass; aqui só a propriedade CSS ganha variáveis. ============================================================ */ html.gw-fx-af .liquid-dock { -webkit-backdrop-filter: blur(calc(18px + var(--gwfog, 0) * 26px)) saturate(calc(180% - var(--gwfog, 0) * 70%)); backdrop-filter: url(#liquidGlass) blur(calc(18px + var(--gwfog, 0) * 26px)) saturate(calc(180% - var(--gwfog, 0) * 70%)) brightness(calc(1 + var(--gwfog, 0) * 0.05)); } /* gotículas de condensação: ruído SVG recortado em salpicos (feColorMatrix com alfa 14/-9) + véu leitoso; some da esquerda p/ direita via --gwwipe */ html.gw-fx-af .gw-af-fog { position: absolute; inset: 0; z-index: 1; /* acima do vidro, abaixo dos links (z10) — texto sempre legível */ border-radius: inherit; overflow: hidden; pointer-events: none; opacity: calc(var(--gwcond, 0) * 0.65); background-color: rgba(246, 248, 251, 0.38); background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 80px; -webkit-mask-image: linear-gradient(105deg, rgba(0, 0, 0, 0) calc(var(--gwwipe, 0) * 170% - 45%), #000 calc(var(--gwwipe, 0) * 170%)); mask-image: linear-gradient(105deg, rgba(0, 0, 0, 0) calc(var(--gwwipe, 0) * 170% - 45%), #000 calc(var(--gwwipe, 0) * 170%)); } /* o rodo: lâmina diagonal de luz que atravessa o dock ao desembaçar */ html.gw-fx-af .gw-af-rodo { position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: 0; } html.gw-fx-af .gw-af-rodo i { display: block; position: absolute; top: -30%; bottom: -30%; left: 0; width: 34%; transform: skewX(-14deg); /* núcleo de luz quente + fio escuro atrás: a borracha do rodo. sem blend mode — precisa ler tanto no dock claro quanto sobre cenas escuras */ background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.34) 38%, rgba(255, 247, 238, 0.85) 50%, rgba(64, 54, 46, 0.1) 58%, rgba(255, 255, 255, 0) 100%); } /* ============================================================ Guard-rails ============================================================ */ /* mobile: o pesado desliga — wordmark HTML limpo, dock com vidro de fábrica */ @media (max-width: 940px) { .gw-af-canvas { display: none; } .gw-assinatura.gw-af-live .gw-assinatura-mark { opacity: 1; } html.gw-fx-af .gw-af-fog, html.gw-fx-af .gw-af-rodo { display: none; } html.gw-fx-af .liquid-dock { -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: url(#liquidGlass) blur(18px) saturate(180%); } } /* reduced motion: nem blink, nem partículas, nem condensação (o JS já retorna cedo; isto cobre a preferência mudando em sessão) */ @media (prefers-reduced-motion: reduce) { .gw-assinatura-mark .brand-cursor { animation: none; } .gw-af-canvas { display: none; } .gw-assinatura.gw-af-live .gw-assinatura-mark { opacity: 1; } html.gw-fx-af .gw-af-fog, html.gw-fx-af .gw-af-rodo { display: none; } html.gw-fx-af .liquid-dock { -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: url(#liquidGlass) blur(18px) saturate(180%); } } /* reduced transparency: styles.css zera o backdrop do dock — a override parametrizada acima venceria por especificidade, então re-zera aqui */ @media (prefers-reduced-transparency: reduce) { html.gw-fx-af .liquid-dock { -webkit-backdrop-filter: none; backdrop-filter: none; } html.gw-fx-af .gw-af-fog, html.gw-fx-af .gw-af-rodo { display: none; } } /* sem backdrop-filter não há vidro para embaçar */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html.gw-fx-af .gw-af-fog, html.gw-fx-af .gw-af-rodo { display: none; } }