/* ============================================================
   ÍCONES DE ESTADO (03/10/2026)

   Porte do "animated-state-icons" (framer-motion, React) para SVG + CSS
   puro. O pedido trazia 12 ícones piscando em loop; aqui eles NÃO piscam:
   cada um muda quando um estado REAL do app muda (senha à mostra, menu
   aberto, tema escuro, pacote baixado, aviso de sucesso). Ícone que se
   mexe sem motivo tira a atenção de quem está dirigindo.

   Como o framer-motion virou CSS (receita da skill framer-motion):
   - pathLength 0→1 .......... pathLength="1" no SVG + stroke-dasharray 1
                                e stroke-dashoffset 1→0 em transição
   - ease [0.32,0.72,0,1] .... cubic-bezier(.32,.72,0,1)
   - spring 500/25 (ζ≈0,56) .. cubic-bezier(.34,1.56,.64,1), ~10% além
   - repeat:Infinity ......... @keyframes só de transform (compositor)
   - estado .................. atributo data-on no <svg>, trocado pelo JS
   Tudo respeita "reduzir movimento": sem transição, estado final direto.
   ============================================================ */

.ie { display: inline-block; vertical-align: middle; flex: none; overflow: visible; }
.ie * {
    transform-box: view-box;
    transition: transform .35s cubic-bezier(.32, .72, 0, 1),
                opacity .25s ease,
                stroke-dashoffset .4s cubic-bezier(.32, .72, 0, 1);
}
.ie .desenha { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ie[data-on="1"] .desenha.on, .ie[data-on="0"] .desenha.off { stroke-dashoffset: 0; }
.ie .on-so { opacity: 0; }
.ie[data-on="1"] .on-so { opacity: 1; }
.ie[data-on="1"] .off-so { opacity: 0; }

/* 1. sucesso: o anel fecha e o visto se desenha (sem carregamento de
      mentira: o aviso só aparece depois que salvou de verdade) */
.ie-sucesso .anel { transform-origin: 20px 20px; transform: rotate(-90deg); }
.ie-sucesso[data-on="1"] .visto { transition-delay: .18s; }

/* 2. menu -> fechar */
.ie-menu .l1 { transform-origin: 20px 12px; }
.ie-menu .l2 { transform-origin: 20px 20px; }
.ie-menu .l3 { transform-origin: 20px 28px; }
.ie-menu[data-on="1"] .l1 { transform: translateY(8px) rotate(45deg); }
.ie-menu[data-on="1"] .l2 { transform: scaleX(0); opacity: 0; }
.ie-menu[data-on="1"] .l3 { transform: translateY(-8px) rotate(-45deg); }

/* 3. olho: data-on = senha à mostra -> olho riscado (o botão vai esconder) */
.ie-olho .pupila { transform-origin: 20px 20px; }
.ie-olho[data-on="1"] .pupila { transform: scale(.6); opacity: .35; }
.ie-olho[data-on="1"] .contorno { opacity: .45; }

/* 4. baixar -> feito */
.ie-baixar .seta { transform: translateY(0); }
.ie-baixar[data-on="1"] .seta { transform: translateY(8px); opacity: 0; }
.ie-baixar[data-on="1"] .visto { transition-delay: .12s; }

/* 5. interruptor (mola: stiffness 500, damping 25) */
.ie-alternar .bolinha {
    transition: transform .42s cubic-bezier(.34, 1.56, .64, 1);
}
.ie-alternar[data-on="1"] .bolinha { transform: translateX(16px); }
.ie-alternar .trilho { opacity: .1; }
.ie-alternar[data-on="1"] .trilho { opacity: .28; }

/* 6. enviar: o avião sai pela diagonal e volta */
.ie-enviar .aviao { transform-origin: 20px 20px; }
.ie-enviar[data-on="1"] .aviao { transform: translate(30px, -30px) scale(.5); opacity: 0; }

/* 7. cadeado: a alça sobe */
.ie-cadeado[data-on="1"] .alca { transform: translateY(-4px); }
.ie-cadeado[data-on="1"] .furo { opacity: .4; }

/* carregando: o único laço infinito, e só de transform */
@keyframes ie-gira { to { transform: rotate(360deg); } }
.ie .giro { transform-origin: 20px 20px; animation: ie-gira 1s linear infinite; }
.ie[data-on="1"] .giro { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .ie *, .ie-alternar .bolinha { transition: none !important; animation: none !important; }
}

/* ---------- onde os ícones moram no app -------------------------------- */

/* botão de mostrar/ocultar senha, dentro do campo */
.ie-campo-senha { position: relative; }
.ie-campo-senha > input { padding-right: 52px; }
.ie-bt-olho {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    width: 44px; height: 44px; border: 0; background: none; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted, #5A6684); cursor: pointer;
}
.ie-bt-olho:hover { color: var(--text-strong, #101731); }
.ie-bt-olho:focus-visible { outline: 2px solid var(--blue-500, #3B82F6); outline-offset: -2px; }

/* seletor de tema no topo */
.ie-bt-tema { gap: 6px; }
.ie-bt-tema .ie { color: var(--laranja-500, #FF8A1E); }
.ie-bt-tema[aria-pressed="true"] .ie { color: var(--cyan-400, #38BDF8); }