/* ===================================================================== UHOST — CAMADA DE MOVIMENTO (uh-motion) Referências do Henrique: JoyJam (Outcrowd) e nubank.com.br. O que falta na UHOST não é cor nova — a marca já é dark + dourado — é MOVIMENTO COREOGRAFADO e PROFUNDIDADE EM CAMADAS. Regras que a camada respeita: · só anima `transform`, `opacity` e `filter` (nada de layout); · `prefers-reduced-motion` desliga tudo, sem quebrar leitura; · nada some sem JS: os estados escondidos só valem sob `html.mo`, classe que o próprio uh-motion.js põe. Sem JS, a página é a de antes; · não toca no ``, no menu nem no rodapé — território do CMS. Par: assets/js/uh-motion.js. Ligada por página via $UH_MOTION. ===================================================================== */ /* ── 1) barra de progresso do scroll ─────────────────────────────────── */ .mo-prog{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:200; background:linear-gradient(90deg, var(--uh-gold), var(--uh-gold-hover)); transform:scaleX(0); transform-origin:0 50%; pointer-events:none; will-change:transform; } /* ── 2) título que entra palavra por palavra ─────────────────────────── */ /* a palavra é uma janela (overflow hidden) e o sobe de dentro dela */ .mo-w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.06em; margin-bottom:-.06em; } html.mo .mo-w > i{ display:inline-block; font-style:inherit; transform:translateY(105%); opacity:0; transition:transform .72s cubic-bezier(.22,1,.36,1), opacity .5s linear; } html.mo .mo-t.on .mo-w > i{ transform:translateY(0); opacity:1; } /* ── 3) reveal com mais presença que o fade de 20px ──────────────────── */ html.mo .rv{ opacity:0; transform:translateY(26px) scale(.985); transition:opacity .62s var(--ease-out), transform .78s cubic-bezier(.22,1,.36,1); } html.mo .rv.on{ opacity:1; transform:none; } /* ── 4) profundidade no hover: a luz segue o ponteiro ────────────────── */ /* --mx/--my chegam do JS em %. O brilho é o dourado da marca a 10%. */ .uh-card, .uh-post, .uh-feature{ position:relative; isolation:isolate; } html.mo .uh-card::after, html.mo .uh-post::after, html.mo .uh-feature::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(250,198,67,.10), transparent 62%); opacity:0; transition:opacity .35s var(--ease-out); pointer-events:none; } html.mo .uh-card:hover::after, html.mo .uh-post:hover::after, html.mo .uh-feature:hover::after{ opacity:1; } html.mo .uh-card, html.mo .uh-post, html.mo .uh-feature{ transition:transform .4s cubic-bezier(.22,1,.36,1), border-color .35s var(--ease-out), box-shadow .4s var(--ease-out); } html.mo .uh-card:hover, html.mo .uh-post:hover, html.mo .uh-feature:hover{ transform:translateY(-5px); border-color:color-mix(in srgb, var(--uh-gold) 42%, var(--border-card)); } html[data-tema="claro"].mo .uh-card::after, html[data-tema="claro"].mo .uh-post::after, html[data-tema="claro"].mo .uh-feature::after{ background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(227,168,28,.16), transparent 62%); } /* ── 5) parallax leve (o JS escreve --par-y em px) ───────────────────── */ /* 🚨 `translate:` e não `transform:` de propósito. As duas COMPÕEM, e os elementos com parallax já usam transform para outra coisa: o mock do hero é `.rv` (que zera o transform ao revelar) e tem a flutuação `uh-floaty`; os orbes respiram no `mo-orb`. Com `transform` o parallax perderia a disputa de especificidade contra `.rv.on{transform:none}` e ficaria mudo. */ html.mo [data-par]{ will-change:translate; translate:0 var(--par-y, 0px); } /* ── 6) hero: varredura de luz dourada, uma vez, ao carregar ─────────── */ html.mo .uh-hero{ position:relative; overflow:hidden; } html.mo .uh-hero::before{ content:""; position:absolute; top:-40%; left:-60%; width:55%; height:190%; z-index:0; pointer-events:none; background:linear-gradient(100deg, transparent, rgba(250,198,67,.13) 45%, transparent); transform:translateX(-30%) rotate(8deg); filter:blur(28px); animation:mo-sweep 2.6s cubic-bezier(.22,1,.36,1) .35s both; } @keyframes mo-sweep{ from{ transform:translateX(-30%) rotate(8deg); opacity:0; } 35%{ opacity:1; } to { transform:translateX(320%) rotate(8deg); opacity:0; } } /* os orbes do hero passam a respirar devagar, em vez de ficarem parados */ html.mo .uh-orb{ animation:mo-orb 22s ease-in-out infinite alternate; will-change:transform; } html.mo .uh-orb--b{ animation-duration:29s; animation-direction:alternate-reverse; } @keyframes mo-orb{ from{ transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(3%,-4%,0) scale(1.09); } } /* ── 7) troca de página: a saída é do site, a entrada é do navegador ─── */ html.mo body{ animation:mo-in .42s var(--ease-out) both; } @keyframes mo-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } html.mo.mo-out body{ opacity:0; transform:translateY(-8px); transition:opacity .2s linear, transform .2s var(--ease-out); animation:none; } /* ── 8) CTA dourado com brilho que atravessa no hover ────────────────── */ html.mo .uh-btn--ouro, html.mo .uh-cta--primaria{ position:relative; overflow:hidden; } html.mo .uh-btn--ouro::after, html.mo .uh-cta--primaria::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-18deg); pointer-events:none; } html.mo .uh-btn--ouro:hover::after, html.mo .uh-cta--primaria:hover::after{ animation:mo-brilho .75s var(--ease-out); } @keyframes mo-brilho{ to{ left:130%; } } /* ── 9) desligar tudo quando o sistema pede menos movimento ──────────── */ @media (prefers-reduced-motion:reduce){ html.mo .rv{ opacity:1; transform:none; transition:none; } html.mo .mo-w > i{ transform:none; opacity:1; transition:none; } html.mo .uh-hero::before, html.mo .uh-orb{ animation:none; } html.mo body{ animation:none; } html.mo [data-par]{ translate:none; } .mo-prog{ display:none; } html.mo .uh-btn--ouro::after, html.mo .uh-cta--primaria::after{ display:none; } }