/* ============================================================
   СТИЛИ: вопрос · 404 · признания
   Чёрно-белый минимализм в цифровом исполнении: чисто чёрное
   небо со звёздами, текст — белый и серые по важности,
   служебные мелочи набраны моноширинным.
   Единственный цвет на всём сайте — красное сердце.
   ============================================================ */

/* ---------- база ---------- */
*, *::before, *::after { box-sizing: border-box; }

:root {
  /* бездна: чисто чёрный, в центре лишь слегка подсвечен */
  --ink-0: #000000;
  --ink-1: #040404;

  /* единственный акцент — сердце */
  --heart: #ff1f3d;
  --heart-soft: rgba(255, 31, 61, .30);

  /* белый по важности: главное → второстепенное → почти ничего */
  --fg-1: #ffffff;                 /* вопрос, имя, «404», нажатая кнопка */
  --fg-2: rgba(255, 255, 255, .82);/* подписи кнопок, важные строки */
  --fg-3: rgba(255, 255, 255, .58);/* подсказки, пояснения */
  --fg-4: rgba(255, 255, 255, .40);/* шёпот, надписи-ярлыки */
  --fg-5: rgba(255, 255, 255, .20);/* подвал, бегущий код */

  --line: rgba(255, 255, 255, .18);
  --line-soft: rgba(255, 255, 255, .09);

  --serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --hand: "Marck Script", "Caveat", cursive;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink-0);
  color: var(--fg-1);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  position: relative;
  /* не градиент «в цвете», а пустота: едва уловимый подъём света
     в середине кадра и такой же едва уловимый уход в темноту */
  background:
    radial-gradient(115% 85% at 50% 42%, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(95% 70% at 50% 110%, rgba(255, 255, 255, .022) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #000000 0%, var(--ink-1) 46%, #000000 100%);
  background-attachment: fixed;
}

/* лёгкое «зерно», чтобы ровный чёрный не распадался на полосы */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.6'/></svg>");
  animation: grain 6s steps(6) infinite;
  z-index: 1;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 1%); }
  40% { transform: translate(1%, -2%); }
  60% { transform: translate(-1%, 2%); }
  80% { transform: translate(2%, 1%); }
}

#sky, #stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#sky { z-index: 0; }
#stage { z-index: 2; touch-action: manipulation; }

.vignette {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .66) 100%);
}

/* ============================================================
   СТРАНИЦА ВОПРОСА
   ============================================================ */
.stage {
  position: relative;
  z-index: 4;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}

.scene {
  display: none;
  width: min(680px, 100%);
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(.99);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.scene.is-active { display: block; }
.scene.is-ready-shown { opacity: 1; transform: none; }

/* показываем сцену сразу после .is-active (кадр позже) */
.scene.is-active { animation: sceneIn .6s cubic-bezier(.2, .8, .2, 1) both; }
.scene.is-leaving { opacity: 0; transform: translateY(-10px) scale(1.02); transition-duration: .45s; }
@keyframes sceneIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.prelude {
  font-family: var(--mono);
  font-size: clamp(.6rem, 1.85vw, .71rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin: 0 0 clamp(1rem, 3.5vh, 2rem);
}

.question {
  font-weight: 400;
  font-size: clamp(2.1rem, 7.4vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0 0 clamp(1.6rem, 5vh, 3rem);
  color: var(--fg-1);
  /* не «розовое свечение», а тонкий ореол, чтобы буквы не утонули
     в звёздах: белый свет минимальной видимости */
  text-shadow:
    0 0 30px rgba(255, 255, 255, .15),
    0 0 84px rgba(255, 255, 255, .06);
}
.question em { font-style: italic; color: var(--fg-2); }
.question--sm { font-size: clamp(1.7rem, 5.6vw, 3rem); }

.hint {
  font-family: var(--sans);
  font-size: clamp(.8rem, 2.4vw, .95rem);
  line-height: 1.6;
  color: var(--fg-3);
  margin: -1rem auto 2.2rem;
  max-width: 34ch;
}

.choices {
  display: flex;
  gap: clamp(.7rem, 3vw, 1.4rem);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.btn {
  --bg: transparent;
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 3.4vw, 1.4rem);
  letter-spacing: .02em;
  padding: .82em 1.9em;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg-2);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease,
              background .3s ease, border-color .3s ease, color .3s ease, opacity .3s;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn:focus-visible { outline: 2px solid var(--fg-1); outline-offset: 3px; }
.btn__bit {
  font-family: var(--mono);
  font-size: .62em;
  opacity: .45;
  margin-left: .5em;
  letter-spacing: .12em;
}

/* «Да» — единственное белое пятно на странице: громче некуда */
.btn--yes {
  background: var(--fg-1);
  border-color: var(--fg-1);
  color: #000000;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .9),
    0 14px 44px -18px rgba(255, 255, 255, .55);
}
.btn--yes:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 20px 54px -16px rgba(255, 255, 255, .62); }
.btn--yes:active { transform: translateY(0) scale(.99); }

/* пульс — тот же staccato «lub-dub», но rings из белого света */
.is-beating { animation: beat 2.3s ease-in-out infinite; }
@keyframes beat {
  0%, 100% { box-shadow: 0 14px 44px -18px rgba(255, 255, 255, .50), 0 0 0 0 rgba(255, 255, 255, .30); }
  8%  { box-shadow: 0 14px 44px -18px rgba(255, 255, 255, .60), 0 0 0 8px rgba(255, 255, 255, .15); }
  16% { box-shadow: 0 14px 44px -18px rgba(255, 255, 255, .55), 0 0 0 3px rgba(255, 255, 255, .09); }
  24% { box-shadow: 0 14px 44px -18px rgba(255, 255, 255, .58), 0 0 0 12px rgba(255, 255, 255, .05); }
  40% { box-shadow: 0 14px 44px -18px rgba(255, 255, 255, .50), 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* «Нет» — тихое, не давящее: почти подпись под вопросом */
.btn--no { color: var(--fg-4); border-color: var(--line-soft); }
.btn--no:hover {
  color: var(--fg-2);
  border-color: var(--line);
  background: rgba(255, 255, 255, .05);
}

.btn--ghost { color: var(--fg-3); }
.btn--ghost:hover { border-color: rgba(255, 255, 255, .40); color: var(--fg-1); background: rgba(255, 255, 255, .06); }

/* «Да, уверена» — окончательный «нет»: вместо красного инверсия,
   и она же подсказывает, что choice обратим, только если навестить
   ссылку «передумаю» позже */
.btn--danger {
  border-color: rgba(255, 255, 255, .45);
  color: var(--fg-1);
  background: transparent;
}
.btn--danger:hover { background: var(--fg-1); border-color: var(--fg-1); color: #000000; }

.whisper {
  font-family: var(--sans);
  font-size: clamp(.76rem, 2.2vw, .9rem);
  color: var(--fg-4);
  font-style: italic;
  min-height: 1.6em;
  margin: clamp(1.6rem, 4vh, 2.6rem) auto 0;
  max-width: 42ch;
  line-height: 1.6;
}

.footnote {
  position: fixed;
  z-index: 4;
  left: 0; right: 0;
  bottom: max(1rem, env(safe-area-inset-bottom));
  text-align: center;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--fg-5);
  pointer-events: none;
}

/* ============================================================
   404
   ============================================================ */
.nf {
  position: relative;
  z-index: 4;
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 2rem 1.2rem;
  gap: .1rem;
}
.nf__bits {
  font-family: var(--mono);
  font-size: clamp(.55rem, 1.9vw, .72rem);
  letter-spacing: .18em;
  color: var(--fg-5);
  margin-bottom: clamp(.6rem, 2vh, 1.2rem);
}
.nf__code {
  font-family: var(--mono);
  font-size: clamp(4.6rem, 22vw, 11rem);
  line-height: .86;
  font-weight: 300;
  letter-spacing: -.04em;
  color: var(--fg-1);
  text-shadow: 0 0 60px rgba(255, 255, 255, .22);
  transition: color .18s, text-shadow .18s;
}
.nf__code.is-glitch {
  color: var(--fg-4);
  text-shadow: 0 0 40px rgba(255, 255, 255, .10);
}
.nf__line1 {
  font-family: var(--mono);
  font-size: clamp(.64rem, 2.1vw, .77rem);
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 1.1rem;
}
.nf__heart {
  color: var(--heart);
  filter: drop-shadow(0 0 12px var(--heart-soft));
  margin: clamp(1rem, 3vh, 1.8rem) 0 .4rem;
  animation: dimHeart 3.4s ease-in-out infinite;
}
@keyframes dimHeart {
  0%, 100% { opacity: .45; transform: scale(1); }
  12% { opacity: .95; transform: scale(1.07); }
  24% { opacity: .6; transform: scale(1.01); }
  36% { opacity: .9; transform: scale(1.05); }
}
.nf__line2 {
  font-size: clamp(1.05rem, 4vw, 1.5rem);
  font-style: italic;
  color: var(--fg-2);
  margin: 0 0 clamp(1.2rem, 4vh, 2rem);
  max-width: 30ch;
}
.nf__timer {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--fg-3);
  display: flex;
  align-items: baseline;
  gap: .6em;
  margin: 0;
}
.nf__count {
  font-family: var(--mono);
  font-size: 1.15rem;
  color: var(--fg-1);
  letter-spacing: .06em;
}
.nf__back {
  margin-top: clamp(1.4rem, 4vh, 2.4rem);
  font-family: var(--sans);
  font-size: .84rem;
  color: var(--fg-3);
  text-decoration: none;
  border-bottom: 1px dashed var(--line);
  padding-bottom: .2em;
  opacity: 0;
  transition: opacity 1.2s ease, color .3s ease, border-color .3s ease;
}
.nf__back.is-in { opacity: 1; }
.nf__back:hover { color: var(--fg-1); border-bottom-color: rgba(255, 255, 255, .55); }

/* служебная «сначала» — в углу, чтобы не мешать настроению страницы */
.nf__reset {
  position: fixed;
  z-index: 6;
  right: 1rem;
  bottom: max(.9rem, env(safe-area-inset-bottom));
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-4);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: .55em 1.05em;
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
}
.nf__reset:hover { color: var(--fg-1); border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); }

/* служебная строка: 404 включил сервер (файл-замок или кука блокировки),
   значит отсчёт и возврат к вопросу сейчас не в власти браузера */
.nf__dev {
  font-family: var(--mono);
  font-size: .62rem;
  line-height: 1.75;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .42);
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: 9px;
  padding: .65em .95em;
  margin-top: clamp(1.1rem, 4vh, 1.9rem);
  max-width: 48ch;
  text-align: left;
  word-break: break-word;
}

/* ============================================================
   ПРИЗНАНИЯ
   ============================================================ */
.confession {
  position: fixed;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  width: min(560px, 88vw);
  text-align: center;
  pointer-events: none;
}
/* мягкая «подушка» под текстом: имя читается поверх слов,
   но краёв у неё заметно быть не должно — только тень в центре.
   В чб она же отделяет белые буквы от красных слов под ними */
.confession::before {
  content: "";
  position: absolute;
  inset: -40% -30%;
  z-index: -1;
  background: radial-gradient(52% 46% at 50% 50%,
              rgba(0, 0, 0, .86) 0%,
              rgba(0, 0, 0, .62) 42%,
              rgba(0, 0, 0, .24) 68%,
              rgba(0, 0, 0, 0) 100%);
}

.confession__to,
.confession__name,
.confession__line,
.confession__sign,
.confession__date {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.2, .8, .2, 1);
  margin: 0;
}
body.is-ready .confession__to   { opacity: 1; transform: none; transition-delay: .1s; }
body.is-ready .confession__name { opacity: 1; transform: none; transition-delay: .35s; }
body.is-ready .confession__line { opacity: 1; transform: none; transition-delay: .75s; }
body.is-ready .confession__sign { opacity: 1; transform: none; transition-delay: 1.05s; }
body.is-ready .confession__date { opacity: 1; transform: none; transition-delay: 1.3s; }

.confession__to {
  font-family: var(--mono);
  font-size: clamp(.58rem, 1.85vw, .7rem);
  letter-spacing: .46em;
  text-transform: uppercase;
  color: var(--fg-4);
  text-shadow: 0 0 14px rgba(0, 0, 0, .8);
}
.confession__name {
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(2.6rem, 11vw, 5.4rem);
  line-height: 1.06;
  margin: .06em 0 .12em;
  color: var(--fg-1);
  /* ореол не светлый, а тёмный: под именем горит красное сердце,
     и именно чёрная дымка держит белую букву на расстоянии от него */
  text-shadow:
    0 0 22px rgba(0, 0, 0, .90),
    0 0 48px rgba(0, 0, 0, .62),
    0 2px 3px rgba(0, 0, 0, .45);
}
.confession__line {
  font-size: clamp(.98rem, 3.4vw, 1.32rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 26ch;
  margin: 0 auto;
  text-shadow: 0 0 18px rgba(0, 0, 0, .85);
}
.confession__sign {
  margin-top: clamp(.9rem, 3vh, 1.5rem) !important;
  font-family: var(--hand);
  font-size: clamp(1.15rem, 4.2vw, 1.7rem);
  color: var(--fg-2);
  text-shadow: 0 0 18px rgba(0, 0, 0, .85);
}
.confession__date {
  margin-top: .5rem !important;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .3em;
  color: var(--fg-4);
  text-shadow: 0 0 14px rgba(0, 0, 0, .8);
}

/* нижняя панель: счётчик, звук, «сначала» */
.hud {
  position: fixed;
  z-index: 6;
  left: 0; right: 0;
  bottom: max(.9rem, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  padding: 0 1rem;
  opacity: 0;
  transition: opacity 1.6s ease 1.2s;
}
body.is-live .hud { opacity: 1; }

.hud__counter {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-4);
  padding: .5em .9em;
}
.hud__counter.is-done { color: var(--fg-3); }

.hud__sound, .hud__again {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: .55em 1.1em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  transition: color .25s, border-color .25s, background .25s, transform .25s;
}
.hud__sound:hover, .hud__again:hover {
  color: var(--fg-1);
  border-color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .08);
  transform: translateY(-1px);
}
.hud__sound.is-on { color: var(--fg-1); border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .10); }
/* значок сердца — единственная краска в панели */
.hud__ico { font-size: 1.05em; line-height: 1; color: var(--heart); }
.hud__again { opacity: .5; }
.hud__again:hover { opacity: 1; }

/* общий вид для служебного состояния «точно?» */
.hud__reset.is-armed,
.nf__reset.is-armed {
  opacity: 1;
  color: var(--fg-1);
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .12);
}

/* подсказка про клик по сердцу */
body[data-page="heart"] #stage { cursor: pointer; }
.hint-click {
  position: fixed;
  z-index: 6;
  left: 50%;
  bottom: calc(max(.9rem, env(safe-area-inset-bottom)) + 3.2rem);
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}
body.is-built .hint-click { opacity: 1; animation: fadeAway 1s ease 6s both; }
@keyframes fadeAway { to { opacity: 0; } }

/* ---------- доступность и слабые устройства ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .2s !important;
  }
  body::after { animation: none; }
}

/* на высоком телефоне сердце широкое, но низкое — освободившееся
   место отдаём под подпись: имя съезжает под сердце, а затемнение
   слов в движке следует за прямоугольником этой надписи */
@media (max-width: 620px) and (min-height: 660px) and (orientation: portrait) {
  .confession {
    top: 64%;
    transform: translate(-50%, -50%);
    width: min(420px, 92vw);
  }
  .confession::before { inset: -34% -22%; }
  .confession__name { font-size: clamp(2.4rem, 13vw, 4rem); }
}

/* очень низкие экраны (горизонтальный телефон) */
@media (max-height: 460px) {
  .confession { transform: translate(-50%, -50%); width: min(520px, 94vw); }
  .confession__name { font-size: clamp(2rem, 7vw, 3rem); }
  .confession__line { display: none; }
  .footnote { display: none; }
}