/* ============================================================
   COLVO — Premium Animation System
   File: animations.css
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes colvo-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes colvo-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes colvo-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes colvo-fade-down {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes colvo-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
@keyframes colvo-float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-13px) rotate(2deg); }
  66%       { transform: translateY(-6px) rotate(-1.5deg); }
}
@keyframes colvo-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253, 186, 116,0); }
  50%       { box-shadow: 0 0 20px 5px rgba(253, 186, 116,0.18); }
}

/* 1. PAGE LOAD */
header { animation: colvo-fade-down 0.6s cubic-bezier(0.22,1,0.36,1) both; }
.logo-image { animation: colvo-scale-in 0.7s 0.15s cubic-bezier(0.22,1,0.36,1) both; }
header.scrolled {
  padding-top: 6px !important; padding-bottom: 6px !important;
  box-shadow: 0 4px 28px rgba(0,0,0,0.16) !important;
  transition: padding 0.35s ease, box-shadow 0.35s ease;
}

/* 2. NAVBAR */
nav ul li a { position: relative; transition: color 0.25s ease; }
nav ul li a::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 2px; background: rgba(255,255,255,0.9);
  border-radius: 2px; transition: width 0.3s cubic-bezier(0.25,1,0.5,1);
}
nav ul li a:hover::after, nav ul li a.active-nav::after { width: 100%; }
.btn-get-started { transition: transform 0.25s ease, box-shadow 0.25s ease !important; }
.btn-get-started:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 22px rgba(228,15,122,0.35) !important; }
.btn-get-started i { display: inline-block; transition: transform 0.25s ease; }
.btn-get-started:hover i { transform: translateX(4px); }

/* 3. HERO */
.hero-badge { animation: colvo-fade-up 0.65s 0.25s cubic-bezier(0.22,1,0.36,1) both; }
.hero-content h1 { animation: colvo-fade-up 0.7s 0.4s cubic-bezier(0.22,1,0.36,1) both; }
.hero-subtitle { animation: colvo-fade-up 0.7s 0.55s cubic-bezier(0.22,1,0.36,1) both; }
.hero-actions { animation: colvo-fade-up 0.7s 0.7s cubic-bezier(0.22,1,0.36,1) both; }
.reviews { animation: colvo-fade-up 0.65s 0.85s cubic-bezier(0.22,1,0.36,1) both; }
.hero-image-wrapper { animation: colvo-scale-in 0.9s 0.5s cubic-bezier(0.22,1,0.36,1) both; }
.dash-orb { animation: colvo-float-slow 18s ease-in-out infinite; }
.dash-orb:nth-child(2) { animation-delay: -4s; animation-duration: 21s; }
.dash-orb:nth-child(3) { animation-delay: -8s; animation-duration: 16s; }
.dash-orb:nth-child(4) { animation-delay: -12s; animation-duration: 24s; }
.dash-orb:nth-child(5) { animation-delay: -2s; animation-duration: 19s; }
.dash-airplane { animation: colvo-float-slow 15s ease-in-out infinite; }
.iso-map { animation: colvo-float 14s ease-in-out infinite; }

/* 4. SCROLL REVEAL */
.colvo-reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.colvo-reveal.is-visible { opacity: 1; transform: translateY(0); }
.colvo-reveal-left {
  opacity: 0; transform: translateX(-30px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.colvo-reveal-left.is-visible { opacity: 1; transform: translateX(0); }
.colvo-reveal-right {
  opacity: 0; transform: translateX(30px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.colvo-reveal-right.is-visible { opacity: 1; transform: translateX(0); }
.colvo-reveal[data-delay="1"] { transition-delay: 0.08s; }
.colvo-reveal[data-delay="2"] { transition-delay: 0.16s; }
.colvo-reveal[data-delay="3"] { transition-delay: 0.24s; }
.colvo-reveal[data-delay="4"] { transition-delay: 0.32s; }
.colvo-reveal[data-delay="5"] { transition-delay: 0.40s; }

/* 5. BUTTONS */
.btn-primary-gradient, .btn-white, .btn-api, .contact-submit-btn {
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease !important;
}
.btn-primary-gradient:hover { transform: translateY(-3px) !important; box-shadow: none !important; }
.btn-primary-gradient:active { transform: translateY(-1px) scale(0.98) !important; }
.btn-white:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important; }
.btn-api:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 24px rgba(253, 186, 116,0.28) !important; }
.contact-submit-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 24px rgba(253, 186, 116,0.28) !important; }
.btn-primary-gradient:hover i, .btn-api:hover i, .contact-submit-btn:hover i {
  transform: translateX(4px); transition: transform 0.25s ease; display: inline-block;
}

/* 6. ICONS */
.footer-social-links a {
  display: inline-flex;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s ease;
}
.footer-social-links a:hover { transform: translateY(-4px) scale(1.1) !important; box-shadow: 0 6px 16px rgba(253, 186, 116,0.22); }
.w-icon, .ps-icon-box, .gi-icon, .office-icon {
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.w-icon:hover { transform: scale(1.12); }
.ps-icon-box:hover { transform: scale(1.08); }
.gi-icon:hover { transform: scale(1.08); }
.office-icon:hover { transform: scale(1.12); }

/* 7. FORMS */
.form-input-icon-wrap input, .form-input-icon-wrap textarea,
input[type="text"], input[type="email"], input[type="tel"], textarea {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}
.form-input-icon-wrap input:focus, .form-input-icon-wrap textarea:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus {
  border-color: var(--color-brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(253, 186, 116,0.12) !important;
  outline: none !important;
  background: #fdfbff !important;
}

/* 8. FAQ */
.faq-item { transition: box-shadow 0.3s ease; }
.faq-item.active { box-shadow: 0 4px 20px rgba(253, 186, 116,0.1) !important; }
.faq-question i { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), color 0.25s ease; }
.faq-item.active .faq-question i { transform: rotate(45deg); color: var(--color-brand-primary); }
/* FAQ CSS handled completely in style.css for robust accordion behavior */
/* 9. PRICING GLOW */
.pricing-card.popular, .pricing-card.featured {
  animation: colvo-glow-pulse 3.5s ease-in-out infinite;
}

/* 10. CTA */
.cta-banner { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.cta-banner:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(253, 186, 116,0.12); }

/* 11. FOOTER */
.footer-col a, .footer-legal-links a { transition: color 0.22s ease, padding-left 0.22s ease; }
.footer-col a:hover { color: #ea580c !important; padding-left: 4px; }
.footer-legal-links a:hover { color: #ea580c !important; }

/* 12. SCROLL PROGRESS BAR */
#colvo-scroll-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--color-brand-primary), #e40f7a);
  z-index: 9999; border-radius: 0 2px 2px 0; pointer-events: none;
}

/* 13. PROCESS STEP NUMBER POP */
.p-step.card-visible .p-number,
.step-card.card-visible .step-number {
  animation: colvo-scale-in 0.4s 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* 14. TESTIMONIAL AVATAR */
.testimonial-card.card-visible .author-avatar,
.p-testimonial-card.card-visible .t-avatar {
  animation: colvo-scale-in 0.4s 0.3s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* 15. WORKFLOW ICONS GLOW */
.w-list-item .w-icon { animation: colvo-glow-pulse 4.5s ease-in-out infinite; }
.w-list-item:nth-child(2) .w-icon { animation-delay: -1.5s; }
.w-list-item:nth-child(3) .w-icon { animation-delay: -3s; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .colvo-reveal, .colvo-reveal-left, .colvo-reveal-right {
    transform: translateY(14px) !important; transition-duration: 0.5s;
  }
  .dash-orb { animation: none !important; }
  .colvo-reveal[data-delay="3"] { transition-delay: 0.12s; }
  .colvo-reveal[data-delay="4"] { transition-delay: 0.16s; }
  .colvo-reveal[data-delay="5"] { transition-delay: 0.20s; }
}