/* aleksdolgop.dev — design system
   Палитра и типографика взяты из логотипа и баннера канала. */

:root{
  color-scheme:dark;

  --bg:#0b0f16;
  --bg-2:#0f1622;
  --card:#111827;
  --border:#1e2a3d;
  --text:#e6edf3;
  --muted:#8b98a9;
  --dim:#61728a;
  --accent:#58a6ff;
  --accent-soft:rgba(88,166,255,.09);
  --accent-line:rgba(88,166,255,.45);
  --danger:#ff7b72;

  --radius:14px;
  --ease:cubic-bezier(.22,.68,.36,1);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}

/* .card объявлен как flex, поэтому UA-правило [hidden] его не перебивает */
[hidden]{display:none!important}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100svh;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{text-wrap:balance;margin:0}
p{text-wrap:pretty}

::selection{background:rgba(88,166,255,.3)}

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

/* ── background layers ─────────────────────────────────────── */

.code-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-mask-image:radial-gradient(ellipse 52% 38% at 50% 30%,transparent 28%,#000 80%);
  mask-image:radial-gradient(ellipse 52% 38% at 50% 30%,transparent 28%,#000 80%);
}
.code-bg pre{
  margin:0;
  padding:24px 0 0;
  font:400 13px/2.9 var(--mono);
  white-space:pre;
  opacity:.38;
  will-change:transform;
  animation:code-drift 200s linear infinite;
}
.code-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(11,15,22,0) 14%,rgba(11,15,22,0) 66%,var(--bg) 100%);
}
.code-bg span{display:block;color:var(--dim);opacity:.55}
.code-bg span:nth-child(3n){opacity:.9}
.code-bg span:nth-child(4n){opacity:.32}
.code-bg span:nth-child(7n){opacity:.75}

@keyframes code-drift{
  from{transform:translateY(0)}
  to{transform:translateY(-16.6667%)}
}

.glow{
  position:fixed;
  inset:-20vh 0 auto 0;
  height:70vh;
  background:radial-gradient(60% 60% at 50% 0%,rgba(88,166,255,.16),transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* ── layout ────────────────────────────────────────────────── */

.wrap{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto;
  padding:20px 20px 56px;
}
.wrap.narrow{max-width:720px}

/* Страницы с длинным текстом: подложка, чтобы код не лез под строки */
.wrap.sheet::before{
  content:"";
  position:absolute;
  inset:0 -26px;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(11,15,22,0) 0%,
    rgba(11,15,22,.88) 7%,
    rgba(11,15,22,.88) 93%,
    rgba(11,15,22,0) 100%);
}

.skip{
  position:absolute;
  left:-9999px;
  top:8px;
  padding:8px 14px;
  background:var(--card);
  border:1px solid var(--accent);
  border-radius:8px;
  color:var(--text);
  text-decoration:none;
}
.skip:focus{left:20px;z-index:5}

/* ── top bar ───────────────────────────────────────────────── */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:40px;
  margin-bottom:clamp(14px,4vw,26px);
}

.back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  padding:6px 10px 6px 6px;
  border-radius:10px;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.back img{width:24px;height:24px;border-radius:50%;display:block}
.back svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.back:hover{color:var(--text);background:rgba(255,255,255,.03)}
.back:hover svg{transform:translateX(-3px)}

.lang{display:flex;gap:0;margin-left:auto}
.lang button{
  font:600 12px/1 var(--mono);
  letter-spacing:.08em;
  color:var(--muted);
  background:transparent;
  border:1px solid var(--border);
  padding:8px 12px;
  cursor:pointer;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease);
}
.lang button:first-child{border-radius:9px 0 0 9px}
.lang button:last-child{border-radius:0 9px 9px 0;margin-left:-1px}
.lang button:hover{color:var(--text)}
.lang button[aria-pressed="true"]{
  color:var(--accent);
  border-color:var(--accent-line);
  background:var(--accent-soft);
  position:relative;
}

/* ── hero ──────────────────────────────────────────────────── */

.hero{text-align:center;margin-bottom:clamp(30px,6vw,46px)}

.avatar{
  width:92px;
  height:92px;
  border-radius:50%;
  display:block;
  margin:0 auto 20px;
  view-transition-name:brand-logo;
}

.hero h1{
  font-size:clamp(27px,6.2vw,42px);
  line-height:1.08;
  letter-spacing:-.022em;
  font-weight:800;
  margin-bottom:10px;
}
.tagline{
  margin:0 0 16px;
  color:var(--muted);
  font-size:clamp(15px,3.4vw,17px);
}
.bio{
  margin:0 auto;
  max-width:54ch;
  color:var(--muted);
  font-size:15px;
}

.stack{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:20px 0 0;
  padding:0;
}
.stack li{
  font:500 12px/1 var(--mono);
  color:var(--muted);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 11px;
  white-space:nowrap;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.stack li:hover{border-color:var(--accent-line);color:var(--text)}

/* ── section heading ───────────────────────────────────────── */

.section-h{
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 14px;
}

/* ── link cards ────────────────────────────────────────────── */

.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg,var(--card),var(--bg-2));
  color:inherit;
  text-decoration:none;
  transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.card:hover{
  transform:translateY(-2px);
  border-color:var(--accent-line);
  box-shadow:0 10px 26px -14px rgba(88,166,255,.55);
}
.card .icon{
  flex:none;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:var(--text);
  transition:transform .2s var(--ease);
}
.card:hover .icon{transform:scale(1.08)}
.card .icon svg{width:22px;height:22px;display:block}
.card .text{display:flex;flex-direction:column;min-width:0}
.card .label{font-weight:600;font-size:15px}
.card .sub{
  font-size:12.5px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.card .arrow{
  margin-left:auto;
  flex:none;
  color:var(--muted);
  display:grid;
  place-items:center;
  transition:transform .2s var(--ease),color .2s var(--ease);
}
.card .arrow svg{width:16px;height:16px;display:block}
.card:hover .arrow{color:var(--accent);transform:translate(2px,-2px)}
.card.mail{grid-column:1/-1}
.card.mail:hover .arrow{transform:translateX(3px)}

.tile{
  width:22px;
  height:22px;
  border-radius:5px;
  background:currentColor;
  color:var(--text);
  display:grid;
  place-items:center;
  font:800 8.5px/1 var(--font);
}
.tile span{color:var(--bg)}

/* featured card — roadmap */
.feature{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px;
  margin-bottom:26px;
  border:1px solid var(--accent-line);
  border-radius:var(--radius);
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(88,166,255,.14),transparent 60%),
    linear-gradient(180deg,var(--card),var(--bg-2));
  color:inherit;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.feature::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(88,166,255,.14) 50%,transparent 60%);
  transform:translateX(-100%);
  transition:transform .7s var(--ease);
}
.feature:hover{transform:translateY(-2px);box-shadow:0 14px 34px -18px rgba(88,166,255,.75)}
.feature:hover::after{transform:translateX(100%)}
.feature .icon{
  flex:none;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  border:1px solid var(--accent-line);
  background:var(--accent-soft);
  color:var(--accent);
}
.feature .icon svg{width:20px;height:20px}
.feature .label{font-weight:700;font-size:16px;display:block}
.feature .sub{font-size:13px;color:var(--muted)}
.feature .arrow{margin-left:auto;color:var(--accent);flex:none;display:grid;place-items:center;transition:transform .2s var(--ease)}
.feature .arrow svg{width:18px;height:18px}
.feature:hover .arrow{transform:translateX(4px)}

/* ── roadmap page ──────────────────────────────────────────── */

.page-head{margin-bottom:clamp(28px,5vw,40px)}
.page-head h1{
  font-size:clamp(28px,6.4vw,40px);
  letter-spacing:-.022em;
  font-weight:800;
  margin-bottom:14px;
}
.page-head p{margin:0 0 14px;color:var(--muted);font-size:15.5px;max-width:62ch}
.page-head .lead{color:var(--text);font-size:17px}
.page-head p:last-child{margin-bottom:0}

.series{margin:0 0 clamp(34px,6vw,50px)}
.series > h2{
  font-size:clamp(19px,4.4vw,23px);
  letter-spacing:-.015em;
  font-weight:700;
  margin-bottom:8px;
}
.series .note{margin:0 0 22px;color:var(--muted);font-size:14.5px;max-width:62ch}

.timeline{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.timeline::before{
  content:"";
  position:absolute;
  left:4px;
  top:6px;
  bottom:6px;
  width:1px;
  background:linear-gradient(180deg,var(--border),rgba(30,42,61,.15));
}
.tl-item{position:relative;padding:0 0 22px}
.tl-item:last-child{padding-bottom:0}
.tl-item .dot{
  position:absolute;
  left:-26px;
  top:7px;
  width:9px;
  height:9px;
  border-radius:50%;
  border:1.5px solid var(--dim);
  background:var(--bg);
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
}
.tl-item:hover .dot{border-color:var(--accent)}
.tl-item h3{
  font-size:15.5px;
  font-weight:600;
  letter-spacing:-.005em;
  margin-bottom:4px;
}
.tl-item p{margin:0;color:var(--muted);font-size:14px;max-width:62ch}
.tl-item a{color:inherit;text-decoration:none;border-bottom:1px solid var(--accent-line)}
.tl-item a:hover{color:var(--accent)}
.tl-item.done .dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(88,166,255,.7)}

.callout{
  padding:20px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg,var(--card),var(--bg-2));
}
.callout h2{font-size:18px;font-weight:700;margin-bottom:8px}
.callout p{margin:0 0 14px;color:var(--muted);font-size:14.5px}
.callout p:last-of-type{margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text);
  text-decoration:none;
  font-size:13.5px;
  font-weight:500;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.chip svg{width:15px;height:15px;color:var(--accent)}
.chip:hover{border-color:var(--accent-line);background:var(--accent-soft);transform:translateY(-1px)}

/* ── footer ────────────────────────────────────────────────── */

footer{
  margin-top:clamp(32px,6vw,48px);
  padding-top:20px;
  border-top:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  justify-content:space-between;
  color:var(--muted);
  font-size:13px;
}
footer a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{color:var(--accent);border-bottom-color:var(--accent-line)}

/* ── entrance + scroll animations ──────────────────────────── */

@keyframes rise{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

.hero > *{animation:rise .7s var(--ease) backwards}
.hero > *:nth-child(1){animation-delay:.02s}
.hero > *:nth-child(2){animation-delay:.08s}
.hero > *:nth-child(3){animation-delay:.14s}
.hero > *:nth-child(4){animation-delay:.2s}
.hero > *:nth-child(5){animation-delay:.26s}

.js .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
  transition-delay:calc(var(--i,0) * 55ms);
}
.js .reveal.is-visible{opacity:1;transform:none}

/* ── view transitions between pages ────────────────────────── */

@view-transition{navigation:auto}

::view-transition-old(root){animation:vt-out .22s var(--ease) both}
::view-transition-new(root){animation:vt-in .32s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}

/* ── responsive ────────────────────────────────────────────── */

@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .code-bg{opacity:.32}
  .code-bg pre{font-size:11px;line-height:2.6}
  .feature{padding:16px;gap:13px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .js .reveal{opacity:1;transform:none}
  .card:hover{transform:none}
}

/* ── roadmap: прогресс чтения (scroll-driven animation) ────── */

.progress{
  position:fixed;
  inset:0 0 auto 0;
  height:2px;
  z-index:3;
  background:linear-gradient(90deg,var(--accent),#9fd0ff);
  transform:scaleX(0);
  transform-origin:0 50%;
}
@supports (animation-timeline:scroll()){
  .progress{
    animation:progress-grow linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes progress-grow{
    from{transform:scaleX(0)}
    to{transform:scaleX(1)}
  }
}

.back img{view-transition-name:brand-logo}

.tl-item code{
  font:500 12.5px/1.4 var(--mono);
  color:var(--accent);
  background:var(--accent-soft);
  padding:2px 6px;
  border-radius:5px;
}

/* ── 404 ───────────────────────────────────────────────────── */

.notfound{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}
.notfound .topbar{position:absolute;top:20px;right:20px;left:20px}

.scene{
  width:min(330px,86vw);
  height:auto;
  margin:0 auto 26px;
  overflow:visible;
}
.scene .track{
  fill:none;
  stroke:var(--border);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:5 9;
  animation:dash-flow 1.4s linear infinite;
}
.scene .track.right{animation-direction:reverse;opacity:.55}
.scene .node{
  fill:var(--bg-2);
  stroke:var(--accent);
  stroke-width:2.5;
}
.scene .node-core{fill:var(--accent)}
.scene .halo{
  fill:none;
  stroke:var(--accent);
  stroke-width:2;
  transform-box:fill-box;
  transform-origin:center;
  animation:halo 2.6s var(--ease) infinite;
}
.scene .frayed{
  fill:none;
  stroke:var(--border);
  stroke-width:2.5;
  stroke-linecap:round;
}
.scene .break{animation:flicker 2.6s steps(1,end) infinite}
.scene .bolt{
  fill:none;
  stroke:var(--danger);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.scene .spark-glow{fill:rgba(255,123,114,.16)}
.scene .packet{
  fill:var(--accent);
  offset-path:path("M 44 62 L 126 62");
  offset-rotate:0deg;
  animation:travel 2.6s var(--ease) infinite;
}

@keyframes dash-flow{to{stroke-dashoffset:-28}}
@keyframes halo{
  0%{transform:scale(.7);opacity:.7}
  70%{transform:scale(1.9);opacity:0}
  100%{transform:scale(1.9);opacity:0}
}
@keyframes flicker{
  0%,45%{opacity:.15}
  50%,62%{opacity:1}
  66%{opacity:.35}
  70%,100%{opacity:.15}
}
@keyframes travel{
  0%{offset-distance:0%;opacity:0;transform:scale(1) rotate(0deg)}
  8%{opacity:1}
  48%{offset-distance:100%;opacity:1;transform:scale(1) rotate(0deg)}
  62%{offset-distance:100%;opacity:0;transform:scale(.2) rotate(140deg)}
  100%{offset-distance:100%;opacity:0;transform:scale(.2) rotate(140deg)}
}

.code-404{
  font:800 clamp(38px,11vw,62px)/1 var(--font);
  letter-spacing:.02em;
  margin:0 0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.18em;
}
.code-404 i{
  font-style:normal;
  color:var(--accent);
  animation:bracket 3s var(--ease) infinite;
}
.code-404 i:last-child{animation-name:bracket-r}

@keyframes bracket{
  0%,100%{transform:translateX(0);opacity:.9}
  50%{transform:translateX(-7px);opacity:1}
}
@keyframes bracket-r{
  0%,100%{transform:translateX(0);opacity:.9}
  50%{transform:translateX(7px);opacity:1}
}

.notfound h1{
  font-size:clamp(21px,5vw,27px);
  font-weight:700;
  letter-spacing:-.015em;
  margin-bottom:10px;
}
.notfound .lead{
  margin:0 auto 26px;
  color:var(--muted);
  max-width:44ch;
  font-size:15px;
}
.notfound .chips{justify-content:center}

@media (prefers-reduced-motion:reduce){
  .scene .packet{offset-distance:100%;opacity:1}
  .scene .break{opacity:1}
}