/* ═══════════════════════════════════════════════════════════════
   CAMADA DE MOTION · II Meeting de Nutrição Clínica
   Conceito: "o ciclo revela" — nada aparece de uma vez; cada
   elemento entrega o próximo, como as seis etapas da conduta.
   Nenhuma cor nova. O material novo é luz e máscara.
   Tudo escopado em html.mo (adicionado pelo JS), para que a
   página sem JS continue legível e inteira.

   Regras que esta camada segue:
   · só transform, opacity e clip-path;
   · nenhuma variável CSS no pai dirigindo transform de filho;
   · todo :hover atrás de porteira de ponteiro fino;
   · will-change entra e sai com o elemento em cena.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --e-saida: cubic-bezier(.23,1,.32,1);      /* entrada e saída */
  --e-mov:   cubic-bezier(.77,0,.175,1);     /* movimento na tela */
  --e-hover: ease;                            /* hover e cor */
}

/* ─── 1 · barra de progresso no cabeçalho (vale no mobile, onde o trilho some) ─── */
.prog-barra{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;transform-origin:0 50%;
  background:linear-gradient(90deg, var(--ciano), #7fefc9);
  transform:scaleX(0);opacity:0;transition:opacity .3s var(--e-saida);
  pointer-events:none;
}
.topo.fixo .prog-barra{opacity:1}
body[data-sup="claro"] .prog-barra{background:linear-gradient(90deg, var(--profundo), #5950af)}

/* ─── 2 · títulos sobem palavra a palavra de dentro de uma máscara ─── */
.mo .sp{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.16em;margin-bottom:-.16em;
}
.mo .sp > i{
  display:block;font-style:inherit;font-weight:inherit;
  transform:translateY(112%);
  transition:transform .62s var(--e-saida);
  transition-delay:var(--d,0s);
}
.mo [data-split].vis .sp > i{transform:none}

/* ─── 3 · cascata: grades entram em sequência, não em bloco ─── */
.mo .casc > *{
  opacity:.16;transform:translateY(20px);
  transition:opacity .56s var(--e-saida), transform .56s var(--e-saida);
  transition-delay:calc(var(--i,0) * 60ms);
}
.mo .casc.vis > *{opacity:1;transform:none}
/* nas travas o gap de 1px vira hairline: só opacidade, sem deslocar */
.mo .casc--fade > *{transform:none;opacity:.14;transition:opacity .5s var(--e-saida);transition-delay:calc(var(--i,0) * 60ms)}
.mo .casc--fade.vis > *{opacity:1}

/* ─── 4 · fotos do mosaico: cortina que sobe e a imagem assenta ─── */
.mo .wipe{clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--e-mov);transition-delay:calc(var(--i,0) * 70ms)}
.mo .wipe.vis{clip-path:inset(0 0 0 0)}
.mo .mos.wipe img{transform:scale(1.12);transition:transform .8s var(--e-saida);transition-delay:calc(var(--i,0) * 70ms)}
.mo .mos.wipe.vis img{transform:none}

/* ─── 5 · herói: entrada encadeada ─── */
@keyframes surge{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cartaoEntra{from{opacity:0;transform:translateY(26px) scale(.988)}to{opacity:1;transform:none}}
.mo .heroi .tarja       {animation:surge .62s .04s var(--e-saida) both}
.mo .heroi .evento      {animation:surge .62s .10s var(--e-saida) both}
.mo .heroi .lead        {animation:surge .66s .34s var(--e-saida) both}
.mo .heroi-rodape span  {animation:surge .6s var(--e-saida) both}
.mo .heroi-rodape span:nth-child(1){animation-delay:.42s}
.mo .heroi-rodape span:nth-child(2){animation-delay:.48s}
.mo .heroi-rodape span:nth-child(3){animation-delay:.54s}
.mo .heroi .cartao      {animation:cartaoEntra .7s .24s var(--e-saida) both}

/* herói sai de cena com o scroll: o JS escreve transform direto nestes dois */
.mo .heroi-grid.emcena,.mo .heroi-midia.emcena,.mo .fecho-midia.emcena{will-change:transform}
.mo .heroi-grid.emcena{will-change:transform,opacity}

/* ─── 6 · bloom de luz que acompanha o ponteiro ─── */
.mo .bloom{
  position:absolute;left:0;top:0;width:54vmax;height:54vmax;margin:-27vmax 0 0 -27vmax;
  pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(66,206,161,.26), rgba(66,206,161,.06) 42%, transparent 66%);
  transform:translate3d(62vw, 28vh, 0);
}
.mo .bloom.deriva{animation:deriva 17s ease-in-out infinite alternate}
.mo .bloom.segue{will-change:transform}
@keyframes deriva{
  0%  {transform:translate3d(66vw, 22vh, 0)}
  50% {transform:translate3d(38vw, 52vh, 0)}
  100%{transform:translate3d(74vw, 40vh, 0)}
}

/* ─── 7 · botão: pressão física + varredura de luz no hover ─── */
.btn{position:relative;overflow:hidden;isolation:isolate;
     transition:transform .16s var(--e-saida), box-shadow var(--t-fast), background var(--t-med), color var(--t-med)}
.btn:active{transform:scale(.97)}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.5) 48%, transparent 64%);
  transform:translateX(-125%);
  transition:transform .5s var(--e-mov);
}
.btn:focus-visible::after{transform:translateX(125%)}
@media (hover:hover) and (pointer:fine){
  .btn:hover::after{transform:translateX(125%)}
}

/* ─── 8 · anel do ciclo: varredura contínua + pulso no nó ativo ─── */
.mo .anel::before{
  content:"";position:absolute;inset:5%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0 70%, rgba(66,206,161,.15) 87%, transparent 100%);
  animation:varre 9s linear infinite;animation-play-state:paused;
}
.mo .anel.vis::before{animation-play-state:running}
@keyframes varre{to{transform:rotate(360deg)}}
.mo .no.on::before{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(66,206,161,.55);
  animation:noPulso 1.9s var(--e-saida) infinite;
}
@keyframes noPulso{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.mo .anel-idx{font-variant-numeric:tabular-nums}

/* ─── 9 · números da prova ─── */
.pano-dado .n{font-variant-numeric:tabular-nums}

/* ─── 10 · faixa de fotos: o quadro responde ao ponteiro ─── */
.mo .quadro{transition:transform .22s var(--e-saida)}
.mo .quadro img{transition:filter .26s var(--e-hover), transform .26s var(--e-saida)}
@media (hover:hover) and (pointer:fine){
  .mo .quadro:hover{transform:translateY(-6px)}
  .mo .quadro:hover img{filter:contrast(1.04) brightness(1.04);transform:scale(1.05)}
  .mo .mos.wipe.vis img{transition:transform .25s var(--e-saida)}
  .mo .mos.wipe.vis:hover img{transform:scale(1.045)}
}

/* ─── 11 · formulário: foco com halo e o "check" sendo desenhado ─── */
.mo .campo input,.mo .campo select{transition:border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast)}
.mo .campo input:focus,.mo .campo select:focus{box-shadow:0 0 0 3px rgba(66,206,161,.17)}
.mo .cartao--claro .campo input:focus,.mo .cartao--claro .campo select:focus{box-shadow:0 0 0 3px rgba(1,69,55,.13)}
@keyframes seloEntra{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes risca{to{stroke-dashoffset:0}}
.mo .sucesso.on .selo{animation:seloEntra .28s var(--e-saida) both}
.mo .sucesso.on .selo svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:risca .42s .12s var(--e-saida) forwards}

/* ─── 12 · marcador das linhas do "o que a lista garante": traça ao entrar ─── */
.mo .garante .marcador{transform:scaleX(.12);transform-origin:0 50%;transition:transform .62s var(--e-saida);transition-delay:calc(var(--i,0) * 60ms + .12s)}
.mo .garante.vis .marcador{transform:none}

/* ─── 13 · trilho lateral só quando sobra margem de verdade
       (entre 1280 e 1460px ele encostava no texto) ─── */
@media (max-width:1459px){ .trilho{display:none} }

/* ─── 14 · menos movimento: some o deslocamento, fica a leitura ───
   O style.css zera toda transição em reduced-motion. Aqui devolvemos
   uma fusão curta de opacidade, porque reduzir é suavizar, não apagar. */
@media (prefers-reduced-motion: reduce){
  .mo .sp{overflow:visible;padding-bottom:0;margin-bottom:0}
  .mo .sp > i{transform:none !important;transition:none !important}
  .mo .casc > *,.mo .casc--fade > *{transform:none !important;opacity:.2;
    transition:opacity .25s linear !important;transition-delay:calc(var(--i,0) * 40ms) !important}
  .mo .casc.vis > *,.mo .casc--fade.vis > *{opacity:1}
  .mo .wipe{clip-path:none !important;opacity:.2;transition:opacity .25s linear !important}
  .mo .wipe.vis{opacity:1}
  .mo .mos.wipe img{transform:none !important}
  .mo .bloom{display:none}
  .mo .anel::before,.mo .no.on::before{animation:none}
  .btn::after{display:none}
  .btn:active{transform:none}
  .mo .garante .marcador{transform:none !important}
  .prog-barra{transition:none}
}