/* =====================================================
   EcoDrone — Professional Animation System
   ===================================================== */

/* ---- Hero (page-load) keyframes ---- */
@keyframes ecoFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ecoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ecoScaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Hero animation classes (fire immediately on page load) ---- */
.anim-hero {
  opacity: 0;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-hero-fade-up { animation-name: ecoFadeUp;  animation-duration: 0.75s; }
.anim-hero-fade    { animation-name: ecoFadeIn;  animation-duration: 0.75s; }
.anim-hero-scale   { animation-name: ecoScaleIn; animation-duration: 0.75s; }

/* ---- Scroll-reveal base states ---- */
.anim-fade-up {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-fade-left {
  opacity: 0;
  transform: translateX(-35px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-fade-right {
  opacity: 0;
  transform: translateX(35px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-fade {
  opacity: 0;
  transition: opacity 0.65s ease;
}
.anim-scale-in {
  opacity: 0;
  transform: scale(0.93);
  transition: opacity 0.6s ease,
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Stagger delays ---- */
.anim-delay-1 { transition-delay: 0.07s; animation-delay: 0.07s; }
.anim-delay-2 { transition-delay: 0.14s; animation-delay: 0.14s; }
.anim-delay-3 { transition-delay: 0.21s; animation-delay: 0.21s; }
.anim-delay-4 { transition-delay: 0.28s; animation-delay: 0.28s; }
.anim-delay-5 { transition-delay: 0.35s; animation-delay: 0.35s; }
.anim-delay-6 { transition-delay: 0.42s; animation-delay: 0.42s; }

/* ---- Revealed state (added by IntersectionObserver in animations.js) ---- */
.anim-fade-up.is-visible,
.anim-fade-left.is-visible,
.anim-fade-right.is-visible,
.anim-fade.is-visible,
.anim-scale-in.is-visible {
  opacity: 1;
  transform: none;
}

/* ====================================================
   HOVER EFFECTS — Buttons
   ==================================================== */
.button,
.blog-button,
.contact-submit-button,
.submit-button {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.button:hover,
.blog-button:hover,
.contact-submit-button:hover,
.submit-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ---- Hover: Nav links ---- */
.navbar-menu-link,
.main-navbar-menu-link {
  transition: opacity 0.18s ease;
}
.navbar-menu-link:hover,
.main-navbar-menu-link:hover {
  opacity: 0.72;
}

/* ---- Hover: Footer links ---- */
.footer-link {
  transition: opacity 0.18s ease;
}
.footer-link:hover {
  opacity: 0.65;
}

/* ---- Hover: Social icons ---- */
.social-link,
.footer-social-link {
  transition: transform 0.2s ease;
}
.social-link:hover,
.footer-social-link:hover {
  transform: scale(1.12);
}

/* ---- Hover: Logo ---- */
.site-logo,
.footer-logo {
  transition: opacity 0.2s ease;
}
.site-logo:hover,
.footer-logo:hover {
  opacity: 0.8;
}

/* ---- Hover: Service cards (home & services page) ---- */
.service-dark-background-2 {
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.service-dark-background-2:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}

/* ---- Hover: Blog cards ---- */
.blog-card-one,
.blog-one-card {
  transition: transform 0.28s ease;
}
.blog-card-one:hover,
.blog-one-card:hover {
  transform: translateY(-5px);
}

/* ---- Hover: Team member cards ---- */
.team-member-wrapper {
  transition: transform 0.28s ease;
}
.team-member-wrapper:hover {
  transform: translateY(-5px);
}

/* ---- Hover: Partner logos ---- */
.partners-card {
  transition: transform 0.24s ease, opacity 0.24s ease;
}
.partners-card:hover {
  transform: scale(1.06);
  opacity: 0.8;
}

/* ---- Hover: FAQ cards ---- */
.faq-question-card {
  transition: transform 0.2s ease;
}
.faq-question-card:hover {
  transform: translateY(-2px);
}

/* ---- Hover: Contact info blocks ---- */
.contact-information-blocks {
  transition: transform 0.22s ease;
}
.contact-information-blocks:hover {
  transform: translateY(-3px);
}

/* ---- Hover: Services feature boxes ---- */
.service-three-service-box {
  transition: transform 0.28s ease;
}
.service-three-service-box:hover {
  transform: translateY(-4px);
}

/* ---- Hover: Pricing card wrappers ---- */
.service-one-service-card-wrapper {
  transition: transform 0.28s ease;
}
.service-one-service-card-wrapper:hover {
  transform: translateY(-4px);
}

/* ---- Hover: About nation items ---- */
.about-nation-items {
  transition: background-color 0.2s ease;
}
.about-nation-items:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* ---- Hover: Team social links ---- */
.team-details-social-link {
  transition: transform 0.2s ease;
}
.team-details-social-link:hover {
  transform: scale(1.1);
}