/* ============================================================= SITE EXPRESS — v3 · refinamento mobile + motion Carregado DEPOIS de v3-styles.css. Contém: 1. reveal-on-scroll (utilitário .rv) 2. barra de progresso da seção de exemplos (.v3-show-rail) 3. mosaico do hero em telas estreitas 4. cartões empilhados que caibam inteiros na dobra 5. seção de exemplos reorganizada para caber em 100vh Referência mobile: Galaxy S23 — 360 × 676 px de área útil. ============================================================= */ /* ── 1. reveal-on-scroll ────────────────────────────────────── */ .rv{opacity:0;transform:translateY(18px);transition:opacity 620ms var(--se-ease-out),transform 620ms var(--se-ease-out)} .rv.rv-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.rv,.reveal{opacity:1!important;transform:none!important;transition:none!important}} /* ── 2. progresso da seção de exemplos ────────────────────────── O mesmo sinal que a seção "Como funciona" já dava: enquanto a tela parece parada, a barra mostra que o scroll está sendo lido. */ .v3-show-rail{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--se-max-w-wide);padding:84px 32px 0;z-index:6;pointer-events:none} .v3-show-rail-top{display:flex;align-items:baseline;gap:14px;margin-bottom:10px;font-family:var(--se-font-display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--se-fg-subtle)} .v3-show-rail-count{font-weight:600;color:var(--se-fg)} .v3-show-rail-label{color:var(--se-aqua-slate);font-weight:500} .v3-show-rail-hint{margin-left:auto;font-family:var(--se-font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--se-fg-faint);text-transform:none;white-space:nowrap} /* Uma barra só: o avanço é linear pelo scroll, e os cinco segmentos mostram em qual exemplo esse avanço está. Duas barras lado a lado diziam a mesma coisa duas vezes. */ .v3-show-rail-ticks{display:flex;gap:6px} .v3-show-rail-ticks span{position:relative;flex:1;height:3px;background:rgba(13,13,15,.09);border-radius:999px;overflow:hidden} .v3-show-rail-ticks span::after{content:"";position:absolute;inset:0;background:var(--se-aqua-slate);border-radius:999px;transform-origin:left center;transform:scaleX(var(--seg,0));transition:transform 60ms linear} /* ── 3. mosaico do hero ──────────────────────────────────────── As pastilhas passaram a ser posicionadas por classe (e não inline) para que a versão estreita possa reposicioná-las. */ .float-chip--a{top:4%;right:12%} .float-chip--b{bottom:12%;left:10%} @media (max-width:720px){ /* Em 360px o mosaico de quatro janelas com recuos negativos sai da caixa e corta os cartões. Aqui a composição vira três janelas em diagonal, todas inteiras dentro do palco. */ .hero-stage{height:clamp(300px,86vw,400px);perspective:1100px;perspective-origin:50% 50%;margin-top:6px} .hero-stage-inner{animation:stageFloatM 14s ease-in-out infinite} @keyframes stageFloatM{0%,100%{transform:rotateY(-4deg) rotateX(3deg) translateZ(0)}50%{transform:rotateY(-6deg) rotateX(4deg) translateZ(12px)}} .float-card--main{top:5%;left:0;width:82%;animation:bobMainM 8s ease-in-out infinite} .float-card--tl{top:0;right:0;width:40%;animation:bobTLM 9s ease-in-out infinite} .float-card--br{bottom:2%;right:5%;width:47%;animation:bobBRM 11s ease-in-out infinite} .float-card--bl{display:none} /* Menos deslocamento em Z: no palco estreito o aumento de escala da perspectiva empurrava as janelas para fora da caixa. */ @keyframes bobMainM{0%,100%{transform:translateY(0) translateZ(10px)}50%{transform:translateY(-8px) translateZ(10px)}} @keyframes bobTLM{0%,100%{transform:translateY(0) translateZ(30px)}50%{transform:translateY(7px) translateZ(30px)}} @keyframes bobBRM{0%,100%{transform:translateY(0) translateZ(44px)}50%{transform:translateY(-9px) translateZ(44px)}} .float-card{box-shadow:0 18px 36px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.06) inset} .float-chip{font-size:10px;padding:5px 9px} .float-chip--a{top:auto;bottom:30%;right:2%} .float-chip--b{bottom:0;left:0} /* O seletor de versão é ferramenta interna: no celular ele cobria o botão "Entrar" da barra. Vai para o rodapé da tela. */ .v-switcher{top:auto;bottom:14px;left:14px;opacity:.85} /* Cabeçalho: o