/* ============================================================================= Tela de desbloqueio — camada de entrada do funil. Cobre a landing até o visitante deslizar o botão até o fim. ========================================================================== */ /* Trava a rolagem enquanto a tela está no ar (classe posta no ). */ html.gate-locked, html.gate-locked body { overflow: hidden !important; height: 100%; touch-action: none; } .unlock-gate { position: fixed; inset: 0; z-index: 100000; /* acima dos modais do funil (9999) */ display: flex; align-items: center; justify-content: center; padding: 24px 16px; /* Lavagem suave: ambar no topo, laranja embaixo (paleta do funil) */ background: radial-gradient(1200px 620px at 10% -12%, rgba(255, 195, 0, 0.26), transparent 62%), radial-gradient(1000px 700px at 92% 112%, rgba(255, 102, 0, 0.18), transparent 62%), #ffffff; font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; -webkit-user-select: none; user-select: none; opacity: 1; transition: opacity .38s ease; } .unlock-gate.is-saindo { opacity: 0; pointer-events: none; } .unlock-card { width: 100%; max-width: 470px; text-align: center; } .unlock-title { margin: 0 0 14px; font-size: clamp(26px, 6.2vw, 34px); font-weight: 800; line-height: 1.22; letter-spacing: -0.02em; color: #0b0b0c; } .unlock-sub { margin: 0 0 42px; font-size: clamp(14px, 3.6vw, 16px); color: #6b7280; } /* ------------------------------------------------------------ o slider */ .unlock-slider { position: relative; height: 62px; border-radius: 999px; background: #efefef; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05); overflow: hidden; touch-action: none; /* o gesto é nosso, não do scroll da página */ } .unlock-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #9ca3af; pointer-events: none; transition: opacity .18s linear; } .unlock-knob { position: absolute; top: 4px; left: 4px; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(135deg, #ffc300 0%, #ff8a00 48%, #ff5100 100%); color: #fff; cursor: grab; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(255, 102, 0, 0.34); touch-action: none; } .unlock-knob:active { cursor: grabbing; } .unlock-knob:focus-visible { outline: 3px solid rgba(255, 102, 0, 0.8); outline-offset: 3px; } .unlock-knob svg { width: 22px; height: 22px; pointer-events: none; } /* Volta macia quando o visitante solta antes do fim. */ .unlock-knob.is-voltando { transition: transform .28s cubic-bezier(.22, 1, .36, 1); } /* Aceninho de "arrasta aqui" enquanto ninguém tocou. */ .unlock-knob.is-parado { animation: unlockNudge 2.1s ease-in-out infinite; } @keyframes unlockNudge { 0%, 62%, 100% { transform: translateX(0); } 78% { transform: translateX(9px); } } .unlock-foot { margin: 22px 0 0; font-size: 12.5px; font-weight: 600; color: #6b7280; } @media (prefers-reduced-motion: reduce) { .unlock-knob.is-parado { animation: none; } .unlock-gate { transition: none; } }