/* ============================================================
   Animations — Page Loader · Entrances · Scroll Reveal · Hover
   ============================================================ */

/* ---- Loader overlay ---- */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    to bottom left,
    #d8d8fd 0%,
    #9294fe 10%,
    #0207ff 46%,
    #000141 73%,
    #000000 100%
  );
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

#page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.loader-logo {
  width: clamp(130px, 16vw, 190px);
  height: auto;
  animation: loader-fade-up 550ms 60ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.loader-bar {
  width: clamp(130px, 16vw, 190px);
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  overflow: hidden;
}

.loader-fill {
  width: 100%;
  height: 100%;
  background: #abff43;
  border-radius: 999px;
  transform-origin: left center;
  transform: scaleX(0);
  animation: loader-progress 1100ms 180ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes loader-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes loader-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---- Navbar entrance (fires when body.page-loaded is set) ---- */
body.page-loaded .navbar {
  animation: nav-in 620ms 0ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes nav-in {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Hero entrance (fires when body.page-loaded is set) ---- */
body.page-loaded .hero-heading {
  animation: hero-in 850ms 0ms   cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.page-loaded .hero-sub {
  animation: hero-in 850ms 140ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.page-loaded .btn-cta {
  animation: hero-in 850ms 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

/* ---- Page exit ---- */
body.page-exiting {
  opacity: 0 !important;
  transition: opacity 280ms cubic-bezier(0.4, 0, 1, 1) !important;
  pointer-events: none;
}

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity  780ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-d1 { transition-delay: 100ms; }
.reveal-d2 { transition-delay: 200ms; }
.reveal-d3 { transition-delay: 300ms; }
.reveal-d4 { transition-delay: 400ms; }

/* ---- Dropdown hover smooth open ---- */
.dropdown {
  transition:
    opacity  var(--duration-base) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--duration-base) cubic-bezier(0.22, 1, 0.36, 1),
    visibility var(--duration-base);
}

/* ---- Nav active state: keep #00039f while on current page ---- */
.nav-link.active,
.nav-item-trigger.active {
  color: #00039f;
}

/* ---- Footer form focus glow ---- */
.site-footer-field input,
.site-footer-field textarea {
  transition:
    border-bottom-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.site-footer-field input:focus,
.site-footer-field textarea:focus {
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
  outline: none;
}

/* ---- Footer checkbox hover ---- */
.site-footer-check {
  transition: color var(--duration-fast) var(--ease-out);
}

.site-footer-check:hover {
  color: rgba(255, 255, 255, 1);
}

/* ---- Footer email link underline ---- */
.site-footer-email {
  position: relative;
}

.site-footer-email::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-footer-email:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ---- Image zoom containers ---- */
.innovation-image-frame,
.services-media-frame {
  overflow: hidden;
}

.featured-insight-image {
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.featured-insight:hover .featured-insight-image {
  transform: scale(1.04);
}

/* ---- Dropdown item transition ---- */
.dropdown-item {
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    padding-left var(--duration-base) var(--ease-out);
}

.dropdown-item:hover {
  padding-left: 1.25rem;
}

/* ---- Testimonial carousel transition ---- */
.testimonial-track {
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  #page-loader { transition: none; }
  .loader-logo { animation: none; opacity: 1; }
  .loader-fill { animation: none; transform: scaleX(1); }

  body.page-loaded .navbar { animation: none; opacity: 1; transform: none; }

  body.page-loaded .hero-heading,
  body.page-loaded .hero-sub,
  body.page-loaded .btn-cta { animation: none; opacity: 1; transform: none; }

  body.page-exiting { transition: none !important; }

  .reveal { opacity: 1; transform: none; transition: none; }

  .site-footer-email::after { transition: none; }

  .featured-insight-image { transition: none; }

  /* Suppress all hover micro-animations */
  .btn-cta,
  .insights-cta,
  .about-cta,
  .innovation-case-cta,
  .case-study-load-more,
  .site-footer-submit {
    transition: none;
  }

  .insight-card,
  .challenge-card,
  .case-study-list-card,
  .services-media-image,
  .team-card-image,
  .team-card-bio,
  .team-card::before {
    transition: none;
  }

  /* Suppress panel open animations */
  .service-item.is-open .service-panel,
  .faq-item.is-open .faq-panel,
  .innovation-band.is-open .innovation-band-panel {
    animation: none;
    opacity: 1;
    transform: none;
  }
}