/* «Ваша сфера. Ваш характер.» (головна, .sp-sph; рух — studio/spheres-scene.js):
   липка сцена, ліворуч список сфер, праворуч макет змінюється шторкою знизу; клік по сфері — прокрутка до неї. */
.sp-sph{position:relative;height:480vh;background:#eeeae4;color:#20221f;font-family:Onest,system-ui,sans-serif}
.sp-sph .sp-st{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:5vw;padding:0 32px}
.sp-sph .sp-k{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#6b6862;display:flex;align-items:center;gap:12px;margin:0}
.sp-sph .sp-k::before{content:'';width:7px;height:7px;border-radius:50%;background:#ef8354}
.sp-sph h2{font-size:clamp(40px,4.8vw,78px);line-height:1;font-weight:600;letter-spacing:-.04em;margin:26px 0 0}
.sp-sph .sp-rows{margin-top:36px;border-top:1px solid #20221f22}
.sp-sph .sp-row{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:baseline;padding:11px 0;border-bottom:1px solid #20221f22;color:#a29d94;transition:color .4s;cursor:pointer}
.sp-sph .sp-row span{font-size:12px;font-variant-numeric:tabular-nums}
.sp-sph .sp-row b{font-size:clamp(22px,2.1vw,34px);font-weight:600;letter-spacing:-.03em}
.sp-sph .sp-row i{font-style:normal;font-size:18px;opacity:0;transition:opacity .3s}
.sp-sph .sp-row p{grid-column:2/4;margin:0;font-size:14px;line-height:1.55;color:#55524c;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s,opacity .5s}
.sp-sph .sp-row p strong{color:#20221f;font-weight:500}
.sp-sph .sp-row.on{color:#20221f}.sp-sph .sp-row.on span,.sp-sph .sp-row.on i{color:#ef8354;opacity:1}
.sp-sph .sp-row.on p{max-height:5em;opacity:1}
.sp-sph .sp-btn{display:inline-flex;align-items:center;gap:14px;margin-top:24px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:16px 22px;border:1px solid #20221f44;border-radius:999px;color:#20221f;text-decoration:none;transition:background .3s,color .3s}
.sp-sph .sp-btn span{color:#f15a24}.sp-sph .sp-btn:hover{background:#20221f;color:#f3f0ea}
.sp-sph .sp-view{display:block;position:relative;aspect-ratio:1678/937;overflow:hidden;background:#ddd;box-shadow:0 40px 90px #20221f40}
.sp-sph .sp-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;clip-path:inset(100% 0 0 0);transform:scale(1.08);transition:clip-path .9s cubic-bezier(.77,0,.18,1),transform 1.2s cubic-bezier(.2,.8,.2,1);will-change:clip-path,transform;backface-visibility:hidden}
.sp-sph .sp-view img.on{clip-path:inset(0);transform:none;z-index:2}
.sp-sph .sp-view img.was{clip-path:inset(0);transform:none;z-index:1}
.sp-sph .sp-vc{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;padding-top:14px;border-top:1px solid #20221f22}
.sp-sph .sp-vc b{font-size:20px;font-weight:600}.sp-sph .sp-vc span{font-size:12px;color:#6b6862;letter-spacing:.06em}
@media(max-width:900px){.sp-sph .sp-st{grid-template-columns:1fr;gap:24px;align-content:center;padding:0 20px}.sp-sph .sp-row p{display:none}.sp-sph .sp-row{padding:9px 0}.sp-sph .sp-rows{margin-top:18px}}