/* H09 · сцена «Кабінети — вітрина з лінзою». Усі селектори з префіксом .scn-cab.
   Без JS: усі три кабінети одним під одним, у кожному — стартовий стан. З JS (.is-js): перемикач ролей.
   Рух (.is-motion) вмикає scene.js лише без prefers-reduced-motion. */
.scn-cab{
  --scn-ink:#17231e;--scn-muted:#5f5f68;--scn-line:#dddcd1;--scn-paper:#f5f2e9;--scn-card:#fffdf8;
  --scn-green:#006e46;--scn-ring:#006e46;--scn-chalk:#2b3a32;--scn-screen:#efe9e1;
  --scn-ease:cubic-bezier(.16,1,.3,1);--scn-draw:cubic-bezier(.65,0,.35,1);
  --scn-stage-h:600px;
}
.scn-cab .scn-cab-tabs{display:flex;justify-content:center;gap:6px;width:max-content;margin:0 auto 40px;padding:5px;border:1px solid var(--scn-line);border-radius:999px;background:var(--scn-card)}
.scn-cab .scn-cab-tabs button{min-height:44px;padding:10px 26px;border-radius:999px;background:transparent;font:600 15px/1.2 var(--sans);color:var(--scn-muted)}
.scn-cab .scn-cab-tabs button:hover{color:var(--scn-ink)}
.scn-cab .scn-cab-tabs button[aria-selected="true"]{background:var(--scn-green);color:#fff}
.scn-cab:not(.is-js) .scn-cab-tabs{display:none}

/* роль */
.scn-cab .scn-cab-role[hidden]{display:none}
.scn-cab.is-js .scn-cab-role{min-height:var(--scn-role-h,0)}
.scn-cab .scn-cab-role-h{font-size:28px;margin:0 0 20px}
.scn-cab.is-js .scn-cab-role-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.scn-cab:not(.is-js) .scn-cab-role+.scn-cab-role{margin-top:64px;padding-top:48px;border-top:1px solid var(--scn-line)}
.scn-cab .scn-cab-grid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:56px;align-items:start}

/* сцена */
.scn-cab .scn-cab-stage{position:relative;height:var(--scn-stage-h)}
.scn-cab .scn-cab-frame{position:absolute;display:block;color:inherit;cursor:zoom-in}
.scn-cab .scn-cab-frame--desk{left:0;top:0;width:680px;background:#fff;border:1px solid var(--scn-line);border-radius:12px;overflow:hidden;box-shadow:0 24px 48px -28px #40341c55,0 2px 6px #40341c12}
.scn-cab .scn-cab-bar{display:flex;gap:6px;align-items:center;height:28px;padding:0 14px;background:#f1eee5;border-bottom:1px solid var(--scn-line)}
.scn-cab .scn-cab-bar i{width:9px;height:9px;border-radius:50%;background:#d6d2c4}
.scn-cab .scn-cab-frame--phone{left:36px;top:0;width:272px;padding:11px;border-radius:46px;background:#1e2622;box-shadow:0 44px 80px -36px #1e262288,0 2px 6px #1e262226}
.scn-cab .scn-cab-island{position:absolute;left:50%;top:21px;width:80px;height:22px;margin-left:-40px;border-radius:999px;background:#0b0f0d;z-index:3}
.scn-cab .scn-cab-cam{position:relative;display:block;overflow:hidden;aspect-ratio:1.6;background:var(--scn-screen)}
.scn-cab .scn-cab-frame--phone>.scn-cab-cam{aspect-ratio:390/844;border-radius:36px}
.scn-cab .scn-cab-cam img{position:absolute;left:var(--ix,0);top:var(--iy,0);width:var(--iw,100%);height:auto;max-width:none;opacity:0;visibility:hidden}
.scn-cab .scn-cab-cam img.is-on{opacity:1;visibility:visible}
.scn-cab .scn-cab-ring{position:absolute;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);border-radius:8px;opacity:0;pointer-events:none;box-shadow:0 0 0 2px var(--scn-ring),0 0 0 7px #006e4622;z-index:2}
.scn-cab .scn-cab-ring.is-on{opacity:1}
.scn-cab .scn-cab-stub{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;background:repeating-linear-gradient(135deg,#efe9e1 0 14px,#ebe4da 14px 28px)}
.scn-cab .scn-cab-stub.is-on{display:flex}
.scn-cab .scn-cab-stub b{font:600 18px/1.3 var(--sans);color:var(--scn-ink)}
.scn-cab .scn-cab-stub small{font:600 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--scn-muted)}
.scn-cab .scn-cab-frame.is-stub{cursor:default}
.scn-cab .scn-cab-hint{position:absolute;right:14px;bottom:14px;padding:6px 12px;border-radius:999px;background:#17231ecc;color:#fff;font:600 12px/1.2 var(--sans);letter-spacing:.04em;opacity:0;transform:translateY(4px);pointer-events:none;z-index:3}
.scn-cab .scn-cab-frame--phone .scn-cab-hint{right:auto;left:50%;bottom:34px;transform:translate(-50%,4px)}
.scn-cab .scn-cab-frame:hover .scn-cab-hint,.scn-cab .scn-cab-frame:focus-visible .scn-cab-hint{opacity:1;transform:none}
.scn-cab .scn-cab-frame--phone:hover .scn-cab-hint,.scn-cab .scn-cab-frame--phone:focus-visible .scn-cab-hint{transform:translate(-50%,0)}
.scn-cab .scn-cab-frame.is-stub .scn-cab-hint{display:none}
.scn-cab .scn-cab-frame:focus-visible{outline:3px solid var(--scn-green);outline-offset:4px}

/* лінза */
.scn-cab .scn-cab-lens{position:absolute;margin:0;display:none;width:var(--lw,400px);background:#fff;border-radius:12px;overflow:hidden;z-index:4;box-shadow:0 0 0 2px var(--scn-ring),0 30px 60px -24px #1e262266,0 2px 6px #1e26221a}
.scn-cab .scn-cab-lens.is-on{display:block}
.scn-cab .scn-cab-lens .scn-cab-cam{aspect-ratio:var(--ar);background:#fff}
.scn-cab .scn-cab-lens img{opacity:1;visibility:visible}
.scn-cab-role--desk .scn-cab-lens{right:0;top:300px}
.scn-cab .scn-cab-lens--t1{--lw:500px}
.scn-cab .scn-cab-lens--t2{--lw:440px}
.scn-cab .scn-cab-lens--t3{--lw:350px;top:270px}
.scn-cab-role--phone .scn-cab-lens{left:350px;top:190px;--lw:400px}
.scn-cab .scn-cab-lens--p2{top:170px;--lw:380px}
.scn-cab .scn-cab-lens--s3{--lw:380px}

/* крейда */
.scn-cab .scn-cab-chalk{position:absolute;display:none;align-items:flex-end;gap:6px;margin:0;color:var(--scn-chalk);pointer-events:none;z-index:5;white-space:nowrap}
.scn-cab .scn-cab-chalk.is-on{display:flex}
.scn-cab .scn-cab-chalk span{font:italic 22px/1.3 Georgia,'Times New Roman',serif;letter-spacing:-.01em}
.scn-cab .scn-cab-chalk svg{flex:none;overflow:visible}
.scn-cab .scn-cab-chalk path{fill:none;stroke:var(--scn-chalk);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.scn-cab-role--desk .scn-cab-chalk{left:20px;top:486px}
.scn-cab .scn-cab-chalk--t3{top:500px}
.scn-cab-role--phone .scn-cab-chalk{left:372px;top:70px;flex-direction:column;align-items:flex-start}
.scn-cab-role--phone .scn-cab-chalk svg{margin-left:24px}
.scn-cab-role--phone .scn-cab-chalk--stub{top:250px}
.scn-cab .scn-cab-chalk--p2{top:52px}

/* рейка */
.scn-cab .scn-cab-rail{display:flex;flex-direction:column;gap:14px}
.scn-cab .scn-cab-module{display:inline-block;align-self:flex-start;margin:0;padding:6px 12px;border-radius:999px;background:#e5eee6;color:var(--scn-green);font:600 13px/1.4 var(--sans)}
.scn-cab .scn-cab-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.scn-cab .scn-cab-item{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:start;padding:7px 8px;border:1px solid transparent;border-radius:12px;color:inherit;text-decoration:none}
.scn-cab .scn-cab-item:hover{background:var(--scn-card);border-color:var(--scn-line)}
.scn-cab .scn-cab-item.is-on{background:var(--scn-card);border-color:var(--scn-green);box-shadow:0 0 0 3px #006e461f}
.scn-cab .scn-cab-item:focus-visible{outline:3px solid var(--scn-green);outline-offset:2px}
.scn-cab .scn-cab-thumb{position:relative;display:block;width:72px;aspect-ratio:1.6;overflow:hidden;border-radius:7px;border:1px solid var(--scn-line);background:#fff}
.scn-cab .scn-cab-thumb img{position:absolute;left:var(--ix);top:var(--iy);width:var(--iw);max-width:none;height:auto}
.scn-cab .scn-cab-thumb--stub{background:repeating-linear-gradient(135deg,#efe9e1 0 6px,#e6dfd3 6px 12px)}
.scn-cab .scn-cab-it{display:block;min-width:0}
.scn-cab .scn-cab-it b{display:block;font:600 15px/1.35 var(--sans)}
.scn-cab .scn-cab-it small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--scn-muted)}
.scn-cab .scn-cab-it small.scn-cab-extra{margin-top:4px;color:var(--scn-green)}
.scn-cab .scn-cab-thread{align-self:flex-start;font:650 14px/1.4 var(--sans);color:var(--scn-green);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;padding:6px 0}
.scn-cab .scn-cab-thread:focus-visible{outline:3px solid var(--scn-green);outline-offset:3px;border-radius:4px}
.scn-cab .scn-cab-fine{margin:36px 0 0}

/* лайтбокс */
.scn-cab-lb{width:min(1320px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:12px;background:#fff;color:#17231e;overflow:hidden}
.scn-cab-lb[open]{display:flex;flex-direction:column}
.scn-cab-lb::backdrop{background:#17231eb8}
.scn-cab-lb .scn-cab-lb-head{display:flex;align-items:center;gap:16px;padding:12px 16px 12px 20px;border-bottom:1px solid #dddcd1}
.scn-cab-lb .scn-cab-lb-cap{flex:1;margin:0;font:600 15px/1.45 var(--sans)}
.scn-cab-lb .scn-cab-lb-x{flex:none;width:44px;height:44px;border-radius:50%;background:#efe9e1;font:400 26px/44px var(--sans);text-align:center;padding:0}
.scn-cab-lb .scn-cab-lb-x:focus-visible{outline:3px solid #006e46;outline-offset:2px}
.scn-cab-lb .scn-cab-lb-scroll{overflow:auto;background:#efe9e1;min-height:0}
.scn-cab-lb .scn-cab-lb-img{display:block;width:100%;height:auto;max-width:none;margin:0 auto}
.scn-cab-lb.is-phone .scn-cab-lb-img{width:min(390px,100%);margin:16px auto}

/* рух */
.scn-cab.is-motion .scn-cab-cam img{transition:opacity .4s var(--scn-ease),visibility 0s linear .4s}
.scn-cab.is-motion .scn-cab-cam img.is-on{transition-delay:0s}
.scn-cab.is-motion .scn-cab-ring.is-on{animation:scnCabFade .4s var(--scn-ease) .2s both}
.scn-cab.is-motion .scn-cab-lens.is-on{animation:scnCabLens .5s var(--scn-ease) .12s both}
.scn-cab.is-motion .scn-cab-chalk.is-on span{animation:scnCabFade .4s var(--scn-ease) .3s both}
.scn-cab.is-motion .scn-cab-chalk.is-on path{stroke-dasharray:120;stroke-dashoffset:120;animation:scnCabDraw .6s var(--scn-draw) .45s forwards}
.scn-cab.is-motion .scn-cab-chalk.is-on path.h{animation-delay:.95s;animation-duration:.25s}
.scn-cab.is-motion .scn-cab-item,.scn-cab.is-motion .scn-cab-tabs button{transition:background .25s,border-color .25s,box-shadow .25s,color .25s}
.scn-cab.is-motion .scn-cab-hint{transition:opacity .25s,transform .25s}
@keyframes scnCabFade{from{opacity:0}to{opacity:1}}
@keyframes scnCabLens{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes scnCabDraw{to{stroke-dashoffset:0}}

/* планшет */
@media (max-width:1150px){
  .scn-cab .scn-cab-grid{grid-template-columns:minmax(0,1fr)}
  .scn-cab .scn-cab-stage{max-width:760px;width:100%;margin:0 auto}
  .scn-cab .scn-cab-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* телефон */
@media (max-width:700px){
  .scn-cab-role--desk{--scn-stage-h:440px}
  .scn-cab-role--phone{--scn-stage-h:420px}
  .scn-cab .scn-cab-tabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin-bottom:24px}
  .scn-cab .scn-cab-tabs button{padding:10px 8px;font-size:14px}
  .scn-cab .scn-cab-grid{gap:20px}
  .scn-cab .scn-cab-frame--desk{width:100%}
  .scn-cab-role--desk .scn-cab-lens{top:200px;right:0}
  .scn-cab .scn-cab-lens--t1,.scn-cab .scn-cab-lens--t2{--lw:88%}
  .scn-cab .scn-cab-lens--t3{--lw:74%;top:180px}
  .scn-cab-role--desk .scn-cab-chalk{left:0;top:316px;flex-direction:column-reverse;align-items:flex-start}
  .scn-cab-role--desk .scn-cab-chalk svg{transform:rotate(-70deg);margin-left:150px;width:44px;height:28px}
  .scn-cab .scn-cab-chalk--t3{top:372px}
  .scn-cab .scn-cab-chalk span{font-size:18px}
  .scn-cab .scn-cab-frame--phone{left:0;width:196px;padding:8px;border-radius:34px}
  .scn-cab .scn-cab-frame--phone>.scn-cab-cam{border-radius:27px}
  .scn-cab .scn-cab-island{top:15px;width:58px;height:16px;margin-left:-29px}
  .scn-cab-role--phone .scn-cab-lens,.scn-cab .scn-cab-lens--p2,.scn-cab .scn-cab-lens--s3{left:auto;right:0;top:150px;--lw:66%}
  .scn-cab .scn-cab-lens--p2{top:126px;--lw:58%}
  .scn-cab .scn-cab-lens--s3{--lw:60%}
  .scn-cab-role--phone .scn-cab-chalk,.scn-cab .scn-cab-chalk--p2{left:208px;top:6px;white-space:normal;width:calc(100% - 208px)}
  .scn-cab-role--phone .scn-cab-chalk svg{margin-left:30px;width:32px;height:44px}
  .scn-cab .scn-cab-list{grid-template-columns:minmax(0,1fr)}
  .scn-cab .scn-cab-item{grid-template-columns:64px minmax(0,1fr);gap:12px}
  .scn-cab .scn-cab-thumb{width:64px}
  .scn-cab .scn-cab-fine{margin-top:24px}
  .scn-cab-lb{width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
}
@media (prefers-reduced-motion:reduce){
  .scn-cab *{animation:none!important;transition:none!important}
}