/* Motion-сцены (23.10.2026): «Сарафан», «Корректура», «Ответ нейросети», «Портрет из упоминаний».
   Отдельным файлом, а не в faros-redesign.css: так правка не требует пересборки public/build.
   Логика – public/js/faros-scenes.js, разметка – resources/views/components/faros/scene/*. */

.fx-sec { padding: 96px 0; }
.fx-sec--soft { background: var(--soft, #f4f4f4); }
.fx-sec .sec-head { margin-bottom: 40px; }
.fx-cap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px;
  font: 500 13px/1.5 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .04em; color: var(--ink-soft, #3a3a3a); }

/* Сарафан */
.fx-net { position: relative; background: #0e0f0f; color: #f2f2ef; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 7; isolation: isolate; }
.fx-net canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.fx-net__hud { position: absolute; left: 22px; right: 22px; top: 18px; display: flex; justify-content: space-between; gap: 12px; pointer-events: none;
  font: 500 12.5px/1.3 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #8b908e; }
.fx-net__hud b { display: block; margin-top: 6px; font: 800 34px/1 Manrope, Inter, Arial, sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-transform: none; }
.fx-net__hud .r b { color: #f2695e; }
.fx-net__hud .g { text-align: right; }
.fx-net__hud .g b { color: #14a38c; }

/* Корректура */
.fx-proof { position: relative; background: #fff; border: 1px solid var(--line, #e2e2e2); border-radius: 18px; padding: 40px 44px 34px 64px; display: grid; gap: 28px; }
.fx-proof__it { display: grid; gap: 16px; position: relative; }
.fx-proof__src { font: 500 12.5px/1.4 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft, #3a3a3a); }
.fx-proof__q { margin: 0; font: 400 clamp(21px, 2.4vw, 30px)/1.38 Georgia, "Times New Roman", serif; color: var(--ink, #000); max-width: 30em; }
.fx-proof__bad { text-decoration: none; color: #8a8a86; background: linear-gradient(#dc2f27, #dc2f27) no-repeat 0 58% / 100% 2.5px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fx-proof__fix { text-decoration: none; font: 700 .82em/1.3 Manrope, Inter, Arial, sans-serif; letter-spacing: -.01em; color: var(--sea, #0b5f52);
  background: linear-gradient(transparent 60%, rgba(254,206,47,.55) 60%); }
.fx-proof__fix::after { content: "¹"; font-size: .7em; vertical-align: super; }
.fx-proof__note { font: 500 13px/1.5 "IBM Plex Mono", ui-monospace, monospace; color: var(--sea, #0b5f52); border-top: 1px solid var(--line, #e2e2e2); padding-top: 12px; }
.fx-proof__note::before { content: "¹ "; }
.fx-proof__mark { position: absolute; left: -40px; top: 46px; width: 18px; height: 18px; border: 2px solid #dc2f27; border-radius: 50%; }
.fx-proof__dots { position: absolute; right: 22px; top: 22px; display: flex; gap: 6px; }
.fx-proof__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line, #e2e2e2); }
.fx-proof__dots i.on { background: var(--y, #fece2f); }
/* Живой режим: одна карточка, черта, печать факта, сноска. Без JS видны все в итоговом виде. */
.fx-proof.is-live { min-height: 300px; align-content: center; }
.fx-proof.is-live .fx-proof__it { display: none; }
.fx-proof.is-live .fx-proof__it.is-on { display: grid; }
.fx-proof.is-live .fx-proof__bad { color: var(--ink, #000); background-size: 0 2.5px; transition: background-size .8s cubic-bezier(.65,0,.35,1), color .6s .5s; }
.fx-proof.is-live .is-struck .fx-proof__bad { background-size: 100% 2.5px; color: #8a8a86; }
.fx-proof.is-live .fx-proof__fix { display: none; }
.fx-proof.is-live .is-fixed .fx-proof__fix { display: inline; }
.fx-proof.is-live .fx-proof__fix::after { opacity: 0; }
.fx-proof.is-live .is-noted .fx-proof__fix::after { opacity: 1; }
.fx-proof.is-live .fx-proof__mark { opacity: 0; transform: scale(.4); transition: opacity .4s, transform .4s; }
.fx-proof.is-live .is-struck .fx-proof__mark { opacity: 1; transform: none; }
.fx-proof.is-live .fx-proof__note { opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s; }
.fx-proof.is-live .is-noted .fx-proof__note { opacity: 1; transform: none; }

/* Ответ нейросети: та же белая карточка, что .aicard на главной */
.fx-ai { background: #fff; border-radius: 16px; padding: 22px 26px 24px; color: var(--ink, #000); display: grid; gap: 16px; }
.fx-ai__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line, #e2e2e2); }
.fx-ai__bar > span { display: flex; align-items: center; gap: 10px; font: 500 13.5px/1.3 "IBM Plex Mono", monospace; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft, #3a3a3a); }
.fx-ai__bar svg { width: 22px; height: 22px; stroke: var(--sea, #0b5f52); fill: none; stroke-width: 1.6; }
.fx-ai__tabs { display: flex; gap: 6px; }
.fx-ai__tabs button { font: 500 12.5px/1 "IBM Plex Mono", monospace; color: var(--ink-soft, #3a3a3a); background: transparent; border: 1px solid var(--line-2, #c9c9c9); border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.fx-ai__tabs button[aria-pressed="true"] { background: var(--ink, #000); border-color: var(--ink, #000); color: #fff; }
.fx-ai:not(.is-live) .fx-ai__tabs { display: none; }
.fx-ai__q { margin: 0; justify-self: end; max-width: 88%; background: var(--soft, #f4f4f4); border-radius: 14px 14px 4px 14px; padding: 10px 14px; font-size: 16.5px; font-weight: 600; }
.geo .fx-ai p.fx-ai__q, .geo .fx-ai p.fx-ai__a { color: var(--ink, #000); }
.fx-ai__a { margin: 0; font-size: 17px; line-height: 1.55; min-height: 7.8em; color: var(--ink-softer, #2a2a2a); }
.fx-ai__a mark { background: rgba(220,47,39,.12); color: #b52b25; padding: 1px 3px; border-radius: 3px; }
.fx-ai__a ins { text-decoration: none; background: rgba(11,95,82,.1); color: var(--sea, #0b5f52); padding: 1px 3px; border-radius: 3px; }
.fx-ai.is-live .fx-w { opacity: 0; }
.fx-ai.is-live .fx-w.on { opacity: 1; transition: opacity .25s; }
.fx-ai__src { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.fx-ai__src span { font: 500 12px/1 "IBM Plex Mono", monospace; border: 1px solid rgba(220,47,39,.45); color: #b52b25; border-radius: 6px; padding: 6px 8px; }
.fx-ai__src.is-good span { border-color: rgba(11,95,82,.45); color: var(--sea, #0b5f52); }
.fx-ai.is-live .fx-ai__src span { opacity: 0; transform: translateY(5px); transition: opacity .4s, transform .4s; }
.fx-ai.is-live .fx-ai__src span.on { opacity: 1; transform: none; }
.fx-ai__score { display: flex; align-items: center; gap: 10px; font: 500 12.5px/1 "IBM Plex Mono", monospace; color: var(--ink-soft, #3a3a3a); }
.fx-ai__meter { flex: 1; height: 6px; background: var(--soft, #f4f4f4); border-radius: 3px; overflow: hidden; }
.fx-ai__meter i { display: block; height: 100%; width: 0; background: #dc2f27; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.fx-ai.is-after .fx-ai__meter i { background: var(--sea, #0b5f52); }
.fx-ai__fix { display: flex; gap: 12px; align-items: flex-start; padding-top: 14px; border-top: 1px solid var(--line, #e2e2e2); font-size: 15.5px; line-height: 1.5; }
.fx-ai__fix svg { width: 20px; height: 20px; stroke: var(--sea, #0b5f52); fill: none; stroke-width: 1.8; flex: none; margin-top: 2px; }
.geo .fx-ai .fx-ai__fix span { color: var(--ink, #000); }

/* Портрет из упоминаний */
.fx-portrait { position: relative; background: #0e0f0f; border-radius: 18px; overflow: hidden; aspect-ratio: 5 / 4; isolation: isolate; }
.fx-portrait canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.fx-portrait__tip { position: absolute; left: 0; top: 0; max-width: 260px; pointer-events: none; background: var(--y, #fece2f); color: #000;
  font: 600 13px/1.35 Manrope, Inter, Arial, sans-serif; padding: 7px 10px; border-radius: 8px; }
.fx-portrait-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.fx-portrait-grid h2 { font-size: clamp(30px, 4vw, 52px); margin: 18px 0 20px; }
.fx-portrait-grid p { font-size: 19px; line-height: 1.55; color: var(--ink-softer, #2a2a2a); max-width: 30em; }
.fx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 900px) {
  .fx-sec { padding: 64px 0; }
  .fx-net { aspect-ratio: 4 / 5; }
  .fx-net__hud b { font-size: 28px; }
  .fx-proof { padding: 30px 22px 24px 46px; }
  .fx-proof__mark { left: -32px; top: 40px; width: 14px; height: 14px; }
  .fx-portrait-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .fx-portrait { aspect-ratio: 4 / 5; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-proof.is-live .fx-proof__bad, .fx-proof.is-live .fx-proof__mark, .fx-proof.is-live .fx-proof__note,
  .fx-ai.is-live .fx-ai__src span, .fx-ai__meter i { transition: none; }
}
.fx-ai-wrap { max-width: 780px; }