html,
body {
  margin: 0;
  height: 100%;
}

/* Чёрный только на html: фон body закрыл бы градиент (canvas#bg с отрицательным z-index). */
html {
  background: #000;
}

body {
  overflow: hidden;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  --art-h: min(46dvh, calc(90vw * 1180 / 1199));
  --ask-h: 46px;

  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

/* Фон-градиент: см. bg.js */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Картинка в пропорциях оригинала 1199×1180. Надпись в кадре заканчивается на 839/1000 высоты,
   поэтому кадр сажается так, чтобы она стояла прямо над полем, а поле — ровно по центру экрана. */
.frame {
  position: absolute;
  left: 50%;
  top: calc(50% - var(--ask-h) / 2 - 22px - var(--art-h) * 0.839);
  height: var(--art-h);
  aspect-ratio: 1199 / 1180;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 0.9s ease, transform 1.3s cubic-bezier(0.5, 0, 0.1, 1), filter 0.9s ease;
}

.art {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ───── Поле ввода ───── */

.ask {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px));
  height: var(--ask-h);
  padding: 0 8px 0 18px;
  transform: translate(-50%, -50%);
  background: #202020;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  transition: border-color 0.15s, top 1.3s cubic-bezier(0.5, 0, 0.1, 1), transform 1.3s cubic-bezier(0.5, 0, 0.1, 1);
}

.ask:focus-within {
  border-color: rgba(255, 255, 255, 0.16);
}

.ask-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: #fff;
  font: 15px/22px Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  caret-color: #fff;
}

.ask-input::placeholder {
  color: #6b6b6b;
}

.ask-send {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #2c2c2c;
  color: #777;
  cursor: default;
  transition: background 0.15s, color 0.15s;
}

.ask-send:not(:disabled) {
  background: #fff;
  color: #111;
  cursor: pointer;
}

/* ───── Прогрессивное размытие сверху ─────
   Перенесено из wb-catalog (.pblur, финальная версия): фиксированная полоса из слоёв backdrop-filter.
   Радиус удваивается (1,6 → 25 px; слои тоньше 1 px на глаз не видны, их убрали ради скорости), у каждого слоя своя маска, в сумме — плавный переход от резкого
   к размытому без заливки и границ. Включается классом .on: радиус плавно растёт от 0 (--k).
   Не вешать opacity/filter на контейнер: он стал бы backdrop root, и размытие пропало бы. */
@property --k {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.pblur {
  --k: 0;
  --h: 140px;
  --f: calc(var(--h) - 24px);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: var(--h);
  pointer-events: none;
  visibility: hidden;
  transition: --k 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.6s;
}

.pblur.on {
  --k: 1;
  visibility: visible;
  transition: --k 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

.pblur i {
  --m: linear-gradient(to top, transparent calc(var(--s) * var(--f) / 5), #000 calc((var(--s) + 1) * var(--f) / 5));

  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--m);
  mask-image: var(--m);
  -webkit-backdrop-filter: blur(calc(var(--b) * var(--k) * 0.7));
  backdrop-filter: blur(calc(var(--b) * var(--k) * 0.7));
}

.pblur i:nth-child(1) { --s: 0; --b: 1.5625px; }
.pblur i:nth-child(2) { --s: 1; --b: 3.125px; }
.pblur i:nth-child(3) { --s: 2; --b: 6.25px; }
.pblur i:nth-child(4) { --s: 3; --b: 12.5px; }
.pblur i:nth-child(5) { --s: 4; --b: 25px; }

/* ───── Выдача ───── */

.ask.tick {
  animation: tick 0.22s ease-out;
}

@keyframes tick {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.08); }
  100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
}

/* Выдача занимает весь экран под полем: граф и плашка (graph.css) */
.results {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  animation: results-in 1s ease both;
}

.results[hidden] {
  display: none;
}

/* Выдача мягко гаснет, когда её заменяет новый поиск или возврат к полю */
.results.leaving {
  opacity: 0;
  animation: none;
  transition: opacity 200ms ease;
}

@keyframes results-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Поле ввода не должно прыгать, когда появляются результаты */
.ask {
  z-index: 10;
}

/* После запроса плашка плавно уезжает вверх, картинка и надпись гаснут */
.stage.searched .ask {
  top: 7vh;
  transform: translate(-50%, 0);
}

.stage.searched .frame {
  opacity: 0;
  transform: translate(-50%, -48px) scale(0.94);
  filter: blur(10px);
}

@media (prefers-reduced-motion: reduce) {
  .ask.tick,
  .results {
    animation: none;
  }
}

/* Верхнее размытие не действует на правую панель: у её левого края плавно сходит на нет */
.stage.searched ~ .pblur {
  --pl: calc(min(75vw, 100vw - 205px) - 196px);
}

.stage.searched ~ .pblur i {
  --cut: linear-gradient(90deg, #000 calc(var(--pl) - 70px), transparent var(--pl));

  -webkit-mask-image: var(--m), var(--cut);
  mask-image: var(--m), var(--cut);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}


/* Возврат на лендинг: позиции встают мгновенно, содержимое мягко проявляется */
.stage.instant .ask,
.stage.instant .frame {
  transition: none !important;
}

.stage.landing-in .frame {
  animation: land-in 700ms ease 120ms both;
}

@keyframes land-in {
  from { opacity: 0; }
  to { opacity: 1; }
}