/* ============================================================
   Seiva · Animações — folha de estilo
   ------------------------------------------------------------
   Instalação:
   1) Copie para  app/static/nutria-animacoes.css
   2) Carregue DEPOIS de style.css / nutria-tokens.css:
        <link rel="stylesheet" href="{{ url_for('static', filename='nutria-animacoes.css') }}">
   Funciona em par com nutria-animacoes.js (mesma pasta).

   Nomes de keyframes são novos (ntsobe, ntdesenha, …) para NÃO
   conflitar com ntfloat/ntspark já definidos no site/index.html.
   ============================================================ */

/* ---------- keyframes ---------- */
@keyframes ntsobe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ntdesenha{to{stroke-dashoffset:0}}
@keyframes ntpreenche{to{fill-opacity:1}}
@keyframes ntderiva{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  10%{opacity:var(--op,.3)}
  85%{opacity:var(--op,.3)}
  100%{transform:translateY(-640px) rotate(55deg);opacity:0}
}
@keyframes ntcursor{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes ntbarra{from{width:0}}
@keyframes ntsalta{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes ntpercorre{0%{left:16.6%;opacity:0}6%{opacity:1}94%{opacity:1}100%{left:83.4%;opacity:0}}
@keyframes ntbrilha{0%,100%{opacity:.09}50%{opacity:.17}}
@keyframes ntpulsaouro{0%,100%{box-shadow:0 0 0 0 rgba(225,166,63,.30)}55%{box-shadow:0 0 0 8px rgba(225,166,63,0)}}
@keyframes ntrisca{to{stroke-dashoffset:0}}
@keyframes ntpinga{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes ntpontinhos{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-4px);opacity:1}}
@keyframes ntbrilho{0%,100%{transform:scale(.8);opacity:.5}50%{transform:scale(1.15);opacity:1}}
@keyframes nttoastentra{from{opacity:0;transform:translate(-50%,16px) scale(.97)}to{opacity:1;transform:translate(-50%,0)}}

/* ============================================================
   LANDING (site/index.html) — entrada do hero, sem editar HTML
   ============================================================ */
.grade-hero > div:first-child > :nth-child(1){animation:ntsobe .6s cubic-bezier(.2,.7,.3,1) .05s both}
.grade-hero > div:first-child > :nth-child(2){animation:ntsobe .7s cubic-bezier(.2,.7,.3,1) .14s both}
.grade-hero > div:first-child > :nth-child(3){animation:ntsobe .7s cubic-bezier(.2,.7,.3,1) .24s both}
.grade-hero > div:first-child > :nth-child(4){animation:ntsobe .7s cubic-bezier(.2,.7,.3,1) .34s both}
.grade-hero > div:first-child > :nth-child(5){animation:ntsobe .7s cubic-bezier(.2,.7,.3,1) .44s both}
.hero-arte{animation:ntsobe .8s cubic-bezier(.2,.7,.3,1) .3s both}

/* ============================================================
   APP — avisos (flash), etiquetas de risco e toast
   ============================================================ */

/* entrada suave de qualquer aviso flash */
.aviso{animation:ntsobe .35s ease both}

/* ponto pulsante nas etiquetas de atenção/risco (ex.: risco de
   realimentação). Só CSS — nenhum template precisa mudar. */
.etiqueta.risco,
.etiqueta.alerta{position:relative}
.etiqueta.risco::before,
.etiqueta.alerta::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:currentColor;margin-right:6px;vertical-align:1px;
  animation:ntpinga 1.6s ease-in-out infinite;
}

/* toast de confirmação (o JS transforma .aviso-ok nisto) */
.nt-toast{
  position:fixed;left:50%;bottom:26px;z-index:300;
  transform:translate(-50%,0);
  display:flex;align-items:center;gap:11px;
  background:var(--nt-ink,#1F281F);color:var(--nt-bg,#F4F1E8);
  padding:12px 18px 12px 13px;border-radius:14px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.5);
  font:700 13.5px 'Hanken Grotesk',system-ui,sans-serif;
  animation:nttoastentra .32s cubic-bezier(.2,.7,.3,1);
  transition:opacity .35s ease,transform .35s ease;
}
.nt-toast.nt-toast-sai{opacity:0;transform:translate(-50%,10px)}
.nt-toast .nt-toast-check{
  width:26px;height:26px;border-radius:50%;flex:none;
  background:var(--nt-ok,#2E9E5B);
  display:flex;align-items:center;justify-content:center;
}

/* alerta de risco de SR no formulario da evolucao (preview ao vivo).
   So o #sr-resultado: as outras .aviso-doses (Toronto, dicas de catalogo/
   alta/pediatria) sao informativas e nao devem pulsar. O box ganha o mesmo
   pulso ambar do cartao de alerta da landing; o ponto pulsante marca a
   classificacao, como nas etiquetas .risco/.alerta. */
#sr-resultado.aviso-doses{
  animation:ntsobe .4s cubic-bezier(.2,.7,.3,1) both,
            ntpulsaouro 3.2s ease-in-out .9s infinite;
}
#sr-resultado.aviso-doses::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--nt-gold,#c77700);margin-right:7px;vertical-align:1px;
  animation:ntpinga 1.6s ease-in-out infinite;
}

/* indicador "consultando diretrizes…" do assistente */
.nt-pensando{
  display:flex;align-items:center;gap:9px;margin-top:14px;
  padding:10px 14px;border-radius:12px;
  background:var(--nt-panel2,#FAF8F1);border:1px solid var(--nt-line,#E4E1D3);
  font:600 12.5px 'Hanken Grotesk',system-ui,sans-serif;color:var(--nt-muted,#8A9382);
}
.nt-pensando svg{animation:ntbrilho 1.5s ease-in-out infinite;flex:none}
.nt-pensando .nt-pontos{display:inline-flex;gap:4px;align-items:center}
.nt-pensando .nt-pontos i{
  width:5px;height:5px;border-radius:50%;background:currentColor;display:inline-block;
  animation:ntpontinhos 1.2s ease-in-out infinite;
}
.nt-pensando .nt-pontos i:nth-child(2){animation-delay:.15s}
.nt-pensando .nt-pontos i:nth-child(3){animation-delay:.3s}

/* cursor de digitação (IA do site e resposta do assistente) */
.nt-cursor{
  display:inline-block;width:2px;height:1em;background:currentColor;
  margin-left:3px;vertical-align:-2px;animation:ntcursor .9s steps(1) infinite;
}

/* ---------- acessibilidade: respeita "reduzir movimento" ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}