html.js-ready .reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .58s ease, transform .58s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}

html.js-ready .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.btn,
nav a {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.22) 46%, transparent 100%);
  transform: translateX(-130%);
  transition: transform .48s ease;
  pointer-events: none;
}

.btn:hover::before {
  transform: translateX(130%);
}

.btn-ripple {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.34);
  transform: translate(-50%, -50%) scale(0);
  animation: btnRipple .42s ease-out forwards;
  pointer-events: none;
}

.btn-secondary .btn-ripple {
  background: rgba(0,166,214,.16);
}

.visual-card .overlay {
  transition: transform .22s ease;
}

.visual-card:hover .overlay {
  transform: translateY(-6px);
}

.card:hover,
.info-box:hover,
.step:hover,
.page-link-card:hover,
.metric:hover {
  transform: translateY(-5px);
}

.contact-line a:hover {
  color: var(--blue-dark);
}

footer a:hover {
  color: var(--lime);
}

@keyframes btnRipple {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(14);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js-ready .reveal-on-scroll,
  .btn::before,
  .visual-card .overlay {
    animation: none !important;
    transition: none !important;
  }

  html.js-ready .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
}