/* =========================================================================
   Leon.Studio — Design System / ANIMACOES
   -------------------------------------------------------------------------
   Catalogo unico de keyframes + utilitarios. Tres familias:

   A. SURGIMENTO  — disparadas no scroll (uma vez por elemento)
   B. AMBIENTE    — loop infinito, decorativas, de fundo
   C. INTERACAO   — respondem a hover / focus / click

   Compatibilidade: mantem os nomes herdados dos tres sistemas de origem
   (fadeSlideIn, .animate-on-scroll, beam-drop, beam-slide, beam-x, beam-y,
   .fade-up, .delay-100/200/300) para que o markup dos templates continue
   valido sem reescrita.
   ========================================================================= */

/* =========================================================================
   A. SURGIMENTO
   ========================================================================= */

/* Entrada canonica: fade + slide + desfoque saindo. Herdada do Canvas. */
@keyframes fadeSlideIn {
  0%   { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0px); }
}

/* Variacoes direcionais da mesma ideia. */
@keyframes fadeSlideLeft {
  0%   { opacity: 0; transform: translateX(-40px); filter: blur(6px); }
  100% { opacity: 1; transform: translateX(0);     filter: blur(0px); }
}
@keyframes fadeSlideRight {
  0%   { opacity: 0; transform: translateX(40px); filter: blur(6px); }
  100% { opacity: 1; transform: translateX(0);    filter: blur(0px); }
}
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes scaleIn {
  0%   { opacity: 0; transform: scale(0.92); filter: blur(4px); }
  100% { opacity: 1; transform: scale(1);    filter: blur(0px); }
}

/* Revelacao por mascara: o bloco "sobe" por dentro de uma janela. */
@keyframes clipReveal {
  0%   { clip-path: inset(0 0 100% 0); transform: translateY(0.4em); }
  100% { clip-path: inset(0 0 -10% 0); transform: translateY(0); }
}

/* Letras do hero: cada caractere sobe com leve rotacao 3D. */
@keyframes charRise {
  0%   { opacity: 0; transform: translateY(0.55em) rotateX(-55deg); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0) rotateX(0deg);        filter: blur(0px); }
}

/* Cartao entrando em perspectiva (cluster do hero). */
@keyframes tiltIn {
  0%   { opacity: 0; transform: perspective(1000px) rotateY(14deg) translateZ(-90px) translateY(24px); }
  100% { opacity: 1; transform: perspective(1000px) rotateY(0deg)  translateZ(0)     translateY(0); }
}

/* Linha/divisor que se desenha da esquerda para a direita. */
@keyframes lineGrow {
  0%   { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* Barra de progresso / medidor preenchendo. */
@keyframes barFill {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* Estados pausado/rodando — o JS so troca a classe .animate.
   Herdado do Canvas: o markup ja carrega a animacao inline e ela fica
   parada ate o elemento entrar no viewport. */
.animate-on-scroll        { animation-play-state: paused  !important; }
.animate-on-scroll.animate{ animation-play-state: running !important; }

/* Reveal por transicao (herdado do Mouv). Usado onde o markup nao declara
   animation inline — o observer apenas adiciona .visible. */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity   var(--dur-ambient, 1s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    transform var(--dur-ambient, 1s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    filter    var(--dur-ambient, 1s) var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  filter: blur(6px);
  will-change: opacity, transform;
}
.fade-up.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

.fade-in         { opacity: 0; transition: opacity var(--dur-ambient) var(--ease-out-expo); }
.fade-in.visible { opacity: 1; }

.fade-left,
.fade-right {
  opacity: 0;
  transition: opacity var(--dur-ambient) var(--ease-out-expo), transform var(--dur-ambient) var(--ease-out-expo);
}
.fade-left  { transform: translateX(-40px); }
.fade-right { transform: translateX(40px); }
.fade-left.visible,
.fade-right.visible { opacity: 1; transform: translateX(0); }

.fade-scale         { opacity: 0; transform: scale(0.94); transition: opacity var(--dur-slower) var(--ease-out-expo), transform var(--dur-slower) var(--ease-out-expo); }
.fade-scale.visible { opacity: 1; transform: scale(1); }

/* Escada de atrasos. 100/200/300 vem do Mouv; o resto completa a escala. */
.delay-50  { transition-delay:  50ms; animation-delay:  50ms; }
.delay-100 { transition-delay: 100ms; animation-delay: 100ms; }
.delay-150 { transition-delay: 150ms; animation-delay: 150ms; }
.delay-200 { transition-delay: 200ms; animation-delay: 200ms; }
.delay-300 { transition-delay: 300ms; animation-delay: 300ms; }
.delay-400 { transition-delay: 400ms; animation-delay: 400ms; }
.delay-500 { transition-delay: 500ms; animation-delay: 500ms; }
.delay-700 { transition-delay: 700ms; animation-delay: 700ms; }
.delay-1000{ transition-delay: 1000ms; animation-delay: 1000ms; }

/* Stagger automatico: o JS escreve --i e o filho herda o atraso. */
[data-stagger] > * {
  transition-delay: calc(var(--i, 0) * 70ms);
  animation-delay: calc(var(--i, 0) * 70ms);
}

/* =========================================================================
   B. AMBIENTE (loop)
   ========================================================================= */

/* --- Beams: feixe de luz atravessando um fio de 1px --------------------- */
/* verticais e horizontais (Canvas) */
@keyframes beam-drop {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
@keyframes beam-slide {
  0%   { transform: translateX(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
/* variante curta usada dentro de componentes (Marketing Agency) */
@keyframes beam-x {
  0%   { transform: translateX(-100%); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
@keyframes beam-y {
  0%   { transform: translateY(-100%); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
.animate-beam-x { animation: beam-x 2.5s infinite linear; }
.animate-beam-y { animation: beam-y 2.5s infinite linear; }

/* --- Luz e respiro ----------------------------------------------------- */
@keyframes glowPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.08); }
}
@keyframes breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@keyframes statusPulse {
  0%       { box-shadow: 0 0 0 0 var(--green-48); }
  70%      { box-shadow: 0 0 0 8px rgba(169, 208, 70, 0); }
  100%     { box-shadow: 0 0 0 0 rgba(169, 208, 70, 0); }
}

/* --- Flutuacao --------------------------------------------------------- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-22px) rotate(calc(var(--rot, 0deg) + 1.5deg)); }
}
@keyframes drift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(24px, -18px); }
  66%  { transform: translate(-18px, 12px); }
  100% { transform: translate(0, 0); }
}

/* --- Fundos vivos ------------------------------------------------------ */
/* grade que desliza lentamente (dobra 1 e aberturas de secao) */
@keyframes gridPan {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 60px 60px, 60px 60px; }
}
/* nuvem de cor que gira/escala — camada aurora */
@keyframes auroraShift {
  0%   { transform: translate(-6%, -4%) scale(1);    opacity: 0.5; }
  50%  { transform: translate(6%, 4%)  scale(1.18);  opacity: 0.9; }
  100% { transform: translate(-6%, -4%) scale(1);    opacity: 0.5; }
}
/* linha de varredura descendo sobre paineis tecnicos */
@keyframes scanline {
  0%   { transform: translateY(-100%); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(1000%); opacity: 0; }
}
/* bolhas da marca subindo (padrao de circulos do bg-logo) */
@keyframes bubbleRise {
  0%   { transform: translateY(0) scale(0.9);      opacity: 0; }
  12%  { opacity: 0.55; }
  85%  { opacity: 0.35; }
  100% { transform: translateY(-120vh) scale(1.2); opacity: 0; }
}
/* orbita de satelites em torno de um nucleo (herdado do Marketing Agency) */
@keyframes orbit {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* ruido de filme: micro deslocamento da textura */
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10%  { transform: translate(-2%, -3%); }
  30%  { transform: translate(3%, -1%); }
  50%  { transform: translate(-1%, 2%); }
  70%  { transform: translate(2%, 3%); }
  90%  { transform: translate(-3%, 1%); }
}

/* --- Texto ------------------------------------------------------------- */
/* brilho correndo por dentro de um texto com background-clip */
@keyframes textShine {
  0%   { background-position: -200% 50%; }
  100% { background-position: 200% 50%; }
}
/* cursor de digitacao */
@keyframes caret {
  0%, 45%  { opacity: 1; }
  55%, 100%{ opacity: 0; }
}

/* --- Marquee ----------------------------------------------------------- */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marqueeReverse {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* --- Indicadores ------------------------------------------------------- */
@keyframes bounceSoft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@keyframes spinSlow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =========================================================================
   C. INTERACAO
   ========================================================================= */

/* Varredura diagonal de luz no hover (cards e botoes). */
@keyframes shimmerSweep {
  0%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateX(220%) skewX(-18deg);  opacity: 0; }
}

/* Onda circular a partir do clique. */
@keyframes ripple {
  0%   { transform: scale(0);   opacity: 0.55; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Seta que avanca e volta ao passar o mouse. */
@keyframes arrowNudge {
  0%   { transform: translate(0, 0); }
  45%  { transform: translate(6px, -6px); opacity: 0; }
  46%  { transform: translate(-6px, 6px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

/* Ping quadrado — versao da marca para o dot de status (sem raio). */
@keyframes pingSquare {
  0%   { transform: scale(1);   opacity: 0.75; }
  75%, 100% { transform: scale(2.2); opacity: 0; }
}

/* =========================================================================
   UTILITARIOS DE ANIMACAO
   Uso: class="anim-float" / class="anim-glow" ... combinados com .delay-*
   ========================================================================= */
.anim-float        { animation: float 6s var(--ease-float) infinite; }
.anim-float-slow   { animation: floatSlow 9s var(--ease-float) infinite; }
.anim-drift        { animation: drift 18s var(--ease-in-out-soft) infinite; }
.anim-glow         { animation: glowPulse 5s var(--ease-in-out-soft) infinite; }
.anim-breathe      { animation: breathe 4s var(--ease-in-out-soft) infinite; }
.anim-aurora       { animation: auroraShift 22s var(--ease-in-out-soft) infinite; }
.anim-grid-pan     { animation: gridPan 12s linear infinite; }
.anim-scanline     { animation: scanline 6s linear infinite; }
.anim-spin-slow    { animation: spinSlow 14s linear infinite; }
.anim-orbit        { animation: orbit 20s linear infinite; }
.anim-orbit-rev    { animation: orbit 26s linear infinite reverse; }
.anim-bounce-soft  { animation: bounceSoft 2.4s var(--ease-in-out-soft) infinite; }
.anim-caret        { animation: caret 1.1s step-end infinite; }
.anim-grain        { animation: grain 8s steps(6) infinite; }
.anim-status       { animation: statusPulse 2.4s var(--ease-out-quart) infinite; }
.anim-ping-square  { animation: pingSquare 2s var(--ease-out-quart) infinite; }
.anim-text-shine   {
  background-size: 200% auto;
  animation: textShine 6s linear infinite;
}
.anim-pause        { animation-play-state: paused; }

/* Marquee: o container corta, a trilha desliza; pausa no hover. */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: inline-flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee-track.reverse { animation-name: marqueeReverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-fast .marquee-track  { animation-duration: 22s; }
.marquee-slow .marquee-track  { animation-duration: 60s; }