/* More features: a grid of small cards, each with a looping mini scene of one feature above its name.
   The scenes copy the app's dark look and loop every 6s with CSS alone. They move only when the
   visitor allows motion; otherwise each one shows its finished state. To add a feature, add a card. */

.fg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

.fg-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.375rem;
  padding: 0.75rem 0.75rem 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--radius-lg);
  background: #0d0f12;
  box-shadow: var(--shadow-shot);
  text-align: center;
}

.fg-card h3 {
  margin-top: 0.75rem;
  font-size: 1.25rem;
  color: #f2f1ee;
}

.fg-text {
  font-size: var(--fs-small);
  line-height: 1.45;
  text-wrap: balance;
  color: #8b949e;
}

/* The scene: a small dark window, like a corner of the app */
.fg-scene {
  position: relative;
  overflow: hidden;
  height: 11rem;
  padding: 0.875rem;
  border-radius: var(--radius-md);
  background: #15181d;
  color: #e6e8eb;
  font-size: 0.8125rem;
  line-height: 1.45;
  text-align: left;
}

.fg-scene b { margin-right: 0.375rem; font-weight: 600; }

/* Names in the app's colors. Light windows use a darker shade of each, so they still read */
.fg-n-matt { color: oklch(var(--name-l, 0.78) 0.14 29); }
.fg-n-alice { color: oklch(var(--name-l, 0.78) 0.14 96); }
.fg-n-richard { color: oklch(var(--name-l, 0.78) 0.14 229); }
.fg-n-bob { color: oklch(var(--name-l, 0.78) 0.14 309); }

/* A small faint caption, like "Bob sends" */
.fg-cap {
  font-size: 0.6875rem;
  color: #8b949e;
}

/* ---- Dark mode: the same chat, light, then dark spreading out from its switch ---- */

.fg-win {
  position: absolute;
  inset: 0.875rem;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 0 0.75rem 0.75rem;
  border: 1px solid;
  border-radius: 0.5rem;
}

.fg-win-light {
  --name-l: 0.5;
  border-color: #d0d7de;
  background: #f6f7f9;
  color: #1f2328;
}

/* Fully shown when still; the loop grows it from the switch (its center: the bar's right end) */
.fg-win-dark {
  border-color: #30363d;
  background: #0d0f12;
  clip-path: circle(150% at calc(100% - 1.625rem) 1rem);
}

.fg-win-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2rem;
  margin: 0 -0.75rem 0.25rem;
  padding: 0 0.75rem;
  border-bottom: 1px solid;
  font-weight: 600;
}

.fg-win-light .fg-win-bar { border-color: #d0d7de; }
.fg-win-dark .fg-win-bar { border-color: #22262c; }

/* The switch: off in the light window, on in the dark one */
.fg-switch {
  position: relative;
  width: 1.75rem;
  height: 1rem;
  border-radius: 999px;
  background: #d0d7de;
}

.fg-switch::after {
  content: '';
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #fff;
}

.fg-win-dark .fg-switch { background: var(--brand-violet); }
.fg-win-dark .fg-switch::after { left: 0.875rem; }

/* ---- Encryption: Bob's message crosses the wire locked, and Alice reads it ---- */

.fg-lock {
  display: grid;
  align-content: space-between;
}

.fg-from,
.fg-to {
  display: grid;
  gap: 0.25rem;
}

.fg-to { justify-items: end; }

.fg-bubble {
  justify-self: start;
  padding: 0.25rem 0.625rem;
  border-radius: 0.75rem 0.75rem 0.75rem 0.25rem;
  background: #22262c;
}

.fg-to .fg-bubble {
  justify-self: end;
  border-radius: 0.75rem 0.75rem 0.25rem 0.75rem;
}

/* The wire between them, and the locked message on it: all anyone in between sees */
.fg-wire {
  position: relative;
  height: 1.5rem;
}

.fg-wire::before {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  border-top: 1px dashed #3a4049;
}

.fg-cipher {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--brand-violet);
  border-radius: 999px;
  background: #241a45;
  color: #c4b5fd;
  font: 0.6875rem / 1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

/* ---- Threads: a question, and the replies stacking up beside its line ---- */

.fg-thread {
  display: grid;
  align-content: start;
  gap: 0.625rem;
}

.fg-replies {
  display: grid;
  gap: 0.375rem;
  margin-left: 0.25rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--brand-violet);
}

.fg-reply-box {
  position: absolute;
  inset: auto 0.875rem 0.875rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid #2a2f36;
  border-radius: 0.5rem;
  background: #0d0f12;
  color: #6b7280;
}

/* ---- Admin API: a request adds Angela, and she joins the members ---- */

.fg-admin {
  display: grid;
  align-content: start;
  gap: 0.375rem;
  background: #0a0c0f;
  font: 0.75rem / 1.6 ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  color: #c9d1d9;
}

.fg-verb { color: #c678dd; font-weight: 600; }
.fg-status { color: #7ee787; }
.fg-json { color: #98c379; }

/* Typed in by the loop: clipped to its width as that grows, one character at a time */
.fg-path {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
}

.fg-members {
  position: absolute;
  inset: auto 0.875rem 0.875rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-sans);
}

.fg-members .fg-cap { flex-basis: 100%; }

.fg-av {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  color: #0d0f12;
  font-size: 0.6875rem;
  font-weight: 700;
}

.fg-av-alice { background: oklch(0.78 0.14 96); }
.fg-av-bob { background: oklch(0.78 0.14 309); }
.fg-av-matt { background: oklch(0.78 0.14 29); }
.fg-av-richard { background: oklch(0.78 0.14 229); }
.fg-av-angela { background: oklch(0.78 0.14 160); box-shadow: 0 0 0 2px #0a0c0f, 0 0 0 3.5px oklch(0.78 0.14 160); }

/* ---- The loops ---- */

@media (prefers-reduced-motion: no-preference) {
  .fg-win-dark { animation: fg-theme 6s var(--ease) infinite; }

  .fg-from { animation: fg-at-5 6s infinite; }
  .fg-cipher { animation: fg-travel 6s infinite; }
  .fg-to { animation: fg-at-60 6s infinite; }

  .fg-r1 { animation: fg-at-20 6s infinite; }
  .fg-r2 { animation: fg-at-40 6s infinite; }
  .fg-r3 { animation: fg-at-60 6s infinite; }

  .fg-path { animation: fg-type 6s steps(23) infinite; }
  .fg-res { animation: fg-at-40 6s infinite; }
  .fg-json { animation: fg-at-50 6s infinite; }
  .fg-av-angela { animation: fg-pop 6s infinite; }

  /* Light first; dark spreads out from the switch, stays, and shrinks back into it */
  @keyframes fg-theme {
    0%, 25% { clip-path: circle(0% at calc(100% - 1.625rem) 1rem); }
    40%, 80% { clip-path: circle(150% at calc(100% - 1.625rem) 1rem); }
    95%, 100% { clip-path: circle(0% at calc(100% - 1.625rem) 1rem); }
  }

  /* The locked message rides the wire from Bob's side to Alice's */
  @keyframes fg-travel {
    0%, 15% { left: 0; opacity: 0; transform: translate(0, -50%); }
    20%, 50% { opacity: 1; }
    57%, 100% { left: 100%; opacity: 0; transform: translate(-100%, -50%); }
  }

  /* Typed from 8% to 32% of the loop: the path is 23 characters, one step each */
  @keyframes fg-type {
    0%, 8% { width: 0; }
    32%, 100% { width: 23ch; }
  }

  /* Angela's avatar pops in once the request is done */
  @keyframes fg-pop {
    0%, 60% { transform: scale(0); }
    66% { transform: scale(1.15); }
    70%, 88% { transform: scale(1); }
    96%, 100% { transform: scale(0); }
  }

  /* fg-at-N: hidden until N% of the loop, then in, and out again at the end, with everything else */
  @keyframes fg-at-5 {
    0%, 5% { opacity: 0; transform: translateY(6px); }
    11%, 88% { opacity: 1; transform: none; }
    96%, 100% { opacity: 0; }
  }

  @keyframes fg-at-20 {
    0%, 20% { opacity: 0; transform: translateY(6px); }
    26%, 88% { opacity: 1; transform: none; }
    96%, 100% { opacity: 0; }
  }

  @keyframes fg-at-40 {
    0%, 40% { opacity: 0; transform: translateY(6px); }
    46%, 88% { opacity: 1; transform: none; }
    96%, 100% { opacity: 0; }
  }

  @keyframes fg-at-50 {
    0%, 50% { opacity: 0; transform: translateY(6px); }
    56%, 88% { opacity: 1; transform: none; }
    96%, 100% { opacity: 0; }
  }

  @keyframes fg-at-60 {
    0%, 60% { opacity: 0; transform: translateY(6px); }
    66%, 88% { opacity: 1; transform: none; }
    96%, 100% { opacity: 0; }
  }
}

/* Tablets and phones turned sideways: two cards per row */
@media (max-width: 1023px) {
  .fg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: one card per row */
@media (max-width: 760px) {
  .fg { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}