/* ─────────────────────────────────────────────────────────────
   Осознанность — тихий манифест.
   Один акцент (золото), много воздуха, тщательная типографика.
   ───────────────────────────────────────────────────────────── */

:root{
  --bg:#0c0c0e;
  --bg-2:#121116;
  --ink:#ECEAE2;                       /* тёплый кремовый */
  --ink-soft:rgba(236,234,226,.62);
  --ink-faint:rgba(236,234,226,.34);
  --line:rgba(236,234,226,.10);
  --gold:#C9A86A;
  --gold-2:#E4C588;

  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --serif:'Lora',Georgia,'Times New Roman',serif;

  --ease:cubic-bezier(.2,.7,.2,1);
  --space:clamp(5rem,14vh,11rem);      /* вертикальный ритм между «моментами» */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.5;
  overflow-x:hidden;
  position:relative;
}

/* ── атмосфера: медленно дышащее золотое свечение ── */
.glow{
  position:fixed; inset:-30vmax; z-index:0; pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 72% 18%, rgba(201,168,106,.10), transparent 60%),
    radial-gradient(46vmax 46vmax at 18% 88%, rgba(201,168,106,.06), transparent 62%);
  animation:breathe 22s var(--ease) infinite alternate;
}
@keyframes breathe{
  0%{transform:translate3d(-2%,-1%,0) scale(1);opacity:.85}
  100%{transform:translate3d(3%,2%,0) scale(1.08);opacity:1}
}

/* ── плёночное зерно ── */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── нить-прогресс слева ── */
.thread{
  position:fixed; left:clamp(16px,4.5vw,52px); top:0; bottom:0; width:1px;
  background:var(--line); z-index:5; pointer-events:none;
}
.thread__fill{
  position:absolute; top:0; left:0; width:100%; height:0;
  background:linear-gradient(to bottom,rgba(201,168,106,.15),var(--gold));
  will-change:height;
}
.thread__fill::after{
  content:''; position:absolute; bottom:-2px; left:-3px;
  width:7px; height:7px; border-radius:50%;
  background:var(--gold-2); box-shadow:0 0 14px 1px rgba(228,197,136,.7);
}

/* ── каркас ── */
main{position:relative; z-index:2}

.section{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
  padding:var(--space) clamp(1.5rem,7vw,8rem);
  gap:1.6rem;
}

/* ── надстрочная метка ── */
.eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:.72rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold);
}
.eyebrow__mark{ width:26px; height:1px; background:var(--gold); opacity:.7 }

/* ── крупные строки-утверждения ── */
.line{
  font-weight:250; line-height:1.08; letter-spacing:-.022em;
  font-size:clamp(2rem,5.6vw,4rem);
  max-width:18ch;
}
.line span{ display:block }
.line.soft{ font-weight:300; font-size:clamp(1.6rem,4.2vw,3rem); color:var(--ink-soft); max-width:24ch }

.accent{ color:var(--gold) }
.dim{ color:var(--ink-soft) }

/* ── серифная «душевная» строка ── */
.quote{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.3rem,3.2vw,2.1rem); line-height:1.32; color:var(--ink);
  max-width:26ch;
}
.quote.big{ font-size:clamp(1.9rem,5.2vw,3.4rem); font-weight:500; line-height:1.18; max-width:20ch }

/* ── акцентная строка ── */
.accent-line{
  font-size:clamp(1.05rem,2.6vw,1.55rem); font-weight:400; letter-spacing:.005em; color:var(--gold);
}
.accent-line.strong{ font-size:clamp(1.5rem,4vw,2.6rem); font-weight:500 }

/* ── подпись/мелкий текст ── */
.caption{
  font-size:clamp(.92rem,1.7vw,1.1rem); font-weight:300; color:var(--ink-soft);
  line-height:1.6; max-width:34ch;
}

/* ── крупное число ── */
.num-block{
  display:flex; align-items:baseline; justify-content:center; gap:.3em;
  margin-top:.4rem;
}
.num__pre{ font-size:clamp(1rem,2vw,1.3rem); color:var(--ink-faint); font-weight:300 }
.num{
  font-size:clamp(3.4rem,12vw,9rem); font-weight:200; letter-spacing:-.04em; color:var(--gold);
  font-variant-numeric:tabular-nums; line-height:.9;
}
.num__unit{ font-size:clamp(1rem,2.1vw,1.4rem); color:var(--ink-soft); font-weight:300 }
.num--inline{ color:var(--gold); font-weight:500; font-variant-numeric:tabular-nums }

/* ── герой ── */
.hero{ gap:2rem; position:relative }
.hero__brand{ margin-bottom:.5rem }
.hero__title{
  font-weight:200; letter-spacing:-.03em; line-height:1.04;
  font-size:clamp(2.4rem,7.4vw,5.6rem); max-width:16ch;
}
.hero__title .h-line{ display:block }
.hero__sub{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.15rem,2.6vw,1.7rem); color:var(--ink-soft);
}

/* вход героя (без скролла) */
.h-line{ opacity:0; transform:translateY(42px); animation:heroIn 1.25s var(--ease) forwards }
.hero__title .h-line:nth-child(1){ animation-delay:.15s }
.hero__title .h-line:nth-child(2){ animation-delay:.3s }
.hero__title .h-line:nth-child(3){ animation-delay:.45s }
.hero__sub.h-line{ animation-delay:.75s }
@keyframes heroIn{
  from{ opacity:0; transform:translateY(42px); letter-spacing:.05em; filter:blur(4px) }
  to{ opacity:1; transform:none; letter-spacing:inherit; filter:none }
}

/* подсказка-скролл */
.cue{ position:absolute; bottom:clamp(1.8rem,5vh,3.5rem); left:50%; transform:translateX(-50%);
  color:var(--ink-faint); transition:opacity .6s var(--ease); animation:fadeIn 1s ease 1.4s both }
.cue.is-hidden{ opacity:0 !important }
.cue__dot{ animation:cueDot 2s var(--ease) infinite }
@keyframes cueDot{ 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(18px);opacity:0} 100%{opacity:0} }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

/* ── финал / футер ── */
.final{ gap:1.4rem }
.foot{
  min-height:60svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.4rem; padding:var(--space) 2rem; text-align:center;
}
.foot__mark{ color:var(--gold); line-height:0 }
.foot__text{ font-size:.78rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-faint) }

/* ── появление по скроллу ── */
.reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity 1.05s var(--ease), transform 1.05s var(--ease);
  transition-delay:calc(var(--d,0) * 95ms);
}
.section.in .reveal,
.foot.in .reveal{ opacity:1; transform:none }

/* ── щадящий режим: без движения ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .glow{animation:none}
  .h-line,.cue,.cue__dot{animation:none}
  .reveal{opacity:1 !important; transform:none !important; transition:none}
  .h-line{opacity:1 !important; transform:none !important; filter:none !important}
}

/* ── мобильные уточнения ── */
@media (max-width:520px){
  .section{ gap:1.3rem }
  .line{ max-width:14ch }
  .eyebrow{ letter-spacing:.24em }
}