/* ════════════════════════════════════════════════════════════
   Сокровища мудрости «Путешествия домой» — Veda Центр
   Направление: «Перед рассветом на берегу».
   Сумеречное небо над рекой, тёплый свет у горизонта,
   ответы пишутся на пергаменте. Счётчик пути — мала.
   ════════════════════════════════════════════════════════════ */

/* ─── Шрифты ─────────────────────────────────────────────── */
@font-face{font-family:'Cormorant';font-style:normal;font-weight:300;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-cyrillic-300-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:300;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-cyrillic-500-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:400;font-display:swap;
  src:url('/assets/fonts/cormorant-garamond-cyrillic-400-italic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/manrope-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/manrope-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/manrope-cyrillic-500-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/manrope-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/manrope-cyrillic-600-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/manrope-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212;}

/* ─── Токены ─────────────────────────────────────────────── */
:root{
  /* закатное небо, как на обложке книги */
  --night:#140C06;
  --night-2:#2C1808;
  --river:#5E3410;
  --river-2:#8A4E15;
  /* свет */
  --amber:#E0A33C;
  --amber-soft:#F0C77E;
  --ember:#C4462B;
  /* пергамент */
  --paper:#F4E9D4;
  --paper-2:#EADCC0;
  --ink:#2A1F14;
  --ink-2:#5C4A34;
  /* текст на небе */
  --lit:#F9F0DF;
  --lit-2:#D3C3A8;
  --lit-3:#A2907A;
  --line:rgba(224,163,60,.26);
  --line-2:rgba(249,240,223,.14);
  --sky-h:clamp(84px,13vh,142px);

  --ff-display:'Cormorant',Georgia,'Times New Roman',serif;
  --ff-ui:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --p:0;                    /* прогресс 0..1 — управляет светом у горизонта */
  --ease:cubic-bezier(.22,.61,.36,1);
  --shell:min(660px,calc(100vw - 44px));
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;min-height:100dvh;
  background:var(--night);
  color:var(--lit);
  font-family:var(--ff-ui);
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
button,input,textarea{font:inherit;color:inherit;}
a{color:var(--amber-soft);text-underline-offset:3px;}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:0 0 8px 0;}
.skip:focus{left:0;}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px;}

/* ─── Небо ───────────────────────────────────────────────── */
/* Верх неба почти чёрный, золото собрано у горизонта — как на обложке книги. */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(178deg,
    var(--night) 0%, #1C1109 44%, var(--night-2) 68%,
    var(--river) 87%, var(--river-2) 100%);
}
/* Солнце садится за храмы и понемногу поднимается по мере ответов.
   На титульном экране оно — герой, на вопросах приглушено, чтобы не спорить с текстом. */
.sky__sun{position:absolute;left:50%;translate:-50% 0;
  bottom:calc(var(--sky-h) * .12 + var(--p) * 34px);
  width:min(290px,56vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,
    #FDEBC6 0%, #F3CE88 36%, rgba(235,175,80,.42) 62%, rgba(235,175,80,0) 100%);
  opacity:.78;
  transition:opacity 1.1s var(--ease), bottom 1.1s var(--ease), width .8s var(--ease);
}
body[data-view="survey"] .sky__sun{width:min(200px,40vw);opacity:calc(.26 + .16 * var(--p));}
body[data-view="gate"] .sky__sun,
body[data-view="done"] .sky__sun{width:min(210px,44vw);opacity:.66;
  bottom:calc(var(--sky-h) * -.30);}
.sky__glow{position:absolute;left:50%;bottom:-10%;translate:-50% 0;
  width:min(1200px,160vw);aspect-ratio:2.1/1;
  background:radial-gradient(closest-side, rgba(240,199,126,.40), rgba(224,163,60,.16) 48%, rgba(224,163,60,0) 76%);
  opacity:calc(.35 + .5 * var(--p));
  transition:opacity 1.1s var(--ease);
  filter:blur(2px);
}
.sky__grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Повтор по горизонтали сохраняет пропорции храмов на любой ширине. */
.sky__skyline{position:absolute;left:0;right:0;bottom:0;height:var(--sky-h);
  background:url('/assets/skyline.svg') repeat-x bottom left / auto 100%;}

/* ─── Общее ──────────────────────────────────────────────── */
.view{position:relative;z-index:1;display:none;min-height:100dvh;}
.view--active{display:block;}

.eyebrow{
  margin:0;font-family:var(--ff-ui);font-size:11px;font-weight:600;
  letter-spacing:.20em;text-transform:uppercase;color:var(--amber);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:999px;border:1px solid transparent;
  font-family:var(--ff-ui);font-size:15px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;background:none;text-decoration:none;white-space:nowrap;
  transition:transform .18s var(--ease),background-color .18s,border-color .18s,opacity .18s;
}
.btn:active{transform:scale(.975);}
.btn[disabled]{opacity:.4;cursor:not-allowed;}
.btn--gold{background:linear-gradient(176deg,var(--amber-soft),var(--amber));color:#39250B;
  box-shadow:0 6px 26px -10px rgba(224,163,60,.85);}
.btn--gold:hover{background:linear-gradient(176deg,#F7D69A,#E8B052);}
.btn--ghost{color:var(--lit-2);border-color:var(--line-2);}
.btn--ghost:hover{color:var(--lit);border-color:var(--line);}
.btn--tg{background:#2B93D1;color:#fff;}
.btn--tg:hover{background:#3AA3E2;}

/* ─── Вход ───────────────────────────────────────────────── */
/* Нижний отступ уводит текст выше горизонта — иначе солнце засвечивает подпись. */
.gate{
  width:var(--shell);margin:0 auto;
  min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:48px 0 clamp(150px,27vh,270px);text-align:center;
  animation:rise .8s var(--ease) both;
}
.gate__mark{margin:0 auto 26px;opacity:.95;}
.gate__title{
  margin:14px 0 0;font-family:var(--ff-display);font-weight:300;
  font-size:clamp(52px,13vw,88px);line-height:.94;letter-spacing:-.015em;color:var(--lit);
}
.gate__sub{
  margin:12px 0 0;font-family:var(--ff-display);font-style:italic;font-weight:400;
  font-size:clamp(21px,5vw,28px);color:var(--amber-soft);letter-spacing:.01em;
}
.gate__lede{
  margin:26px auto 0;max-width:44ch;color:var(--lit-2);font-size:16px;line-height:1.72;
}
.gate__auth{margin-top:34px;}
.tg-slot{min-height:48px;display:flex;justify-content:center;align-items:center;}
.gate__note{margin:16px auto 0;max-width:40ch;font-size:12.5px;line-height:1.6;color:rgba(249,240,223,.62);}
.gate__err{margin:14px auto 0;max-width:40ch;font-size:13.5px;color:#F09A85;}

.gift-teaser{
  display:flex;align-items:center;gap:16px;text-align:left;
  width:fit-content;max-width:100%;margin:34px auto 0;
  padding:13px 20px 13px 13px;border-radius:14px;
  border:1px solid var(--line);background:rgba(224,163,60,.06);
}
.gift-teaser__art{
  flex:none;width:44px;height:52px;border-radius:4px;
  background:linear-gradient(160deg,var(--paper),var(--paper-2));
  display:grid;place-items:center;box-shadow:0 4px 14px -6px rgba(0,0,0,.6);
}
.gift-teaser__gem{
  width:13px;height:13px;rotate:45deg;border-radius:2px;
  background:linear-gradient(150deg,var(--amber-soft),var(--ember));
}
.gift-teaser__label{margin:0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);}
.gift-teaser__name{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--lit-2);max-width:34ch;}

/* ─── Верхняя панель ─────────────────────────────────────── */
.bar{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;gap:18px;
  width:var(--shell);margin:0 auto;padding:20px 0 16px;
}
.bar__brand{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--lit-3);letter-spacing:.02em;}
.bar__brand img{opacity:.8;flex:none;}
.bar__count{margin-left:auto;font-size:12px;color:var(--lit-3);letter-spacing:.06em;font-variant-numeric:tabular-nums;}
.bar__count b{color:var(--amber);font-weight:600;font-size:13px;}
.bar__count span{margin-left:3px;}

/* ─── Мала: подпись экрана ───────────────────────────────── */
.mala{position:relative;display:flex;align-items:center;gap:7px;padding:6px 0;}
.mala__thread{
  position:absolute;left:2px;right:2px;top:50%;height:1px;translate:0 -50%;
  background:linear-gradient(90deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent);
}
.bead{
  position:relative;width:9px;height:9px;border-radius:50%;flex:none;padding:0;border:none;
  background:transparent;box-shadow:inset 0 0 0 1px rgba(246,236,217,.28);
  cursor:pointer;transition:box-shadow .3s var(--ease),transform .3s var(--ease),background .4s var(--ease);
}
.bead:hover{transform:scale(1.28);}
.bead[data-state="done"]{
  background:radial-gradient(circle at 34% 30%,var(--amber-soft),var(--amber) 62%,#A9701E 100%);
  box-shadow:0 0 0 1px rgba(224,163,60,.5), 0 0 11px rgba(224,163,60,.55);
}
.bead[data-state="now"]{
  transform:scale(1.42);
  box-shadow:inset 0 0 0 1.5px var(--amber), 0 0 12px rgba(224,163,60,.42);
}
.bead[data-state="now"]:hover{transform:scale(1.55);}
.bead--pop{animation:pop .5s var(--ease);}
@keyframes pop{
  0%{transform:scale(1);}
  42%{transform:scale(1.9);}
  100%{transform:scale(1);}
}

/* ─── Сцена вопроса ──────────────────────────────────────── */
/* Вопрос стоит на одной высоте от экрана к экрану — взгляду не приходится его искать. */
.stage{
  width:var(--shell);margin:0 auto;
  min-height:calc(100dvh - 210px);
  display:flex;align-items:flex-start;
  padding:min(13vh,104px) 0 24px;
}
.q{width:100%;}
.q--in{animation:rise .52s var(--ease) both;}
.q--out{animation:fall .2s var(--ease) both;}
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes fall{from{opacity:1;}to{opacity:0;transform:translateY(-8px);}}

.q__title{
  margin:14px 0 0;font-family:var(--ff-display);font-weight:300;
  font-size:clamp(30px,6.6vw,46px);line-height:1.12;letter-spacing:-.01em;color:var(--lit);
  text-wrap:balance;
}
.q__hint{margin:17px 0 0;font-size:14px;line-height:1.62;color:var(--lit-3);max-width:52ch;}
.q__field{margin-top:26px;}
.q__err{margin:14px 0 0;font-size:13.5px;color:#F09A85;}

/* поля — пергамент */
.paper{
  width:100%;display:block;
  background:linear-gradient(172deg,var(--paper) 0%,var(--paper-2) 100%);
  color:var(--ink);border:1px solid rgba(42,31,20,.14);border-radius:12px;
  padding:18px 20px;font-family:var(--ff-ui);font-size:16.5px;line-height:1.66;
  box-shadow:0 14px 34px -20px rgba(0,0,0,.75);
  transition:box-shadow .25s var(--ease),border-color .25s;
  resize:none;
}
.paper::placeholder{color:rgba(92,74,52,.5);}
.paper:focus{outline:none;border-color:rgba(224,163,60,.7);
  box-shadow:0 0 0 3px rgba(224,163,60,.22), 0 14px 34px -20px rgba(0,0,0,.75);}
textarea.paper{min-height:168px;max-height:520px;overflow-y:auto;}
.counter{margin:9px 2px 0;text-align:right;font-size:12px;color:var(--lit-3);font-variant-numeric:tabular-nums;}

/* варианты ответа */
.opts{display:flex;flex-direction:column;gap:10px;}
.opt{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:16px 20px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line-2);background:rgba(246,236,217,.035);
  color:var(--lit);font-size:16px;
  transition:border-color .2s,background-color .2s,transform .16s var(--ease);
}
.opt:hover{border-color:var(--line);background:rgba(224,163,60,.07);}
.opt:active{transform:scale(.99);}
.opt__dot{
  flex:none;width:17px;height:17px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px rgba(246,236,217,.3);
  transition:box-shadow .2s,background .2s;
}
.opt[aria-checked="true"]{border-color:rgba(224,163,60,.65);background:rgba(224,163,60,.11);}
.opt[aria-checked="true"] .opt__dot{
  background:radial-gradient(circle at 34% 30%,var(--amber-soft),var(--amber));
  box-shadow:inset 0 0 0 1.5px var(--amber),0 0 9px rgba(224,163,60,.5);
}

/* номера групп */
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{
  width:58px;height:58px;border-radius:12px;cursor:pointer;
  border:1px solid var(--line-2);background:rgba(246,236,217,.035);
  color:var(--lit);font-family:var(--ff-display);font-size:26px;font-weight:400;
  display:grid;place-items:center;
  transition:border-color .2s,background-color .2s,color .2s,transform .16s var(--ease);
}
.chip:hover{border-color:var(--line);background:rgba(224,163,60,.08);}
.chip[aria-checked="true"]{
  border-color:transparent;color:#39250B;
  background:linear-gradient(170deg,var(--amber-soft),var(--amber));
  box-shadow:0 6px 20px -9px rgba(224,163,60,.9);
}

/* шкала 1–10 */
.scale{display:flex;gap:6px;}
.scale__btn{
  flex:1 1 0;min-width:0;height:56px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line-2);background:rgba(246,236,217,.035);
  color:var(--lit-2);font-family:var(--ff-ui);font-size:14px;font-weight:500;
  transition:border-color .2s,background-color .2s,color .2s,transform .16s var(--ease);
}
.scale__btn:hover{border-color:var(--line);color:var(--lit);transform:translateY(-2px);}
.scale__btn[aria-checked="true"]{
  border-color:transparent;color:#39250B;font-weight:600;
  background:linear-gradient(170deg,var(--amber-soft),var(--amber));
  box-shadow:0 6px 20px -9px rgba(224,163,60,.9);
}
.scale__ends{display:flex;justify-content:space-between;margin-top:11px;font-size:12.5px;color:var(--lit-3);}

/* ─── Навигация ──────────────────────────────────────────── */
.nav{
  position:sticky;bottom:0;z-index:5;
  display:flex;align-items:center;gap:14px;
  width:var(--shell);margin:0 auto;
  padding:14px 0 max(20px,env(safe-area-inset-bottom));
}
.nav__save{margin:0 auto;font-size:12px;color:var(--lit-3);opacity:0;transition:opacity .3s;}
.nav__save--on{opacity:1;}

/* ─── Подарок ────────────────────────────────────────────── */
.done{
  width:var(--shell);margin:0 auto;
  min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:60px 0 clamp(96px,18vh,170px);
  animation:rise .8s var(--ease) both;
}
.mala--full{justify-content:center;margin-bottom:30px;}
.done__title{
  margin:14px 0 0;font-family:var(--ff-display);font-weight:300;
  font-size:clamp(38px,9vw,60px);line-height:1.04;color:var(--lit);
}
.done__lede{margin:16px 0 0;max-width:46ch;color:var(--lit-2);line-height:1.72;}

.gift{
  display:flex;gap:26px;align-items:flex-start;margin-top:38px;
  padding:26px;border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(168deg,rgba(224,163,60,.10),rgba(224,163,60,.03));
}
.gift__cover{
  flex:none;width:132px;aspect-ratio:3/4;border-radius:5px;position:relative;
  background:
    radial-gradient(90% 60% at 50% 100%, rgba(224,163,60,.55), transparent 62%),
    linear-gradient(168deg,#F4E9D4,#E2CFA9);
  box-shadow:0 18px 38px -18px rgba(0,0,0,.85);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:16px 14px;text-align:center;
}
.gift__seal{
  position:absolute;top:14px;left:50%;translate:-50% 0;
  width:15px;height:15px;rotate:45deg;border-radius:2px;
  background:linear-gradient(150deg,var(--amber-soft),var(--ember));
  box-shadow:0 0 12px rgba(196,70,43,.5);
}
.gift__covertitle{margin:0;font-family:var(--ff-display);font-weight:400;font-size:21px;line-height:1.06;color:var(--ink);}
.gift__coversub{margin:5px 0 0;font-family:var(--ff-display);font-style:italic;font-size:12.5px;color:var(--ink-2);}
.gift__body{flex:1;min-width:0;}
.gift__kicker{margin:0;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);}
.gift__name{margin:8px 0 0;font-family:var(--ff-display);font-weight:400;font-size:clamp(24px,5vw,31px);line-height:1.1;color:var(--lit);}
.gift__desc{margin:11px 0 0;font-size:14.5px;line-height:1.66;color:var(--lit-2);max-width:40ch;}
.gift__actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:22px;}
.gift__status{margin:13px 0 0;font-size:13px;color:var(--amber-soft);min-height:1.2em;}
/* Перепрохождение: предложение спокойное, но последствие названо прямо. */
.again{margin:34px 0 0;padding:20px 22px;border-radius:14px;
  border:1px solid var(--line-2);background:rgba(249,240,223,.035);}
.again__t{margin:0;font-family:var(--ff-display);font-size:22px;font-weight:400;color:var(--lit);}
.again__d{margin:8px 0 16px;font-size:13.5px;line-height:1.62;color:var(--lit-2);max-width:52ch;}
.again__d b{color:var(--amber-soft);font-weight:600;}
.again__err{margin:12px 0 0;font-size:13px;color:#F09A85;min-height:1em;}
.done__foot{margin:26px 0 0;font-size:13.5px;color:var(--lit-3);}

/* ─── Адаптив ────────────────────────────────────────────── */
@media (max-width:640px){
  :root{--shell:calc(100vw - 36px);}
  body{font-size:16px;}
  .bar{gap:12px;padding:16px 0 12px;}
  .bar__brand span{display:none;}
  .stage{min-height:calc(100dvh - 190px);align-items:flex-start;padding-top:8px;}
  .gate{padding-top:44px;}
  .chip{width:52px;height:52px;font-size:23px;}
  .scale{gap:4px;}
  .scale__btn{height:48px;font-size:13px;border-radius:8px;}
  .gift{flex-direction:column;gap:22px;padding:22px;}
  .gift__cover{width:112px;}
  .gift__actions .btn{flex:1 1 100%;}
  .nav .btn{padding:13px 20px;}
}
@media (max-width:380px){
  .scale__btn{height:44px;font-size:12px;}
  .chip{width:46px;height:46px;font-size:21px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}