/* ============================================
   GRAVITY VAULT — Animations & Micro-interactions
   ============================================ */

/* ============================================
   SCROLL REVEAL
   ============================================ */

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

.reveal {
  opacity: 0;
  will-change: opacity, transform;
}

.reveal.visible {
  animation: fadeSlideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.reveal:nth-child(1) { animation-delay: 0.0s; }
.reveal:nth-child(2) { animation-delay: 0.1s; }
.reveal:nth-child(3) { animation-delay: 0.2s; }
.reveal:nth-child(4) { animation-delay: 0.3s; }
.reveal:nth-child(5) { animation-delay: 0.4s; }
.reveal:nth-child(6) { animation-delay: 0.5s; }

/* ============================================
   HERO FLOAT
   ============================================ */

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

.float {
  animation: float 6s ease-in-out infinite;
  will-change: transform;
}

/* ============================================
   SECURITY PULSE
   ============================================ */

@keyframes securityPulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

.security-pulse {
  animation: securityPulse 3s ease-in-out infinite;
  will-change: transform, opacity;
}

/* ============================================
   GLOW PULSE
   ============================================ */

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.2); }
  50%       { box-shadow: 0 0 50px rgba(99, 102, 241, 0.5), 0 0 100px rgba(99, 102, 241, 0.15); }
}

.glow-pulse {
  animation: glowPulse 4s ease-in-out infinite;
  will-change: box-shadow;
}

/* ============================================
   COUNTER ANIMATION
   ============================================ */

.counter-value {
  display: inline-block;
  transition: all 0.05s linear;
}

/* ============================================
   FAQ ACCORDION
   ============================================ */

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding    0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.open .faq-answer {
  max-height: 400px;
}

.faq-icon {
  transition: transform var(--transition-normal);
  flex-shrink: 0;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

/* ============================================
   NAV SCROLL TRANSITION
   ============================================ */

.glass-nav {
  transition: background var(--transition-normal),
              padding    var(--transition-normal),
              box-shadow var(--transition-normal);
}

/* ============================================
   MOBILE STICKY CTA
   ============================================ */

.mobile-sticky-cta {
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-sticky-cta.visible {
  transform: translateY(0);
}

/* ============================================
   EXIT INTENT POPUP
   ============================================ */

.exit-intent-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity     var(--transition-normal),
              visibility  var(--transition-normal);
}

.exit-intent-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.exit-intent-card {
  transform: scale(0.9) translateY(20px);
  transition: transform var(--transition-normal);
}

.exit-intent-overlay.visible .exit-intent-card {
  transform: scale(1) translateY(0);
}

/* ============================================
   SHIMMER LOADING
   ============================================ */

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-surface) 25%,
    var(--bg-elevated) 50%,
    var(--bg-surface) 75%
  );
  background-size: 200% auto;
  animation: shimmer 1.5s infinite;
}