/* ==========================================================================
   Nexus landing v5: the FAQ.
   One row open at a time. The answer's real height animates (no max-height
   guess), the + folds into a -, the open question goes bright while the rest
   stay quiet, the answer comes in line by line, and a 1px cyan trace light
   runs along the open row's rule. House ease, no caps, radius 0.
   ========================================================================== */

.faq { --fq-ease: cubic-bezier(0.16, 1, 0.3, 1); --fq-fold: cubic-bezier(0.45, 0, 0.2, 1); }

.faq-item { position: relative; }
.faq-q { color: var(--x-fg-2); transition: color 200ms linear; }
.faq-q:hover, .faq-item.open .faq-q { color: #fff; }
.faq-q:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* the mark: the upright bar turns flat and lies on the other, + becomes - */
.faq-mk::before, .faq-mk::after { background: currentColor; height: 1px; width: 12px; left: 0; top: 5.5px; }
.faq-mk::after { width: 12px; height: 1px; left: 0; top: 5.5px; transform: rotate(90deg); opacity: 1; transition: transform 520ms var(--fq-ease); }
.faq-item.open .faq-mk::after { transform: rotate(180deg); opacity: 1; }
.faq-mk { color: var(--x-fg-3); transition: color 200ms linear, transform 520ms var(--fq-ease); }
.faq-q:hover .faq-mk, .faq-item.open .faq-mk { color: #fff; }

/* the answer: its height is set by faq.js, from the real content */
.faq-a { max-height: none; height: 0; overflow: hidden; transition: none; }
.faq-item.open .faq-a { max-height: none; }
.faq-a p { color: var(--x-fg-2); }

/* line by line: each line rises out of its own mask */
.fq-l { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.fq-i { display: block; transform: translateY(105%); opacity: 0; }
.faq-item.open .fq-i {
  transform: none; opacity: 1;
  transition: transform 640ms var(--fq-ease) calc(80ms + var(--n, 0) * 55ms), opacity 300ms linear calc(80ms + var(--n, 0) * 55ms);
}
.faq-item.closing .fq-i { transform: translateY(-30%); opacity: 0; transition: transform 300ms var(--fq-fold), opacity 180ms linear; }

/* the trace light along the open row's rule */
.fq-trace {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: color-mix(in srgb, #7df9ff 70%, #fff);
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
}
.fq-trace.run { animation: fq-draw 560ms var(--fq-ease) both, fq-out 260ms linear 600ms both; }
@keyframes fq-draw { from { transform: scaleX(0); opacity: 1; } to { transform: scaleX(1); opacity: 1; } }
@keyframes fq-out { from { opacity: 1; transform: scaleX(1); } to { opacity: 0; transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .faq-mk::after, .faq-mk, .faq-item.open .fq-i, .faq-item.closing .fq-i { transition: none; }
  .fq-i { transform: none; opacity: 1; }
  .fq-trace.run { animation: none; }
}