/* ---------------------------------------------------------------------------
   RightsfuAlly home page — showcase motion.

   TWO sequences only, both play ONCE when first scrolled into view and then
   settle:
     1. the assistant panel — a question going through the system
     2. the audit trail — the record writing itself

   The eight security checks are deliberately NOT animated. That section is
   dense, factual content people read rather than watch, and eight elements
   taking turns beside it was agitating. It stays static.

   Built as CSS + a small JS timeline rather than a GIF or MP4: sharp at any
   DPI, a few KB instead of megabytes, real selectable/translatable text, and
   copy changes are a template edit rather than a re-render.

   Progressive enhancement: the markup renders the FINAL state with no CSS and
   no JS. `.is-animated` is added by script only when it is safe to animate, and
   every hidden state below is scoped under it — so if the script never runs,
   the panel still shows a complete, sensible conversation.
   --------------------------------------------------------------------------- */

/* ═══ 1. Assistant panel ═══════════════════════════════════════════════════ */

/* steps start hidden ONLY once JS has taken over */
.assistant-window.is-animated .demo-step {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
}

.assistant-window.is-animated .demo-step.shown {
  opacity: 1;
  transform: none;
}

/* the prompt line the question is typed into */
.demo-prompt {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.2rem;
  padding: .8rem 1rem;
  background: #fff;
  border: 1px solid #d1d1d1;
  font-size: .87rem;
  color: #2a2a2a;
  min-height: 2.9rem;
}

.demo-prompt .caret {
  display: inline-block;
  width: 1px;
  height: 1.05em;
  background: #2a2a2a;
  animation: rfa-caret 1s steps(1) infinite;
}

.assistant-window:not(.is-animated) .demo-prompt { display: none; }

@keyframes rfa-caret { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

/* "working" indicator */
.demo-working {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.2rem;
  color: #777;
  font-family: var(--app-font-mono);
  font-size: var(--rfa-micro);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.demo-working i {
  width: .34rem;
  height: .34rem;
  border-radius: 50%;
  background: #999;
  animation: rfa-pulse 1.1s ease-in-out infinite;
}

.demo-working i:nth-child(2) { animation-delay: .18s }
.demo-working i:nth-child(3) { animation-delay: .36s }

@keyframes rfa-pulse {
  0%, 100% { opacity: .25; transform: scale(.8) }
  50%      { opacity: 1;   transform: scale(1) }
}

/* evidence chips: the records the answer is grounded in */
.demo-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .8rem;
}

.demo-evidence span {
  padding: .3rem .55rem;
  background: #fff;
  border: 1px solid #cfcfcf;
  color: #555;
  font-family: var(--app-font-mono);
  font-size: var(--rfa-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .35s ease, transform .35s ease;
}

.demo-evidence span.shown { opacity: 1; transform: none }
.assistant-window:not(.is-animated) .demo-evidence span { opacity: 1; transform: none }

/* streamed answer */
.demo-answer-text .word {
  opacity: 0;
  transition: opacity .25s ease;
}

.demo-answer-text .word.shown { opacity: 1 }
.assistant-window:not(.is-animated) .demo-answer-text .word { opacity: 1 }

/* restart affordance */
.demo-replay {
  margin-top: 1rem;
  padding: 0;
  background: none;
  border: 0;
  color: #888;
  font-family: var(--app-font-mono);
  font-size: var(--rfa-micro);
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
}

.demo-replay:hover { color: #111 }
.assistant-window:not(.is-animated) .demo-replay { display: none }

/* ═══ 2. Audit trail — the record writing itself ═══════════════════════════ */
.audit-list.is-animated > div {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}

.audit-list.is-animated > div.shown {
  opacity: 1;
  transform: none;
}

.audit-list.is-animated > div span { transition: color .4s ease }
.audit-list.is-animated > div.landing span { color: #111 }

/* ═══ reduced motion: everything simply present, nothing moves ═════════════ */
@media (prefers-reduced-motion: reduce) {
  .assistant-window.is-animated .demo-step,
  .assistant-window.is-animated .demo-evidence span,
  .assistant-window.is-animated .demo-answer-text .word,
  .audit-list.is-animated > div {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .demo-prompt .caret,
  .demo-working i { animation: none }
  .demo-prompt { display: none }
}