/* animations.css — keyframes e estados iniciais para reveal */
@keyframes fadeUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(31, 157, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 157, 85, 0); }
}

@keyframes blink { 50% { opacity: 0; } }
@keyframes spin   { to { transform: rotate(360deg); } }

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(20px, -20px, 0) scale(1.05); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes growBar {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes drawRing {
  from { stroke-dashoffset: 200; }
  to   { stroke-dashoffset: 0; }
}

@keyframes ticker {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Reveal padrão — JS adiciona .is-in para disparar */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Se o usuário prefere sem motion, mostra direto */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* Estado ativo do cursor customizado */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(-50%, -50%, 0);
  transition: width 200ms var(--ease), height 200ms var(--ease), background 200ms var(--ease), border-color 200ms var(--ease);
  will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  opacity: 0.5;
}
.cursor-ring.is-hover { width: 64px; height: 64px; background: rgba(255, 91, 31, 0.12); border-color: var(--accent); }
@media (hover: none), (max-width: 900px) {
  .cursor-dot, .cursor-ring { display: none; }
}