/* =========================================================================
   animations.css — Keyframes e classes utilitárias de animação
   As classes .reveal* são ativadas via JS (IntersectionObserver).
   ========================================================================= */

/* ── KEYFRAMES — gradients/glow contínuos ─────────────────────────── */
@keyframes glow-drift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  50%      { transform: translate(2%, -2%) scale(1.05); opacity: 1; }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 24px rgba(200, 147, 63, 0.32); }
  50%      { box-shadow: 0 0 48px rgba(200, 147, 63, 0.55); }
}

@keyframes aurora {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes scroll-bounce {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.4; }
  50%      { transform: translate(-50%, 8px); opacity: 1; }
}

@keyframes scroll-pulse {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ── KEYFRAMES — reveals de entrada ────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(2rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-2rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-left {
  from { opacity: 0; transform: translateX(-2rem); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-right {
  from { opacity: 0; transform: translateX(2rem); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes blur-in {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}

@keyframes rotate-in {
  from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ── KEYFRAMES — typewriter (cursor blink) ─────────────────────────── */
@keyframes blink {
  0%, 50%   { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ── KEYFRAMES — gradient text shift ──────────────────────────────── */
@keyframes gradient-pan {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

/* ── REVEAL — estado inicial (pré-animação) ──────────────────────────
   Por padrão, tudo com .reveal-* começa invisível. JS adiciona
   .is-visible quando o elemento entra no viewport. */
.reveal,
.reveal--up,
.reveal--down,
.reveal--left,
.reveal--right,
.reveal--scale,
.reveal--blur,
.reveal--rotate {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out),
              filter var(--duration-slow) var(--ease-out);
}

.reveal--up    { transform: translateY(2rem); }
.reveal--down  { transform: translateY(-2rem); }
.reveal--left  { transform: translateX(-2rem); }
.reveal--right { transform: translateX(2rem); }
.reveal--scale { transform: scale(0.92); }
.reveal--blur  { filter: blur(8px); }
.reveal--rotate { transform: rotate(-6deg) scale(0.95); }

/* Quando JS marca como visível, anima pra posição final */
.reveal.is-visible,
.reveal--up.is-visible,
.reveal--down.is-visible,
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible,
.reveal--rotate.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0);
}

.reveal--blur.is-visible {
  opacity: 1;
  filter: blur(0);
}

/* ── STAGGER — delays para animar em cascata ─────────────────────────
   Use em filhos diretos ou atribua .stagger-{n} manualmente */
.reveal--up.stagger-1 { transition-delay: 80ms; }
.reveal--up.stagger-2 { transition-delay: 160ms; }
.reveal--up.stagger-3 { transition-delay: 240ms; }
.reveal--up.stagger-4 { transition-delay: 320ms; }
.reveal--up.stagger-5 { transition-delay: 400ms; }
.reveal--up.stagger-6 { transition-delay: 480ms; }

/* ── TYPEWRITER — cursor piscando depois de digitar ───────────────── */
.typewriter {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid var(--color-accent);
  width: 0;
  /* Largura é setada por JS baseado no texto */
  animation: none;
}

.typewriter.is-typing {
  animation: none;
}

.typewriter.is-done {
  border-right-color: transparent;
  animation: blink 1s step-end infinite;
}

/* ── GLOW UTILITY ──────────────────────────────────────────────────── */
.glow-accent {
  animation: glow-pulse 3s var(--ease-in-out) infinite;
}

.glow-soft {
  position: relative;
}

.glow-soft::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--gradient-accent);
  filter: blur(16px);
  opacity: 0.4;
  z-index: -1;
  transition: opacity var(--duration-base) var(--ease-out);
}

.glow-soft:hover::before {
  opacity: 0.7;
}

/* ── FLOAT (sutil, decorativo) ─────────────────────────────────────── */
.float { animation: float 4s var(--ease-in-out) infinite; }
.float--slow { animation-duration: 6s; }

/* ── AURORA BACKGROUND ────────────────────────────────────────────── */
.aurora {
  background: linear-gradient(
    -45deg,
    rgba(200, 147, 63, 0.08),
    rgba(13, 31, 51, 0.0) 40%,
    rgba(36, 66, 112, 0.18) 70%,
    rgba(200, 147, 63, 0.05)
  );
  background-size: 400% 400%;
  animation: aurora 18s var(--ease-in-out) infinite;
}

/* ── MARQUEE horizontal (logo strip, futuro) ──────────────────────── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee {
  display: flex;
  overflow: hidden;
  gap: var(--space-8);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee__track {
  display: flex;
  gap: var(--space-8);
  flex-shrink: 0;
  animation: marquee 30s linear infinite;
}

/* ── SKELETON (loading state, futuro) ──────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 0%,
    var(--color-surface-2) 50%,
    var(--color-surface) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s var(--ease-in-out) infinite;
}

/* ── NUMBER TICKER (contadores) ───────────────────────────────────── */
@keyframes tick {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.2em); }
}

.tick { display: inline-block; animation: tick 0.6s var(--ease-spring); }