/*
 * Shared motion layer for every generated landing page.
 * Keep scroll reveals on their own compositor layer so they do not cause
 * layout jumps while the visitor is scrolling.
 */
@keyframes hero-drift {
  from { transform: scale(1.04) translate3d(-0.5%, 0, 0); }
  to { transform: scale(1.09) translate3d(0.5%, -0.5%, 0); }
}

@keyframes hero-content-in {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes faq-answer-in {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to { opacity: 1; transform: none; }
}

.hero-image {
  animation: hero-drift 18s ease-in-out infinite alternate;
  transform-origin: center;
  will-change: transform;
}

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

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.js .reveal-hero.is-visible {
  animation: hero-content-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.js .trust-grid .reveal:nth-child(2) { --reveal-delay: 70ms; }
.js .trust-grid .reveal:nth-child(3) { --reveal-delay: 140ms; }
.js .trust-grid .reveal:nth-child(4) { --reveal-delay: 210ms; }

.card {
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease;
}

.card img {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover img { transform: scale(1.045); }

.faq details[open] p {
  animation: faq-answer-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .hero-image { animation: none; }
  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}