/* ============ Reveal animation ============ */
@media (prefers-reduced-motion: no-preference) {
  html.motion .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;
  }
  html.motion .reveal.in {
    opacity: 1;
    transform: none;
  }
  /* How it works: heading lines rise in one by one, then the panels */
  html.motion #how.reveal {
    opacity: 1;
    transform: none;
  }
  html.motion #how .section-head > * {
    opacity: 0;
    translate: 0 60px;
    transition:
      opacity 0.8s ease,
      translate 1s cubic-bezier(0.22, 0.8, 0.24, 1);
  }
  html.motion #how .panels {
    opacity: 0;
    translate: 0 90px;
    transition:
      opacity 0.9s ease,
      translate 1.1s cubic-bezier(0.22, 0.8, 0.24, 1);
  }
  html.motion #how.in .section-head > *,
  html.motion #how.in .panels {
    opacity: 1;
    translate: 0 0;
  }
  html.motion #how.in .section-head > :nth-child(1) {
    transition-delay: 0s;
  }
  html.motion #how.in .section-head > :nth-child(2) {
    transition-delay: 0.18s;
  }
  html.motion #how.in .section-head > :nth-child(3) {
    transition-delay: 0.36s;
  }
  html.motion #how.in .panels {
    transition-delay: 0.8s;
  }
  /* Trust: same sequence — copy lines rise in, then the illustration */
  html.motion #trust.reveal {
    opacity: 1;
    transform: none;
  }
  html.motion #trust .trust-grid > div:first-child > * {
    opacity: 0;
    translate: 0 60px;
    transition:
      opacity 0.8s ease,
      translate 1s cubic-bezier(0.22, 0.8, 0.24, 1);
  }
  html.motion #trust .trust-visual {
    opacity: 0;
    translate: 0 90px;
    transition:
      opacity 0.9s ease,
      translate 1.1s cubic-bezier(0.22, 0.8, 0.24, 1);
  }
  html.motion #trust.in .trust-grid > div:first-child > *,
  html.motion #trust.in .trust-visual {
    opacity: 1;
    translate: 0 0;
  }
  html.motion #trust.in .trust-grid > div:first-child > :nth-child(1) {
    transition-delay: 0s;
  }
  html.motion #trust.in .trust-grid > div:first-child > :nth-child(2) {
    transition-delay: 0.18s;
  }
  html.motion #trust.in .trust-grid > div:first-child > :nth-child(3) {
    transition-delay: 0.36s;
  }
  html.motion #trust.in .trust-grid > div:first-child > :nth-child(4) {
    transition-delay: 0.54s;
  }
  html.motion #trust.in .trust-visual {
    transition-delay: 0.9s;
  }
}