/* ========================================
   fbxmedia.com — Animations
   ======================================== */

/* ========================================
   Keyframes
   ======================================== */
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.02); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

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

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

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

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

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

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,212,170,0.2); }
  50% { box-shadow: 0 0 40px rgba(0,212,170,0.45); }
}

@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ========================================
   Scroll-Reveal Classes
   (Applied by JS IntersectionObserver)
   ======================================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease-out, cubic-bezier(0.16,1,0.3,1)),
              transform 0.7s var(--ease-out, cubic-bezier(0.16,1,0.3,1));
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s, transform 0.7s;
}
.reveal-left.revealed { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s, transform 0.7s;
}
.reveal-right.revealed { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s, transform 0.7s;
}
.reveal-scale.revealed { opacity: 1; transform: scale(1); }

/* Staggered delay utilities */
.delay-1 { transition-delay: 100ms !important; }
.delay-2 { transition-delay: 200ms !important; }
.delay-3 { transition-delay: 300ms !important; }
.delay-4 { transition-delay: 400ms !important; }
.delay-5 { transition-delay: 500ms !important; }
.delay-6 { transition-delay: 600ms !important; }

/* ========================================
   Hero Entrance Animations
   ======================================== */
.hero-badge { animation: fadeUp 0.8s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both; }
.hero h1   { animation: fadeUp 0.8s 0.1s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both; }
.hero-desc { animation: fadeUp 0.8s 0.2s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both; }
.hero-actions { animation: fadeUp 0.8s 0.3s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both; }
.hero-trust { animation: fadeUp 0.8s 0.4s var(--ease-out, cubic-bezier(0.16,1,0.3,1)) both; }

/* ========================================
   Gradient Text Animation
   ======================================== */
.animated-gradient {
  background: linear-gradient(270deg, #00d4aa, #7c3aed, #00d4aa, #33ffcc);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
}

/* ========================================
   Ticker / Marquee
   ======================================== */
.ticker-wrap {
  overflow: hidden;
  background: var(--clr-bg-2, #0d0d1a);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 14px 0;
}

.ticker-inner {
  display: flex;
  width: max-content;
  animation: ticker 30s linear infinite;
}

.ticker-inner:hover { animation-play-state: paused; }

.ticker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  padding: 0 40px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
}

.ticker-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #00d4aa;
  flex-shrink: 0;
}

/* ========================================
   Loading Spinner
   ======================================== */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0,212,170,0.2);
  border-top-color: #00d4aa;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ========================================
   Glow Pulse on Focus Elements
   ======================================== */
.glow-pulse {
  animation: borderGlow 3s ease-in-out infinite;
}

/* ========================================
   Metric Bar Animation
   ======================================== */
.metric-fill {
  width: 0;
  transition: width 1.5s cubic-bezier(0.16,1,0.3,1);
}

.metric-fill.animated { }

/* ========================================
   Button Ripple Effect
   ======================================== */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: scale(0);
  animation: ripple-expand 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}

/* ========================================
   Card Shimmer (loading state)
   ======================================== */
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.03) 100%
  );
  background-size: 800px 100%;
  animation: shimmer 2s infinite;
}

/* ========================================
   Page Transition
   ======================================== */
.page-transition {
  animation: fadeIn 0.5s ease both;
}