/* ============================================================
   CINEZED — STUDIO · ПРОСТА ВЕРСИЯ               (30.09.2026)
   ------------------------------------------------------------
   Собственикът: „махни всички анимации, искам да е user
   friendly, прост форматиран текст". Затова тук няма нито един
   преход, анимация или ефект при скрол. Само подреден текст:
   заглавие, абзаци, списък, видео, снимка и два бутона.

   Светът е този на целия сайт (css/mono.css): черно, бели букви,
   Sofia Sans / Anton за заглавията, IBM Plex Mono за текста.

   Предишните версии: css/studio.css.pre-plain.bak (със скрол
   ефекти), css/studio.css.pre-scroll.bak (снимачният лист).
   ============================================================ */

.cs{
  --sp-rule:rgba(255,255,255,.14);
  --sp-read:68ch;                       /* удобна дължина на реда */
  /* Sofia Sans Extra Condensed има и кирилица, и латиница */
  --display:'Sofia Sans Extra Condensed','Anton',Impact,'Arial Narrow',sans-serif;
  padding-top:clamp(86px,11vh,118px);
}
.cs *,.cs *::before,.cs *::after{transition:none!important;animation:none!important}
.cs a:focus-visible{outline:2px solid var(--text);outline-offset:4px}

/* ---------- РАЗДЕЛИТЕ ----------
   Всеки раздел — тънка линия отгоре и въздух около него. */
.sp-sec{
  position:relative;
  padding-top:clamp(40px,5vw,64px);
  padding-bottom:clamp(40px,5vw,64px);
}
.sp-sec + .sp-sec::before,
.sp-bgvideo + .sp-sec::before{
  content:'';position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;
  background:var(--sp-rule);
}
.sp-sec[hidden]{display:none}

/* ---------- ЗАГЛАВИЯ И ТЕКСТ ---------- */
.sp-h1,.sp-h2,.sp-h3,.sp-fin-h{
  margin:0;
  font-family:var(--display);font-weight:400;
  text-transform:uppercase;letter-spacing:.005em;
  color:var(--text);
  text-wrap:balance;
}
.sp-h1{font-size:clamp(42px,6.4vw,88px);line-height:1;max-width:16ch}
.sp-h2{font-size:clamp(32px,3.8vw,54px);line-height:1.04;margin-bottom:clamp(18px,2vw,26px)}
.sp-h3{font-size:clamp(24px,2.4vw,34px);line-height:1.1;margin:clamp(32px,4vw,48px) 0 12px}

.sp-lede,.sp-p{
  max-width:var(--sp-read);
  font-family:var(--mono);
  font-size:clamp(15px,1.15vw,17px);line-height:1.75;
  color:var(--text-2);
}
.sp-lede{margin:clamp(18px,2vw,26px) 0 clamp(26px,3vw,36px);color:var(--text)}
.sp-p{margin:0 0 14px}
.sp-p:last-child{margin-bottom:0}

/* ---------- БУТОНИТЕ — ЧЕРВЕНИ (30.09.2026, собственикът) ----------
   „Обсъди проект" и „Запитване" са плътно червени в червеното на
   сайта (#ff2b2b — чертата под менюто, лампичката REC, кантът на
   поп-ъпа). Бели букви, без заоблени ъгли, стрелка. При посочване
   светват и стрелката мръдва — веднага, без преход. */
.cs-cta{
  display:inline-flex;align-items:center;gap:12px;
  min-height:52px;
  padding:13px 24px 11px;
  font-family:var(--display);font-weight:400;
  font-size:clamp(22px,2vw,28px);letter-spacing:.03em;text-transform:uppercase;line-height:1;
  color:#fff;text-decoration:none;
  background:var(--sig-red,#ff2b2b);
  box-shadow:0 10px 30px -12px rgba(255,43,43,.65);
  -webkit-tap-highlight-color:transparent;
}
.cs-arrow{width:.9em;height:.9em;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:square;stroke-linejoin:miter}
.cs-cta:hover{background:#ff4747;color:#fff;box-shadow:0 12px 40px -10px rgba(255,43,43,.85)}
.cs-cta:hover .cs-arrow{transform:translateX(4px)}
.cs-cta:focus-visible{outline:2px solid #fff;outline-offset:4px}
.cs-cta-lg{font-size:clamp(28px,2.8vw,40px);padding:18px 34px 15px;min-height:64px}

/* ---------- ВИДЕОТО — ЗАКАЧЕНО НА ФОН (30.09.2026) ----------
   По примера на donprod.uk/archive: рамкиран кадър в средата на
   екрана, със заоблени ъгли и тъмни краища (като през леща), а
   целият текст минава отгоре. Не се мести при скрол — само леко
   „диша" (--v от js/studio.js → initBgVideo: при бърз скрол
   кадърът съвсем малко се отдръпва и притъмнява, после се връща).
   Под него е черно. Текстът е над него (z-index на разделите). */
.sp-bgvideo{
  --v:0;
  position:fixed;left:50%;top:54%;z-index:0;
  width:min(74vw,1180px);
  margin:0;pointer-events:none;
  transform:translate(-50%,-50%) scale(calc(1 - var(--v) * .035));
}
.sp-bgvideo .film-stage{
  position:relative;overflow:hidden;
  aspect-ratio:16 / 9;max-height:70vh;width:100%;
  border-radius:22px;
  background:#08080a;
  isolation:isolate;
}
.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;
  filter:brightness(calc(.62 - var(--v,0) * .12)) saturate(1.05)}
.film-empty{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#121216,#08080a)}
/* тъмните краища на лещата + тънка светла нишка по ръба */
.sp-bgvideo .film-stage::after{
  content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 110% at 50% 50%,transparent 52%,rgba(0,0,0,.72) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 0 60px rgba(0,0,0,.6);
}
/* Ъглите като визьор около видеото бяха махнати (30.09.2026,
   собственикът ги задраска). Не ги връщай. */
/* всичко с текст стои НАД видеото */
.cs > section{position:relative;z-index:1}
/* текстът върху видеото — лека сянка, за да се чете */
.sp-h1,.sp-h2,.sp-fin-h,.sp-list h3{text-shadow:0 2px 24px rgba(0,0,0,.55)}
.sp-lede,.sp-p{text-shadow:0 1px 14px rgba(0,0,0,.7)}
.sp-hero{min-height:calc(100vh - clamp(86px,11vh,118px));min-height:calc(100svh - clamp(86px,11vh,118px));
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start}

/* ---------- КАКВО СЪЗДАВАМЕ ----------
   Прост списък в две колони (на телефон — една), с линия
   между редовете. Връзките към страниците за Google не личат
   (20.09.2026): същият цвят, без подчертаване, без ръчичка. */
.sp-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);
}
.sp-list li{border-bottom:1px solid var(--sp-rule)}
.sp-list a{display:block;color:inherit;text-decoration:none;cursor:default;-webkit-tap-highlight-color:transparent}
.sp-list h3{
  margin:0;padding:14px 0;
  display:flex;align-items:center;gap:14px;
  font-family:var(--display);font-weight:400;
  font-size:clamp(22px,2vw,30px);line-height:1.15;text-transform:uppercase;
  color:var(--text);
}
.sp-list h3::before{content:'';flex:none;width:7px;height:7px;background:var(--text);opacity:.4}

/* ---------- СНИМКАТА В „ТЕХНИКАТА" ---------- */
.sp-photo{
  display:block;width:100%;height:auto;max-height:78vh;object-fit:cover;
  margin-top:clamp(28px,3.4vw,44px);
  background:#08080a;
}

/* ---------- КРАЯТ — „ТРЯБВА ТИ ВИДЕО?" (30.09.2026) ----------
   Собственикът иска повече акцент: центрирано, голямо заглавие,
   червената лампичка REC над него (както навсякъде в сайта —
   червено = камерата записва), големият червен бутон и меко
   червено сияние зад него. Без движение. */
.sp-fin{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:clamp(90px,12vw,170px);
  padding-bottom:clamp(100px,13vw,190px);
}
.sp-fin::after{
  content:'';position:absolute;left:50%;bottom:clamp(40px,6vw,90px);z-index:-1;
  width:min(760px,90vw);height:clamp(220px,26vw,360px);
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 60%,rgba(255,43,43,.22),rgba(255,43,43,0) 70%);
}
.sp-rec{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 clamp(18px,2vw,26px);
  padding:8px 14px 8px 12px;
  background:rgba(0,0,0,.72);
  box-shadow:inset 0 0 0 1px rgba(255,43,43,.45);
  font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.3em;line-height:1;
  color:#fff;
}
.sp-rec i{width:10px;height:10px;border-radius:50%;background:var(--sig-red,#ff2b2b);
  box-shadow:0 0 0 3px rgba(255,43,43,.18),0 0 18px 2px rgba(255,43,43,.6)}
.sp-fin-h{
  font-size:clamp(64px,11vw,190px);line-height:.9;letter-spacing:-.01em;
  margin-bottom:clamp(30px,3.6vw,52px);
}

/* ---------- ИЗБРАНИ ПРОЕКТИ (скрити, докато WORK е празно) ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.wk{position:relative;display:block;color:inherit;text-decoration:none}
.wk-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#08080a}
.wk.r916 .wk-media{aspect-ratio:9/16}
.wk-media video,.wk-media img{width:100%;height:100%;object-fit:cover;display:block}
.wk-cap{display:flex;justify-content:space-between;gap:12px;padding-top:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.wk-c{color:var(--text-2)}
.wk-go{display:none}

/* ---------- ТЕЛЕФОН ---------- */
@media (max-width:760px){
  .cs{padding-top:76px}
  .sp-list,.work-grid{grid-template-columns:1fr}
  .sp-list h3{padding:12px 0}
}

/* ============================================================
   ТРИТЕ ПРОЗОРЕЦА — ОБИКНОВЕНИ КАРТИ                (04.10.2026)
   ------------------------------------------------------------
   Собственикът: стъклените прозорци → нормални, без ефект при
   скрол. Три тъмни карти в ред (на телефон — една под друга),
   върху черно. Без въртележка, без стъкло, без размазване на
   видеото. Предишното: *.pre-plaincards.bak.
   ============================================================ */
.sp-glass{
  position:relative;z-index:1;
  background:#000;
  margin-top:clamp(24px,3vw,40px);
}
.sp-glass-stick{position:relative;padding:clamp(60px,8vw,110px) 0}
.sp-glass-row{
  position:relative;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,28px);
}
.sp-card{
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(28px,2.6vw,40px);
  border-radius:0;              /* остри ъгли (04.10.2026, собственикът) */
  background:#121212;
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
}
.sp-card-h{
  margin:0 0 16px;
  font-family:var(--display);font-weight:400;
  font-size:clamp(26px,2.3vw,38px);line-height:1.04;
  text-transform:uppercase;text-wrap:balance;
  color:#fff;
}
.sp-card-p{
  margin:0 0 12px;
  font-family:var(--mono);font-size:clamp(14px,1.05vw,16px);line-height:1.7;
  color:rgba(255,255,255,.8);
}
.sp-card-p:last-child{margin-bottom:0}

/* ---------- ТЕЛЕФОН ---------- */
@media (max-width:900px){
  .sp-glass-row{grid-template-columns:1fr;gap:16px;max-width:560px}
}

/* видеото на фон на телефон — по-широко и в средата */
@media (max-width:760px){
  .sp-bgvideo{width:88vw;top:53%}
  .sp-bgvideo .film-stage{border-radius:16px;aspect-ratio:4 / 5;max-height:72vh}
}
@media (prefers-reduced-motion:reduce){ .sp-bgvideo{--v:0 !important} }
/* футърът — над видеото на фон, върху черно */
#site-footer{position:relative;z-index:2;background:#000}

/* ---------- видеото на фон: плавно появяване (04.10.2026) ---------- */
.sp-bgvideo{transition:opacity .9s ease}
.sp-bgvideo.is-off{opacity:0}
@media (prefers-reduced-motion:reduce){ .sp-bgvideo{transition:none} }

/* ---------- ИЗБОР: INSTAGRAM ИЛИ ИМЕЙЛ (04.10.2026) ---------- */
.sp-choose{position:fixed;inset:0;z-index:9100;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(0,0,0,.6);opacity:0;transition:opacity .2s ease}
.sp-choose.is-on{opacity:1}
.sp-choose-card{position:relative;width:100%;max-width:400px;background:#000;color:#fff;
  border:1px solid rgba(255,255,255,.2);padding:30px 22px 22px;display:flex;flex-direction:column;gap:10px}
.sp-choose-k{margin:0 0 8px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.sp-choose-opt{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid rgba(255,255,255,.22);
  color:#fff;text-decoration:none;transition:background .15s ease,border-color .15s ease}
.sp-choose-opt:hover,.sp-choose-opt:focus-visible{background:#fff;color:#000;border-color:#fff;outline:none}
.sp-choose-opt svg{flex:0 0 24px;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6}
.sp-choose-opt svg .fill{fill:currentColor;stroke:none}
.sp-choose-opt span{display:flex;flex-direction:column;gap:3px;min-width:0}
.sp-choose-opt b{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
.sp-choose-opt i{font-style:normal;font-family:var(--mono);font-size:12px;opacity:.7;overflow-wrap:anywhere}
.sp-choose .sp-choose-x{position:absolute;top:6px;right:8px;width:36px;height:36px;border:0;background:none;box-shadow:none;
  color:#fff;font-size:26px;line-height:1;cursor:pointer;opacity:.75;padding:0}
.sp-choose .sp-choose-x:hover{opacity:1}