/* ============================================================
   КАКОЙ ПУТЬ ВАМ ПОДХОДИТ (30.09.2026)
   Сверху три вопроса строкой, под ними шкала «проще ↔ без потолка» с
   четырьмя путями. Ответили — свой путь заливается цветом направления,
   остальные гаснут, под шкалой вывод и кнопка. Скрипт — web-path.js.
   ============================================================ */
.wp__box{ display:grid; gap:clamp(16px, 1.6vw, 26px); }

/* ---------- вопросы ---------- */
.wp__quiz{
  position:relative;
  padding:clamp(20px, 2vw, 34px);
  background:linear-gradient(135deg, var(--accent-dark), var(--accent-1) 60%, #4d7fe8);
  border-radius:var(--r-card);
  color:#fff;
  box-shadow:0 18px 40px rgba(var(--accent-rgb), .25);
}
.wp__cap{
  margin:0 0 clamp(14px, 1.3vw, 20px);
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.wp__qs{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(12px, 1.2vw, 20px);
}
.wp__q{
  display:grid; grid-template-columns:auto 1fr; gap:10px 12px; align-content:start;
  padding:clamp(14px, 1.3vw, 20px);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-inner);
  transition:opacity .3s var(--ease), background .3s var(--ease);
}
.wp__q.is-skip{ opacity:.45; }
.wp__q.is-skip .wp__yn{ pointer-events:none; }
.wp__qn{
  display:grid; place-items:center;
  width:26px; height:26px; border-radius:50%;
  background:#fff; color:var(--accent-1);
  font:700 13px/1 var(--font);
}
.wp__qt{
  margin:2px 0 0;
  font:600 clamp(14.5px, 1.02vw, 16.5px)/1.4 var(--font);
}
.wp__yn{
  grid-column:2;
  display:flex; gap:6px; margin-top:4px;
}
.wp__yn button{
  min-width:72px; padding:9px 14px;
  border:1px solid rgba(255,255,255,.45); border-radius:4px;
  background:transparent; color:#fff;
  font:600 14px/1 var(--font); cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.wp__yn button:hover{ border-color:#fff; background:rgba(255,255,255,.12); }
.wp__yn button[aria-pressed="true"]{ background:#fff; border-color:#fff; color:var(--accent-dark); }
.wp__yn button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.wp__reset{
  position:absolute; top:clamp(18px, 1.9vw, 32px); right:clamp(20px, 2vw, 34px);
  padding:0; border:0; background:none; cursor:pointer;
  font:500 13.5px/1.3 var(--font); color:rgba(255,255,255,.8);
  text-decoration:underline; text-underline-offset:3px;
}

/* ---------- шкала и пути ---------- */
.wp__scale{
  display:flex; align-items:center; gap:14px;
  margin:clamp(8px, 1vw, 16px) 0 clamp(12px, 1.2vw, 18px);
  font-size:12.5px; letter-spacing:.04em; color:var(--fg-mute);
}
.wp__scale i{
  flex:1; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--accent-line), var(--accent-1));
  position:relative;
}
.wp__scale i::after{
  content:""; position:absolute; right:-2px; top:50%; width:8px; height:8px; margin-top:-4px;
  border:solid var(--accent-1); border-width:2px 2px 0 0; transform:rotate(45deg);
}

.wp__paths{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(10px, 1vw, 18px);
}
.wp__path{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(18px, 1.6vw, 26px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  transition:opacity .4s var(--ease), transform .4s var(--ease), background .4s var(--ease),
             box-shadow .4s var(--ease), border-color .4s var(--ease), filter .4s var(--ease);
}
/* точка на пути: чем правее, тем насыщеннее — это та же шкала */
.wp__dot{
  width:14px; height:14px; border-radius:50%;
  background:rgba(var(--accent-rgb), var(--a, .3));
  box-shadow:0 0 0 4px rgba(var(--accent-rgb), .1);
}
.wp__path:nth-child(1){ --a:.25; }
.wp__path:nth-child(2){ --a:.45; }
.wp__path:nth-child(3){ --a:.75; }
.wp__path:nth-child(4){ --a:1; }
.wp__name{
  margin:14px 0 0;
  font:650 clamp(18px, 1.35vw, 22px)/1.2 var(--font); letter-spacing:-.01em;
  color:var(--fg);
}
.wp__what{
  margin:8px 0 0;
  font-size:clamp(13.5px, .92vw, 15px); line-height:1.45; color:var(--fg-lead);
}
.wp__dl{
  display:grid; gap:4px; margin:auto 0 0; padding-top:clamp(14px, 1.3vw, 20px);
}
.wp__dl dt{
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-1); margin-top:8px;
}
.wp__dl dt:first-child{ margin-top:0; }
.wp__dl dd{ margin:0; font-size:clamp(13.5px, .92vw, 15px); line-height:1.45; color:var(--fg); }

.wp__box.has-pick .wp__path{ opacity:.42; filter:saturate(.2); }
.wp__box.has-pick .wp__path.is-pick{
  opacity:1; filter:none;
  transform:translateY(-6px);
  background:linear-gradient(160deg, var(--accent-1), var(--accent-dark));
  border-color:transparent;
  box-shadow:0 20px 44px rgba(var(--accent-rgb), .32);
}
.wp__path.is-pick .wp__dot{ background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.25); }
.wp__path.is-pick .wp__name, .wp__path.is-pick .wp__dl dd{ color:#fff; }
.wp__path.is-pick .wp__what{ color:rgba(255,255,255,.82); }
.wp__path.is-pick .wp__dl dt{ color:rgba(255,255,255,.7); }

/* ---------- вывод ---------- */
.wp__answer{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:16px clamp(20px, 2vw, 40px);
  margin-top:clamp(14px, 1.4vw, 22px);
  padding:clamp(18px, 1.6vw, 26px) clamp(20px, 2vw, 32px);
  background:var(--accent-wash);
  border:1px solid var(--accent-line);
  border-radius:var(--r-card);
  animation:wp-in .45s var(--ease);
}
@keyframes wp-in{ from{ opacity:0; transform:translateY(8px); } }
.wp__atext{
  margin:0; max-width:70ch;
  font-size:clamp(15px, 1.08vw, 17.5px); line-height:1.5; color:var(--fg);
}
.wp__aname{ color:var(--accent-1); margin-right:.4em; }
.wp__aname::after{ content:" —"; color:var(--fg-mute); font-weight:400; }

/* 30.09.2026 (2): стеклянный предмет пути над названием (path-*.webp, multiply).
   На выбранной синей карточке multiply красит белый фон картинки в синий —
   рамки не видно, стекло темнеет в тон. Точка шкалы уходит в правый угол. */
.wp__art{
  margin:-4px -6px 4px; aspect-ratio:16 / 10;
  mix-blend-mode:multiply; pointer-events:none;
}
.wp__art img{ width:100%; height:100%; object-fit:cover; transform:scale(1.18); transition:transform .6s var(--ease); }
.wp__path:hover .wp__art img, .wp__path.is-pick .wp__art img{ transform:scale(1.28) translateY(-3%); }
.wp__path:has(.wp__art) .wp__dot{ position:absolute; top:clamp(16px, 1.4vw, 22px); right:clamp(16px, 1.4vw, 22px); }
.wp__path:has(.wp__art) .wp__name{ margin-top:4px; }

/* ============================================================
   30.09.2026 (6): анимация блока. По плашке вопросов бежит блик;
   вопросы появляются по очереди; предметы путей покачиваются;
   над карточками дорожка — огонёк летит к выбранному пути (--m:
   0…3, ставит web-path.js), выбранная карточка «выпрыгивает».
   ============================================================ */
.wp__quiz{ overflow:hidden; isolation:isolate; }
.wp__quiz::before{
  content:""; position:absolute; inset:-50% -20%; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
  animation:wp-sheen 6s ease-in-out infinite;
}
@keyframes wp-sheen{ 0%{ translate:-60% 0; } 60%,100%{ translate:60% 0; } }
.wp__quiz::after{
  content:""; position:absolute; right:-80px; top:-80px; width:260px; height:260px; z-index:-1;
  border-radius:50%; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 0 0 40px rgba(255,255,255,.04), 0 0 0 80px rgba(255,255,255,.03);
  animation:wp-orbit 14s linear infinite; pointer-events:none;
}
@keyframes wp-orbit{ to{ rotate:360deg; } }
.wp__box.is-in .wp__q{ animation:wp-up .6s var(--ease) both; }
.wp__box.is-in .wp__q:nth-child(2){ animation-delay:.15s; }
.wp__box.is-in .wp__q:nth-child(3){ animation-delay:.3s; }
.wp__box.is-in .wp__path{ animation:wp-up .6s var(--ease) both; }
.wp__box.is-in .wp__path:nth-child(1){ animation-delay:.35s; }
.wp__box.is-in .wp__path:nth-child(2){ animation-delay:.47s; }
.wp__box.is-in .wp__path:nth-child(3){ animation-delay:.59s; }
.wp__box.is-in .wp__path:nth-child(4){ animation-delay:.71s; }
@keyframes wp-up{ from{ opacity:0; transform:translateY(22px); } }
.wp__yn button:active{ transform:scale(.94); }
.wp__yn button[aria-pressed="true"]{ animation:wp-press .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes wp-press{ from{ transform:scale(.88); } }

/* предметы путей медленно покачиваются, каждый со своим сдвигом */
.wp__art img{ animation:wp-bob 6s ease-in-out infinite; }
.wp__path:nth-child(2) .wp__art img{ animation-delay:-1.5s; }
.wp__path:nth-child(3) .wp__art img{ animation-delay:-3s; }
.wp__path:nth-child(4) .wp__art img{ animation-delay:-4.5s; }
@keyframes wp-bob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -7px; } }

/* дорожка и огонёк */
.wp__track{
  position:relative; height:2px; margin:0 0 clamp(14px, 1.4vw, 20px);
  background:linear-gradient(90deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .35), rgba(var(--accent-rgb), .12));
  border-radius:2px;
}
.wp__marker{
  position:absolute; top:50%; left:calc((var(--m, 1.5) + .5) * 25%);
  width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:#fff; border:3px solid var(--accent-1);
  box-shadow:0 0 0 5px rgba(var(--accent-rgb), .18), 0 0 18px rgba(var(--accent-rgb), .6);
  opacity:0;
  transition:left .9s cubic-bezier(.6,-0.2,.25,1.3), opacity .3s var(--ease);
}
.wp__box.has-pick .wp__marker{ opacity:1; }
/* хвост огонька, пока летит */
.wp__marker::before{
  content:""; position:absolute; right:50%; top:50%; width:0; height:2px; margin-top:-1px;
  background:linear-gradient(90deg, transparent, var(--accent-2));
  transition:width .9s var(--ease);
}
.wp__marker.is-fly::before{ width:120px; }
.wp__box.has-pick .wp__path.is-pick{ animation:wp-pick .6s cubic-bezier(.3,1.5,.5,1); }
@keyframes wp-pick{ 0%{ transform:translateY(8px) scale(.96); } 100%{ transform:translateY(-6px); } }
.wp__path.is-pick .wp__art img{ animation-duration:3s; }
@media (prefers-reduced-motion: reduce){
  .wp__quiz::before, .wp__quiz::after, .wp__art img{ animation:none; }
  .wp__box.is-in .wp__q, .wp__box.is-in .wp__path{ animation:none; }
}
.wp__box.is-done .wp__q, .wp__box.is-done .wp__path:not(.is-pick){ animation:none; }
@media (max-width: 900px){ .wp__track{ display:none; } }
.wp__track{ margin-bottom:clamp(26px, 2.2vw, 34px); z-index:2; }   /* выбранная карточка приподнимается и закрывала огонёк */