/* ============================================
   FinAlpha Shared Animations
   Pure CSS — zero dependencies
   ============================================ */

/* ---------- Scroll-triggered entrance animations ---------- */

.fade-up, .fade-left, .fade-right, .fade-in {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up { transform: translateY(30px); }
.fade-left { transform: translateX(-30px); }
.fade-right { transform: translateX(30px); }
.fade-in { transform: none; }

.fade-up.visible, .fade-left.visible, .fade-right.visible, .fade-in.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Backward compat: .fade-section maps to .fade-up behavior */
.fade-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for children (applied by JS) */
.stagger-delay-0 { transition-delay: 0ms !important; }
.stagger-delay-1 { transition-delay: 100ms !important; }
.stagger-delay-2 { transition-delay: 200ms !important; }
.stagger-delay-3 { transition-delay: 300ms !important; }
.stagger-delay-4 { transition-delay: 400ms !important; }
.stagger-delay-5 { transition-delay: 500ms !important; }

/* ---------- Hero entrance animation ---------- */

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.hero-stagger {
  opacity: 0;
  animation: hero-enter 0.6s ease forwards;
}
.hero-stagger-right {
  opacity: 0;
  animation: hero-enter-right 0.7s ease forwards;
}

.hero-stagger-1 { animation-delay: 0ms; }
.hero-stagger-2 { animation-delay: 150ms; }
.hero-stagger-3 { animation-delay: 300ms; }
.hero-stagger-4 { animation-delay: 450ms; }
.hero-stagger-5 { animation-delay: 600ms; }
.hero-stagger-6 { animation-delay: 750ms; }

/* ---------- Chat typing animation ---------- */

@keyframes typing-dots {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-4px); }
}

.typing-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #94A3B8;
  margin: 0 2px;
  animation: typing-dots 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

.chat-message {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.chat-message.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Navbar shrink ---------- */

#navbar {
  transition: height 0.3s ease, box-shadow 0.3s ease;
}

.navbar-scrolled {
  height: 56px !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.navbar-scrolled .nav-logo {
  transform: scale(0.9);
  transition: transform 0.3s ease;
}

/* ---------- Scroll progress bar ---------- */

.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #0BB9B8, #1782CF);
  z-index: 39;
  transition: width 0.05s linear;
  pointer-events: none;
}

/* ---------- Card hover enhancement ---------- */

.card-hover {
  transition: all 0.3s ease;
}
.card-hover:hover {
  border-color: rgba(11,185,184,0.3);
}

/* ---------- Button micro-interactions ---------- */

.btn-gradient:active, .btn-outline:active {
  transform: scale(0.98) translateY(0) !important;
  transition-duration: 0.1s !important;
}

.cta-pulse {
  animation: pulse-glow 2.5s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 24px rgba(11,185,184,0.15); }
  50% { box-shadow: 0 0 40px rgba(11,185,184,0.3); }
}

/* ---------- Form focus ---------- */

input:focus, textarea:focus, select:focus {
  border-color: #0BB9B8 !important;
  box-shadow: 0 0 0 3px rgba(11,185,184,0.1) !important;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ---------- Pricing tab transition ---------- */

.tab-container {
  position: relative;
  overflow: hidden;
}

.tab-content-animated {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.tab-content-animated.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  position: relative;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  transition: left 0.3s ease, width 0.3s ease, background-color 0.3s ease;
}

/* ---------- Touch targets (mobile) ---------- */

@media (max-width: 768px) {
  .faq-item button { min-height: 48px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .scroll-progress-bar { display: none; }
}