@import url('fonts/fonts.css');

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: #12224f;
  background: #0f2350;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
input, textarea { font-family: inherit; }
button { font-family: inherit; }

/* ---- App shell: fills the whole device ---- */
#app-root {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: #eef3fb;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---- Scroll area ---- */
.pm-scroll::-webkit-scrollbar { width: 0; height: 0; }
.pm-scroll { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }

/* ---- Safe areas (notch / home indicator) ---- */
.pm-header { padding-top: calc(14px + env(safe-area-inset-top)); }
.pm-nav { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.pm-fullscreen { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }

/* ---- Focus states (replaces design's style-focus-within) ---- */
.pm-inputwrap:focus-within { border-color: #8fb0ec !important; }
input:focus, textarea:focus { outline: none; }

/* ---- Animations (from the design) ---- */
@keyframes pmIn { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes pmPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes pmSheet { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes pmToast { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes pmLogin { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pmSplash { 0% { opacity: 0; transform: scale(.55); } 45% { opacity: 1; transform: scale(1.04); } 65% { transform: scale(.98); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pmRing { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes pmFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes pmCheck { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }
@keyframes pmOrb { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(14px,-12px) scale(1.08); } }
/* ---- Águas Lindas: novos movimentos do design ---- */
@keyframes pmView { from { opacity: 0; transform: translateX(26px) scale(.99); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes pmShimmer { 0% { transform: translateX(-140%) skewX(-18deg); } 60%,100% { transform: translateX(260%) skewX(-18deg); } }
@keyframes pmFabPulse { 0% { box-shadow: 0 8px 20px rgba(15,157,85,.5), 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 8px 20px rgba(15,157,85,.5), 0 0 0 14px rgba(37,211,102,0); } 100% { box-shadow: 0 8px 20px rgba(15,157,85,.5), 0 0 0 0 rgba(37,211,102,0); } }
@keyframes pmLive { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.5); opacity: .45; } }
@keyframes pmDrift { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(18px,10px) scale(1.12); } 66% { transform: translate(-12px,-8px) scale(.95); } }

/* Animações de entrada só tocam quando a VIEW muda (o render marca a área
   de scroll com .pm-animate). Em re-render da mesma tela (clique, digitação,
   poll) NÃO repetem — evita o "piscar" a cada toque. */
.pm-animate .pm-view { animation: pmView .44s cubic-bezier(.22,.85,.26,1) both; will-change: transform, opacity, filter; }
button { transition: transform .12s ease, filter .15s ease; }
button:active { transform: scale(.97); }
.pm-login { animation: pmLogin .5s cubic-bezier(.22,.9,.3,1) both; }
.pm-splash-in { animation: pmSplash .8s cubic-bezier(.3,.9,.3,1) both; }
.pm-float { animation: pmFloat 3.4s ease-in-out infinite; }
.pm-animate .pm-stagger > * { opacity: 0; animation: pmIn .55s cubic-bezier(.22,.9,.28,1) forwards; }
.pm-animate .pm-stagger > *:nth-child(1) { animation-delay: .04s; }
.pm-animate .pm-stagger > *:nth-child(2) { animation-delay: .11s; }
.pm-animate .pm-stagger > *:nth-child(3) { animation-delay: .18s; }
.pm-animate .pm-stagger > *:nth-child(4) { animation-delay: .25s; }
.pm-animate .pm-stagger > *:nth-child(5) { animation-delay: .32s; }
.pm-animate .pm-stagger > *:nth-child(6) { animation-delay: .39s; }
.pm-sheet { animation: pmSheet .3s cubic-bezier(.22,.7,.3,1) both; }
/* Brilho que corre no card da senha (hero azul) */
.pm-shimmer { position: absolute; top: 0; left: 0; width: 55%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); animation: pmShimmer 4.2s cubic-bezier(.5,0,.2,1) infinite; pointer-events: none; }
.pm-live { animation: pmLive 1.5s ease-in-out infinite; }
.pm-drift { animation: pmDrift 14s ease-in-out infinite; }
.pm-fab { animation: pmFabPulse 2.6s cubic-bezier(.4,0,.6,1) infinite; }
/* Indicador deslizante da barra inferior */
.pm-navind { transition: transform .46s cubic-bezier(.45,1.35,.4,1); }

@keyframes estScan { 0% { top:13%; } 50% { top:85%; } 100% { top:13%; } }