/* Progressive motion. Content remains visible until the observer is ready. */
html.motion-ready [data-reveal]:not(.is-revealed) {
  opacity: 0;
}

html.motion-ready [data-reveal].is-revealed {
  animation: ferro-reveal 500ms cubic-bezier(.2, .65, .3, 1) var(--reveal-delay, 0ms) backwards;
}

/* Keyboard focus should arrive on visible content immediately. */
html.motion-ready [data-reveal][data-reveal-immediate] {
  opacity: 1;
  animation: none;
}

@keyframes ferro-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

html.motion-ready :is(.connection-study,.hero-visual) svg [data-connection-part].is-emphasized {
  animation: ferro-part-pulse 480ms ease-out;
}

@keyframes ferro-part-pulse {
  0%, 100% { filter: drop-shadow(0 0 5px #ff6a2aaa); }
  45% { filter: drop-shadow(0 0 8px #ffad87bb); }
}

html.motion-ready .faq-list details[open] > p {
  animation: ferro-answer 220ms ease-out backwards;
}

@keyframes ferro-answer {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-ready [data-reveal] {
    opacity: 1 !important;
    animation: none !important;
  }
  html.motion-ready :is(.connection-study,.hero-visual) svg [data-connection-part].is-emphasized {
    animation: none;
  }
  html.motion-ready .faq-list details[open] > p {
    animation: none;
  }
}

@media print {
  html.motion-ready [data-reveal] {
    opacity: 1 !important;
    animation: none !important;
  }
  html.motion-ready :is(.connection-study,.hero-visual) svg [data-connection-part].is-emphasized {
    animation: none;
  }
  html.motion-ready .faq-list details[open] > p {
    animation: none;
  }
}