/* 인연 — нити встреч. Ночная палитра «под луной». */

:root{
  --bg0:#0a0b16; --bg1:#11101f; --bg2:#171327;
  --ink:#ece6dd; --ink-soft:#b8b0c2; --ink-dim:#7d7690;
  --gold:#e8b65a; --gold-soft:#f0d9a0;
  --red:#d8556e; --red-soft:#e98aa0;
  --line:#2a2640;
  --thread-a:#d8556e; --thread-b:#e8b65a;
  --serif:'PT Serif',Georgia,'Times New Roman',serif;
  --ko:'Noto Serif KR','PT Serif',serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(216,85,110,.10), transparent 60%),
    radial-gradient(1000px 700px at 10% 30%, rgba(232,182,90,.07), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 40%, var(--bg2));
  background-attachment:fixed;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.ko{font-family:var(--ko)}

/* ─── сквозная нить (spine) ─── */
#spine{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:0}
#spineBase{fill:none;stroke:var(--line);stroke-width:1.4;opacity:.55}
#spineDrawn{fill:none;stroke:url(#threadgrad);stroke-width:2.2;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(216,85,110,.55))}
#spineBead{fill:var(--gold-soft);filter:drop-shadow(0 0 10px rgba(232,182,90,.9))}
#spineTail{fill:none;stroke:url(#threadgrad);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:5 7;filter:drop-shadow(0 0 6px rgba(216,85,110,.55));opacity:0}

main{position:relative;z-index:1}
section{
  max-width:760px;margin:0 auto;padding:14vh 26px;
  position:relative;
}
.eyebrow{
  font-family:var(--ko);letter-spacing:.18em;text-transform:uppercase;
  font-size:.74rem;color:var(--gold);opacity:.85;margin-bottom:1.1rem;
}
h2{font-size:clamp(1.7rem,4.4vw,2.7rem);font-weight:400;line-height:1.18;
  letter-spacing:.01em;margin-bottom:1rem}
.lead{font-size:clamp(1.02rem,2.3vw,1.18rem);color:var(--ink-soft);max-width:60ch}

/* плавное появление секций */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

/* ─── HERO ─── */
#hero{min-height:96vh;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding-top:8vh}
#hero .word{font-family:var(--ko);font-size:clamp(5rem,22vw,12rem);line-height:.95;
  font-weight:500;letter-spacing:.02em;
  background:linear-gradient(120deg,var(--red-soft),var(--gold-soft));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(216,85,110,.25))}
#hero .roman{font-family:var(--ko);color:var(--gold);letter-spacing:.22em;
  font-size:.95rem;margin-top:.6rem;opacity:.9}
#hero .htitle{font-size:clamp(1.5rem,4.5vw,2.4rem);font-weight:400;margin:1.6rem 0 1rem}
#hero .lead{margin:0 auto}
.scrollcue{margin-top:3.2rem;color:var(--ink-dim);font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.scrollcue .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);
  animation:fall 1.8s ease-in-out infinite}
@keyframes fall{0%{transform:translateY(-6px);opacity:.2}50%{opacity:1}100%{transform:translateY(14px);opacity:.2}}

/* ─── ЭТИМОЛОГИЯ ─── */
.etym-row{display:flex;align-items:center;justify-content:center;gap:18px;
  flex-wrap:wrap;margin:2.4rem 0 1.4rem}
.glyph{
  width:188px;min-height:212px;perspective:1200px;cursor:pointer;
}
.glyph .inner{position:relative;width:100%;height:212px;transition:transform .7s;
  transform-style:preserve-3d}
.glyph.open .inner{transform:rotateY(180deg)}
.glyph .face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:18px;text-align:center}
.glyph .front .han{font-family:var(--ko);font-size:5.4rem;line-height:1;
  color:var(--gold-soft);text-shadow:0 0 24px rgba(232,182,90,.3)}
.glyph .front .ru{margin-top:.5rem;font-size:1.05rem}
.glyph .front .sub{color:var(--ink-dim);font-size:.85rem}
.glyph .front .ko{color:var(--gold);font-family:var(--ko);font-size:.8rem;letter-spacing:.1em;margin-top:.3rem}
.glyph .back{transform:rotateY(180deg);background:linear-gradient(160deg,rgba(216,85,110,.14),rgba(232,182,90,.06)), #14111e}
.glyph .back p{font-size:.95rem;color:var(--ink-soft)}
.plus{font-size:2.4rem;color:var(--ink-dim);align-self:center}
.etym-result{text-align:center;margin-top:.5rem}
.etym-result .han{font-family:var(--ko);font-size:2.4rem;color:var(--gold-soft);letter-spacing:.06em}
.etym-result .cap{color:var(--gold);letter-spacing:.12em;font-size:.8rem;text-transform:uppercase}
.etym-result p{max-width:54ch;margin:.7rem auto 0;color:var(--ink-soft)}
.hint{color:var(--ink-dim);font-size:.8rem;font-style:italic;text-align:center;margin-top:1.4rem}

/* ─── СПЕКТР ─── */
.spectrum{margin:3rem 0 1rem}
.track{position:relative;height:2px;background:linear-gradient(90deg,var(--ink-dim),var(--gold),var(--ink-dim));
  border-radius:2px;margin:3.6rem 4px 0}
.stop{position:absolute;top:50%;transform:translate(-50%,-50%);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;color:var(--ink-dim);
  transition:color .3s}
.stop .tick{width:9px;height:9px;border-radius:50%;background:var(--ink-dim);transition:all .3s}
.stop .lbl{font-family:var(--ko);font-size:.95rem;position:absolute;top:18px;white-space:nowrap}
.stop.active{color:var(--gold-soft)}
.stop.active .tick{background:var(--gold);box-shadow:0 0 12px var(--gold)}
.handle{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;
  transform:translate(-50%,-50%);cursor:grab;
  background:radial-gradient(circle at 35% 35%,var(--gold-soft),var(--red));
  box-shadow:0 0 18px rgba(232,182,90,.7);transition:left .35s cubic-bezier(.4,1.3,.5,1)}
.handle:active{cursor:grabbing}
.spectrum.dragging .handle{transition:none}
.pole-card{margin-top:4.6rem;border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01));min-height:148px}
.pole-card .pk{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.5rem}
.pole-card .pko{font-family:var(--ko);font-size:1.7rem;color:var(--gold-soft)}
.pole-card .prom{color:var(--gold);font-family:var(--ko);font-size:.82rem;letter-spacing:.08em}
.pole-card .pru{margin-left:auto;color:var(--ink-dim);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em}
.pole-card p{color:var(--ink-soft)}

/* ─── 8000 СЛОЁВ ─── */
.layers-stage{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin:2.6rem 0 1.6rem}
@media(max-width:640px){.layers-stage{grid-template-columns:1fr}}
.weave{position:relative;height:260px;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 120%,rgba(216,85,110,.10),transparent 70%)}
.weave svg{position:absolute;inset:0;width:100%;height:100%}
.count{text-align:left}
.count .num{font-family:var(--ko);font-size:clamp(3.2rem,11vw,5.2rem);line-height:1;
  background:linear-gradient(120deg,var(--gold-soft),var(--red-soft));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.count .unit{color:var(--ink-dim);letter-spacing:.12em;font-size:.85rem;text-transform:uppercase}
.count .kostep{font-family:var(--ko);font-size:1.5rem;color:var(--gold-soft);margin-top:1rem}
.count .rustep{font-size:1.05rem;margin-top:.1rem}
.count .notestep{color:var(--ink-soft);font-size:.95rem;margin-top:.6rem;max-width:38ch}
.slider-wrap{margin:1.4rem 0 .4rem}
input[type=range].slider{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--red),var(--gold));outline:none}
input[type=range].slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--gold-soft),var(--red));cursor:pointer;
  box-shadow:0 0 16px rgba(232,182,90,.7)}
input[type=range].slider::-moz-range-thumb{width:24px;height:24px;border:none;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,var(--gold-soft),var(--red));cursor:pointer;
  box-shadow:0 0 16px rgba(232,182,90,.7)}
.ticks{display:flex;justify-content:space-between;margin-top:.5rem}
.ticks span{font-family:var(--ko);font-size:.72rem;color:var(--ink-dim)}
.proverb{font-family:var(--ko);text-align:center;color:var(--gold-soft);font-style:italic;
  margin:1.8rem 0 .6rem;font-size:1.02rem}
.note{color:var(--ink-dim);font-size:.82rem;text-align:center;max-width:52ch;margin:0 auto}

/* ─── OUTRO ─── */
#outro .quote{font-size:clamp(1.2rem,3.2vw,1.7rem);font-style:italic;color:var(--gold-soft);
  line-height:1.5;border-left:2px solid var(--red);padding-left:1.2rem;margin:1rem 0 2.6rem}
.next-title{color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin-bottom:1rem}
.next-list{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.next-list li{color:var(--ink-soft);padding-left:1.4rem;position:relative}
.next-list li::before{content:'◦';position:absolute;left:0;color:var(--red-soft)}

footer{text-align:center;padding:6vh 26px 8vh;color:var(--ink-dim);font-size:.82rem;
  position:relative;z-index:1;border-top:1px solid var(--line);max-width:760px;margin:0 auto}
footer .ko{color:var(--gold);font-size:1.1rem}
a{color:var(--gold-soft)}

:root{--violet:#9b8cc4}

/* ─── ТРИ КОРНЯ ─── */
.braid{display:block;width:300px;max-width:90%;height:auto;margin:2.4rem auto 2rem}
.strand{stroke-width:2;opacity:.30;transition:opacity .4s,stroke-width .4s;
  stroke-linecap:round}
.strand-bud{stroke:var(--gold)} .strand-con{stroke:var(--red)} .strand-sha{stroke:var(--violet)}
.strand.lit{opacity:1;stroke-width:3.4;filter:drop-shadow(0 0 6px currentColor)}
.braid-knot{fill:var(--gold-soft);filter:drop-shadow(0 0 8px var(--gold))}
.roots-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:1.6rem}
@media(max-width:640px){.roots-row{grid-template-columns:1fr}}
.root-card{border:1px solid var(--line);border-radius:14px;padding:18px;cursor:pointer;
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  transition:border-color .3s,transform .3s}
.root-card:hover{transform:translateY(-3px)}
.root-bud.open{border-color:var(--gold)} .root-con.open{border-color:var(--red)} .root-sha.open{border-color:var(--violet)}
.root-card .rk{font-family:var(--ko);font-size:1.9rem;color:var(--gold-soft)}
.root-card .rrom{color:var(--gold);letter-spacing:.1em;font-size:.78rem;text-transform:uppercase}
.root-card .rru{font-size:1.1rem;margin-top:.3rem}
.rdesc{color:var(--ink-soft);font-size:.92rem;margin-top:.7rem;max-height:0;overflow:hidden;
  opacity:0;transition:max-height .5s,opacity .5s,margin .5s}
.root-card.open .rdesc{max-height:300px;opacity:1;margin-top:.9rem}
.merge{text-align:center;color:var(--ink-soft);font-style:italic;max-width:54ch;margin:.4rem auto 0}

/* ─── ВОСТОК ↔ ЗАПАД ─── */
.ew-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:2.4rem 0 1.4rem}
@media(max-width:640px){.ew-grid{grid-template-columns:1fr}}
.ew-col{border:1px solid var(--line);border-radius:14px;padding:20px;text-align:center;
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.ew-svg{width:100%;height:150px}
.ew-edge{stroke:var(--ink-dim);stroke-width:1.4;opacity:.5}
.ew-edge.lit{stroke:var(--red);opacity:.9;stroke-width:2}
.ew-node{fill:var(--bg2);stroke:var(--gold);stroke-width:1.6}
.ew-core{fill:url(#threadgrad);stroke:none}
.ew-cap{display:flex;flex-direction:column;gap:.2rem;margin-top:.4rem}
.ewko{font-family:var(--ko);font-size:1.5rem;color:var(--gold-soft)}
.ewru{color:var(--ink-dim);font-size:.82rem;text-transform:uppercase;letter-spacing:.1em}
.ew-desc{color:var(--ink-soft);font-size:.9rem;margin:.7rem 0}
.ew-tags{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.ew-tags .tag{font-size:.74rem;color:var(--gold);border:1px solid var(--line);border-radius:20px;padding:.18rem .6rem}
.focus{text-align:center;color:var(--ink-soft);max-width:58ch;margin:.4rem auto 0;
  border-top:1px solid var(--line);padding-top:1.4rem}

/* ─── ЛЕКСИКОН ─── */
.lex-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:2.2rem 0 1.4rem}
.lex-tab{font-family:var(--ko);background:transparent;color:var(--ink-soft);cursor:pointer;
  border:1px solid var(--line);border-radius:24px;padding:.5rem 1.1rem;font-size:1rem;transition:all .3s}
.lex-tab:hover{color:var(--ink)}
.lex-tab.active{color:var(--bg0);background:linear-gradient(120deg,var(--gold-soft),var(--red-soft));border-color:transparent}
.lex-demo{width:100%;height:120px;display:block}
.lex-thread{stroke-width:2.4;stroke-linecap:round}
.lex-thread.a,.lex-thread.b,.lex-thread.deep{stroke:var(--gold)}
.lex-thread.deep{stroke-width:5;filter:drop-shadow(0 0 5px var(--gold))}
.lex-thread.shallow{stroke:var(--ink-dim);stroke-width:1.2}
.lex-spark{fill:var(--gold-soft);filter:drop-shadow(0 0 10px var(--gold));animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{r:5;opacity:.7}50%{r:8;opacity:1}}
.lex-cut{stroke:var(--red);stroke-width:2.4}
.lex-panel{border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-top:1.2rem;
  background:linear-gradient(160deg,rgba(216,85,110,.08),rgba(255,255,255,.01));min-height:120px}
.lp-k{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:.5rem}
.lp-k .ko{font-family:var(--ko);font-size:1.4rem;color:var(--gold-soft)}
.lp-rom{color:var(--gold);font-size:.8rem;letter-spacing:.06em}
.lp-ru{margin-left:auto;color:var(--ink-dim);text-transform:uppercase;font-size:.8rem;letter-spacing:.1em}
.lex-panel p{color:var(--ink-soft)}

/* ─── PAST LIVES ─── */
.pl-line{display:flex;justify-content:space-between;position:relative;margin:3rem 0 1.6rem;padding:0 8px}
.pl-line::before{content:'';position:absolute;left:8px;right:8px;top:7px;height:2px;
  background:linear-gradient(90deg,var(--red),var(--gold));opacity:.5}
.pl-bead{display:flex;flex-direction:column;align-items:center;gap:.6rem;cursor:pointer;
  position:relative;z-index:1;flex:1;text-align:center}
.pl-dot{width:16px;height:16px;border-radius:50%;background:var(--bg2);border:2px solid var(--gold);transition:all .3s}
.pl-bead.active .pl-dot{background:radial-gradient(circle at 35% 35%,var(--gold-soft),var(--red));
  box-shadow:0 0 14px var(--gold);transform:scale(1.25)}
.pl-year{font-size:.82rem;color:var(--ink-dim);transition:color .3s}
.pl-bead.active .pl-year{color:var(--gold-soft)}
.pl-panel{border:1px solid var(--line);border-radius:14px;padding:20px 22px;min-height:130px;
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.pl-k{font-family:var(--ko);font-size:1.4rem;color:var(--gold-soft)}
.pl-ru{font-size:1.05rem;margin:.1rem 0 .5rem}
.pl-panel p{color:var(--ink-soft)}
.pl-close{text-align:center;color:var(--gold-soft);font-style:italic;max-width:54ch;margin:1.6rem auto 0}

/* ─── КАРМА ≠ ПРИГОВОР ─── */
.km-toggle{display:flex;gap:0;justify-content:center;margin:2.4rem 0 1.4rem;
  border:1px solid var(--line);border-radius:30px;overflow:hidden;width:fit-content;margin-left:auto;margin-right:auto}
.km-btn{background:transparent;color:var(--ink-soft);cursor:pointer;border:none;
  padding:.7rem 1.5rem;font-family:var(--serif);font-size:1rem;transition:all .3s}
.km-btn .ko{font-family:var(--ko);opacity:.7;font-size:.85em}
.km-btn.active{color:var(--bg0);background:linear-gradient(120deg,var(--gold-soft),var(--red-soft))}
.km-panel{border:1px solid var(--line);border-radius:14px;padding:22px 24px;min-height:100px;
  transition:all .4s;max-width:60ch;margin:0 auto}
.km-panel p{font-size:1.1rem}
.km-panel.invite{border-color:var(--gold);background:linear-gradient(160deg,rgba(232,182,90,.12),rgba(255,255,255,.01))}
.km-panel.invite p{color:var(--gold-soft)}
.km-panel.verdict{border-color:var(--line);background:rgba(255,255,255,.02);opacity:.85}
.km-panel.verdict p{color:var(--ink-dim)}
.km-cautions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:1.8rem}
@media(max-width:640px){.km-cautions{grid-template-columns:1fr}}
.km-caution{border:1px solid var(--line);border-radius:12px;padding:16px;border-left:2px solid var(--red)}
.kc-t{color:var(--red-soft);font-size:.95rem;margin-bottom:.4rem}
.km-caution p{color:var(--ink-soft);font-size:.88rem}

/* ─── ВОПРОСЫ ─── */
.q-list{display:flex;flex-direction:column;gap:14px;margin-top:2.2rem}
.q-card{display:flex;align-items:flex-start;gap:14px;border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;cursor:pointer;transition:border-color .3s,background .3s;
  background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.q-card:hover{border-color:var(--gold)}
.q-knot{flex:none;width:14px;height:14px;border-radius:50%;margin-top:.35rem;
  border:2px solid var(--ink-dim);transition:all .3s}
.q-card.tied .q-knot{background:radial-gradient(circle at 35% 35%,var(--gold-soft),var(--red));
  border-color:transparent;box-shadow:0 0 12px var(--gold)}
.q-card.tied{border-color:var(--gold)}
.q-n{font-family:var(--ko);color:var(--gold);font-size:1.1rem;flex:none}
.q-card p{color:var(--ink-soft)}

/* ─── КОДА ─── */
.coda{font-size:clamp(1.05rem,2.6vw,1.3rem);color:var(--ink-soft);font-style:italic;margin:.4rem 0 2.4rem}
.coda-word{text-align:center;font-family:var(--ko);font-size:clamp(3rem,12vw,6rem);
  background:linear-gradient(120deg,var(--red-soft),var(--gold-soft));-webkit-background-clip:text;
  background-clip:text;color:transparent;opacity:.85;filter:drop-shadow(0 0 24px rgba(216,85,110,.2))}
#codaEnd{height:76px}