/* Axencia.co — Buttons: Dark Blue Glassmorphism & World-Class Animations */

/* ===== Base button transitions — smooth spring physics ===== */
.btn,
.btn-primary,
.btn-ghost,
.nav-cta,
.quick-action-btn,
.globe-feature,
.portfolio-nav,
.roadmap-step-inner,
.form-section .btn-primary.form-submit,
.form-submit.form-submit-animated,
.dev-highlight-cta,
.scroll-to-top-btn {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.4s ease,
    border-color 0.35s ease,
    backdrop-filter 0.4s ease !important;
}

/* ===== PRIMARY BUTTONS — Dark blue glassmorphism ===== */
.btn-primary,
.nav-cta,
.form-section .btn-primary.form-submit,
.form-submit.form-submit-animated,
.dev-highlight-cta {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.9) 0%, rgba(15, 23, 42, 0.95) 40%, rgba(37, 99, 235, 0.7) 100%) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(59, 130, 246, 0.45) !important;
  color: #f0f9ff !important;
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 30px rgba(59, 130, 246, 0.2) !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-primary::before,
.nav-cta::before,
.form-section .btn-primary.form-submit::before,
.form-submit.form-submit-animated::before,
.dev-highlight-cta::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%, rgba(96, 165, 250, 0.08) 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  pointer-events: none !important;
}

/* Shine sweep — world-class hover animation */
.btn-primary::after,
.nav-cta::after,
.form-section .btn-primary.form-submit::after,
.form-submit.form-submit-animated::after,
.dev-highlight-cta::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: -120% !important;
  width: 60% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
  transform: skewX(-18deg) !important;
  transition: left 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  pointer-events: none !important;
}

.btn-primary:hover,
.nav-cta:hover,
.form-section .btn-primary.form-submit:hover,
.form-submit.form-submit-animated:hover,
.dev-highlight-cta:hover {
  transform: translateY(-5px) scale(1.02) !important;
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.95) 0%, rgba(15, 23, 42, 0.98) 40%, rgba(37, 99, 235, 0.85) 100%) !important;
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 60px rgba(59, 130, 246, 0.35),
    0 0 100px rgba(59, 130, 246, 0.15) !important;
}

.btn-primary:hover::before,
.nav-cta:hover::before,
.form-section .btn-primary.form-submit:hover::before,
.form-submit.form-submit-animated:hover::before,
.dev-highlight-cta:hover::before {
  opacity: 1 !important;
}

.btn-primary:hover::after,
.nav-cta:hover::after,
.form-section .btn-primary.form-submit:hover::after,
.form-submit.form-submit-animated:hover::after,
.dev-highlight-cta:hover::after {
  left: 150% !important;
}

.btn-primary:active,
.nav-cta:active,
.form-section .btn-primary.form-submit:active,
.form-submit.form-submit-animated:active,
.dev-highlight-cta:active {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(59, 130, 246, 0.25) !important;
}

/* ===== GHOST BUTTONS — Dark blue glass on hover ===== */
.btn-ghost {
  background: rgba(15, 23, 42, 0.3) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  color: #93c5fd !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
}

.btn-ghost::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, transparent 50%) !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

.btn-ghost:hover {
  background: rgba(30, 58, 95, 0.6) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border-color: rgba(96, 165, 250, 0.45) !important;
  transform: translateY(-4px) !important;
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(59, 130, 246, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
  color: #bfdbfe !important;
}

.btn-ghost:hover::before {
  opacity: 1 !important;
}

.btn-ghost:active {
  transform: translateY(-2px) !important;
}

/* ===== GLOBE FEATURES — pill buttons ===== */
.globe-feature {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.4) 0%, rgba(15, 23, 42, 0.5) 100%) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

.globe-feature:hover {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.7) 0%, rgba(37, 99, 235, 0.3) 100%) !important;
  border-color: rgba(96, 165, 250, 0.5) !important;
  transform: translateY(-5px) !important;
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.35),
    0 0 50px rgba(59, 130, 246, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

/* ===== QUICK ACTION BUTTONS (mobile bar) ===== */
.quick-action-btn {
  background: rgba(30, 58, 95, 0.4) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
}

.quick-action-btn:hover,
.quick-action-btn:focus {
  background: rgba(30, 58, 95, 0.7) !important;
  border-color: rgba(96, 165, 250, 0.45) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(59, 130, 246, 0.2) !important;
}

.quick-action-btn:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* ===== PORTFOLIO NAV (prev/next) ===== */
.portfolio-nav {
  background: rgba(30, 58, 95, 0.6) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

.portfolio-nav:hover {
  background: rgba(30, 58, 95, 0.85) !important;
  border-color: rgba(96, 165, 250, 0.5) !important;
  transform: scale(1.08) !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(59, 130, 246, 0.25) !important;
}

/* ===== ROADMAP STEP CARDS ===== */
.roadmap-step-inner {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.35) 0%, rgba(15, 23, 42, 0.5) 100%) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.roadmap-step:hover .roadmap-step-inner {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.55) 0%, rgba(37, 99, 235, 0.2) 100%) !important;
  border-color: rgba(96, 165, 250, 0.4) !important;
  transform: translateY(-6px) !important;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.35),
    0 0 60px rgba(59, 130, 246, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

/* ===== SCROLL TO TOP ===== */
.scroll-to-top-btn,
.scroll-to-top .scroll-to-top-inner .scroll-to-top-btn {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(59, 130, 246, 0.15) !important;
}

.scroll-to-top:hover .scroll-to-top-btn,
.scroll-to-top:focus .scroll-to-top-btn {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.95) 0%, rgba(37, 99, 235, 0.4) 100%) !important;
  border-color: rgba(96, 165, 250, 0.5) !important;
  transform: scale(1.08) !important;
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 50px rgba(59, 130, 246, 0.3) !important;
}

/* ===== HERO ACTIONS — override hero-ultra ===== */
.hero-actions .btn-primary {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.85) 0%, rgba(15, 23, 42, 0.9) 50%, rgba(30, 64, 175, 0.75) 100%) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow: 
    0 4px 24px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 30px rgba(59, 130, 246, 0.15) !important;
  animation: none !important;
}

.hero-actions .btn-primary:hover {
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 0 60px rgba(59, 130, 246, 0.35),
    0 0 100px rgba(59, 130, 246, 0.15) !important;
}

.hero-actions .btn-ghost {
  background: rgba(15, 23, 42, 0.3) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
}

.hero-actions .btn-ghost:hover {
  background: rgba(30, 58, 95, 0.6) !important;
  backdrop-filter: blur(20px) !important;
  border-color: rgba(96, 165, 250, 0.45) !important;
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(59, 130, 246, 0.2) !important;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-primary, .btn-ghost, .nav-cta, .quick-action-btn,
  .globe-feature, .portfolio-nav, .roadmap-step-inner,
  .form-section .btn-primary.form-submit, .form-submit.form-submit-animated,
  .dev-highlight-cta, .scroll-to-top-btn {
    transition-duration: 0.15s !important;
  }
}