/* ============================================
   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;
}

/* ============================================
   SCROLL PARALLAX (hero depth effect)
   Native CSS Scroll-Driven Animations where supported
   (Chrome/Edge/Opera 2026, Android's dominant engine).
   js/parallax.js provides an rAF fallback for browsers
   without animation-timeline support, using the same
   translateY ranges below.
   ============================================ */

@supports (animation-timeline: view()) {
  @keyframes parallaxOrbDrift {
    from { transform: translateY(-30px); }
    to   { transform: translateY(30px); }
  }

  @keyframes parallaxMockupDrift {
    from { transform: translateY(18px); }
    to   { transform: translateY(-18px); }
  }

  .hero::before,
  .hero::after,
  .parallax-orb,
  .parallax-mockup {
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    animation-fill-mode: both;
    animation-timing-function: linear;
  }

  .hero::before,
  .hero::after,
  .parallax-orb {
    animation-name: parallaxOrbDrift;
  }

  .parallax-mockup {
    animation-name: parallaxMockupDrift;
  }

  /* Smaller screens: drop the background orb drift (mostly offscreen
     anyway) and keep only a subtler mockup drift */
  @media (max-width: 640px) {
    @keyframes parallaxMockupDrift {
      from { transform: translateY(10px); }
      to   { transform: translateY(-10px); }
    }
    .hero::before,
    .hero::after,
    .parallax-orb {
      animation-name: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .parallax-orb,
  .parallax-mockup {
    animation: none !important;
  }
}

/* ============================================
   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);
}

/* ============================================
   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;
}