/* The bot's feature pages (/bot/<slug>, Pages/BotFeature.cshtml): the home page's look (hairlines, corner ticks, the orange accent), a window that types out the bot's command and answers, and short
   lists as cards. Everything is under .fx, on top of the shared .rd look (redesign.css). The window is sized in plain pixels so it looks the same everywhere. */

.fx { --fx-w: 1040px; }

.fx .fp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 8px 4px 0; font: 600 11px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.fx .fp-crumbs a { color: inherit; text-decoration: none; }
.fx .fp-crumbs a:hover { color: var(--ink); }
.fx .fp-crumbs span[aria-current] { color: var(--soft); }

.fx .fx-eyebrow { font: 600 12.5px var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--link); white-space: pre; }

.fx .fx-sec { max-width: var(--fx-w); margin: 84px auto 0; }
.fx .fx-sec:first-of-type { margin-top: 12px; }
.fx .fx-h { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; font: 700 clamp(26px, 3vw, 38px)/1.1 var(--font-head); letter-spacing: -0.025em; }
.fx .fx-h::before { content: ""; width: 30px; height: 3px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }

/* corner ticks, like the home page's path cards */
.fx .fx-demo, .fx .fx-cards li, .fx .fx-notes li, .fx .fx-cmds li, .fx .fx-more a { position: relative; }
.fx .fx-cards li::before, .fx .fx-notes li::before, .fx .fx-cmds li::before, .fx .fx-more a::before { content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: 0.9;
  background: linear-gradient(var(--accent), var(--accent)) left top / 12px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) left top / 1px 12px no-repeat, linear-gradient(var(--accent), var(--accent)) right bottom / 12px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) right bottom / 1px 12px no-repeat; }

/* the window with the bot's reply */
.fx .fp-mock { margin: 0 auto; max-width: 720px; }
.fx .fp-mock figcaption { margin-top: 16px; font-size: 14px; color: var(--mute); text-align: center; }
.fx .fx-demo { background: linear-gradient(180deg, #131317, #0c0c0f); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -40px rgba(0, 0, 0, 0.9); padding: 0; border-radius: 3px; }
.fx .fx-demo::before, .fx .fx-demo::after { content: ""; position: absolute; inset: -1px; pointer-events: none;
  background: linear-gradient(var(--accent), var(--accent)) left top / 16px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) left top / 1px 16px no-repeat, linear-gradient(var(--accent), var(--accent)) right top / 16px 1px no-repeat, linear-gradient(var(--accent), var(--accent)) right top / 1px 16px no-repeat; }
.fx .fx-demo::after { transform: rotate(180deg); }
.fx .fx-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 600 12px var(--font-mono); color: var(--mute); }
.fx .fx-bar i { width: 9px; height: 9px; border-radius: 50%; background: #34353b; }
.fx .fx-bar span { margin-left: 10px; letter-spacing: 0.06em; }
.fx .fx-demo > figcaption { padding: 0 16px 16px; margin: 0; }
.fx .fp-mock-inner { max-width: none; margin: 0; padding: 24px 28px 26px; border-radius: 0; background: transparent; color: #dcddde; text-align: left; line-height: 1.45; font: 15px "Segoe UI", system-ui, sans-serif; }

.fx .fp-cmd { display: block; width: fit-content; margin-bottom: 18px; padding-right: 2px; font: 500 15px var(--font-mono); color: #b5bac1; white-space: nowrap; overflow: hidden; }
.fx .fp-cmd b { color: #fff; }
.fx .fp-cmd i { color: #facc15; font-style: normal; }
.fx .fp-event { color: #8e9297; font-style: italic; }

.fx .fp-msg { display: flex; gap: 14px; }
.fx .fp-avatar { flex: none; width: 42px; height: 42px; padding: 8px; border-radius: 50%; background: #2a2018; }
.fx .fp-body { min-width: 0; }
.fx .fp-name { margin-bottom: 4px; font-weight: 700; color: #fff; }
.fx .fp-tag { margin-left: 0.3rem; padding: 0.08rem 0.4rem; border-radius: 4px; background: #5865f2; font-size: 0.7em; vertical-align: 0.1em; }
.fx .fp-embed { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-left: 4px solid var(--accent); border-radius: 4px; background: #1a1a1e; }
.fx .fp-embed strong { color: #fff; }
.fx .fp-embed span { color: #b5bac1; }
.fx .fp-say { color: #dcddde; }
.fx .fp-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fx .fp-buttons u { padding: 6px 18px; border-radius: 5px; background: #4e5058; color: #fff; font-weight: 600; text-decoration: none; }
.fx .fp-buttons u.primary { background: #5865f2; }
.fx .fp-channels { max-width: 340px; margin: 0; padding: 4px 0; }
.fx .fp-cat { margin-bottom: 6px; font: 700 12px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #8e9297; }
.fx .fp-chan { padding: 6px 10px; border-radius: 5px; color: #b5bac1; }
.fx .fp-chan-icon { opacity: 0.7; }

/* when it scrolls into view the command types itself, then the bot answers, then its buttons pop in (without scripts it is all just there) */
.js .fx-demo:not(.in) .fp-cmd { width: 0; }
.js .fx-demo:not(.in) .fp-msg, .js .fx-demo:not(.in) .fp-chan, .js .fx-demo:not(.in) .fp-cat { opacity: 0; }
.js .fx-demo.in .fp-cmd { animation: fx-type calc(var(--n, 12) * 55ms) steps(var(--n, 12)) both; }
.js .fx-demo.in .fp-msg { animation: fx-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--n, 12) * 55ms + 250ms) both; }
.js .fx-demo.in .fp-cat { animation: fx-rise 0.4s ease 0.1s both; }
.js .fx-demo.in .fp-chan { animation: fx-rise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.2s + var(--i, 1) * 0.12s) both; }
.js .fx-demo.in .fp-buttons u { animation: fx-pop 0.4s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--n, 12) * 55ms + 700ms + var(--i, 0) * 0.12s) both; }
@keyframes fx-type { from { width: 0; } to { width: 100%; } }
@keyframes fx-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fx-pop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }

/* what it does: cards with a tick */
.fx .fx-cards, .fx .fx-notes, .fx .fx-cmds, .fx .fx-more, .fx .fx-flow { list-style: none; margin: 0; padding: 0; }
.fx .fx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fx .fx-cards li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 22px 24px; box-shadow: inset 0 0 0 1px var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 70%); font-size: 17px; color: var(--soft); }
.fx .fx-cards li::after { content: ""; grid-column: 1; grid-row: 1; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fd9425' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat, color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.fx .fx-cards li > * { grid-column: 2; }

/* set it up: numbered, joined by a line that draws itself */
.fx .fx-flow { position: relative; display: grid; gap: 14px; counter-reset: fx; }
.fx .fx-flow::before { content: ""; position: absolute; left: 26px; top: 26px; bottom: 26px; width: 2px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 20%, transparent)); transform-origin: top; }
.fx .fx-flow li { position: relative; counter-increment: fx; padding: 18px 22px 18px 74px; box-shadow: inset 0 0 0 1px var(--line); background: rgba(255, 255, 255, 0.025); font-size: 17px; color: var(--soft); }
.fx .fx-flow li::before { content: counter(fx); position: absolute; left: 10px; top: 50%; width: 34px; height: 34px; margin-top: -17px; display: grid; place-items: center; border-radius: 50%; font: 700 15px var(--font-head); color: var(--on-accent); background: var(--accent); box-shadow: 0 0 0 6px var(--bg, #060607), 0 0 18px rgba(253, 148, 37, 0.35); }
.js .fx-sec.rv .fx-flow::before { transform: scaleY(0); transition: transform 1.3s cubic-bezier(0.3, 0.7, 0.2, 1) 0.25s; }
.js .fx-sec.rv.in .fx-flow::before { transform: scaleY(1); }

/* good to know: quiet notes side by side */
.fx .fx-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.fx .fx-notes li { padding: 20px 22px; box-shadow: inset 0 0 0 1px var(--line); color: var(--soft); font-size: 16px; }

/* commands: each one copies when you press it */
.fx .fx-cmds { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.fx .fx-cmds li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--line); background: rgba(255, 255, 255, 0.025); }
.fx .fx-cmds code { font: 600 14.5px var(--font-mono); color: var(--link); background: none; padding: 0; }
.fx .fp-badge { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--mute); }
.fx .fx-copy { margin-left: auto; padding: 4px 12px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--soft); font: 600 12px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.fx .fx-copy:hover { color: var(--ink); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.fx .fx-note { margin-top: 18px; color: var(--mute); font-size: 15px; }

/* more from Sigil */
.fx .fx-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.fx .fx-more a { display: grid; gap: 4px; padding: 20px 22px; box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; transition: box-shadow 0.15s, transform 0.15s, background 0.15s; }
.fx .fx-more a:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, transparent); transform: translateY(-3px); }
.fx .fx-more b { font: 700 18px var(--font-head); }
.fx .fx-more span { color: var(--soft); font-size: 14.5px; }

.fx .fx-end { text-align: center; margin: 110px 0 24px; }
.fx .fx-end h2 { font-size: clamp(28px, 3.4vw, 44px); }
.fx .fx-end .rd-cta-row { justify-content: center; margin-top: 26px; }

.fx .fp-list code, .fx .fp-commands code { font-size: 0.9em; }

/* the reveal as you scroll */
.js .fx .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .fx .rv.in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .fx .fx-cards { grid-template-columns: 1fr; }
  .fx .fx-sec { margin-top: 64px; }
  .fx .fp-mock-inner { padding: 18px; font-size: 14px; }
  .fx .fx-flow li { padding-left: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .fx-demo:not(.in) .fp-cmd { width: auto; }
  .js .fx-demo:not(.in) .fp-msg, .js .fx-demo:not(.in) .fp-chan, .js .fx-demo:not(.in) .fp-cat { opacity: 1; }
  .js .fx-demo.in .fp-cmd, .js .fx-demo.in .fp-msg, .js .fx-demo.in .fp-cat, .js .fx-demo.in .fp-chan, .js .fx-demo.in .fp-buttons u { animation: none; }
  .js .fx .rv { opacity: 1; transform: none; transition: none; }
  .js .fx-sec.rv .fx-flow::before { transform: none; transition: none; }
}