/* ═══════════════════════════════════════════════════════════════════════════
   КОМПОНЕНТИТЕ, избрани от пробата в /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(--ink);border:0;border-radius:999px;
  width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  color:var(--deep-txt);padding:0;
  transition:background .16s,transform .16s,box-shadow .16s}
.кф-бут:hover{background:var(--ink-2);transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(11,21,36,.22)}
.кф-бут 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}}

/* ─────────────────── КОПЧЕ С РАЗГЪВАЩА СЕ СТРЕЛКА ───────────────────────── */
/* Поведението е като в оригинала: при посочване цветът се разстила по цялото
   копче, стрелките изтичат една след друга, а надписът се скрива под тях.

   ХОВЪРЪТ Е САМО ЗА МИШКА. С пръст няма посочване, а браузърите оставят
   :hover залепен след докосване - копчето оставаше разгънато и надписът
   изчезнал. Затова целият разгъващ се блок е зад (hover:hover).           */
.стрелк{position:relative;display:inline-flex;align-items:center;
  height:62px;max-width:100%;
  border:0;border-radius:20px;background:var(--ink);color:var(--deep-txt);
  padding:6px;cursor:pointer;font:inherit;text-decoration:none;user-select:none;
  overflow:hidden;-webkit-tap-highlight-color:transparent;
  box-shadow:0 6px 18px rgba(11,21,36,.18);
  transition:transform .3s cubic-bezier(.2,.9,.3,1),
             box-shadow .3s cubic-bezier(.2,.9,.3,1)}
.стрелк .акцент{position:absolute;top:6px;bottom:6px;left:6px;width:50px;
  border-radius:15px;background:var(--neon);color:var(--on-neon);z-index:1;
  overflow:hidden;transition:width .82s cubic-bezier(.22,1,.36,1)}
.стрелк .една{position:absolute;inset:0;display:grid;place-items:center;
  transition:opacity .14s ease-out}
.стрелк .редица{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:space-around;padding:0 12px;pointer-events:none}
.стрелк .редица span{opacity:0;transform:translateX(-7px);
  transition:opacity .2s ease-out,transform .2s ease-out}
.стрелк svg{width:19px;height:26px;fill:currentColor;display:block}
.стрелк .надпис{position:relative;z-index:0;margin-left:62px;margin-right:20px;
  white-space:nowrap;font-size:1rem;font-weight:800;letter-spacing:-.015em;
  transition:opacity .26s ease-out,transform .26s ease-out}

/* Натискането е меко: копчето потъва и сянката се свива, вместо да подскочи. */
.стрелк:active{transform:translateY(2px) scale(.988);
  box-shadow:0 2px 8px rgba(11,21,36,.22)}

/* Разгъването се пуска и от клас, за да работи и при натискане с пръст. */
.стрелк.натиснато .акцент{width:calc(100% - 12px)}
.стрелк.натиснато .една{opacity:0}
.стрелк.натиснато .редица span{opacity:1;transform:none}
.стрелк.натиснато .редица span:nth-child(1){transition-delay:.04s}
.стрелк.натиснато .редица span:nth-child(2){transition-delay:.07s}
.стрелк.натиснато .редица span:nth-child(3){transition-delay:.1s}
.стрелк.натиснато .редица span:nth-child(4){transition-delay:.13s}
.стрелк.натиснато .редица span:nth-child(5){transition-delay:.16s}
.стрелк.натиснато .надпис{opacity:0;transform:translateX(8px)}

@media(hover:hover) and (pointer:fine){
  .стрелк:hover .акцент,.стрелк:focus-visible .акцент{width:calc(100% - 12px)}
  .стрелк:hover .една,.стрелк:focus-visible .една{opacity:0}
  .стрелк:hover .редица span,.стрелк:focus-visible .редица span{opacity:1;
    transform:none}
  .стрелк:hover .редица span:nth-child(1),.стрелк:focus-visible .редица span:nth-child(1){transition-delay:.1s}
  .стрелк:hover .редица span:nth-child(2),.стрелк:focus-visible .редица span:nth-child(2){transition-delay:.2s}
  .стрелк:hover .редица span:nth-child(3),.стрелк:focus-visible .редица span:nth-child(3){transition-delay:.3s}
  .стрелк:hover .редица span:nth-child(4),.стрелк:focus-visible .редица span:nth-child(4){transition-delay:.4s}
  .стрелк:hover .редица span:nth-child(5),.стрелк:focus-visible .редица span:nth-child(5){transition-delay:.5s}
  .стрелк:hover .надпис,.стрелк:focus-visible .надпис{opacity:0;
    transform:translateX(8px)}
}

/* Тесен телефон: надписът се свива, вместо да разтяга страницата. С nowrap и
   фиксиран кегел копчето имаше вътрешна ширина 309px и разширяваше целия
   документ до 350 при екран 320. */
@media(max-width:430px){
  .стрелк{height:56px}
  .стрелк .акцент{width:44px;border-radius:13px}
  .стрелк svg{width:16px;height:22px}
  .стрелк .надпис{font-size:clamp(.74rem,3.2vw,1rem);
    margin-left:54px;margin-right:14px;letter-spacing:-.02em}
}
@media(prefers-reduced-motion:reduce){
  .стрелк,.стрелк *{transition:none}
  .стрелк:active{transform: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}}