/* ====================================================================
   VSAA PREMIUM ANIMATIONS
   V-SAT Solutions 2026
==================================================================== */

/* ── SCROLL REVEAL SYSTEM ────────────────────────────────────────── */
/* scroll-animate: visible by default — JS progressively enhances */
.scroll-animate {
  opacity:1;
  transform:none;
  transition:opacity 0.75s cubic-bezier(0,0,0.2,1), transform 0.75s cubic-bezier(0,0,0.2,1);
}
/* JS adds .js-ready to body when it's running, then hides elements for animation */
.js-ready .scroll-animate {
  opacity:0;
  transform:translateY(40px);
}
.js-ready .scroll-animate.slide-left  { transform:translateX(-50px); }
.js-ready .scroll-animate.slide-right { transform:translateX(50px); }
.js-ready .scroll-animate.scale-in    { transform:scale(0.88); }
.js-ready .scroll-animate.fade-only   { transform:none; opacity:0; }
.js-ready .scroll-animate.visible {
  opacity:1;
  transform:none;
}
/* in-view alias (used by first fallback block) */
.js-ready .scroll-animate.in-view {
  opacity:1;
  transform:none;
}
.scroll-animate.delay-1 { transition-delay:0.1s; }
.scroll-animate.delay-2 { transition-delay:0.2s; }
.scroll-animate.delay-3 { transition-delay:0.3s; }
.scroll-animate.delay-4 { transition-delay:0.4s; }
.scroll-animate.delay-5 { transition-delay:0.5s; }
.scroll-animate.delay-6 { transition-delay:0.6s; }

/* ── HERO ENTRANCE ───────────────────────────────────────────────── */
/* fade-up uses CSS animation with 'forwards' fill — works without JS */
.fade-up          { opacity:0; animation:fadeUp 0.85s cubic-bezier(0,0,0.2,1) 0.1s forwards; }
.fade-up-delay-1  { opacity:0; animation:fadeUp 0.85s cubic-bezier(0,0,0.2,1) 0.2s forwards; }
.fade-up-delay-2  { opacity:0; animation:fadeUp 0.85s cubic-bezier(0,0,0.2,1) 0.35s forwards; }
.fade-up-delay-3  { opacity:0; animation:fadeUp 0.85s cubic-bezier(0,0,0.2,1) 0.5s forwards; }
.fade-up-delay-4  { opacity:0; animation:fadeUp 0.85s cubic-bezier(0,0,0.2,1) 0.65s forwards; }

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

/* ── LOGO ANIMATIONS ─────────────────────────────────────────────── */
.logo-animate {
  animation:logoFloat 5s ease-in-out infinite;
}
@keyframes logoFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50%     { transform:translateY(-12px) scale(1.02); }
}

.brand-name-animate  { animation:fadeUp 1s cubic-bezier(0,0,0.2,1) 0.2s both; }
.brand-gold-animate  { animation:fadeUp 1s cubic-bezier(0,0,0.2,1) 0.38s both; }

/* ── HERO LOGO VISUAL ────────────────────────────────────────────── */
.hero-logo-container {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:380px; height:380px; flex-shrink:0;
}
.hero-logo-wrap {
  position:relative; z-index:3;
  width:200px; height:200px;
}
.hero-logo-image-v2 {
  width:200px; height:200px; border-radius:50%; object-fit:cover;
  border:4px solid rgba(201,166,70,0.7);
  box-shadow: 0 0 0 12px rgba(201,166,70,0.08), 0 0 0 24px rgba(201,166,70,0.04), 0 20px 60px rgba(0,0,0,0.4);
}
.logo-shine-overlay {
  position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,0.25) 0%,transparent 60%);
  pointer-events:none;
}
.logo-orbit-ring {
  position:absolute; inset:-40px; border-radius:50%;
  border:1.5px dashed rgba(201,166,70,0.3);
  animation:orbitSpin 20s linear infinite;
}
@keyframes orbitSpin { to { transform:rotate(360deg); } }

.hero-deco-circle {
  position:absolute; border-radius:50%;
  background:linear-gradient(135deg,rgba(201,166,70,0.15),rgba(201,166,70,0.04));
  border:1px solid rgba(201,166,70,0.18);
}
.hero-deco-1 {
  width:320px; height:320px; top:50%; left:50%;
  transform:translate(-50%,-50%);
  animation:pulse 4s ease-in-out infinite;
}
.hero-deco-2 {
  width:420px; height:420px; top:50%; left:50%;
  transform:translate(-50%,-50%);
  animation:pulse 4s ease-in-out infinite 1s;
  border-color:rgba(201,166,70,0.08);
}
@keyframes pulse {
  0%,100% { opacity:0.6; transform:translate(-50%,-50%) scale(1); }
  50%     { opacity:1;   transform:translate(-50%,-50%) scale(1.04); }
}

/* Finance particles */
.hero-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-particle {
  position:absolute; border-radius:50%;
  background:rgba(201,166,70,0.5);
  animation:particleFloat var(--dur,8s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
@keyframes particleFloat {
  0%,100% { transform:translate(0,0) scale(1); opacity:0.4; }
  33%     { transform:translate(var(--tx1,20px),var(--ty1,-30px)) scale(1.2); opacity:0.7; }
  66%     { transform:translate(var(--tx2,-15px),var(--ty2,-15px)) scale(0.85); opacity:0.35; }
}

/* ── HERO STATS COUNTERS ─────────────────────────────────────────── */
.stat-number {
  display:inline-block;
  animation:countUp 2s ease-out forwards;
}
@keyframes countUp {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── HERO BG WAVES ───────────────────────────────────────────────── */
.hero-bg-wave {
  position:absolute; border-radius:50%; opacity:0.06;
  background:radial-gradient(circle,var(--gold-main),transparent 70%);
  pointer-events:none;
}
.hero-wave-1 { width:600px; height:600px; top:-200px; right:-100px; animation:waveDrift 12s ease-in-out infinite; }
.hero-wave-2 { width:400px; height:400px; bottom:-100px; left:-150px; animation:waveDrift 15s ease-in-out infinite reverse; }
@keyframes waveDrift {
  0%,100% { transform:translate(0,0) scale(1); }
  50%     { transform:translate(30px,-20px) scale(1.1); }
}

/* ── CARD STAGGER ────────────────────────────────────────────────── */
.stagger-children > *:nth-child(1) { transition-delay:0.05s; }
.stagger-children > *:nth-child(2) { transition-delay:0.12s; }
.stagger-children > *:nth-child(3) { transition-delay:0.19s; }
.stagger-children > *:nth-child(4) { transition-delay:0.26s; }
.stagger-children > *:nth-child(5) { transition-delay:0.33s; }
.stagger-children > *:nth-child(6) { transition-delay:0.40s; }
.stagger-children > *:nth-child(7) { transition-delay:0.47s; }
.stagger-children > *:nth-child(8) { transition-delay:0.54s; }

/* ── SHIMMER EFFECT ──────────────────────────────────────────────── */
.shimmer { position:relative; overflow:hidden; }
.shimmer::after {
  content:''; position:absolute; top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);
  animation:shimmerSlide 2.5s ease-in-out infinite;
}
@keyframes shimmerSlide { to { left:200%; } }

/* ── GLOW ANIMATIONS ─────────────────────────────────────────────── */
.glow-pulse { animation:glowPulse 3s ease-in-out infinite; }
@keyframes glowPulse {
  0%,100% { box-shadow:0 0 20px rgba(201,166,70,0.3); }
  50%     { box-shadow:0 0 40px rgba(201,166,70,0.6),0 0 60px rgba(201,166,70,0.2); }
}

/* ── TRUST BAR ───────────────────────────────────────────────────── */
.trust-bar { overflow:hidden; position:relative; }
@keyframes trustScroll { to { transform:translateX(-50%); } }

/* ── SECTION TRANSITION DECORATORS ──────────────────────────────── */
.section-wave-top {
  position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,transparent,var(--gold-main) 30%,var(--gold-light) 70%,transparent);
  opacity:0.35;
}

/* ── TYPING CURSOR ───────────────────────────────────────────────── */
.typing-cursor { animation:blinkCursor 1s step-end infinite; }
@keyframes blinkCursor { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── REVEAL LINES ────────────────────────────────────────────────── */
.reveal-line { overflow:hidden; }
.reveal-line-inner { transform:translateY(110%); animation:revealLine 0.8s cubic-bezier(0,0,0.2,1) forwards; }
@keyframes revealLine { to { transform:translateY(0); } }

/* ── NUMBER COUNTER ──────────────────────────────────────────────── */
.count-up { opacity:0; }
.count-up.visible { animation:countIn 0.6s ease-out forwards; }
@keyframes countIn { from{opacity:0;transform:scale(0.5)} to{opacity:1;transform:scale(1)} }

/* ── LOADING SKELETON ────────────────────────────────────────────── */
.skeleton {
  background:linear-gradient(90deg,rgba(201,166,70,0.06) 25%,rgba(201,166,70,0.12) 50%,rgba(201,166,70,0.06) 75%);
  background-size:200% 100%;
  animation:skeletonLoad 1.5s ease-in-out infinite;
  border-radius:var(--r-md);
}
@keyframes skeletonLoad { to { background-position:-200% 0; } }

/* ── HOVER LIFT ──────────────────────────────────────────────────── */
.hover-lift { transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.35s ease; }
.hover-lift:hover { transform:translateY(-8px); box-shadow:var(--shadow-xl); }

/* ── ICON SPIN ON HOVER ──────────────────────────────────────────── */
.hover-spin:hover { animation:spinOnce 0.5s ease-out; }
@keyframes spinOnce { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* ── FOOTER PULSE ────────────────────────────────────────────────── */
@keyframes footerGlow {
  0%,100% { text-shadow:0 0 10px rgba(201,166,70,0.4); }
  50%     { text-shadow:0 0 20px rgba(201,166,70,0.8),0 0 40px rgba(201,166,70,0.3); }
}

/* ── REDUCED MOTION ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  .scroll-animate { opacity:1; transform:none; }
}