/* ============================================
   HAVIC HOST - ANIMATIONS
   ============================================ */

/* --- Scroll Reveal Animations --- */
.reveal,
.auto-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.active,
.auto-reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up */
.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children delay */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* --- Hero Section Entrance --- */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.hero-animate-title {
  animation: heroFadeUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}

.hero-animate-text {
  animation: heroFadeUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both;
}

.hero-animate-cta {
  animation: heroFadeUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
}

.hero-animate-badges {
  animation: heroFadeUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s both;
}

.hero-animate-image {
  animation: heroFadeRight 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
}

/* --- Glow Pulse for Icons --- */
@keyframes glowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(29, 140, 248, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(29, 140, 248, 0.7));
  }
}

.icon-glow {
  animation: glowPulse 2.5s ease-in-out infinite;
}

/* --- Floating Enhanced --- */
@keyframes floatEnhanced {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

.float-animate {
  animation: floatEnhanced 3s ease-in-out infinite;
}

/* --- Card Hover Glow --- */
.card-hover-glow {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.4s ease;
}

.card-hover-glow:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(29, 140, 248, 0.2);
  border-color: rgba(29, 140, 248, 0.5);
}

/* --- Counter Animation --- */
@keyframes countSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.counter-animate.active .card-title {
  animation: countSlideUp 0.6s ease-out both;
}

/* --- Section Title Underline Grow --- */
@keyframes underlineGrow {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}

.title-animate.active::after {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #1d8cf8, #5e72e4);
  margin-top: 10px;
  animation: underlineGrow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
}

/* --- Tech Logos Slide In --- */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tech-logo-animate {
  opacity: 0;
}

.tech-logo-animate.active {
  animation: slideInUp 0.6s ease-out both;
}

.tech-logo-animate.active:nth-child(1) { animation-delay: 0.1s; }
.tech-logo-animate.active:nth-child(2) { animation-delay: 0.2s; }
.tech-logo-animate.active:nth-child(3) { animation-delay: 0.3s; }
.tech-logo-animate.active:nth-child(4) { animation-delay: 0.4s; }
.tech-logo-animate.active:nth-child(5) { animation-delay: 0.5s; }

/* --- Gradient Text Shimmer --- */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.text-shimmer {
  background: linear-gradient(90deg, #fff, #1d8cf8, #fff);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* --- Pricing Card Entrance --- */
.card-coin.reveal {
  transition-duration: 0.6s;
}

.card-coin.reveal:nth-child(1) { transition-delay: 0.1s; }
.card-coin.reveal:nth-child(2) { transition-delay: 0.25s; }
.card-coin.reveal:nth-child(3) { transition-delay: 0.4s; }

/* --- Button Shine Effect --- */
@keyframes btnShine {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: btnShine 3s ease-in-out infinite;
}

/* --- Map Dot Enhanced Pulse --- */
@keyframes mapPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
}

.pulse-animation {
  animation: mapPulse 2s ease-in-out infinite;
}

/* Stagger map dots */
.pulse-animation:nth-child(odd) { animation-delay: 0.3s; }
.pulse-animation:nth-child(3n) { animation-delay: 0.6s; }
.pulse-animation:nth-child(4n) { animation-delay: 0.9s; }

/* --- Stats Card Pop --- */
.card-stats {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-stats:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* --- Footer Link Hover Slide --- */
.footer a.text-muted {
  position: relative;
  transition: color 0.3s ease;
}

.footer a.text-muted::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #1d8cf8;
  transition: width 0.3s ease;
}

.footer a.text-muted:hover {
  color: #1d8cf8 !important;
}

.footer a.text-muted:hover::after {
  width: 100%;
}

/* --- Navbar Scroll Effect --- */
.navbar.scrolled {
  background: rgba(10, 10, 25, 0.95) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease;
}

/* --- Accordion Smooth --- */
#accordionHost .collapse {
  transition: all 0.4s ease;
}

#accordionHost .btn-link {
  transition: all 0.3s ease;
}

#accordionHost .btn-link:hover {
  padding-left: 10px;
}

/* --- Image transition for accordion --- */
#hostImage {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* --- Payment icons hover --- */
.col-md-6 img[alt="Pix"],
.col-md-6 img[alt="Mastercard"],
.col-md-6 img[alt="Visa"],
.col-md-6 img[alt="PayPal"],
.col-md-6 img[alt="Boleto"] {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.col-md-6 img[alt="Pix"]:hover,
.col-md-6 img[alt="Mastercard"]:hover,
.col-md-6 img[alt="Visa"]:hover,
.col-md-6 img[alt="PayPal"]:hover,
.col-md-6 img[alt="Boleto"]:hover {
  opacity: 1 !important;
  transform: scale(1.15);
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .auto-reveal {
    opacity: 1;
    transform: none;
  }
}