/* Экран «Спросить систему» (.p0-stage--ask). Подключается после
   frontend-demo/styles/presentation0.css; вид схемы хранилищ — в inside.css.
   Финальное состояние — базовые стили (бит 2: третий ответ открыт, два
   предыдущих свёрнуты в стопку), ранние биты — .p0-stage--ask[data-beat="N"].
   У каждого запроса свой набор лучей и своя карточка: виден и движется только
   набор текущего бита, поэтому смена бита перезапускает анимации. Лучи
   стартуют по очереди (--ray), а не все сразу.
   Время внутри бита (15 с): вопрос 0,2–1,8 · искра в ядро 1,8 · лучи 2,4–5,6 ·
   фрагменты обратно 6–8,6 · карточка 8,4–12. */

/* --- Строка вопроса и стопка ответов -------------------------------------- */

.p0-ask-prompt {
  position: absolute;
  z-index: 5;
  height: calc(4.4 * var(--su));
  display: flex;
  align-items: center;
  gap: calc(.9 * var(--su));
  padding: 0 calc(1.2 * var(--su)) 0 calc(.8 * var(--su));
  border: 1px solid rgba(var(--gold-rgb), .45);
  border-radius: 999px;
  background: linear-gradient(110deg, #1e2b2af2, #0f1717f2);
  box-shadow: 0 0 calc(2.4 * var(--su)) rgba(var(--gold-rgb), .12), inset 0 1px #f3e6c91f;
}
.p0-ask-prompt__label {
  display: inline-flex;
  align-items: center;
  gap: calc(.4 * var(--su));
  flex: none;
  padding: calc(.35 * var(--su)) calc(.8 * var(--su));
  border-radius: 999px;
  background: rgba(var(--gold-rgb), .14);
  font: 500 calc(.7 * var(--su)) var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e6cd9a;
}
.p0-ask-prompt__label .ui-icon { width: 1.3em; height: 1.3em; }
.p0-ask-prompt__question {
  display: none;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: calc(1.08 * var(--su));
  font-weight: 520;
  color: #f6f2ea;
  white-space: nowrap;
  text-overflow: ellipsis;
  animation: p0-ask-type 1.5s steps(36, end) .2s both;
}
@keyframes p0-ask-type {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.p0-ask-prompt__question[data-q="2"],
.p0-stage--ask[data-beat="0"] .p0-ask-prompt__question[data-q="0"],
.p0-stage--ask[data-beat="1"] .p0-ask-prompt__question[data-q="1"] { display: block; }
.p0-stage--ask:is([data-beat="0"], [data-beat="1"]) .p0-ask-prompt__question[data-q="2"] { display: none; }

.p0-ask-stack {
  position: absolute;
  z-index: 5;
  height: calc(2.6 * var(--su));
  display: flex;
  align-items: center;
  gap: calc(.6 * var(--su));
}
.p0-ask-stack__label {
  font: 500 calc(.62 * var(--su)) var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8fa09b;
}
.p0-ask-tab {
  display: inline-flex;
  align-items: center;
  gap: calc(.45 * var(--su));
  padding: calc(.3 * var(--su)) calc(.9 * var(--su)) calc(.3 * var(--su)) calc(.35 * var(--su));
  border: 1px solid rgba(var(--gold-rgb), .4);
  border-radius: calc(.6 * var(--su));
  background: linear-gradient(120deg, rgba(var(--gold-rgb), .14), #101817ee);
  box-shadow: 0 calc(.3 * var(--su)) calc(1 * var(--su)) #04070766;
  font-size: calc(.8 * var(--su));
  color: #ebe5d7;
  white-space: nowrap;
}
.p0-ask-tab b {
  display: grid;
  place-items: center;
  width: calc(1.4 * var(--su));
  height: calc(1.4 * var(--su));
  border-radius: 50%;
  background: rgba(var(--gold-rgb), .22);
  font: 600 calc(.66 * var(--su)) var(--mono);
  color: #e6cd9a;
}
/* Свёрнутый брифинг — эстафета к «Моему дню»: мятный, как блоки ленты дня. */
.p0-ask-tab[data-q="1"] {
  border-color: rgba(var(--mint-rgb), .55);
  background: linear-gradient(120deg, rgba(var(--mint-rgb), .16), #101817ee);
}
.p0-ask-tab[data-q="1"] b { background: rgba(var(--mint-rgb), .22); color: #bdf0e1; }
.p0-stage--ask[data-beat="0"] .p0-ask-tab,
.p0-stage--ask[data-beat="1"] .p0-ask-tab[data-q="1"] { display: none; }
.p0-stage--ask[data-beat="0"] .p0-ask-stack__label { opacity: 0; }
.p0-stage--ask[data-beat="1"] .p0-ask-tab[data-q="0"],
.p0-stage--ask[data-beat="2"] .p0-ask-tab[data-q="1"] { animation: p0-ask-tab-in .8s var(--ease-out) .35s both; }
@keyframes p0-ask-tab-in { from { opacity: 0; scale: .6; translate: 0 calc(5 * var(--su)); } }

/* --- Карточка ответа -------------------------------------------------------- */

/* Карточки лежат в обёртке на весь кадр: появление кадра при эстафете
   (p0-stage-part-enter на прямых детях .p0-stage__frame) не отменяет их анимацию. */
.p0-ask-cards { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.p0-ask-card {
  position: absolute;
  z-index: 4;
  pointer-events: auto;
  display: none;
  flex-direction: column;
  gap: calc(.75 * var(--su));
  padding: calc(1.1 * var(--su)) calc(1.4 * var(--su));
  overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb), .38);
  border-radius: calc(1.2 * var(--su));
  background: linear-gradient(160deg, #1c2928f5, #0c1312f7);
  box-shadow: 0 calc(1.4 * var(--su)) calc(4 * var(--su)) #04070799, inset 0 1px #f3e6c91c;
  transform-origin: 60% 0;
  animation: p0-ask-card-in 1s var(--ease-out) 8.4s both;
}
@keyframes p0-ask-card-in { from { opacity: 0; translate: calc(2 * var(--su)) 0; } }
.p0-ask-card[data-q="2"],
.p0-stage--ask[data-beat="0"] .p0-ask-card[data-q="0"],
.p0-stage--ask[data-beat="1"] .p0-ask-card[data-q="1"] { display: flex; }
.p0-stage--ask:is([data-beat="0"], [data-beat="1"]) .p0-ask-card[data-q="2"] { display: none; }
/* Предыдущий ответ сворачивается в стопку в начале следующего бита. */
.p0-stage--ask[data-beat="1"] .p0-ask-card[data-q="0"],
.p0-stage--ask[data-beat="2"] .p0-ask-card[data-q="1"] {
  display: flex;
  animation: p0-ask-card-fold .8s cubic-bezier(.5, 0, .7, .4) both;
}
@keyframes p0-ask-card-fold {
  to { opacity: 0; scale: .12 .08; translate: 0 calc(-3 * var(--su)); visibility: hidden; }
}
.p0-ask-card__head { display: flex; align-items: center; gap: calc(.8 * var(--su)); }
.p0-ask-card__kind {
  padding: calc(.2 * var(--su)) calc(.8 * var(--su));
  border-radius: 999px;
  background: rgba(var(--gold-rgb), .16);
  font: 600 calc(.7 * var(--su)) var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #e6cd9a;
}
.p0-ask-card__sim { margin-left: auto; font: calc(.62 * var(--su)) var(--mono); letter-spacing: .06em; color: #b7a2f5; }
.p0-ask-card__headline {
  margin: 0;
  font-size: calc(1.4 * var(--su));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: #f6f2ea;
  animation: p0-stage-reveal 1s var(--ease-out) 8.9s both;
}
.p0-ask-card[data-q="1"] .p0-ask-card__headline,
.p0-ask-card[data-q="2"] .p0-ask-card__headline { font-size: calc(1.22 * var(--su)); }
.p0-ask-card__sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: calc(.8 * var(--su)) calc(1.4 * var(--su));
  min-height: 0;
}
.p0-ask-card[data-q="0"] .p0-ask-card__sections { grid-template-columns: minmax(0, 1fr); }
.p0-ask-card__section,
.p0-ask-card__similar,
.p0-ask-card__draft { animation: p0-ask-rise .6s var(--ease-out) calc(9.3s + var(--k) * .35s) both; }
@keyframes p0-ask-rise { from { opacity: 0; translate: 0 calc(.8 * var(--su)); } }
.p0-ask-card h3 {
  display: flex;
  align-items: center;
  gap: calc(.4 * var(--su));
  margin: 0 0 calc(.3 * var(--su));
  font: 500 calc(.62 * var(--su)) var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #bfae8a;
}
.p0-ask-card h3 .ui-icon { width: 1.3em; height: 1.3em; }
.p0-ask-card ul { display: grid; gap: calc(.25 * var(--su)); margin: 0; padding: 0; list-style: none; }
.p0-ask-card li {
  position: relative;
  padding-left: calc(.9 * var(--su));
  font-size: calc(.84 * var(--su));
  line-height: 1.3;
  color: #dfe4e1;
}
.p0-ask-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: calc(.35 * var(--su));
  height: calc(.35 * var(--su));
  border-radius: 50%;
  background: #e6cd9a99;
}
.p0-ask-card[data-q="0"] li { font-size: calc(.98 * var(--su)); }
.p0-ask-card[data-q="1"] li { font-size: calc(.8 * var(--su)); }
.p0-ask-card[data-q="1"] .p0-ask-card__sections { row-gap: calc(.6 * var(--su)); }
.p0-ask-card__similar,
.p0-ask-card__draft {
  grid-column: 1 / -1;
  padding: calc(.6 * var(--su)) calc(.9 * var(--su));
  border-radius: calc(.8 * var(--su));
}
.p0-ask-card__similar {
  border: 1px dashed rgba(183, 162, 245, .6);
  background: linear-gradient(120deg, rgba(var(--lav-rgb), .14), transparent);
}
.p0-ask-card__similar h3 { color: #cbbdf7; }
.p0-ask-card__draft {
  border: 1px solid rgba(var(--mint-rgb), .4);
  background: linear-gradient(120deg, rgba(var(--mint-rgb), .1), transparent);
}
.p0-ask-card__draft h3 { color: #a8e6d5; }
.p0-ask-card__draft h3 small { margin-left: auto; letter-spacing: .04em; text-transform: none; color: #8fa09b; }
.p0-ask-card__similar p,
.p0-ask-card__draft p { margin: 0; font-size: calc(.84 * var(--su)); line-height: 1.35; color: #eef0ec; }
.p0-ask-card__similar .p0-ask-card__outcome { margin-top: calc(.2 * var(--su)); color: #d9cffb; }
.p0-ask-card__layers {
  display: flex;
  flex-wrap: wrap;
  gap: calc(.5 * var(--su));
  margin: 0;
  animation: p0-ask-rise .6s var(--ease-out) 11.4s both;
}
.p0-ask-card__layer {
  display: inline-flex;
  align-items: center;
  gap: calc(.4 * var(--su));
  padding: calc(.3 * var(--su)) calc(.8 * var(--su));
  border-radius: calc(.6 * var(--su));
  font-size: calc(.76 * var(--su));
}
.p0-ask-card__layer .ui-icon { width: 1.2em; height: 1.2em; }
.p0-ask-card__layer--obs { border: 1px solid rgba(var(--gold-rgb), .5); background: rgba(var(--gold-rgb), .1); color: #efdcb4; }
.p0-ask-card__layer--interp { border: 1px dashed rgba(var(--lav-rgb), .6); background: rgba(var(--lav-rgb), .1); color: #d9cffb; }
.p0-ask-card__sources {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: calc(.5 * var(--su));
  margin-top: auto;
  padding-top: calc(.7 * var(--su));
  border-top: 1px solid #e6cd9a1f;
}
.p0-ask-card__sources-label {
  font: 500 calc(.62 * var(--su)) var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8fa09b;
}
.p0-ask-cite {
  --store-rgb: var(--gold-rgb);
  display: inline-flex;
  align-items: center;
  gap: calc(.35 * var(--su));
  padding: calc(.28 * var(--su)) calc(.75 * var(--su)) calc(.28 * var(--su)) calc(.5 * var(--su));
  border: 1px solid rgba(var(--store-rgb), .6);
  border-radius: 999px;
  background: rgba(var(--store-rgb), .13);
  font-size: calc(.78 * var(--su));
  color: #f3efe6;
  white-space: nowrap;
  animation: p0-ask-cite .5s cubic-bezier(.3, 1.4, .5, 1) calc(10.4s + var(--k) * .4s) both;
}
@keyframes p0-ask-cite { from { opacity: 0; scale: .5; } }
.p0-ask-cite svg { width: 1.15em; height: 1.15em; color: rgb(var(--store-rgb)); }
.p0-ask-cite small { font: calc(.58 * var(--su)) var(--mono); color: rgb(var(--store-rgb)); }
:is(.p0-ask-cite, .p0-ask-ray, .p0-ask-return)[data-store="events"] { --store-rgb: var(--mint-rgb); }
:is(.p0-ask-cite, .p0-ask-ray, .p0-ask-return)[data-store="files"] { --store-rgb: var(--lav-rgb); }
:is(.p0-ask-cite, .p0-ask-ray, .p0-ask-return)[data-store="vector"] { --store-rgb: 136, 182, 222; }

/* --- Ядро в полосе над хранилищами ---------------------------------------- */

.p0-ask-core { position: absolute; inset: 0; }
.p0-ask-core__orb {
  position: absolute;
  left: calc(50% - 1.5 * var(--su));
  top: calc(50% - 1.5 * var(--su));
  width: calc(3 * var(--su));
  height: calc(3 * var(--su));
  display: grid;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fff6df, #e6cd9a 32%, #7b6538 66%, #1b2524 72%);
  box-shadow: 0 0 calc(1.6 * var(--su)) #e6cd9a88;
}
.p0-ask-core__orb i {
  grid-area: 1 / 1;
  margin: calc(-.5 * var(--su));
  border: 1px solid #e9d3a777;
  border-radius: 50%;
  border-top-color: transparent;
  animation: cs-orbit 9s linear infinite;
}
.p0-ask-core__orb i + i { margin: calc(-.9 * var(--su)); border-color: #b499ff66; border-bottom-color: transparent; animation-duration: 14s; animation-direction: reverse; }
.p0-ask-core__label {
  position: absolute;
  left: calc(50% + 2.8 * var(--su));
  top: 50%;
  translate: 0 -50%;
  font: 500 calc(.7 * var(--su)) var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #dcc699;
}

/* --- Лучи и фрагменты -------------------------------------------------------- */

.p0-ask-beams { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.p0-ask-beams > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.p0-ask-beam-set { display: none; }
.p0-ask-beam-set[data-q="2"],
.p0-stage--ask[data-beat="0"] .p0-ask-beam-set[data-q="0"],
.p0-stage--ask[data-beat="1"] .p0-ask-beam-set[data-q="1"] { display: inline; }
.p0-stage--ask:is([data-beat="0"], [data-beat="1"]) .p0-ask-beam-set[data-q="2"] { display: none; }
.p0-ask-spark-track { stroke: #e6cd9a38; stroke-width: .08; stroke-dasharray: .5 .45; }
.p0-ask-spark,
.p0-ask-return,
.p0-ask-deliver { offset-rotate: 0deg; offset-distance: 100%; opacity: 0; }
.p0-ask-spark { fill: #fff3d6; animation: p0-ask-travel .6s ease-in 1.8s both; }
.p0-ask-ray {
  --store-rgb: var(--gold-rgb);
  stroke: rgb(var(--store-rgb));
  stroke-width: .13;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  opacity: .3;
  animation: p0-ask-ray 4s var(--ease-out) calc(2.4s + var(--ray) * .8s) both;
}
@keyframes p0-ask-ray {
  0% { stroke-dashoffset: 100; opacity: 1; }
  18% { stroke-dashoffset: 0; opacity: 1; }
  75% { opacity: .9; }
  100% { stroke-dashoffset: 0; opacity: .3; }
}
.p0-ask-return {
  --store-rgb: var(--gold-rgb);
  fill: rgb(var(--store-rgb));
  animation: p0-ask-travel 1.3s cubic-bezier(.5, 0, .5, 1) calc(6s + var(--ray) * .45s) both;
}
.p0-ask-deliver { fill: #f5e6c4; animation: p0-ask-travel 1s ease-in-out calc(7.9s + var(--k) * .22s) both; }
@keyframes p0-ask-travel {
  0% { offset-distance: 0%; opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* --- Что находит запрос в хранилищах -----------------------------------------
   Панель вспыхивает, когда в неё приходит луч; найденные элементы загораются
   (--inside-glow) и остаются подсвеченными до конца бита. Имена ключевых
   кадров свои у каждого бита, чтобы смена бита перезапускала подсветку. */
.p0-stage--ask[data-beat="0"] .p0-inside-store { animation: p0-ask-panel-0 1.6s ease-out calc(3.1s + var(--ray) * .8s) both; }
.p0-stage--ask[data-beat="1"] .p0-inside-store { animation: p0-ask-panel-1 1.6s ease-out calc(3.1s + var(--ray) * .8s) both; }
.p0-stage--ask[data-beat="2"] .p0-inside-store { animation: p0-ask-panel-2 1.6s ease-out calc(3.1s + var(--ray) * .8s) both; }
@keyframes p0-ask-panel-0 { 0% { --inside-panel-glow: 0; } 25% { --inside-panel-glow: 1; } 100% { --inside-panel-glow: .25; } }
@keyframes p0-ask-panel-1 { 0% { --inside-panel-glow: 0; } 25% { --inside-panel-glow: 1; } 100% { --inside-panel-glow: .25; } }
@keyframes p0-ask-panel-2 { 0% { --inside-panel-glow: 0; } 25% { --inside-panel-glow: 1; } 100% { --inside-panel-glow: .25; } }
.p0-stage--ask[data-beat="0"] .p0-inside-bank [data-hits~="0"] { animation: p0-ask-lit-0 1.2s ease-out calc(3.3s + var(--ray) * .8s) both; }
.p0-stage--ask[data-beat="1"] .p0-inside-bank [data-hits~="1"] { animation: p0-ask-lit-1 1.2s ease-out calc(3.3s + var(--ray) * .8s) both; }
.p0-stage--ask[data-beat="2"] .p0-inside-bank [data-hits~="2"] { animation: p0-ask-lit-2 1.2s ease-out calc(3.3s + var(--ray) * .8s) both; }
@keyframes p0-ask-lit-0 { 0% { --inside-glow: 0; } 20% { --inside-glow: 1; } 35% { --inside-glow: .35; } 55%, 100% { --inside-glow: 1; } }
@keyframes p0-ask-lit-1 { 0% { --inside-glow: 0; } 20% { --inside-glow: 1; } 35% { --inside-glow: .35; } 55%, 100% { --inside-glow: 1; } }
@keyframes p0-ask-lit-2 { 0% { --inside-glow: 0; } 20% { --inside-glow: 1; } 35% { --inside-glow: .35; } 55%, 100% { --inside-glow: 1; } }
/* Путь в графе прорисовывается заново. */
.p0-stage--ask[data-beat="0"] .p0-inside-edge[data-hits~="0"],
.p0-stage--ask[data-beat="1"] .p0-inside-edge[data-hits~="1"],
.p0-stage--ask[data-beat="2"] .p0-inside-edge[data-hits~="2"] { stroke-dashoffset: 0; }
/* Ползунок записи созвона встаёт на минуту 23:40 (первый запрос). */
.p0-stage--ask[data-beat="0"] .p0-inside-wave__knob {
  translate: calc(var(--share) * 5 * var(--su)) 0;
  animation: p0-ask-knob 1.4s var(--ease-out) 4.7s both;
}
@keyframes p0-ask-knob { from { translate: 0 0; } }
.p0-stage--ask[data-beat="0"] .p0-inside-wave__knob b { opacity: 1; animation: p0-ask-show .4s ease 6.1s both; }
@keyframes p0-ask-show { from { opacity: 0; } }
/* Точка-запрос в облаке индекса и лучи к найденному по смыслу. */
.p0-stage--ask[data-beat="0"] .p0-inside-probe[data-probe="0"],
.p0-stage--ask[data-beat="1"] .p0-inside-probe[data-probe="1"],
.p0-stage--ask[data-beat="2"] .p0-inside-probe[data-probe="2"] { display: inline; }
.p0-stage--ask .p0-inside-probe__spoke { animation: p0-ask-draw .8s var(--ease-out) 5.8s both; }
@keyframes p0-ask-draw { from { stroke-dashoffset: 100; } }
.p0-stage--ask .p0-inside-probe__mark { transform-box: view-box; transform-origin: 0 0; animation: p0-ask-probe .6s cubic-bezier(.3, 1.4, .5, 1) 5.5s both; }
@keyframes p0-ask-probe { from { opacity: 0; scale: 0; } }