/* YuFit — camada de movimento (Impulso).
   Tudo fica dentro de prefers-reduced-motion:no-preference; sem essa preferência a interface permanece estática.
   Animações usam apenas transform/opacity/clip-path para não forçar layout. */
:root{
  --m-ease:cubic-bezier(.16,1,.3,1);
  --m-ease-out:cubic-bezier(.22,1,.36,1);
  --m-spring:linear(0,.2 5%,.62 12%,.94 20%,1.08 28%,1.1 34%,1.04 44%,.99 56%,1.005 70%,1);
  --m-fast:160ms;--m-base:420ms;--m-slow:640ms;
}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}

  /* 1. Entrada de tela, escalonada. O JS marca os itens com data-m e --m-i apenas na troca de rota. */
  body.m-enter [data-m]{animation:m-rise var(--m-slow) var(--m-ease) backwards;animation-delay:calc(var(--m-i,0)*55ms)}
  @keyframes m-rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
  body.m-enter #route-title{animation:m-fade var(--m-base) var(--m-ease-out) backwards}
  @keyframes m-fade{from{opacity:0}to{opacity:1}}

  /* 2. Barras de progresso crescem da esquerda; não altera a largura real. */
  body.m-enter .bar span{transform-origin:left center;animation:m-grow 900ms var(--m-ease) 180ms backwards}
  @keyframes m-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* 3. Navegação: indicador deslizante único e ícone que "pula" na troca. */
  .m-pill{position:absolute;left:0;top:0;pointer-events:none;border-radius:12px;background:rgba(var(--lime-rgb),0.12);box-shadow:inset 0 0 0 1px rgba(var(--lime-rgb),0.2);
    transition:transform 520ms var(--m-spring),width 520ms var(--m-spring),height 520ms var(--m-spring);will-change:transform}
  .m-pill-on .nav-item.active,.m-pill-on a.active{background:transparent!important}
  .m-pill-on a{position:relative;z-index:1;transition:color var(--m-fast) ease-out}
  .m-pill-on .nav-item.active:after{animation:m-dot 420ms var(--m-spring) backwards}
  @keyframes m-dot{from{transform:scale(0)}to{transform:scale(1)}}
  .m-pop svg{animation:m-pop 560ms var(--m-spring) backwards}
  @keyframes m-pop{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-5px) scale(1.18)}100%{transform:none}}

  /* 4. Toque: resposta física em botões, linhas e cartões clicáveis. */
  .primary,.secondary,.text-button,.tab-menu-row,.tab-day-link,.diet-folder,.food-tool,.refresh-button,.mobile-nav a,.nav-item,.feed-reaction{
    transition:transform var(--m-fast) var(--m-ease-out),background-color var(--m-fast) ease-out,border-color var(--m-fast) ease-out,box-shadow var(--m-base) var(--m-ease-out),color var(--m-fast) ease-out}
  .primary:active,.secondary:active,.diet-folder:active,.tab-menu-row:active,.tab-day-link:active,.food-tool:active{transform:scale(.97)}
  .mobile-nav a:active,.nav-item:active{transform:scale(.92)}
  @media(hover:hover){
    .diet-folder:hover,.card:hover{border-color:rgba(var(--lime-rgb),0.25)}
    .diet-folder:hover{transform:translateY(-2px);box-shadow:0 12px 28px #0006}
    .tab-day-link:hover{transform:translateX(4px)}
    .tab-day-link:hover svg,.diet-folder:hover svg:last-child{transform:translateX(3px)}
  }
  .tab-day-link svg,.diet-folder>svg{transition:transform var(--m-base) var(--m-ease-out)}
  .card{transition:border-color var(--m-base) ease-out}

  /* 5. Botão flutuante: entra com mola, gira ao abrir a folha de ações e emite um pulso discreto. */
  .tab-action-fab,.food-functions-fab{animation:m-fab 700ms var(--m-spring) 260ms backwards;transition:transform var(--m-base) var(--m-spring),box-shadow var(--m-base) var(--m-ease-out)}
  @keyframes m-fab{from{scale:0;rotate:-90deg;opacity:0}to{scale:1;rotate:0deg;opacity:1}}
  .tab-action-fab:active,.food-functions-fab:active{transform:scale(.9) rotate(90deg)}
  .tab-action-fab::after,.food-functions-fab::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--lime);opacity:0;pointer-events:none;animation:m-ping 3.6s ease-out 2.4s 2}
  @keyframes m-ping{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.7);opacity:0}}
  /* Só gira quando o diálogo aberto é a folha de ações deste botão; tutorial, cadastro e outros diálogos não mudam o ícone. */
  body:has(dialog.action-dialog[open]) .tab-action-fab,body:has(dialog.action-dialog[open]) .food-functions-fab{transform:rotate(135deg) scale(.88)}

  /* 6. Folhas inferiores e diálogos: mola de subida, véu com desfoque e itens em cascata. */
  .action-dialog[open]{animation:m-sheet 560ms var(--m-spring) backwards!important}
  @keyframes m-sheet{from{transform:translateY(60px) scale(.96);opacity:0}to{transform:none;opacity:1}}
  dialog::backdrop{background:#000a;backdrop-filter:blur(0);transition:backdrop-filter var(--m-base) ease-out}
  dialog[open]::backdrop{animation:m-veil var(--m-base) ease-out backwards}
  @keyframes m-veil{from{background:#0000;backdrop-filter:blur(0)}to{background:#000a;backdrop-filter:blur(6px)}}
  dialog[open] .tab-menu-row,dialog[open] .food-tool{animation:m-item 460ms var(--m-ease) backwards;animation-delay:calc(120ms + var(--m-j,0)*45ms)}
  @keyframes m-item{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

  /* 7. Feed: revelação conforme a rolagem (quando o navegador suporta) e reação com explosão. */
  @supports(animation-timeline:view()){
    .feed-post{animation:m-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    @keyframes m-reveal{from{opacity:0;transform:translateY(34px) scale(.97)}to{opacity:1;transform:none}}
  }
  .feed-reaction.is-active .feed-flex-emoji{display:inline-block;animation:m-like 620ms var(--m-spring) backwards}
  .feed-reaction.m-burst{position:relative}
  .feed-reaction.m-burst::before{content:'';position:absolute;left:18px;top:50%;width:6px;height:6px;border-radius:50%;pointer-events:none;
    box-shadow:0 -22px var(--lime),19px -11px var(--blue),19px 11px var(--lime),0 22px var(--blue),-19px 11px var(--lime),-19px -11px var(--blue);animation:m-burst 620ms var(--m-ease-out) forwards}
  @keyframes m-like{0%{transform:scale(.4) rotate(-20deg)}45%{transform:scale(1.5) rotate(10deg)}100%{transform:none}}
  @keyframes m-burst{from{transform:scale(.2);opacity:1}to{transform:scale(1.5);opacity:0}}
  .feed-media{scroll-snap-type:x mandatory}.feed-media>*{scroll-snap-align:center}

  /* 8. Cartas de opções de dieta e carrosséis: o cartão ativo se destaca. */
  .diet-choice{transition:transform var(--m-base) var(--m-ease-out),opacity var(--m-base) ease-out,border-color var(--m-fast) ease-out}
  @supports(animation-timeline:scroll()){
    .diet-choice{animation:m-card linear both;animation-timeline:view(inline);animation-range:entry 0% cover 50%}
    @keyframes m-card{from{opacity:.45;transform:scale(.94)}to{opacity:1;transform:none}}
  }

  /* 9. Números que contam e brilho de carregamento. */
  .m-count{font-variant-numeric:tabular-nums}
  .m-flash{animation:m-flash 700ms ease-out}
  @keyframes m-flash{0%{color:var(--lime);text-shadow:0 0 18px rgba(var(--lime-rgb),0.53)}100%{text-shadow:none}}
  .community-loading-mark,.skeleton{background:linear-gradient(100deg,var(--panel) 30%,var(--panel2) 50%,var(--panel) 70%) 0 0/200% 100%;animation:m-shimmer 1.4s linear infinite}
  @keyframes m-shimmer{to{background-position:-200% 0}}

  /* 10. Abas internas do Feed/Comunidade e toasts. */
  .feed-tabs .is-active,.feed-tabs [aria-selected="true"]{position:relative}
  #toast{transition:transform 480ms var(--m-spring),opacity var(--m-base) ease-out}
}