/* Sticky header + reveal / lazy motion — sitewide */

.site-header,
.about-page .site-header,
.developers-page .site-header,
.inner-header,
.legal-header,
.privacy-page .legal-header,
.help-header {
  position: sticky;
  top: 0;
  z-index: 4000;
  transition:
    background-color 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    backdrop-filter 0.28s ease;
}

.site-header.is-scrolled,
.about-page .site-header.is-scrolled,
.developers-page .site-header.is-scrolled,
.inner-header.is-scrolled,
.legal-header.is-scrolled,
.help-header.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(12, 31, 68, 0.08);
  box-shadow: 0 10px 28px rgba(6, 26, 63, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Scroll reveals */
.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-left {
  transform: translate3d(-18px, 0, 0);
}

.reveal-left.is-visible {
  transform: translate3d(0, 0, 0);
}

.reveal-right {
  transform: translate3d(18px, 0, 0);
}

.reveal-right.is-visible {
  transform: translate3d(0, 0, 0);
}

.reveal-scale {
  transform: translate3d(0, 12px, 0) scale(0.98);
}

.reveal-scale.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* Lazy images */
img.img-lazy {
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.02);
  transition:
    opacity 0.55s ease,
    filter 0.55s ease,
    transform 0.55s ease;
}

img.img-lazy.is-loaded {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* Soft hover lift for interactive cards */
.motion-lift {
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s ease;
}

@media (hover: hover) and (pointer: fine) {
  .motion-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(6, 26, 63, 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible,
  img.img-lazy,
  img.img-lazy.is-loaded,
  .motion-lift {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}