@media (prefers-reduced-motion: no-preference) {
  :root { --motion-ease: cubic-bezier(.22, .72, .29, 1); }

  .reveal-ready [data-reveal]:not(.is-visible):not(:focus-within) {
    opacity: 0;
  }
  .reveal-ready [data-reveal].is-visible:not(:focus-within) {
    animation: var(--arrival, copy-enter) var(--duration, 560ms) var(--motion-ease)
      var(--delay, 0ms) backwards;
  }

  .js .hero-kind { animation: copy-enter 480ms var(--motion-ease) 780ms backwards; }
  .js .hero h1 { animation: title-reveal 760ms var(--motion-ease) 900ms backwards; }
  .js .hero h2 { animation: copy-enter 570ms var(--motion-ease) 1090ms backwards; }
  .js .hero-actions > :first-child { animation: copy-enter 500ms var(--motion-ease) 1250ms backwards; }
  .js .hero-actions > :last-child { animation: copy-enter 490ms var(--motion-ease) 1380ms backwards; }

  .welcome-invitation { --arrival: paper-unfold; --duration: 710ms; }
  .reveal-ready .welcome-invitation.is-visible .welcome-seal {
    animation: wax-impression 440ms var(--motion-ease) 200ms backwards;
  }
  .reveal-ready .welcome-invitation.is-visible .welcome-lace {
    animation: lace-arrival 680ms var(--motion-ease) 140ms backwards;
  }

  .format-card { --arrival: card-arrival; --duration: 550ms; }
  .reveal-ready .format-card.is-visible .card-art img {
    animation: photo-settle 680ms var(--motion-ease) var(--delay, 0ms) backwards;
  }
  .topics-heading { --arrival: title-reveal; }
  .topic-entry {
    --arrival: topic-rise;
    --duration: 490ms;
    --delay: var(--topic-delay, 0ms);
  }
  .reveal-ready .topic-entry.is-visible .topic-seal {
    animation: stamp-in 430ms var(--motion-ease) calc(var(--delay) + 25ms) backwards;
  }

  .author-portrait { --arrival: frame-enter; --duration: 670ms; }
  .reveal-ready .author-portrait.is-visible .author-photo {
    animation: portrait-focus 630ms var(--motion-ease) 80ms backwards;
  }
  .author-copy { --arrival: copy-enter; --delay: 75ms; }

  .join-heading { --arrival: title-reveal; }
  .join-step { --arrival: topic-enter; --duration: 480ms; }
  .join-step:nth-child(2) { --delay: 90ms; }
  .join-step:nth-child(3) { --delay: 180ms; }
  .reveal-ready .join-step.is-visible .join-step-number {
    animation: stamp-in 480ms var(--motion-ease) var(--delay, 0ms) backwards;
  }
  .reveal-ready .join-step.is-visible:not(:last-child)::after {
    transform-origin: left top;
    animation: trace-next 460ms var(--motion-ease) calc(var(--delay, 0ms) + 140ms) backwards;
  }
  .join-actions { --arrival: copy-enter; }

  .faq-heading { --arrival: title-reveal; }
  .reveal-ready .faq-heading.is-visible .faq-seal {
    animation: stamp-in 440ms var(--motion-ease) 110ms backwards;
  }
  .faq-paper { --arrival: print-enter; --duration: 600ms; }
  .reveal-ready .faq-paper.is-visible .faq-lace {
    animation: lace-arrival 600ms var(--motion-ease) 110ms backwards;
  }
  .faq-list details[open] > p {
    animation: answer-open 300ms var(--motion-ease) both;
  }

  @media (min-width: 761px) {
    .stories-card { --delay: 105ms; }
    .practice-card { --delay: 210ms; }
  }

  @media (max-width: 760px) {
    .join-step:nth-child(n) { --delay: 0ms; }
    .reveal-ready .join-step.is-visible:not(:last-child)::after {
      animation-name: trace-next-mobile;
    }
  }

  @keyframes title-reveal {
    from { opacity: 0; transform: translateY(.22em); clip-path: inset(65% -18px -18px); }
    to { opacity: 1; transform: translateY(0); clip-path: inset(-18px); }
  }
  @keyframes copy-enter {
    from { opacity: 0; transform: translateY(17px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes paper-unfold {
    from { opacity: 0; transform: translateY(24px) scale(.97); clip-path: inset(0 0 74%); }
    to { opacity: 1; transform: none; clip-path: inset(-30px); }
  }
  @keyframes wax-impression {
    0% { opacity: 0; transform: translateX(-50%) scale(1.45) rotate(-12deg); }
    66% { opacity: 1; transform: translateX(-50%) scale(.95) rotate(3deg); }
    100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); }
  }
  @keyframes lace-arrival {
    from { opacity: 0; transform: translateY(8px); }
    to { transform: translateY(0); }
  }
  @keyframes print-enter {
    from { opacity: 0; transform: translateY(32px) rotate(-2deg); }
    to { opacity: 1; transform: none; }
  }
  @keyframes card-arrival {
    from { opacity: 0; transform: translateY(19px) scale(.98); }
    to { opacity: 1; transform: none; }
  }
  @keyframes photo-settle {
    from { opacity: .76; scale: 1.065; }
    to { opacity: 1; scale: 1; }
  }
  @keyframes portrait-focus {
    from { opacity: .6; filter: blur(2px); }
    to { opacity: 1; filter: blur(0); }
  }
  @keyframes frame-enter {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to { opacity: 1; transform: none; }
  }
  @keyframes topic-rise {
    from { opacity: 0; transform: translateY(20px) scale(.98); }
    to { opacity: 1; transform: none; }
  }
  @keyframes topic-enter {
    from { opacity: 0; transform: translateX(-15px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes stamp-in {
    0% { opacity: 0; scale: 1.36; rotate: -12deg; }
    68% { opacity: 1; scale: .94; rotate: 3deg; }
    100% { opacity: 1; scale: 1; rotate: 0deg; }
  }
  @keyframes trace-next {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  @keyframes trace-next-mobile {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
  }
  @keyframes answer-open {
    from { opacity: 0; clip-path: inset(0 0 60%); transform: translateY(-4px); }
    to { opacity: 1; clip-path: inset(-2px); transform: translateY(0); }
  }
}