/* Telas de entrada do Portal LIRA (prévia): cliente (claro) e escritório (escuro). */
:root {
  --tinta: #0F2A40; --texto: #3E4F5E; --suave: #5E6E7E; --azul: #0075BD; --brilho: #2E9BE6; --ceu: #9ACAEE; --noite: #06111C;
  --linha: #DCE6EF; --ok: #1F7A55; --erro: #B4321F;
  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, Arial, sans-serif;
  --curva: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 15px/1.5 var(--fonte); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brilho); outline-offset: 3px; }
canvas.fundo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ----- entrada em sequência ----- */
.sobe { opacity: 0; transform: translateY(18px); animation: sobe .8s var(--curva) forwards; }
@keyframes sobe { to { opacity: 1; transform: none; } }
.a1 { animation-delay: .15s; } .a2 { animation-delay: .3s; } .a3 { animation-delay: .45s; } .a4 { animation-delay: .6s; } .a5 { animation-delay: .75s; } .a6 { animation-delay: .9s; }
.palavras span { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(2deg); filter: blur(6px);
                 animation: palavra .9s var(--curva) forwards; }
@keyframes palavra { to { opacity: 1; transform: none; filter: none; } }

/* ----- logo: revela com um corte deslizante e um brilho passa só sobre o desenho ----- */
.logo-vivo { position: relative; display: inline-block; }
.logo-vivo img { display: block; width: 100%; height: auto; animation: revela 1.2s .1s var(--curva) both; }
@keyframes revela { from { clip-path: inset(0 100% 0 0); transform: translateX(-14px); opacity: 0; } to { clip-path: inset(0 0 0 0); transform: none; opacity: 1; } }
.logo-vivo .reflexo { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--mascara) center / contain no-repeat; mask: var(--mascara) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.95) 50%, transparent 65%) no-repeat; background-size: 250% 100%;
  animation: reflexo 4.5s 1.3s ease-in-out infinite; }
@keyframes reflexo { 0% { background-position: 130% 0; } 40%, 100% { background-position: -40% 0; } }

/* ----- campos com rótulo que flutua ----- */
.campo { position: relative; display: block; margin-top: 14px; }
.campo input { width: 100%; height: 58px; padding: 22px 46px 6px 16px; border-radius: 16px; outline: none; font-size: 16px;
               transition: border-color .25s, box-shadow .25s, background .25s; }
.campo label { position: absolute; left: 17px; top: 18px; font-size: 15px; pointer-events: none; transform-origin: left top;
               transition: transform .25s var(--curva), color .25s; }
.campo input:focus + label, .campo input:not(:placeholder-shown) + label { transform: translateY(-11px) scale(.78); }
/* e-mail e senha salvos pelo navegador: o rótulo sobe antes da pessoa mexer (regras separadas: navegador que não conhece uma ignora só ela) */
.campo input:-webkit-autofill + label { transform: translateY(-11px) scale(.78); }
.campo input:autofill + label { transform: translateY(-11px) scale(.78); }
.campo .lado { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.olho { width: 32px; height: 32px; border-radius: 10px; border: 0; background: none; display: grid; place-items: center; }
.olho svg { width: 20px; height: 20px; }
.certo { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #E6F4EC; color: var(--ok);
         opacity: 0; transform: scale(.4); transition: all .35s var(--curva); font-size: 12px; font-weight: 800; }
.campo.valido .certo { opacity: 1; transform: none; }
.dica-campo { min-height: 20px; margin: 6px 2px 0; font-size: 12.5px; }

/* ----- botão principal com brilho que corre ----- */
.botao { position: relative; overflow: hidden; width: 100%; height: 54px; margin-top: 18px; border: 0; border-radius: 999px; color: #fff;
         font-weight: 650; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 10px;
         background: linear-gradient(180deg, #2E9BE6, #0075BD); transition: transform .2s var(--curva), box-shadow .3s, width .4s var(--curva);
         box-shadow: 0 0 0 1px rgba(154,202,238,.35) inset, 0 12px 32px rgba(0,117,189,.38), 0 0 46px rgba(46,155,230,.22); }
.botao::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%) no-repeat;
                background-size: 250% 100%; animation: reflexo 3.8s 1.6s ease-in-out infinite; }
.botao:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(154,202,238,.5) inset, 0 16px 40px rgba(0,117,189,.48), 0 0 70px rgba(46,155,230,.32); }
.botao:active { transform: scale(.98); }
.botao svg { width: 18px; height: 18px; transition: transform .3s var(--curva); }
.botao:hover svg { transform: translateX(3px); }
.botao .gira { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.botao.ok { background: linear-gradient(180deg, #2FB37A, #1F7A55); }
.treme { animation: treme .45s; }
@keyframes treme { 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

/* ----- transição entre telas ----- */
.transicao { position: fixed; inset: 0; z-index: 100; pointer-events: none; display: grid; place-items: center;
             background: radial-gradient(circle at 50% 50%, #0B5C99, #06111C 70%);
             clip-path: circle(0% at var(--x, 50%) var(--y, 50%)); transition: clip-path .75s cubic-bezier(.7, 0, .2, 1); }
.transicao.cheio { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); pointer-events: auto; }
.transicao.sem-anim { transition: none; }
.transicao img { width: 110px; opacity: 0; transition: opacity .35s .3s; }
.transicao.cheio img { opacity: 1; }

/* troca de página sem piscar: o navegador segura a tela azul e o logo, e a página nova surge num círculo que se abre do centro */
@view-transition { navigation: auto; }
.transicao.cheio img { view-transition-name: lira-logo; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: lira-cortina .95s cubic-bezier(.65, 0, .25, 1) both; }
::view-transition-old(lira-logo) { animation: lira-logo-sai .95s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes lira-cortina { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(80% at 50% 50%); } }
@keyframes lira-logo-sai { 0% { opacity: 1; transform: scale(1); } 30% { opacity: 1; transform: scale(1.08); } 100% { opacity: 0; transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sobe, .palavras span { opacity: 1; transform: none; filter: none; }
}

/* chegada depois da transição: a página nasce coberta e o azul se desfaz (sem piscar) */
html.chegando::after { content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: url(/comum/img/logo-branco.png) center / 110px no-repeat, radial-gradient(circle at 50% 50%, #0B5C99, #06111C 70%);
  transition: opacity .65s ease; }
html.chegando.chegou::after { opacity: 0; }