/* ===== TapeDrill — camada de movimento (v1, ago 2026) ===== Copiar pro repositório como assets/motion.css e carregar depois do tokens.css nas 3 páginas do site + login/ + inicio/. Pareado com assets/motion.js, que só adiciona classes de estado. Princípio: o movimento é percebido, nunca exibido. Nada acima de 700ms, nada que atrase leitura, tudo cancelado em prefers-reduced-motion. No simulador NÃO entra revelação nem movimento autônomo — só hover e foco. */ :root{ --ease-out:cubic-bezier(.22,.61,.36,1); --dur-fast:.2s; --dur:.32s; --dur-slow:.62s; --dur-reveal:.7s; } /* ---------- revelação ao rolar ---------- */ /* O JS marca — sem JS nada fica escondido. */ .js-motion [data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); } .js-motion [data-reveal].is-in{ opacity:1; transform:none; } /* stagger declarado no HTML: data-reveal="80" = 80ms de atraso */ [data-reveal="60"]{ transition-delay:60ms; } [data-reveal="80"]{ transition-delay:80ms; } [data-reveal="140"]{ transition-delay:140ms; } /* ---------- filetes que se desenham ---------- */ .js-motion [data-rule]{ transform:scaleX(0); transform-origin:left center; transition:transform var(--dur-slow) var(--ease-out); } .js-motion [data-rule].is-in{ transform:scaleX(1); } /* ---------- nav que condensa ---------- */ .nav{ transition:padding var(--dur) var(--ease-out), background-color var(--dur) ease, border-color var(--dur) ease; } .nav .nav-brand span{ transition:font-size var(--dur) var(--ease-out); } .nav.is-dense{ padding-block:10px; background:#06080CF7; border-bottom-color:var(--line); } .nav.is-dense .nav-brand span{ font-size:16.5px; } /* ---------- hover maquinado nos cards ---------- */ .card, .scenario, .prod-card, .dif-card{ transition:border-color var(--dur-fast) ease, transform var(--dur) var(--ease-out), background-color var(--dur-fast) ease; } .card:hover, .scenario:hover, .prod-card:hover, .dif-card:hover{ border-color:var(--gold); transform:translateY(-1px); background:#131822; } /* linha de tabela e princípios: só o ground acende, sem deslocar */ .table tbody tr, .principle{ transition:background-color .18s ease; } .table tbody tr:hover, .principle:hover{ background:#131822; } /* ---------- foco de teclado ---------- */ /* Vale pro simulador também: é o único estado que ele ganha além do hover. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; } .input:focus, input:focus{ border-color:var(--gold); background:#1A2130; } /* ---------- blobs de glow ambiente (hero, CTA band) ---------- */ @keyframes blobDrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,-18px) scale(1.07)}100%{transform:translate(0,0) scale(1)}} @keyframes blobDrift2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-22px,16px) scale(1.05)}100%{transform:translate(0,0) scale(1)}} .ambient-blob{position:absolute; border-radius:50%; filter:blur(10px); pointer-events:none; z-index:0} .ambient-blob.a{animation:blobDrift 18s ease-in-out infinite} .ambient-blob.b{animation:blobDrift2 22s ease-in-out infinite} /* ---------- respeitar a preferência do sistema ---------- */ @media (prefers-reduced-motion:reduce){ .js-motion [data-reveal], .js-motion [data-rule]{ opacity:1 !important; transform:none !important; transition:none !important; } .ambient-blob{animation:none !important} *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ---------- banner de consentimento de cookie ---------- */ #cookieBanner{ position:fixed; z-index:9999; left:16px; right:16px; bottom:16px; max-width:560px; margin:0 auto; background:#0B0E14F0; backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:0 20px 60px #000000A0; opacity:0; transform:translateY(16px); transition:opacity .35s var(--ease-out), transform .35s var(--ease-out); } #cookieBanner.is-in{ opacity:1; transform:none; } #cookieBanner p{ font-size:13px; color:var(--muted); line-height:1.55; margin:0 0 14px } #cookieBanner a{ color:var(--gold); text-decoration:underline } #cookieBanner .cookie-botoes{ display:flex; gap:10px; justify-content:flex-end } @media(max-width:480px){ #cookieBanner{ left:10px; right:10px; bottom:10px; padding:16px } #cookieBanner .cookie-botoes{ justify-content:stretch } #cookieBanner .cookie-botoes .btn{ flex:1; justify-content:center } }