/* ═══════════════════════════════════════════════════════════════════════════
   КОМПОНЕНТИТЕ, избрани от пробата в /komponenti.

   ЕДНА ГАЛЕРИЯ, ДВЕ ПОВЕДЕНИЯ. На широк екран портфолиото е ковърфлоу, на
   телефон - ветрило. Един и същи HTML: JavaScript-ът гледа ширината и връзва
   съответното поведение. Две отделни разметки биха се разминали още първата
   седмица.

   Оригиналите са React с Tailwind и framer-motion. Тук е взето поведението,
   не кодът - сайтът е статичен и няма да внасяме верига от пакети заради
   галерия.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────── КОВЪРФЛОУ (десктоп) ────────────────────── */
.кф{--карта:clamp(230px,26vw,380px);margin-top:var(--s4)}
.кф-рамка{overflow:hidden;padding:2.2rem 0 1rem;outline:none;cursor:grab;
  perspective:calc(var(--карта) * 3);touch-action:pan-y}
.кф-рамка:active{cursor:grabbing}
.кф-рамка:focus-visible{outline:3px solid var(--neon);outline-offset:4px}
.кф-сцена{position:relative;height:calc(var(--карта) * .625);
  transform-style:preserve-3d}
.кф-карта{position:absolute;left:50%;top:0;width:var(--карта);aspect-ratio:16/10;
  border-radius:16px;overflow:hidden;background:var(--paper);
  border:1px solid var(--hair);
  box-shadow:0 22px 44px rgba(11,21,36,.22);will-change:transform}
.кф-карта img{width:100%;height:100%;object-fit:cover;object-position:top;
  display:block;user-select:none;-webkit-user-drag:none}
.кф-упр{display:flex;justify-content:center;align-items:center;gap:.7rem;
  margin-top:.4rem}
.кф-точки{display:flex;gap:.45rem}
.кф-точка{width:6px;height:6px;border-radius:50%;background:var(--ink);border:0;
  opacity:.2;cursor:pointer;padding:0;
  transition:opacity .2s,background .2s,transform .2s}
.кф-точка[aria-current="true"]{opacity:1;background:var(--neon);
  transform:scale(1.25)}
/* Бели кръгчета с тъмносиня стрелка. Стрелката е обвод, не запълнена форма -
   така центърът ѝ съвпада с центъра на кръга. Запълнените стрелки имат тежест
   вляво и винаги изглеждат изместени. */
.кф-бут{background:var(--paper);border:1px solid var(--hair);border-radius:999px;
  width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  color:var(--ink);padding:0;
  transition:border-color .16s,transform .16s,box-shadow .16s}
.кф-бут:hover{border-color:var(--ink);transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(11,21,36,.16)}
.кф-бут svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;display:block}

/* ─────────────────────────────── ВЕТРИЛО (телефон) ──────────────────────── */
/* Картите са колкото позволява екранът - Ник ги иска максимално едри. Ширината
   е 92% от екрана минус нищо: ветрилото не се нуждае от полета, защото
   разместването навън се поема от překриващите се карти. */
.вт{position:relative;height:calc(80vw * .625 + 74px);touch-action:pan-y;
  cursor:grab;user-select:none;margin-top:var(--s4);overflow-x:clip}
.вт-обвивка{margin-top:0;overflow-x:clip}
.вт:active{cursor:grabbing}
/* Само долна сянка: отрицателното разпръскване я прибира отстрани, така че
   купчината не се размазва настрани, а само ляга върху фона. */
.вт-к{position:absolute;left:50%;top:50%;margin:0;
  width:min(80vw,440px);aspect-ratio:16/10;border-radius:16px;overflow:hidden;
  border:1px solid var(--hair);background:var(--paper);
  box-shadow:0 18px 22px -14px rgba(11,21,36,.55);will-change:transform;
  transition:transform .44s cubic-bezier(.2,.8,.25,1),opacity .44s}
.вт-к img{width:100%;height:100%;object-fit:cover;object-position:top;
  display:block;-webkit-user-drag:none}
/* Върху тъмен панел отзивите нямат снимка, а текст - затова свой вид. */
.вт-к.текст{aspect-ratio:auto;min-height:min(52vw,280px);padding:1.3rem 1.4rem;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s3)}
.вт-к.текст blockquote{margin:0;font-size:.97rem;line-height:1.5;color:var(--ink)}
.вт-к.текст blockquote::before{content:"";display:block;width:26px;height:5px;
  background:var(--neon);border-radius:3px;margin-bottom:.9rem}
.вт-к.текст figcaption b{display:block;font-size:.88rem;letter-spacing:-.01em}
.вт-к.текст figcaption span{display:block;color:var(--muted);font-size:.8rem;
  margin-top:.15rem}
.вт-долу{display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin-top:.9rem;color:var(--muted);font-size:.78rem;font-weight:700}
/* Отзивите нямат сянка: върху светъл фон купчината текстови карти изглежда
   мръсна, а при снимките сянката е това, което ги отделя. */
.вт-к.текст{box-shadow:0 18px 22px -14px rgba(11,21,36,.4)}
.вт-долу .бр{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.вт-к{transition:none}}

/* ─────────────────────────────── ХАРМОНИКА ──────────────────────────────── */
.чзв{max-width:660px;margin-top:var(--s4)}
.хм-ред{background:var(--paper);overflow:hidden;border:1px solid var(--hair);
  transition:border-radius .42s,margin-top .42s cubic-bezier(.3,1.4,.5,1)}
.хм-ред + .хм-ред{margin-top:-1px}
.хм-ред.отделен{margin-top:12px}
.хм-ред:first-child,.хм-ред.начало{border-top-left-radius:22px;
  border-top-right-radius:22px}
.хм-ред:last-child,.хм-ред.край{border-bottom-left-radius:22px;
  border-bottom-right-radius:22px}
.хм-бут{display:flex;width:100%;min-height:56px;align-items:center;gap:1rem;
  padding:.9rem 1.2rem;background:none;border:0;text-align:left;cursor:pointer;
  font:inherit;color:var(--ink)}
.хм-бут .т{flex:1 1 auto;font-size:.97rem;font-weight:700;letter-spacing:-.01em}
.хм-бут .ш{flex:none;width:24px;height:24px;display:grid;place-items:center;
  color:var(--muted);transition:transform .44s cubic-bezier(.3,1.5,.5,1)}
.хм-ред[data-отворен="1"] .хм-бут .ш{transform:rotate(180deg)}
.хм-бут .ш svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2}
.хм-тяло{height:0;overflow:hidden;
  transition:height .52s cubic-bezier(.3,1.35,.45,1)}
.хм-вътре{padding:0 1.2rem 1.2rem;color:var(--muted);font-size:.94rem;
  line-height:1.6}
.хм-вътре b{color:var(--ink)}
@media(prefers-reduced-motion:reduce){
  .хм-тяло,.хм-бут .ш,.хм-ред{transition:none}}

/* ─────────────────────────── „КОЙ ПИТА": карти в мрежа ──────────────────── */
/* Трите снимки са квадрати със заоблени ъгли, леко завъртени, а зад тях диша
   същата мрежа от точки, която е в „За кого е". Картите са HTML, мрежата е
   платно: снимките остават резки и реагират на посочване, а фонът е евтин. */
.сцена-кп{position:relative;width:100%;max-width:560px;aspect-ratio:1.25;
  margin-inline:auto}
.сцена-кп canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.сцена-кп .лице{position:absolute;left:var(--x);top:var(--y);width:var(--s);
  margin:0;transform:translate(-50%,-50%) rotate(var(--r,0deg));z-index:2;
  transition:transform .3s cubic-bezier(.3,1.1,.4,1)}
.сцена-кп .лице:hover{transform:translate(-50%,-50%) rotate(0deg) scale(1.05);
  z-index:4}
/* height:auto е задължително: атрибутът height="400" се прилага като стил с
   ниска тежест и бие aspect-ratio, ако не бъде изместен изрично. */
.сцена-кп .лице img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:20px;display:block;background:var(--hair);
  border:1px solid var(--hair);
  box-shadow:0 16px 32px -14px rgba(11,21,36,.5)}
.сцена-кп .лице figcaption{text-align:center;font-size:.7rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;margin-top:.5rem;color:var(--ink)}
.сцена-кп .лице figcaption small{display:block;font-weight:700;font-size:.66rem;
  letter-spacing:.04em;text-transform:none;color:var(--neon-txt);margin-top:.1rem}
/* На тесен телефон сцената става по-квадратна, за да не станат картите ситни. */
@media(max-width:640px){.сцена-кп{aspect-ratio:1.02;max-width:100%}}
@media(prefers-reduced-motion:reduce){.сцена-кп .лице{transition:none}}

/* ─────────────── „За кого е": живата мрежа ──────────────────────────────── */
.зк-кутия{display:grid;gap:var(--s4);align-items:center;margin-top:var(--s4)}
@media(min-width:900px){.зк-кутия{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:var(--s5)}}
.мрежа{position:relative;width:100%;aspect-ratio:1.15;max-width:560px;
  margin-inline:auto}
.мрежа canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Хапчетата са истински HTML, за да се чете текстът и да реагира на посочване.
   Позицията и мащабът се задават всеки кадър от JavaScript. */
.хап{position:absolute;left:0;top:0;white-space:nowrap;font-weight:700;
  letter-spacing:-.01em;line-height:1.2;background:var(--paper);
  border:1px solid var(--hair);border-radius:999px;padding:.4rem .78rem;
  color:var(--ink-2);font-size:.78rem;transform-origin:center;
  will-change:transform;box-shadow:0 6px 16px -10px rgba(11,21,36,.5);
  transition:border-color .2s,box-shadow .2s,color .2s}
.хап:hover{border-color:var(--neon);color:var(--ink);
  box-shadow:0 0 0 3px rgba(62,193,243,.18),0 10px 22px -12px rgba(11,21,36,.5)}
/* Централното: бяло с неонов кант. */
/* Централното хапче е <a>, а не <span>: подчертаването и наследеният цвят на
   връзка се махат, за да изглежда точно както преди. */
.хап.зов{text-decoration:none;background:var(--paper);color:var(--ink);
  border:2px solid var(--neon);
  font-weight:900;letter-spacing:.06em;padding:.62rem 1.1rem;font-size:.95rem;
  box-shadow:0 0 0 4px rgba(62,193,243,.16),0 12px 26px -10px rgba(11,21,36,.4);
  z-index:5;pointer-events:auto;cursor:pointer}
@media(hover:hover){.хап.зов:hover{box-shadow:0 0 0 6px rgba(62,193,243,.24),
  0 14px 30px -10px rgba(11,21,36,.45)}}
.хап.зов:focus-visible{outline:3px solid var(--neon);outline-offset:3px}
@media(max-width:760px){
  .хап{font-size:.68rem;padding:.32rem .6rem}
  .хап.зов{font-size:.82rem;padding:.5rem .9rem}
}