/* EFFECTS.CSS — Animacoes + efeitos de entrada (fx-*) e hover (hv-*).
   Como usar e lista de classes: veja assets/css/agent.md
   Grupos: 1) ENTRADA (fx-*)  2) HOVER (hv-*). Respeita reduced-motion. */

:root {
  --fx-dur: 0.6s;                              /* duracao das entradas */
  --fx-ease: cubic-bezier(0.22, 1, 0.36, 1);   /* easing suave padrao */
  --fx-hover-dur: 0.25s;                       /* duracao dos hovers */
}

/* 1) ENTRADA — oculto ate ganhar .is-in (via JS) ou .fx-auto (no load) */
[class*="fx-fade"],
[class*="fx-slide"],
[class*="fx-zoom"] {
  opacity: 0;
  transition: opacity var(--fx-dur) var(--fx-ease),
    transform var(--fx-dur) var(--fx-ease);
  will-change: opacity, transform;
}

.fx-fade      { }                                   /* so fade */
.fx-fade-up   { transform: translateY(28px); }
.fx-fade-down { transform: translateY(-28px); }
.fx-fade-left { transform: translateX(-36px); }     /* entra da esquerda */
.fx-fade-right{ transform: translateX(36px); }      /* entra da direita */
.fx-zoom-in   { transform: scale(0.94); }
.fx-zoom-out  { transform: scale(1.06); }
.fx-slide-up  { transform: translateY(60px); }

/* Estado revelado (add via JS/IntersectionObserver ou .fx-auto) */
.is-in,
.fx-auto {
  opacity: 1 !important;
  transform: none !important;
}

/* Atrasos escalonados (stagger manual) */
.fx-delay-1 { transition-delay: 0.08s; }
.fx-delay-2 { transition-delay: 0.16s; }
.fx-delay-3 { transition-delay: 0.24s; }
.fx-delay-4 { transition-delay: 0.32s; }
.fx-delay-5 { transition-delay: 0.40s; }

/* Stagger automatico: filhos entram em sequencia quando o pai ganha .is-in */
.fx-stagger > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--fx-dur) var(--fx-ease), transform var(--fx-dur) var(--fx-ease);
}
.fx-stagger.is-in > * { opacity: 1; transform: none; }
.fx-stagger.is-in > *:nth-child(1) { transition-delay: 0.05s; }
.fx-stagger.is-in > *:nth-child(2) { transition-delay: 0.12s; }
.fx-stagger.is-in > *:nth-child(3) { transition-delay: 0.19s; }
.fx-stagger.is-in > *:nth-child(4) { transition-delay: 0.26s; }
.fx-stagger.is-in > *:nth-child(5) { transition-delay: 0.33s; }
.fx-stagger.is-in > *:nth-child(6) { transition-delay: 0.40s; }

/* Entradas por keyframe (rodam sozinhas, uteis p/ modais/toasts) */
@keyframes fx-kf-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-kf-zoom   { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes fx-kf-up     { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.fx-anim-fade { animation: fx-kf-fade var(--fx-dur) var(--fx-ease) both; }
.fx-anim-zoom { animation: fx-kf-zoom var(--fx-dur) var(--fx-ease) both; }
.fx-anim-up   { animation: fx-kf-up   var(--fx-dur) var(--fx-ease) both; }

/* Rotacao continua (spinners de loading) */
@keyframes fx-spin { to { transform: rotate(360deg); } }
.fx-spin { animation: fx-spin 0.7s linear infinite; }

/* 2) HOVER / MOVIMENTACAO — reagem a hover e foco (ex.: class="hv-grow") */
[class^="hv-"], [class*=" hv-"] {
  transition: transform var(--fx-hover-dur) var(--fx-ease),
    box-shadow var(--fx-hover-dur) var(--fx-ease),
    color var(--fx-hover-dur) var(--fx-ease),
    background-color var(--fx-hover-dur) var(--fx-ease);
}

/* Escala */
.hv-grow:hover,  .hv-grow:focus-visible   { transform: scale(1.05); }
.hv-shrink:hover,.hv-shrink:focus-visible { transform: scale(0.95); }
.hv-pop:active   { transform: scale(0.96); }

/* Movimento */
.hv-float:hover,  .hv-float:focus-visible   { transform: translateY(-6px); }
.hv-sink:hover,   .hv-sink:focus-visible    { transform: translateY(6px); }
.hv-slide-r:hover,.hv-slide-r:focus-visible { transform: translateX(4px); }
.hv-slide-l:hover,.hv-slide-l:focus-visible { transform: translateX(-4px); }

/* Sombra / elevacao */
.hv-shadow:hover,.hv-shadow:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -12px rgba(16, 16, 16, 0.25);
}

/* Zoom de imagem dentro de moldura (o pai precisa de overflow:hidden) */
.hv-zoom-img { overflow: hidden; }
.hv-zoom-img img { transition: transform 0.6s var(--fx-ease); will-change: transform; }
.hv-zoom-img:hover img { transform: scale(1.06); }

/* Sublinhado que cresce da esquerda (use em links) */
.hv-underline { position: relative; }
.hv-underline::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: currentColor; transition: width var(--fx-hover-dur) var(--fx-ease);
}
.hv-underline:hover::after, .hv-underline:focus-visible::after { width: 100%; }

/* Brilho deslizante (para botoes solidos) */
.hv-shine { position: relative; overflow: hidden; }
.hv-shine::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.18) 50%, transparent 80%);
  pointer-events: none;
}
.hv-shine:hover::after {
  transition: transform 0.6s var(--fx-ease);
  transform: translateX(120%);
}

/* Pulso continuo (badge/indicador) */
@keyframes fx-pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50% { box-shadow: 0 0 0 8px transparent; }
}
.hv-pulse { animation: fx-pulse 2.5s var(--fx-ease) infinite; }

/* Marquee horizontal (faixa que rola). Uso: um wrapper .fx-marquee com 2 trilhas
   .fx-marquee__track identicas lado a lado. Pausa no hover. */
@keyframes fx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fx-marquee { display: flex; overflow: hidden; width: 100%; }
.fx-marquee__track {
  display: flex; flex: 0 0 auto; align-items: center;
  animation: fx-marquee var(--fx-marquee-dur, 30s) linear infinite;
  will-change: transform;
}
.fx-marquee:hover .fx-marquee__track { animation-play-state: paused; }

/* Marquee VERTICAL (colunas de depoimentos que sobem/descem em loop).
   Uso: wrapper .fx-marquee-y com altura fixa (ex.: h-xl) contendo uma trilha
   .fx-marquee-y__track com 2 grupos IDENTICOS empilhados (o 2o com aria-hidden).
   O gap interno dos grupos deve ser o mesmo da trilha (var(--fx-marquee-gap)).
   Variante .fx-marquee-y--down inverte o sentido. Pausa no hover; fade nas bordas. */
@keyframes fx-marquee-y { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--fx-marquee-gap, var(--space-4)) / 2)); } }
.fx-marquee-y {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.fx-marquee-y__track {
  display: flex; flex-direction: column; gap: var(--fx-marquee-gap, var(--space-4));
  animation: fx-marquee-y var(--fx-marquee-dur, 32s) linear infinite;
  will-change: transform;
}
.fx-marquee-y--down .fx-marquee-y__track { animation-direction: reverse; }
.fx-marquee-y:hover .fx-marquee-y__track { animation-play-state: paused; }

/* Parallax em ZOOM: o JS aumenta --parallax-zoom (1 → ~1.15) conforme o scroll.
   O elemento marcado deve ter uma camada interna que use scale(var(--parallax-zoom)).
   Sem JS, --parallax-zoom = 1 (imagem estática). Degrada bem. */
.fx-parallax-zoom { will-change: transform; }

/* Revelacao em CORTINA (molduras de imagem): o recorte abre na vertical quando o
   elemento entra na tela (.is-in via IntersectionObserver, como os fx-fade). */
[class*="fx-reveal"] {
  opacity: 0;
  clip-path: inset(14% 0 14% 0);
  transition: opacity var(--fx-dur) var(--fx-ease), clip-path 1s var(--fx-ease);
  will-change: clip-path, opacity;
}
[class*="fx-reveal"].is-in { opacity: 1; clip-path: inset(0 0 0 0); }

/* Parallax VERTICAL sutil: o JS escreve --parallax-y conforme a posicao do elemento
   no viewport. Aplique data-parallax-y="24" (amplitude em px) na imagem de um
   banner; imagens ganham scale para nao mostrar bordas ao deslizar. */
[data-parallax-y] { transform: translateY(var(--parallax-y, 0)); will-change: transform; }
img[data-parallax-y] { scale: 1.12; }

/* ACESSIBILIDADE — reduced-motion (WCAG). UNICO bloco do projeto; ver agent.md. */
@media (prefers-reduced-motion: reduce) {
  /* Kill switch global: zera qualquer animacao/transicao no site */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Entradas do effects.css ficam visiveis sem animar */
  [class*="fx-fade"], [class*="fx-slide"], [class*="fx-zoom"],
  .fx-stagger > * { opacity: 1 !important; transform: none !important; }
  [class*="fx-reveal"] { opacity: 1 !important; clip-path: none !important; }
  [data-parallax-y] { transform: none !important; }
  .fx-anim-fade, .fx-anim-zoom, .fx-anim-up { animation: none; opacity: 1; }
  /* Hovers nao movem */
  .hv-grow:hover, .hv-shrink:hover, .hv-float:hover, .hv-sink:hover,
  .hv-shadow:hover, .hv-zoom-img:hover img,
  .hv-slide-r:hover, .hv-slide-l:hover { transform: none; }
  .hv-pulse { animation: none; }
  /* Sistema legado .reveal / .stagger (usado no HTML atual) */
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
}