/* ============================================================
   ЧТО СТРОИМ — ЛИСТ ЗВЁЗДНОГО АТЛАСА (30.09.2026, седьмая версия)
   Заказчик: «чтобы не казался построенным нейросетью». Убрано то, что
   читалось как генерация: неон и световые пятна, светящийся шар,
   матовое стекло с размытием, пульсирующие точки, одинаковый fade-up.
   Взамен — «печатный» язык: тонкие линии 1px, шкала с рисками, римские
   цифры, моно-индексы, бумажный круг с зерном, выноски как в атласе.
   Сигнатурный приём — диск астролябии проворачивается к выбранному виду.
   Движение: поворот диска 700 мс, смена текста 220 мс, без каскадов.
   ============================================================ */
@property --rot{ syntax:'<angle>'; initial-value:0deg; inherits:true; }

.wk--atlas{
  --ink:#0d1526;             /* ночь с подмесом синего, не чёрный */
  --paper:#f1eee7;           /* тёплая бумага листа атласа */
  --hair:rgba(214,222,240,.22);
  --text:#e6e9f1; --muted:rgba(230,233,241,.62);
  position:relative; isolation:isolate; overflow-x:clip;
  padding-block:clamp(72px, 8vw, 130px);
  background:var(--ink);
  color:var(--text);
}
/* верхняя и нижняя кромки — не дуга и не свечение, а тонкая линия обреза листа с рисками */
.wk--atlas::before, .wk--atlas::after{
  content:""; position:absolute; left:0; right:0; height:10px; pointer-events:none;
  background:
    linear-gradient(var(--hair), var(--hair)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--hair) 0 1px, transparent 1px 48px) 0 0 / 100% 10px;
  opacity:.8;
}
.wk--atlas::before{ top:clamp(20px, 2.4vw, 36px); }
.wk--atlas::after{ bottom:clamp(20px, 2.4vw, 36px); }

.wk__sky{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
/* звёзды — просто точки разной яркости, без мерцания и свечения */
.wk__stars{
  position:absolute; inset:0;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.75) 99%, transparent),
    radial-gradient(1px 1px at 31% 64%, rgba(255,255,255,.45) 99%, transparent),
    radial-gradient(1.4px 1.4px at 47% 11%, rgba(255,255,255,.8) 99%, transparent),
    radial-gradient(1px 1px at 66% 81%, rgba(255,255,255,.4) 99%, transparent),
    radial-gradient(1px 1px at 83% 33%, rgba(255,255,255,.6) 99%, transparent);
  background-size:620px 340px;
}
.wk__stars--2{
  background:
    radial-gradient(1px 1px at 7% 71%, rgba(200,214,255,.5) 99%, transparent),
    radial-gradient(1px 1px at 58% 37%, rgba(255,255,255,.35) 99%, transparent),
    radial-gradient(1.6px 1.6px at 91% 76%, rgba(255,255,255,.7) 99%, transparent);
  background-size:470px 410px;
}

/* ---------- раскладка: текст в левой части, лист справа крупно ---------- */
.wk__box{
  display:grid;
  grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr);
  gap:clamp(24px, 4vw, 80px);
  align-items:center;
}
.wk__side{ display:grid; gap:clamp(22px, 2.4vw, 36px); align-content:center; }
.wk--atlas .eyebrow{ color:var(--muted); font-family:var(--font-mono); letter-spacing:.08em; }
.wk--atlas .h2{ color:#fff; }
.wk--atlas .h2 em{ color:var(--accent-2); }
.wk--atlas .section__sub{ color:var(--muted); margin-bottom:0; max-width:44ch; }

/* ---------- описание выбранного: без карточки, на линейке ---------- */
.wk__panes{
  display:grid;
  padding-left:clamp(18px, 1.8vw, 28px);
  border-left:1px solid var(--hair);
}
.wk__pane{
  grid-area:1 / 1; position:relative;
  opacity:0; visibility:hidden;
  transition:opacity .22s cubic-bezier(.2,.8,.2,1), visibility 0s linear .22s;
}
.wk__pane.is-on{ opacity:1; visibility:visible; transition:opacity .26s cubic-bezier(.2,.8,.2,1) .12s, visibility 0s; }
/* крупная контурная римская цифра — фоновым слоем за заголовком */
.wk__num{
  position:absolute; right:0; top:-.1em; margin:0;
  /* римские цифры — антиквой, как в печатных атласах: рубленое «III» читалось как три прямоугольника */
  font:400 clamp(96px, 9.5vw, 160px)/1 Georgia, 'Times New Roman', serif;
  color:transparent; -webkit-text-stroke:1px rgba(var(--accent-rgb), .75);
  letter-spacing:-.02em; pointer-events:none;
}
.wk__tag{
  margin:0;
  font:500 12.5px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-2);
}
.wk__name{
  position:relative; margin:14px 0 0; max-width:15ch;
  font:600 clamp(28px, 2.6vw, 44px)/1.04 var(--font-display);
  letter-spacing:-.025em; color:#fff;
  text-wrap:balance;
}
.wk__name em{ font-style:normal; color:inherit; }
.wk__line{
  margin:14px 0 0; max-width:40ch;
  font-size:clamp(15px, 1.1vw, 18px); line-height:1.5; color:var(--muted);
}
.wk__points{ list-style:none; margin:clamp(18px, 1.8vw, 26px) 0 0; padding:0; max-width:46ch; }
.wk__points li{
  display:grid; grid-template-columns:28px 1fr; align-items:baseline;
  padding:11px 0; border-top:1px solid var(--hair);
  font-size:clamp(14px, .98vw, 15.5px); line-height:1.45; color:var(--text);
}
.wk__points li:last-child{ border-bottom:1px solid var(--hair); }
.wk__pi{ font:500 12px/1 var(--font-mono); color:var(--accent-2); }
/* «Честно» — сноска, а не плашка */
.wk__honest{
  margin:16px 0 0; max-width:46ch; padding-left:14px; position:relative;
  font-size:clamp(13.5px, .92vw, 14.5px); line-height:1.5; font-style:italic; color:var(--muted);
}
.wk__honest::before{ content:"*"; position:absolute; left:0; top:0; font-style:normal; color:var(--accent-2); }
.wk__honest b{ font-style:normal; font-weight:600; color:var(--text); }
.wk__link{ margin:14px 0 0; font-size:14.5px; }
.wk__link a{ color:var(--accent-2); text-underline-offset:3px; }
.wk__btn{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:clamp(20px, 2vw, 28px); padding:13px 20px;
  border:1px solid rgba(255,255,255,.4); border-radius:4px;
  background:transparent; color:#fff; cursor:pointer;
  font:600 14px/1 var(--font); letter-spacing:.02em;
  transition:background .2s cubic-bezier(.2,.8,.2,1), color .2s, border-color .2s;
}
.wk__btn svg{ width:13px; height:13px; transition:transform .2s cubic-bezier(.2,.8,.2,1); }
.wk__btn:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.wk__btn:hover svg{ transform:translateX(3px); }
.wk__btn:focus-visible, .wk__arr:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; }

/* ---------- навигация ---------- */
.wk__nav{ display:flex; align-items:center; gap:12px; }
.wk__arr{
  display:grid; place-items:center; width:40px; height:40px;
  border:1px solid var(--hair); border-radius:3px; background:transparent; color:var(--text); cursor:pointer;
  transition:border-color .2s, background .2s;
}
.wk__arr:hover{ border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.05); }
.wk__arr svg{ width:13px; height:13px; }
.wk__count{ min-width:74px; text-align:center; font:500 13px/1 var(--font-mono); color:var(--muted); letter-spacing:.06em; }
.wk__count b{ color:#fff; font-weight:600; }
.wk__prog{ flex:1; height:1px; background:var(--hair); overflow:hidden; }
.wk__prog i{ display:block; height:100%; background:var(--text); transform:scaleX(0); transform-origin:left; }
.wk__box.is-auto .wk__prog i{ animation:wk-prog 7s linear forwards; }
@keyframes wk-prog{ to{ transform:scaleX(1); } }

/* ---------- астролябия ---------- */
.wk__dial{
  position:relative; aspect-ratio:1;
  width:100%; max-width:640px; justify-self:center;
  container-type:inline-size;
}
.wk__disk{
  position:absolute; inset:0;
  transform:rotate(var(--rot));
  /* переход у самих transform, а не у --rot: через @property угол в Chrome прыгал без анимации;
     у цифр та же длительность — их доворот идёт синхронно с диском, и они остаются прямыми */
  transition:transform .7s cubic-bezier(.65,0,.25,1);
}
.wk__scale{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.wk__scale circle{ fill:none; stroke:var(--hair); stroke-width:1; vector-effect:non-scaling-stroke; }
.wk__scale .c1{ stroke:rgba(214,222,240,.35); }
.wk__scale .c3{ stroke-dasharray:2 5; }
.wk__scale line{ stroke:rgba(214,222,240,.45); stroke-width:1; vector-effect:non-scaling-stroke; }
.wk__scale line.sp{ stroke:rgba(214,222,240,.2); }
/* указатель сверху — неподвижный, в цвете акцента */
.wk__pointer{
  position:absolute; left:50%; top:-14px; margin-left:-7px;
  border:7px solid transparent; border-top:10px solid var(--accent-2); border-bottom:0;
}
/* цифры по кругу: от центра на радиус и доворот, чтобы стояли прямо при любом повороте диска */
.wk__list{ position:absolute; inset:0; }
.wk__tab{
  position:absolute; left:50%; top:50%;
  width:0; height:0; padding:0; border:0; background:none; cursor:pointer; color:inherit; font:inherit;
  transform:rotate(var(--a)) translateY(-40cqw) rotate(calc(-1 * var(--a) - var(--rot)));
  transition:transform .7s cubic-bezier(.65,0,.25,1);
}
.wk__rn, .wk__ttag{ position:absolute; left:0; white-space:nowrap; translate:-50% 0; }
.wk__rn{
  top:-15px;
  display:grid; place-items:center; width:38px; height:30px;
  font:400 17px/1 Georgia, 'Times New Roman', serif; letter-spacing:.04em; color:var(--muted);
  background:var(--ink); border:1px solid transparent; border-radius:3px;
  transition:color .2s, border-color .2s, background .2s;
}
.wk__ttag{
  top:19px;
  font:500 11px/1 var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(230,233,241,.42);
  transition:color .2s;
}
.wk__tab:hover .wk__rn{ color:#fff; border-color:var(--hair); }
.wk__tab.is-on .wk__rn{ color:var(--ink); background:var(--accent-2); border-color:var(--accent-2); }
.wk__tab.is-on .wk__ttag{ color:#fff; }
.wk__tab:focus-visible .wk__rn{ outline:2px solid var(--accent-2); outline-offset:3px; }

/* бумажный круг с зерном и перекрестьем; предмет на нём через multiply */
.wk__paper{
  position:absolute; left:50%; top:50%; width:58%; aspect-ratio:1; translate:-50% -50%;
  border-radius:50%; overflow:hidden; isolation:isolate;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .32  0 0 0 0 .28  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(circle at 50% 45%, #f7f5f0, var(--paper) 70%, #e4dfd4);
  box-shadow:0 0 0 1px rgba(214,222,240,.35), 0 0 0 10px var(--ink), 0 0 0 11px var(--hair);
}
.wk__cross{ position:absolute; inset:0; pointer-events:none; }
.wk__cross::before, .wk__cross::after{ content:""; position:absolute; background:rgba(40,52,80,.14); }
.wk__cross::before{ left:50%; top:6%; bottom:6%; width:1px; }
.wk__cross::after{ top:50%; left:6%; right:6%; height:1px; }
.wk__art{
  position:absolute; left:50%; top:52%; width:112%; aspect-ratio:4 / 3; translate:-50% -50%;
  mix-blend-mode:multiply;
  opacity:0; transition:opacity .3s cubic-bezier(.2,.8,.2,1);
}
.wk__art.is-on{ opacity:1; transition-delay:.25s; }
.wk__art img{ display:block; width:100%; height:100%; object-fit:contain; }

/* выноски */
.wk__notes{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s; }
.wk__notes.is-on{ opacity:1; transition-delay:.5s; }
.wk__notes svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.wk__notes line{ stroke:rgba(230,233,241,.55); stroke-width:1; vector-effect:non-scaling-stroke; }
.wk__dot{ position:absolute; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:var(--ink); border:1.5px solid var(--accent-2); }
.wk__note{
  position:absolute; padding:5px 8px;
  font:500 11.5px/1.2 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text);
  background:var(--ink); border:1px solid var(--hair); border-radius:3px; white-space:nowrap;
}
.wk__note--1{ left:80%; top:9%; translate:-10% -100%; }
.wk__note--2{ left:14%; top:90%; translate:-40% 0; }
.wk__note--3{ left:86%; top:90%; translate:-60% 0; }

@media (prefers-reduced-motion: reduce){
  .wk__disk, .wk__tab{ transition:none; }
  .wk__box.is-auto .wk__prog i{ animation:none; }
}