/* =============================================================================
   animations.css — biblioteca de microinterações (utilitários inertes).
   FASE 0 (fundação). Define classes/keyframes que NÃO têm efeito até serem
   aplicadas a algum elemento nas fases seguintes. Usa SOMENTE transform/opacity
   (performático, roda na GPU) e os tokens de movimento de tokens.css.

   Acento/realce na cor da marca (âmbar). Respeita "prefers-reduced-motion".
   Carregado por último entre os CSS customizados.
   ========================================================================== */

/* ---- Entradas (rodam uma vez, mantêm estado final) ----------------------- */
@keyframes anim-in   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes anim-fade { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes anim-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes anim-zoom { from { opacity: 0; transform: scale(.96); }       to { opacity: 1; transform: none; } }
@keyframes anim-pop  { from { opacity: 0; transform: scale(.8); }        to { opacity: 1; transform: none; } }

.anim-in, .anim-fade, .anim-rise, .anim-zoom, .anim-pop{
  animation-duration: var(--dur-slow);
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.anim-in   { animation-name: anim-in; }
.anim-fade { animation-name: anim-fade; }
.anim-rise { animation-name: anim-rise; }
.anim-zoom { animation-name: anim-zoom; }
.anim-pop  { animation-name: anim-pop; animation-timing-function: var(--ease-spring); }

/* ---- Stagger: escalona filhos automaticamente (1..12) -------------------- */
.stagger > *:nth-child(1)  { animation-delay: calc(0  * 55ms); }
.stagger > *:nth-child(2)  { animation-delay: calc(1  * 55ms); }
.stagger > *:nth-child(3)  { animation-delay: calc(2  * 55ms); }
.stagger > *:nth-child(4)  { animation-delay: calc(3  * 55ms); }
.stagger > *:nth-child(5)  { animation-delay: calc(4  * 55ms); }
.stagger > *:nth-child(6)  { animation-delay: calc(5  * 55ms); }
.stagger > *:nth-child(7)  { animation-delay: calc(6  * 55ms); }
.stagger > *:nth-child(8)  { animation-delay: calc(7  * 55ms); }
.stagger > *:nth-child(9)  { animation-delay: calc(8  * 55ms); }
.stagger > *:nth-child(10) { animation-delay: calc(9  * 55ms); }
.stagger > *:nth-child(11) { animation-delay: calc(10 * 55ms); }
.stagger > *:nth-child(12) { animation-delay: calc(11 * 55ms); }

/* ---- Hover / interação (sutil, profissional) ----------------------------- */
.hover-lift { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.hover-grow { transition: transform var(--dur) var(--ease-out); }
.hover-grow:hover { transform: scale(1.03); }

.hover-glow { transition: box-shadow var(--dur) var(--ease-out); }
.hover-glow:hover { box-shadow: 0 0 0 .2rem rgba(192, 138, 45, .28); } /* âmbar */

.press { transition: transform var(--dur-fast) var(--ease-out); }
.press:active { transform: scale(.97); }

.clickable {
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.clickable:active { transform: scale(.97); }

/* ---- Atenção (pontual) --------------------------------------------------- */
@keyframes anim-shake { 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);}
                        30%,50%,70%{transform:translateX(-4px);} 40%,60%{transform:translateX(4px);} }
.anim-shake { animation: anim-shake .4s var(--ease-out) 1; }

/* ---- Skeleton (placeholder de carregamento) ------------------------------ */
@keyframes ui-shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }
.skeleton{
  display: block;
  border-radius: var(--radius-sm);
  background: #e9edf2;
  background-image: linear-gradient(90deg, #e9edf2 0px, #f3f5f8 80px, #e9edf2 160px);
  background-size: 600px 100%;
  background-repeat: no-repeat;
  animation: ui-shimmer 1.3s linear infinite;
}
.skeleton--text { height: 12px; margin: 6px 0; }
.skeleton--line { height: 16px; }
.skeleton--pill { height: 22px; width: 84px; border-radius: var(--radius-pill); }
.skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }

/* ---- Barra de progresso indeterminada (em containers) -------------------- */
@keyframes anim-progress { 0%{transform:translateX(-100%) scaleX(.4);} 50%{transform:translateX(0) scaleX(.6);}
                           100%{transform:translateX(100%) scaleX(.4);} }
.anim-progress{ position: relative; overflow: hidden; height: 3px;
  background: var(--c-border); border-radius: var(--radius-pill); }
.anim-progress::before{ content:""; position:absolute; inset:0; background: var(--c-accent);
  border-radius: inherit; transform-origin: left center; animation: anim-progress 1.1s var(--ease-out) infinite; }

/* ---- Barra de progresso de topo (navegação entre páginas) ---------------- */
.route-progress{ position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--c-accent); z-index: 10000; box-shadow: 0 0 8px rgba(192,138,45,.6);
  transition: width .2s var(--ease-out), opacity .3s var(--ease-out); pointer-events: none; }

/* ---- Scroll reveal (ui-helpers.js adiciona .is-visible) ------------------ */
.reveal{ opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms); }
.reveal.is-visible{ opacity: 1; transform: none; }

/* ---- Saídas genéricas ---------------------------------------------------- */
@keyframes anim-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.96); } }
.anim-out { animation: anim-out var(--dur) var(--ease-out) both; }

/* ---- Acessibilidade: respeita "reduzir movimento" ------------------------ */
@media (prefers-reduced-motion: reduce){
  .anim-in, .anim-fade, .anim-rise, .anim-zoom, .anim-pop,
  .anim-shake, .anim-progress, .anim-out, .stagger > *{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
  }
  .skeleton { animation: none !important; }
  .anim-progress::before { animation: none !important; }
  .route-progress { transition: none !important; }
  .reveal { transition-duration: .001ms !important; transition-delay: 0ms !important; opacity: 1; transform: none; }
  .hover-lift, .hover-grow, .hover-glow, .press, .clickable { transition-duration: .001ms !important; }
  .hover-lift:hover, .hover-grow:hover, .clickable:hover, .press:active, .clickable:active { transform: none !important; }
}