/* EightyGood's published reveal language: 50px/800ms text, 80px/1500ms cards,
   100px/1500ms paired panels, out-quart easing and 200ms stagger. */
:root { --motion-out-quart: cubic-bezier(.165, .84, .44, 1); }

@keyframes motion-text-up {
  from { opacity: 0; transform: translate3d(0, 50px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes motion-card-up {
  from { opacity: 0; transform: translate3d(0, 80px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes motion-from-left {
  from { opacity: 0; transform: translate3d(-100px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes motion-from-right {
  from { opacity: 0; transform: translate3d(100px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.motion-hero { animation: motion-text-up 800ms var(--motion-out-quart) var(--motion-delay, 0ms) both; }
.motion-prepared { opacity: 0; }
.motion-prepared.motion-playing { animation: motion-text-up 800ms var(--motion-out-quart) var(--motion-delay, 0ms) both; }
.motion-prepared[data-motion-kind="card"].motion-playing { animation-name: motion-card-up; animation-duration: 1500ms; }
.motion-prepared[data-motion-kind="left"].motion-playing { animation-name: motion-from-left; animation-duration: 1500ms; animation-delay: calc(var(--motion-delay, 0ms) + 200ms); }
.motion-prepared[data-motion-kind="right"].motion-playing { animation-name: motion-from-right; animation-duration: 1500ms; animation-delay: calc(var(--motion-delay, 0ms) + 200ms); }

.site-header { background: rgba(8, 30, 26, .78); transition: background-color 250ms ease, box-shadow 250ms ease; }
.site-header[data-scrolled="true"] { background: rgba(8, 30, 26, .97); box-shadow: 0 12px 36px rgba(3, 20, 14, .24); }

@keyframes motion-faq-answer {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.faq-list details { transition: border-color 500ms ease; }
.faq-list details[open] { border-top-color: #5bc785; }
.faq-list summary::after { transition: transform 300ms ease; }
.faq-list details[open] summary::after { content: "+"; transform: rotate(135deg); transition-duration: 800ms; }
.faq-list details[open] > p { animation: motion-faq-answer 800ms ease both; }

@media (max-width: 760px) {
  .motion-prepared[data-motion-kind="left"].motion-playing,
  .motion-prepared[data-motion-kind="right"].motion-playing { animation-name: motion-card-up; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-hero, .motion-prepared.motion-playing { animation: none !important; }
  .motion-prepared { opacity: 1 !important; transform: none !important; }
  .site-header { transition: none; }
  .faq-list details, .faq-list summary::after { transition: none; }
  .faq-list details[open] > p { animation: none; }
}