/* Живые экраны и путь одного выкраса. */

/* Браузерная рамка: длинная страница прокручивается внутри вместе со скроллом кейса. */
.live-viewport{display:block;aspect-ratio:1440/1000;overflow:hidden;background:var(--paper)}
.desktop-shot .live-page{width:100%;height:auto;aspect-ratio:auto;object-fit:fill;will-change:transform;transform:translate3d(0,0,0)}

/* Телефон: настоящая запись сценария. */
.mobile-shot{isolation:isolate}
.mobile-video{display:block;width:100%;height:100%;object-fit:cover;object-position:top;background:var(--paper)}
.video-toggle{position:absolute;left:50%;bottom:12px;z-index:2;width:36px;height:36px;margin-left:-18px;display:grid;place-items:center;border-radius:50%;background:rgba(37,42,34,.86);color:var(--paper);opacity:0;transition:opacity .3s,background-color .2s}
.mobile-shot:hover .video-toggle,.video-toggle:focus-visible,.video-toggle[aria-pressed=true]{opacity:1}
.video-toggle:hover{background:var(--stand)}
.video-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.video-toggle .i-play{display:none;fill:currentColor;stroke:none}
.video-toggle[aria-pressed=true] .i-pause{display:none}
.video-toggle[aria-pressed=true] .i-play{display:block}
@media(hover:none){.video-toggle{opacity:1;width:30px;height:30px;margin-left:-15px;bottom:8px}}

/* Путь одного выкраса. */
.swatch-path{margin-top:clamp(56px,6vw,96px)}
.swatch-path-head{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:end;margin-bottom:clamp(30px,3.5vw,50px)}
.swatch-path-head h3{font-size:clamp(30px,3vw,48px);line-height:1.08}
.swatch-path-head p{color:var(--muted);font-size:15px;line-height:1.7;max-width:46ch}
.swatch-path-stage{position:relative;display:grid;grid-template-columns:2.1fr 1fr;gap:clamp(30px,4vw,70px);align-items:center}
.path-frame{position:relative;aspect-ratio:1440/1000;overflow:hidden;border-radius:4px;background:var(--paper);box-shadow:0 25px 45px rgba(0,0,0,.22)}
.path-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:0 0;transform:translate3d(var(--tx,0),var(--ty,0),0) scale(var(--zs,1))}
.path-screen .path-shot{opacity:0;transition:opacity .55s var(--ease)}
.path-screen .path-shot.is-active{opacity:1}
.path-mark{position:absolute;left:var(--mx,0);top:var(--my,0);width:var(--mw,0);height:var(--mh,0);border:2px solid var(--sage);border-radius:4px;box-shadow:0 0 0 4px rgba(190,209,171,.35),0 0 0 999px rgba(33,33,31,.18);opacity:var(--mo,0);pointer-events:none;transition:opacity .35s}
.path-rail{list-style:none;margin:0;padding:0 0 0 34px;position:relative;display:grid;gap:clamp(22px,3.2vh,40px)}
.path-rail::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:var(--line)}
.path-station{position:relative;display:grid;gap:8px;color:var(--muted);transition:color .4s}
.path-station b{font-family:var(--display);font-weight:430;font-size:clamp(19px,1.5vw,24px);letter-spacing:-.02em;color:var(--paper);opacity:.55;transition:opacity .4s}
.path-station p{font-size:13px;line-height:1.7;max-width:36ch}
.path-station.is-active{color:var(--paper)}
.path-station.is-active b{opacity:1}
.path-dot{position:absolute;left:-34px;top:8px;width:13px;height:13px;border-radius:50%;background:var(--stand);border:1px solid #85927a;transition:background-color .4s,border-color .4s}
.path-station.is-past .path-dot{background:var(--sage-hi);border-color:var(--sage-hi)}
.path-frame-static{display:none}

/* Выкрас-«пассажир»: настоящий №196 едет по рельсу к текущему шагу. */
.path-rail-wrap{position:relative}
.path-chip{position:absolute;left:-15px;top:0;width:42px;height:42px;margin-top:-14px;border-radius:50%;padding:3px;background:var(--sage-hi);box-shadow:0 10px 24px rgba(0,0,0,.35);transform:translate3d(0,var(--chip-y,0),0);pointer-events:none;will-change:transform}
.path-chip img{width:100%;height:100%;border-radius:50%}

/* Админка и подробности — одна пара вместо отдельной схемы. */
.engineering-layout{grid-template-columns:1.25fr 1fr;align-items:center;margin-top:clamp(64px,7vw,110px)}
.admin-shot img{width:100%;height:auto}
.engineering-side>h3{font-size:clamp(26px,2.3vw,36px)}
.engineering-side>p{margin-top:14px;color:var(--muted);font-size:14px;line-height:1.7;max-width:40ch}
.engineering-side .engineering-details{margin-top:26px;border-top:1px solid var(--line)}
.engineering-side .technology-line{justify-content:flex-start;margin-top:22px}

@media(min-width:1101px) and (prefers-reduced-motion:no-preference){
  .swatch-path.is-pinned .swatch-path-stage{height:100vh;padding-block:calc(80px + 4vh) 5vh;box-sizing:border-box}
  .swatch-path.is-pinned .path-screen{max-height:calc(100vh - 80px - 9vh);aspect-ratio:1440/1000;justify-self:start;width:min(100%,calc((100vh - 80px - 9vh) * 1.44))}
}
@media(max-width:1100px),(prefers-reduced-motion:reduce){
  .swatch-path-stage{grid-template-columns:1fr}
  .path-screen,.path-chip{display:none}
  .path-frame-static{display:block;margin-top:14px}
  .path-station{color:var(--paper)}
  .path-station b{opacity:1}
  .path-station .path-dot{background:var(--sage-hi);border-color:var(--sage-hi)}
  .path-station .path-mark{--mo:1}
}
@media(max-width:760px){
  .swatch-path-head{grid-template-columns:1fr;gap:18px}
  .path-rail{padding-left:26px}
  .path-dot{left:-26px}
  .path-rail::before{left:6px}
  .engineering-layout{grid-template-columns:1fr}
}