[data-reveal] {
  opacity: var(--motion-from-opacity);
  transform: translateY(var(--motion-rise)) scale(var(--motion-from-scale));
  transition:
    opacity   var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

.no-js [data-reveal] { opacity: 1; transform: none; transition: none; }

@supports (animation-timeline: view()) {
  [data-reveal] {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 15% cover 35%;
    transition: none;
  }
}
@keyframes reveal {
  from { opacity: var(--motion-from-opacity);
         transform: translateY(var(--motion-rise)) scale(var(--motion-from-scale)); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section--lift > .container {
      animation: section-lift linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
  }
}
@keyframes section-lift {
  from { transform: translate3d(0, var(--section-lift), 0); }
  to   { transform: none; }
}

[data-reveal-group] > *:nth-child(2) { transition-delay:  87ms; }
[data-reveal-group] > *:nth-child(3) { transition-delay: 174ms; }
[data-reveal-group] > *:nth-child(4) { transition-delay: 261ms; }
[data-reveal-group] > *:nth-child(5) { transition-delay: 348ms; }

a, button, input, textarea, select, summary, .card--link {
  transition:
    color            var(--duration-hover) var(--ease),
    background-color var(--duration-hover) var(--ease),
    border-color     var(--duration-hover) var(--ease),
    opacity          var(--duration-hover) var(--ease);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.btn:active { transform: none; }

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