/* KKK visuals (faq-motion.js): the panel unrolls up from the ASK button, the dim fades,
   answers open and close with their height, the ASK button fades.
   While moving, the dim is drawn as the dialog's own background (a closed dialog has no backdrop). */
.faq-dialog.faq-motion-opening::backdrop { background: transparent; }

/* A closed <dialog> leaves the screen at once; keep it drawn, unclickable, for the fade. */
.faq-dialog.faq-motion-closing {
  display: block;
  z-index: 50;
  pointer-events: none;
}

/* A closing answer is already hidden for faq.js; it stays drawn while its height eases to 0.
   site.css hides [hidden] with !important, so only this narrower rule can keep it drawn. */
.faq-answer.faq-motion-leaving[hidden] { display: block !important; }
.faq-answer.faq-motion-moving { overflow: hidden; }

/* ASK button: 180 ms fade; visibility switches off only after the fade. */
.faq-trigger.faq-motion-trigger {
  transition: opacity .18s cubic-bezier(.165,.84,.44,1), visibility 0s linear .18s;
}

.faq-trigger.faq-motion-trigger.is-visible {
  transition: opacity .18s cubic-bezier(.165,.84,.44,1), visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .faq-trigger.faq-motion-trigger, .faq-trigger.faq-motion-trigger.is-visible { transition: none; }
  .faq-motion .faq-panel, .faq-motion .faq-panel > *, .faq-motion .faq-answer {
    opacity: 1 !important;
    clip-path: none !important;
  }
}