/* ХРУМ — лендинг. Палитра снята пипеткой с финального рендера персонажа,
   чтобы акценты интерфейса совпадали с его цветом пиксель в пиксель. */

:root {
  --bg: #FBF7F0;
  --ink: #1C1B19;
  --accent: #FD6441;
  --accent-deep: #E4482A;
  --muted: rgba(28, 27, 25, .58);
  --line: rgba(28, 27, 25, .12);
  --card: #FFFFFF;
  --radius: 20px;

  /* Цвет тела прямо над каждым глазом — веко при моргании.
     Слева светлее, справа темнее: свет падает сверху-слева. */
  --lid-l: #FC7450;
  --lid-r: #FC623F;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Nunito, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Экраны ---------- */

.screen {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

/* ---------- Hero: заголовок обтекает существо ---------- */

/* Существо вклинивается МЕЖДУ строками заголовка: «ЗАВЕДИ» над ним,
   «ПРИВЫЧКУ» наезжает снизу поверх его ног. Отрицательные margin'ы
   собирают три элемента в один плотный блок и дают глубину. */
.hero-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  font-weight: 900;
  font-size: clamp(48px, 9.5vw, 108px);
  line-height: .86;
  letter-spacing: -.035em;
}

.title__line { display: block; position: relative; }

.title__line--accent {
  color: var(--accent);
  z-index: 2;
  /* Раньше было -.34em и слово подпирало существо снизу — оно буквально
     стояло на буквах. Теперь между ногами и строкой есть воздух. */
  margin-top: -.06em;
}

.hero-char {
  position: relative;
  width: clamp(180px, 25vw, 272px);
  margin-top: -.16em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  z-index: 1;
}

.hero-char--small {
  width: clamp(200px, 24vw, 290px);
  margin: 0;
  cursor: default;
}

/* Тело и глаза лежат в одном слое и трансформируются вместе: иначе при
   squash & stretch глаза остаются на месте и выглядят наклеенными сверху.
   Тень намеренно снаружи — она принадлежит полу, а не существу. */
.char-figure {
  position: relative;
  z-index: 2;
  animation: breathe 4.2s ease-in-out infinite;
  transform-origin: 50% 92%;
}

/* Лица лежат стопкой: первое держит размер контейнера, остальные
   накладываются поверх. Переключение — сменой класса, с коротким
   кроссфейдом, поэтому смена настроения не мигает. */
.char-body {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .14s ease;
}

.char-body + .char-body {
  position: absolute;
  inset: 0;
}

.char-body.is-active { opacity: 1; }

.char-shadow {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 54%;
  height: 18px;
  transform: translateX(-50%);
  background: rgba(28, 27, 25, .18);
  filter: blur(11px);
  border-radius: 50%;
  z-index: 1;
  animation: shadow-pulse 4.2s ease-in-out infinite;
}

/* ---------- Речевое облачко ----------
   Висит справа от существа и не влияет на поток: заголовок над и под ним
   стоит на месте, что бы существо ни говорило. */

.speech {
  position: absolute;
  left: 88%;
  top: 24%;
  z-index: 4;
  padding: 11px 18px;
  max-width: 190px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(28, 27, 25, .09);
  font-family: Nunito, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: scale(.7) translateY(6px);
  transform-origin: 0 80%;
  transition: opacity .16s ease, transform .26s cubic-bezier(.34, 1.56, .64, 1);
}

.speech.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Хвостик к существу */
.speech::after {
  content: '';
  position: absolute;
  left: -6px;
  bottom: 14px;
  width: 12px;
  height: 12px;
  background: var(--card);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}

/* Подсказка до первого клика мягко покачивается, чтобы её заметили */
.speech.is-hint.is-visible { animation: bob 2.6s ease-in-out infinite; }

/* Раздражение — облачко холоднее по тону */
.speech.is-cross {
  background: #2B2926;
  border-color: #2B2926;
  color: #FFF;
}

.speech.is-cross::after {
  background: #2B2926;
  border-color: #2B2926;
}

@keyframes bob {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1) translateY(-5px); }
}

/* ---------- Глаза ----------
   Позиции сняты программно с char.png (1254x1254): оба белка 146x150,
   верх на одной линии. Правый глаз на рендере темнее левого (свет падает
   слева), поэтому мерить его нужно с мягким порогом — по яркому ядру он
   кажется меньше, чем есть, и веко тогда не перекрывает его целиком. */

.eye {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.eye--l {
  width: 11.64%;
  height: 11.96%;
  left: 32.38%;
  top: 26.95%;
}

.eye--r {
  width: 11.64%;
  height: 11.96%;
  left: 55.98%;
  top: 26.95%;
}

.pupil {
  width: 54%;
  aspect-ratio: 1;
  background: url('/assets/pupil.png') center / contain no-repeat;
  transition: transform .13s ease-out;
  will-change: transform;
}

/* Веко перекрывает белок с запасом в 4%: край нарисованного глаза
   сглажен антиалиасингом, и веко «в размер» оставляло бы светлый серп.
   Запас ложится на тело, поэтому цвет века взят пипеткой оттуда же. */
.lid {
  position: absolute;
  inset: -4%;
  transform: scaleY(0);
  transform-origin: top;
  border-radius: 50%;
}

.eye--l .lid { background: linear-gradient(180deg, var(--lid-l) 0%, #F55B39 100%); }
.eye--r .lid { background: linear-gradient(180deg, var(--lid-r) 0%, #EE5233 100%); }

.lid.is-blinking { animation: blink .13s ease-in-out; }

/* ---------- Hero: текст и кнопки ---------- */

.lede {
  max-width: 440px;
  margin: 26px 0 0;
  color: var(--muted);
}

.habits {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 22px 0 26px;
  flex-wrap: wrap;
  justify-content: center;
}

.habit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  background: var(--card);
}

.btn {
  display: inline-block;
  padding: 17px 34px;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 5px 0 var(--accent-deep);
}

.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--accent-deep); }
.btn--primary:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--accent-deep); }
.btn--wide { width: 100%; margin-top: 8px; }
.btn[disabled] { opacity: .6; cursor: progress; }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  animation: nudge 2.4s ease-in-out infinite;
}

/* ---------- Экран формы ---------- */

.form-wrap {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 280px);
  gap: 56px;
  align-items: center;
  text-align: left;
  width: 100%;
  max-width: 840px;
}

.form-title {
  margin: 0 0 6px;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.02;
  letter-spacing: -.025em;
  font-weight: 900;
}

.form-sub { margin: 0 0 26px; color: var(--muted); }

.field { display: block; margin-bottom: 14px; }
.field__label { display: block; font-size: 14px; font-weight: 800; margin-bottom: 6px; }

.field input {
  width: 100%;
  padding: 15px 18px;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  outline: none;
  transition: border-color .16s, box-shadow .16s;
}

.field input::placeholder { color: rgba(28, 27, 25, .32); }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(253, 100, 65, .18); }
.field.is-invalid input { border-color: #D8412A; }

.field__error {
  display: block;
  min-height: 18px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #D8412A;
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-error { margin: 12px 0 0; color: #D8412A; font-weight: 800; }
.form-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

.form-col--char {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bubble {
  position: relative;
  padding: 10px 20px;
  margin-bottom: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
}

.bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: var(--card);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
}

.thanks { text-align: center; }

.thanks__emoji {
  font-size: 72px;
  animation: hop .6s cubic-bezier(.34, 1.56, .64, 1) infinite alternate;
}

/* ---------- Состояния существа ---------- */

.is-eager .char-figure { animation: hop .5s cubic-bezier(.34, 1.56, .64, 1) infinite alternate; }
.is-sad .char-figure { animation: none; transform: rotate(-4deg) translateY(5px); }
.is-poked .char-figure { animation: squash .44s cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- Анимации ---------- */

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.018); }
}

@keyframes shadow-pulse {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .18; }
  50% { transform: translateX(-50%) scaleX(.92); opacity: .13; }
}

@keyframes blink {
  0%, 100% { transform: scaleY(0); }
  50% { transform: scaleY(1); }
}

@keyframes hop {
  from { transform: translateY(0); }
  to { transform: translateY(-11px); }
}

@keyframes squash {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.13, .87); }
  60%  { transform: scale(.95, 1.07); }
  100% { transform: scale(1, 1); }
}

@keyframes nudge {
  0%, 100% { transform: translate(-50%, 0); opacity: .7; }
  50% { transform: translate(-50%, 5px); opacity: 1; }
}

.particle {
  position: absolute;
  z-index: 4;
  font-size: 22px;
  pointer-events: none;
  animation: fly .9s ease-out forwards;
}

@keyframes fly {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.6); }
  to   { opacity: 0; transform: translate(calc(-50% + var(--dx)), -140px) scale(1.15); }
}

/* ---------- Адаптив ---------- */

@media (max-width: 760px) {
  .screen { padding: 48px 20px; }

  /* На узком экране существо чуть уже, а облачко уезжает в освободившуюся
     полосу справа и переносит текст: так оно не садится ни на заголовок,
     ни на лицо. */
  .speech {
    left: 100%;
    top: 16%;
    max-width: 96px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.2;
    white-space: normal;
  }

  .speech::after { bottom: 11px; }
  .hero-char { width: min(48vw, 220px); }
  .lede { font-size: 16px; }
  .form-wrap { grid-template-columns: 1fr; gap: 20px; }
  .form-col--char { order: -1; }
  .hero-char--small { width: 190px; }
  .bubble { font-size: 14px; }
  .scroll-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}