/* ========================================
   Начало — „Разказ + платна“
   Ляво: откъс от есето, цитат (Inter 300) и „За мен →“.
   Дясно: трите категории като разтварящи се платна — всяко е връзка
   към галерията на своята категория (works.html?cat=…).
   Телефон (≤ 820 px): платната са три ленти отгоре, текстът е под тях.
   ======================================== */

/* Мястото на решетката още преди данните — футърът не подскача при зареждане */
/* Началната страница се побира точно в екрана: хедър + съдържание + футър = 100vh,
   без скрол. Височината на платната следва от наличното място, не от 100vh. */
html { height: 100%; }
body.home-page { height: 100vh; min-height: 100vh; display: flex; flex-direction: column; }
body.home-page .header, body.home-page .footer { flex: none; }
.home { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; justify-content: center; }   /* изрична ширина: иначе процентите вътре се резолват като „auto“ (Chrome, вложени flex) */

/* ---------- Решетка: текст | платна ---------- */
.home .sp-grid {
  display: grid; grid-template-columns: 2fr 3fr; gap: 44px; align-items: stretch;
  margin: 0 auto; padding: 8px 24px 8px; flex: none; width: min(var(--maxw), 100vw); min-height: 0; height: 100%; grid-template-rows: minmax(0, 1fr);   /* изрична ширина (не %): във вложен flex Chrome резолва процентите като auto и мрежата се свива до текста */
}
.home .sp-text { display: flex; flex-direction: column; justify-content: center; max-width: 34em; }
.home .sp-intro { font-size: 1.02rem; line-height: 1.78; color: var(--text-light); }
/* Цитат: същият Inter, светъл (300) и малко по-голям от увода */
.home .sp-quote {
  font-family: var(--display); font-weight: 300;
  font-size: 1.25rem; line-height: 1.5; color: var(--text);
  margin: 30px 0 0; padding-left: 18px; border-left: 1px solid var(--text-muted);
}
.home .sp-links { margin-top: 32px; display: flex; gap: 26px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.home .sp-links a { text-decoration: none; color: var(--text-light); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.home .sp-links a:hover { color: var(--text); border-bottom-color: var(--text); }
.home .sp-panels {
  min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column;
  /* таван на височината = пропорцията на платната от обикновен монитор; иначе на 4K
     ширината се заключва, а височината расте и лентите се издължават */
  --stage-w: calc((var(--maxw) - 92px) * 0.6);
  max-height: calc(var(--stage-w) * 0.906);
  align-self: center;
}
.home .sp-text { align-self: center; }

/* ---------- Платна ---------- */
/* Сцена: три платна едно до друго, разделени с 2 px от фона на страницата.
   Височина: хедър ≈ 66 px + отстояния на решетката 24 + 44 px → първият екран свършва на сгъвката. */
.home-panels .pn-stage {
  --ease: cubic-bezier(.2,.8,.2,1); --drop: 98px;
  display: flex; gap: 2px; background: var(--bg); overflow: hidden;
  flex: 1 1 auto; min-height: 0; height: 100%;   /* запълва колоната, без 100vh */
}
/* Платно: цялото е връзка; растежът е чрез flex-grow (три елемента, преходът е евтин) */
.home-panels .pn-panel {
  position: relative; display: block; flex: 1 1 0%; min-width: 0; min-height: 0; overflow: hidden;
  color: #fff; text-decoration: none; background: #2b2a27; -webkit-tap-highlight-color: transparent;
  transition: flex-grow 0.7s var(--ease);
  animation: home-panels-in 0.9s var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms);
}
@keyframes home-panels-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.home-panels .pn-stage.act .pn-panel { flex-grow: 0.8; }
.home-panels .pn-stage.act .pn-panel.on { flex-grow: 2.4; }
.home-panels .pn-stage.breath .pn-panel { transition: flex-grow 1.5s ease-in-out; }
.home-panels .pn-panel.lift { flex-grow: 1.3; }
.home-panels .pn-panel:focus { outline: none; }
.home-panels .pn-panel:focus-visible::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,0.85); pointer-events: none; }
/* Корица: БЕЗ зуум. Снимката е с фиксирана ширина = ширината на разгънато платно
   (--cover-w, от JS) и е закотвена: лявото платно вляво (разгъването разкрива надясно),
   средното в центъра (разкрива на двете страни), дясното вдясно (разкрива наляво). */
.home-panels .pn-panel > .ph { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; }
.home-panels .pn-panel > .ph > img {
  position: absolute; top: 0; height: 100%; width: var(--cover-w, 100%); max-width: none; object-fit: cover;
}
.home-panels .pn-panel.pn-l > .ph { background-position: left center; }
.home-panels .pn-panel.pn-l > .ph > img { left: 0; object-position: left center; }
.home-panels .pn-panel.pn-m > .ph { background-position: center; }
.home-panels .pn-panel.pn-m > .ph > img { left: 50%; transform: translateX(-50%); object-position: center; }
.home-panels .pn-panel.pn-r > .ph { background-position: right center; }
.home-panels .pn-panel.pn-r > .ph > img { right: 0; object-position: right center; }
.home-panels .pn-panel img { -webkit-user-drag: none; }
/* Футърът на началната — само един тънък ред */
body.home-page .footer { padding: 7px 0; }
body.home-page .footer p { font-size: 0.6rem; line-height: 1.4; }
/* Сенки: лява (за вертикалното име) и долна (за хоризонталното) */
.home-panels .pn-shade { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.7s var(--ease); }
.home-panels .pn-shade-l { background: linear-gradient(to right, rgba(0,0,0,0.46), rgba(0,0,0,0) 42%); opacity: 0.9; }
.home-panels .pn-shade-b { background: linear-gradient(to top, rgba(0,0,0,0.64), rgba(0,0,0,0) 54%); opacity: 0.45; }
.home-panels .pn-panel.on .pn-shade-l { opacity: 0; }
.home-panels .pn-panel.on .pn-shade-b { opacity: 1; }
/* Име: в покой е завъртяно на −90° около долния си ляв ъгъл и „спуснато“ до долния ръб (--drop = височината на скрития блок отдолу) */
.home-panels .pn-info { position: absolute; left: 26px; right: 26px; bottom: 26px; pointer-events: none; }
.home-panels .pn-name {
  display: block; width: max-content; margin: 0; white-space: nowrap;
  font-family: var(--display); font-weight: 500; font-size: 1.6rem; line-height: 1.2; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 6px 22px rgba(0,0,0,0.3);
  transform-origin: 0 100%; transform: translateY(var(--drop)) rotate(-90deg);
  transition: transform 0.7s var(--ease);
}
.home-panels .pn-panel.on .pn-name { transform: none; }
.home-panels .pn-n { font-family: var(--sans); font-size: 0.72rem; font-variant-caps: all-small-caps; letter-spacing: 0.14em; margin-left: 14px; opacity: 0.85; }
/* Скрит блок: връзка + миниатюри (общо 84 px + 14 px отстояние = --drop) */
.home-panels .pn-more { margin-top: 14px; height: 84px; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.6s var(--ease); }
.home-panels .pn-panel.on .pn-more { opacity: 1; transform: none; transition-delay: 0.18s; }
.home-panels .pn-go { display: block; height: 16px; line-height: 16px; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.92); }
.home-panels .pn-thumbs { display: flex; gap: 6px; margin-top: 12px; height: 56px; }
.home-panels .pn-thumbs .ph {
  flex: none; height: 56px; width: calc(56px * var(--r, 1.333)); box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  opacity: 0; transform: translateX(-12px); transition: opacity 0.4s ease, transform 0.6s var(--ease);
}
.home-panels .pn-panel.on .pn-thumbs .ph { opacity: 1; transform: none; transition-delay: calc(0.24s + var(--k, 0) * 70ms); }

/* Без анимации: без дишане и без преходи — hover състоянието се прилага веднага */
@media (prefers-reduced-motion: reduce) {
  .home-panels .pn-panel, .home-panels .pn-panel > .ph, .home-panels .pn-shade, .home-panels .pn-name, .home-panels .pn-more, .home-panels .pn-thumbs .ph { transition: none; animation: none; }
  .home-panels .pn-panel.on .pn-more, .home-panels .pn-panel.on .pn-thumbs .ph { transition-delay: 0s; }
}

/* ---------- Телефон: три ленти отгоре, текстът под тях ---------- */
@media (max-width: 820px) {
  .home .sp-grid { grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; gap: 34px; padding: 0 0 34px; }
  .home .sp-panels { height: auto; }
  .home .sp-panels { order: 1; }
  .home .sp-text { order: 2; padding: 0 16px; max-width: none; }
  .home-panels .pn-stage { flex-direction: column; flex: none; height: calc(100vh - 66px); min-height: 420px; }
  /* Телефон: напълно статично — без влизаща анимация, без преходи, без разгъване */
  .home-panels .pn-panel, .home-panels .pn-panel > .ph, .home-panels .pn-shade, .home-panels .pn-name,
  .home-panels .pn-more, .home-panels .pn-thumbs .ph { animation: none; transition: none; }
  .home-panels .pn-stage.act .pn-panel, .home-panels .pn-stage.act .pn-panel.on, .home-panels .pn-panel.lift { flex-grow: 1; }
  .home-panels .pn-more, .home-panels .pn-thumbs { display: none; }
  .home-panels .pn-panel > .ph > img { width: 100%; left: 0; right: auto; transform: none; object-position: center; }
  .home-panels .pn-panel > .ph { background-position: center; }
  .home-panels .pn-shade-l { display: none; }
  .home-panels .pn-shade-b { opacity: 0.7; }
  .home-panels .pn-info { left: 18px; right: 18px; bottom: 18px; }
  .home-panels .pn-name { font-size: 1.35rem; transform: none; }   /* хоризонтално, винаги на мястото си */
}