/* ============================================================
   ANIMATIONS — Keyframes auxiliares e estados iniciais para GSAP
   ============================================================ */

/* ==================== BARRA DE PROGRESSO DO SCROLL ==================== */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--color-gold), #FFE8A0, var(--color-gold));
  transform-origin: left;
  transform: scaleX(0);
  z-index: calc(var(--z-nav) + 1);
  pointer-events: none;
}

/* ==================== ESTADOS INICIAIS (pré-animação) ==================== */
/*
 * Estratégia: CSS NÃO oculta nada por padrão.
 * O GSAP usa gsap.set() para definir o estado inicial ANTES de animar.
 * Assim, sem JS o conteúdo sempre aparece. Com JS, GSAP controla.
 * Só ocultar quando .gsap-ready estiver no body (adicionado pelo JS).
 */

body.gsap-ready .reveal-up    { opacity: 0; transform: translateY(40px); }
body.gsap-ready .reveal-fade  { opacity: 0; }
body.gsap-ready .reveal-left  { opacity: 0; transform: translateX(-40px); }
body.gsap-ready .reveal-right { opacity: 0; transform: translateX(40px); }
body.gsap-ready .reveal-scale { opacity: 0; transform: scale(0.95); }

/* Palavras do hero split — só ocultar com gsap-ready */
body.gsap-ready .word-inner   { opacity: 0; transform: translateY(100%); }

/* Fallback gracioso: se GSAP não carregar, mostrar tudo */
@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-fade,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .word-inner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==================== KEYFRAMES GLOBAIS ==================== */

/* Brilho dourado sweep */
@keyframes gold-sweep {
  0%   { left: -100%; }
  100% { left: 200%; }
}

/* Fade in genérico */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slide up genérico */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Ring expandindo (badge loading) */
@keyframes ring-expand {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* Giro lento para ícones decorativos */
@keyframes slow-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Flutuação suave (hero elements) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* Piscar suave */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Caret cursor texto */
@keyframes caret-blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75%      { opacity: 0; }
}

/* ==================== CLASSES UTILITÁRIAS DE ANIMAÇÃO ==================== */

.anim-float {
  animation: float 6s ease-in-out infinite;
}

.anim-slow-spin {
  animation: slow-spin 20s linear infinite;
}

/* Delays para stagger CSS puro (backup) */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* ==================== TRANSIÇÕES DE PÁGINA ==================== */

.page-transition-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-bg);
  z-index: calc(var(--z-cursor) + 1);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}

/* ==================== BRILHO DOURADO EM BORDA ==================== */

.gold-border-glow {
  position: relative;
}

.gold-border-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    var(--color-gold-soft),
    var(--color-gold),
    var(--color-gold-soft));
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
  z-index: -1;
}

.gold-border-glow:hover::before {
  opacity: 1;
}

/* ==================== NÚMERO COUNTER ==================== */

.counter-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ==================== LINHA QUE CRESCE (SVG path) ==================== */

.path-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

/* GSAP vai animar stroke-dashoffset para 0 no scroll */

/* ==================== HERO TEXT SPLIT ==================== */
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.word-inner {
  display: inline-block;
}

/* ==================== ANIMAÇÕES CSS SEMPRE ATIVAS ==================== */

/* Gold shimmer nos eyebrows e headings */
@keyframes gold-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.hero__eyebrow,
.eyebrow {
  background: linear-gradient(90deg,
    var(--color-gold) 30%,
    #FFE8A0 50%,
    var(--color-gold) 70%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gold-shimmer 4s linear infinite;
}

/* Pulso suave no botão primário */
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,162,75,0); }
  50%       { box-shadow: 0 0 0 8px rgba(201,162,75,0.18); }
}

.btn-primary {
  animation: btn-pulse 3s ease-in-out infinite;
}

/* Brilho nos números das stats quando visíveis */
@keyframes stat-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(201,162,75,0); }
  50%       { text-shadow: 0 0 20px rgba(201,162,75,0.4); }
}

.stat-number {
  animation: stat-glow 3s ease-in-out infinite;
}