/* «Путь дерева» — 3D-история производства (сцена — journey.js).
   Без JS/WebGL секция остаётся сеткой карточек; класс .is-live включает липкую сцену. */
.journey{position:relative;background:linear-gradient(180deg,#f4eee5 0%,#f2ece2 100%);color:var(--ink)}
.journey__stage{position:relative;padding:110px 0 96px}
.journey__canvas,.journey__rail,.journey__hint,.journey__tools{display:none}

.journey__intro{max-width:var(--maxw);margin:0 auto 34px;padding-inline:24px}
.journey__kicker{display:inline-block;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-d);font-weight:700;margin-bottom:12px}
.journey__title{font-family:var(--font-display);font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.02;font-weight:700;letter-spacing:-.3px;max-width:16ch}

.journey__steps{max-width:var(--maxw);margin:0 auto;padding-inline:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.jstep{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 22px;box-shadow:0 24px 44px -36px rgba(43,36,29,.55)}
.jstep__n{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px}
.jstep__n b{color:var(--accent-d);font-weight:800}
.jstep h3{font-family:var(--font-display);font-size:1.75rem;line-height:1.08;font-weight:700;margin-bottom:8px;color:var(--ink)}
.jstep>p{font-size:.93rem;color:var(--ink-soft);line-height:1.55}
.jstep__facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.jstep__facts li{font-size:.76rem;font-weight:600;color:var(--accent-d);background:rgba(183,150,113,.14);border-radius:100px;padding:5px 11px}
.jstep__meter{display:flex;align-items:baseline;gap:8px;margin-top:12px;color:var(--muted);font-size:.8rem;font-weight:600;letter-spacing:.02em}
.jstep__meter b{font-family:var(--font-sans);font-weight:700;font-size:1.9rem;line-height:1;color:var(--accent-d);font-variant-numeric:tabular-nums;min-width:1.4em}
.jstep__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.jstep--final{background:linear-gradient(160deg,var(--dark-2),var(--dark));border-color:transparent;color:#efe6d8}
.jstep--final h3{color:#fff}.jstep--final>p{color:#cdbfaa}.jstep--final .jstep__n{color:#a8987f}.jstep--final .jstep__n b{color:var(--accent)}
.jstep--final .btn--ghost{color:#f3ebdd;border-color:rgba(243,235,221,.3)}.jstep--final .btn--ghost:hover{border-color:#f3ebdd}

/* ---------- живой режим ---------- */
.journey.is-live{height:calc(var(--jn,9.6) * 100vh);height:calc(var(--jn,9.6) * 100svh)}
.is-live .journey__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;padding:0}
.is-live .journey__canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.is-live .journey__intro{position:absolute;top:100px;left:max(24px,calc((100vw - var(--maxw)) / 2 + 24px));width:min(400px,36vw);margin:0;padding:20px 24px 22px;background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius);box-shadow:0 30px 60px -34px rgba(43,36,29,.5);pointer-events:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.is-live .journey__kicker{margin-bottom:8px}
.is-live .journey__title{font-size:clamp(1.7rem,2.6vw,2.35rem);max-width:none}
.is-live:not(.is-intro) .journey__intro{opacity:0;transform:translateY(-16px)}

.is-live .journey__steps{position:absolute;left:max(24px,calc((100vw - var(--maxw)) / 2 + 24px));bottom:clamp(24px,6vh,56px);width:min(400px,36vw);padding:0;margin:0;display:block}
.is-live .jstep{position:absolute;left:0;bottom:0;width:100%;opacity:0;transform:translateY(24px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .6s var(--ease);background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 30px 60px -34px rgba(43,36,29,.55)}
.is-live .jstep--final{background:linear-gradient(160deg,rgba(61,52,42,.96),rgba(50,42,34,.96))}
.is-live .jstep.is-past{transform:translateY(-24px)}
.is-live .jstep.is-active{opacity:1;transform:none;pointer-events:auto}

/* рельс глав справа */
.is-live .journey__rail{display:flex;flex-direction:column;align-items:flex-end;gap:13px;position:absolute;right:max(20px,calc((100vw - var(--maxw)) / 2 + 12px));top:50%;transform:translateY(-50%);padding:16px 14px 16px 18px;background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:18px;box-shadow:0 24px 50px -34px rgba(43,36,29,.55)}
.jrail__track{position:absolute;right:20px;top:24px;bottom:24px;width:2px;background:rgba(141,111,71,.18);border-radius:2px;overflow:hidden}
.jrail__fill{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(0)}
.jrail__item{position:relative;display:flex;align-items:center;gap:12px;background:none;border:0;padding:2px 0;cursor:pointer;font:600 .78rem/1 var(--font-sans);color:var(--muted);letter-spacing:.02em;transition:color .3s}
.jrail__item span{order:0;opacity:.85;transition:opacity .3s}
.jrail__item i{order:1;width:14px;height:14px;border-radius:50%;background:#fbf8f3;border:2px solid #cdbca4;transition:transform .3s var(--ease),background .3s,border-color .3s,box-shadow .3s}
.jrail__item:hover{color:var(--ink)}
.jrail__item.is-done i{background:var(--accent);border-color:var(--accent)}
.jrail__item.is-active{color:var(--ink)}
.jrail__item.is-active i{background:var(--accent);border-color:var(--accent);transform:scale(1.25);box-shadow:0 0 0 5px rgba(183,150,113,.22)}

.is-live .journey__hint{display:flex;flex-direction:column;align-items:center;gap:8px;position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;transition:opacity .5s}
.journey__hint span{width:22px;height:34px;border:2px solid #c5b59e;border-radius:12px;position:relative}
.journey__hint span::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--accent);animation:jwheel 1.8s ease-in-out infinite}
@keyframes jwheel{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(9px)}}
.is-live:not(.is-intro) .journey__hint{opacity:0}

.is-live .journey__tools{display:flex;gap:8px;position:absolute;top:96px;right:max(20px,calc((100vw - var(--maxw)) / 2 + 12px))}
.journey__restart{font-family:inherit;cursor:pointer}
.is-live:not(.is-moved) .journey__restart{display:none}
.is-live .journey__restart,.is-live .journey__skip{display:inline-block;font-size:.8rem;font-weight:600;color:var(--ink-soft);padding:7px 14px;border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .3s,color .3s}
.is-live .journey__restart:hover,.is-live .journey__skip:hover{border-color:var(--ink);color:var(--ink)}
.jrail__item b{display:none}

@media (max-width:980px){
  .is-live .journey__rail span{display:none}
}
@media (max-width:720px){
  .journey__stage{padding:88px 0 64px}
  .journey__steps{grid-template-columns:1fr}
  .is-live .journey__intro{top:136px;left:12px;right:12px;width:auto;padding:14px 16px 16px}
  .is-live .journey__title{font-size:1.55rem}
  .is-live .journey__steps{left:12px;right:12px;width:auto;bottom:12px}
  .is-live .jstep{padding:16px 18px 15px;border-radius:16px}
  .is-live .jstep h3{font-size:1.4rem;margin-bottom:5px}
  .is-live .jstep>p{font-size:.85rem;line-height:1.5}
  .is-live .jstep__facts{margin-top:10px}
  .is-live .jstep__meter{margin-top:8px}.is-live .jstep__meter b{font-size:1.5rem}
  .is-live .journey__rail{top:84px;left:12px;right:12px;transform:none;flex-direction:row;align-items:center;gap:2px;padding:6px 8px;border-radius:16px}
  .is-live .jrail__track{display:none}
  .is-live .jrail__item{flex:1;justify-content:center;padding:0}
  .is-live .jrail__item i{display:none}
  .is-live .jrail__item b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:.82rem;font-weight:700;color:var(--muted);background:#fbf8f3;border:1.5px solid #d8cab6;transition:background .3s,color .3s,border-color .3s}
  .is-live .jrail__item.is-done b{color:var(--accent-d);border-color:var(--accent)}
  .is-live .jrail__item.is-active b{color:#fff;background:var(--accent);border-color:var(--accent)}
  .is-live .journey__tools{top:132px;right:12px}
  .is-live .journey__skip,.is-live .journey__hint{display:none}
}
@media (prefers-reduced-motion:reduce){.journey__hint span::after{animation:none}}