/* Scroll + hover life. Everything here is decoration: the page works without it. */

html { scroll-padding-top: 4.5rem; }

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 100;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #00aeff, #00e5ff);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}

/* Scroll reveal: classes are added by main.js and removed again once settled,
   so cards keep their normal hover transitions. `translate` is separate from `transform`. */
.reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0ms);
}

.reveal.in {
  opacity: 1;
  translate: 0 0;
}

/* Hero entrance */
.hero-text-block > * { animation: rise 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-text-block > :nth-child(2) { animation-delay: 0.1s; }
.hero-text-block > :nth-child(3) { animation-delay: 0.22s; }
.hero-text-block > :nth-child(4) { animation-delay: 0.34s; }
.hero-text-block > :nth-child(5) { animation-delay: 0.46s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

/* Card the visitor was sent to by a nav/footer link */
.nav-flash { animation: navFlash 1.2s ease-out 2; border-color: var(--cyan-bright) !important; }

@keyframes navFlash {
  0% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.75); }
  100% { box-shadow: 0 0 0 22px rgba(0, 229, 255, 0); }
}

/* Hover polish */
.client-logo-btn { transition: opacity var(--transition-fast), transform var(--transition-base); }
.client-logo-btn:hover { transform: translateY(-2px) scale(1.06); }

.btn-cyan-glow svg,
.btn-contact-outline svg { transition: transform var(--transition-base); }
.btn-cyan-glow:hover svg,
.btn-contact-outline:hover svg { transform: translateX(4px); }

.btn-contact-outline:hover { transform: translateY(-1px); }

.btn-watch-story .play-circle { position: relative; }
.btn-watch-story:hover .play-circle { transform: scale(1.08); }

.kpi-col:hover .kpi-value,
.kpi-col-center:hover .kpi-value,
.kpi-col-last:hover .kpi-value { color: var(--cyan-bright); }
.kpi-value { transition: color var(--transition-base); }

.solution-card, .industry-card, .region-card, .insight-article-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.solution-card:hover, .industry-card:hover, .region-card:hover, .insight-article-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.5), 0 0 28px rgba(0, 190, 255, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; translate: none; }
}