/* Ветка «Сайты: кейсы на весь экран». Каждый кейс — свой первый экран в палитре клиента,
   следующий наезжает на предыдущий при прокрутке. Остальные блоки — из sites.css. */
.sc-case{position:sticky;top:0;min-height:calc(100vh - 2 * var(--st-inset,12px));border-radius:28px;overflow:hidden;
  display:grid;align-items:center;padding:112px var(--st-px,80px) 72px;box-sizing:border-box;
  --c-bg:#0b0b0c;--c-ink:#f4f4f2;--c-mute:rgba(244,244,242,.62);--c-line:rgba(244,244,242,.16);--c-acc:#1b6df5;
  background:var(--c-bg);color:var(--c-ink);box-shadow:0 -24px 48px rgba(0,0,0,.18)}
.sc-case:first-child{box-shadow:none}
.sc-case__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center;max-width:1280px;margin:0 auto;width:100%}
.sc-case__text{display:grid;gap:24px;align-content:center}
.sc-case__meta{display:flex;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--c-line);
  font:400 12px/1.3 var(--st-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--c-mute)}
.sc-case__h{font:600 clamp(56px,7vw,104px)/.92 Inter,sans-serif;letter-spacing:-.05em;margin:0}
.sc-case__body{display:grid;gap:12px;max-width:520px}
.sc-case__body p{margin:0;font:400 18px/1.55 Inter,sans-serif;color:var(--c-mute)}
.sc-case__body p:first-child{color:var(--c-ink);font-weight:500}
.sc-case__facts{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.sc-case__facts li{padding:8px 14px;border:1px solid var(--c-line);border-radius:100px;font:500 14px/1.2 Inter,sans-serif}
.sc-case__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.sc-case .st-chipbtn--blue{background:var(--c-acc)}
.sc-case .st-chipbtn--line{border-color:var(--c-line);color:var(--c-ink)}
.sc-case .st-chipbtn--line .st-chipbtn__chip{background:var(--c-ink);color:var(--c-bg)}
.sc-case .st-h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sc-case__vis{display:grid;place-items:center;min-width:0}

/* 1 · Ария Степи: шоколад, бумага, золото — из брендбука клиента */
.sc-case--ariya{--c-bg:#2a1f1a;--c-ink:#f1e8d8;--c-mute:rgba(241,232,216,.66);--c-line:rgba(241,232,216,.18);--c-acc:#b8894b}
.sc-case--ariya .st-chipbtn--blue{color:#2a1f1a}
.sc-case--ariya .st-chipbtn--blue .st-chipbtn__chip{background:#2a1f1a;color:#f1e8d8}
.sc-bb{margin:0;display:grid;gap:14px;justify-items:center}
.sc-bb__screen{position:relative;width:min(380px,30vw);aspect-ratio:540/960;max-height:calc(100vh - 220px);border-radius:20px;overflow:hidden;
  border:10px solid #17110e;box-shadow:0 0 0 1px rgba(241,232,216,.12),0 40px 80px rgba(0,0,0,.45);background:#2a1f1a}
.sc-bb__poster,.sc-bb__live{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.sc-bb__poster{object-fit:cover}
.sc-bb__live{pointer-events:none;opacity:0;transition:opacity .6s ease}
.sc-bb__live.is-on{opacity:1}
.sc-bb__cap{display:flex;align-items:center;gap:10px;font:400 12px/1 var(--st-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--c-mute)}
.sc-bb__cap i{width:8px;height:8px;border-radius:50%;background:#d9a75a}

/* 2 · AIVA: небо и зелёный застройщика */
.sc-case--aiva{--c-bg:#e3eef6;--c-ink:#0f1a14;--c-mute:rgba(15,26,20,.64);--c-line:rgba(15,26,20,.14);--c-acc:#2d5a27}
.sc-case--aiva .sc-case__in{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.sc-browser{margin:0;width:100%;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(15,26,20,.08),0 32px 64px rgba(30,60,90,.18)}
.sc-browser__bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#f4f7f9;border-bottom:1px solid rgba(15,26,20,.08)}
.sc-browser__bar i{width:10px;height:10px;border-radius:50%;background:rgba(15,26,20,.16)}
.sc-browser__bar span{margin-left:12px;font:400 12px/1 var(--st-mono);color:rgba(15,26,20,.5)}
.sc-browser img{display:block;width:100%;height:auto}

/* 3 · KAGE: ночь омакасе-бара */
.sc-case--kage{--c-bg:#0b0b0c}
/* 4 · Liora: светлая студия */
.sc-case--liora{--c-bg:#f4f0eb;--c-ink:#1d1a17;--c-mute:rgba(29,26,23,.64);--c-line:rgba(29,26,23,.14)}
.sc-case--liora .sc-case__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

.sc-phones{display:flex;gap:16px;align-items:flex-end;justify-content:center}
.sc-phone{margin:0;display:grid;gap:10px;justify-items:center;width:min(200px,15vw)}
.sc-phone:nth-child(2){transform:translateY(-32px)}
.sc-phone:nth-child(3){transform:translateY(-64px)}
.sc-phone img{display:block;width:100%;height:auto;aspect-ratio:440/952;object-fit:cover;object-position:top;border-radius:24px;
  border:5px solid #1c1c1f;box-shadow:0 24px 48px rgba(0,0,0,.35)}
.sc-case--liora .sc-phone img{border-color:#fff;box-shadow:0 24px 48px rgba(60,40,20,.16)}
.sc-phone figcaption{font:400 11px/1 var(--st-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--c-mute)}
.sc-phones--two .sc-phone{width:min(230px,17vw)}

/* появление: текст и визуал поднимаются, когда кейс выходит на экран */
@media (prefers-reduced-motion:no-preference){
  .sc-case .sc-case__text>*,.sc-case .sc-case__vis{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
  .sc-case.is-in .sc-case__text>*,.sc-case.is-in .sc-case__vis{opacity:1;transform:none}
  .sc-case.is-in .sc-case__text>:nth-child(2){transition-delay:.06s}
  .sc-case.is-in .sc-case__text>:nth-child(3){transition-delay:.12s}
  .sc-case.is-in .sc-case__text>:nth-child(4){transition-delay:.18s}
  .sc-case.is-in .sc-case__text>:nth-child(5){transition-delay:.24s}
  .sc-case.is-in .sc-case__vis{transition-delay:.15s}
}

@media (max-width:1180px){
  .sc-case__in{gap:40px}
  .sc-phone{width:min(170px,20vw)}
}
@media (max-width:760px){
  .sc-case{position:relative;top:auto;min-height:0;padding:96px 20px 32px;border-radius:22px;box-shadow:none}
  .sc-case__in,.sc-case--aiva .sc-case__in,.sc-case--liora .sc-case__in{grid-template-columns:1fr;gap:28px}
  .sc-case--aiva .sc-case__vis,.sc-case--liora .sc-case__vis{order:0}
  .sc-case+.sc-case{padding-top:32px}
  .sc-case__h{font-size:52px}
  .sc-case__body p{font-size:16px}
  .sc-bb__screen{width:min(300px,80vw);max-height:none}
  .sc-phone,.sc-phones--two .sc-phone{width:30vw}
  .sc-phones--two .sc-phone{width:40vw}
  .sc-phone:nth-child(2){transform:translateY(-16px)}
  .sc-phone:nth-child(3){transform:translateY(-32px)}
  .sc-case__btns{display:grid}
}

/* светлая тема: кейсы держат палитры клиентов, меняется только холст */
.sc-stack{display:grid;gap:var(--st-inset,12px)}

/* ── «сайт в сайте» (06.11): живые окна в рамках ── */
.sc-live{position:relative;width:100%;overflow:hidden;background:#0b0b0c}
.sc-live iframe{position:absolute;border:0;transform-origin:0 0;transform:scale(var(--s,1));opacity:0;transition:opacity .5s ease}
.sc-live.is-on iframe{opacity:1}
.sc-live--still iframe{pointer-events:none}
.sc-live__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.sc-cap{display:flex;align-items:center;gap:10px;font:400 12px/1 var(--st-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--c-mute)}
.sc-cap i{width:8px;height:8px;border-radius:50%;background:var(--c-acc)}
.sc-cap--in{padding:10px 14px;background:#f4f7f9;border-top:1px solid rgba(15,26,20,.08);color:rgba(15,26,20,.5)}

.sc-ariya{display:flex;align-items:flex-end;justify-content:center;gap:28px}
.sc-bb__screen{width:min(300px,22vw);aspect-ratio:auto;max-height:none;border-width:8px}
.sc-bb__screen .sc-live{background:#2a1f1a}

.sc-dev{margin:0;display:grid;gap:12px;justify-items:center}
.sc-dev__screen{width:min(240px,17vw);border-radius:34px;padding:8px;background:#141416;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 32px 64px rgba(0,0,0,.4)}
.sc-dev__screen .sc-live{border-radius:26px}
.sc-dev--big .sc-dev__screen{width:min(300px,22vw)}
.sc-case--ariya .sc-dev__screen{background:#17110e}
.sc-case--liora .sc-dev__screen{background:#fff;box-shadow:0 0 0 1px rgba(29,26,23,.08),0 32px 64px rgba(60,40,20,.16)}
.sc-browser .sc-live{background:#e3eef6}

@media (max-width:760px){
  .sc-ariya{gap:14px}
  .sc-bb__screen{width:42vw}
  .sc-dev__screen{width:42vw}
  .sc-dev--big .sc-dev__screen{width:min(300px,72vw)}
}

/* фон «Ария Степи»: фигуры игры падают за текстом */
.sc-fall{position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,rgba(0,0,0,.35),#000 55%);mask:linear-gradient(90deg,rgba(0,0,0,.35),#000 55%)}
.sc-case__in{position:relative;z-index:1}