/* =========================================================
   OK SOFTWARE — FAZA 2: case-study cinematic
   Ładowane TYLKO na stronach realizacja-*.html (obok app.css)
   Porty wzorców 21st.dev → vanilla: scroll-expansion-hero, parallax.
   Wszystko respektuje prefers-reduced-motion (patrz dół pliku + guardy w case.js).
   ========================================================= */

/* --- okładka na realnym zdjęciu (scroll-expansion-hero) --- */
.cs-cover-photo{position:relative;isolation:isolate}
.cs-cover-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform:scale(1.12);will-change:transform}
.cs-cover-grad{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,12,26,.18),rgba(8,12,26,.58)),
             linear-gradient(135deg,rgba(99,102,241,.42),rgba(6,182,212,.30))}
.cs-cover-photo .mock{position:relative;z-index:2}
.cs-cover-photo .pgrid{z-index:1;opacity:.5}

/* --- pasmo zdjęć w treści --- */
.cs-figband{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;margin:56px 0}
@media(max-width:760px){.cs-figband{grid-template-columns:1fr}}
.cs-fig{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);background:var(--bg-2);aspect-ratio:16/10;margin:0}
.cs-fig img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);will-change:transform}
.cs-fig::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,rgba(99,102,241,.14),transparent 55%);pointer-events:none}
.cs-fig figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 18px 15px;color:#fff;font-size:.85rem;font-weight:500;
  background:linear-gradient(0deg,rgba(8,12,26,.74),transparent)}
.cs-fig .fig-tag{position:absolute;top:14px;left:14px;z-index:2;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;background:rgba(11,16,32,.55);border:1px solid rgba(255,255,255,.22);padding:5px 12px;border-radius:100px;backdrop-filter:blur(6px);text-shadow:0 1px 4px rgba(0,0,0,.4)}

/* --- tytuł hero rozbity na litery (stagger GSAP) --- */
.split-line{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.04}
.split-line>span{display:inline-block;will-change:transform}

/* --- nota o źródłach zdjęć --- */
.cs-credits{font-size:.76rem;color:var(--faint);margin-top:10px;text-align:center}
.cs-credits a{color:var(--muted);text-decoration:underline}

/* --- realistyczne „zrzuty z produktu" w sekcji „Jak to wygląda w praktyce" --- */
/* wariant .ui : udawany interfejs aplikacji (chrome + wiersze UI) */
.hscreen.ui{padding:0;justify-content:flex-start;color:#eaf0ff;background:linear-gradient(155deg,#0b1020,#161f48)}
.hscreen.ui::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(460px circle at 82% 4%,rgba(99,102,241,.38),transparent 60%);pointer-events:none}
.hscreen.ui .chrome{position:relative;z-index:1;display:flex;align-items:center;gap:7px;padding:14px 16px}
.hscreen.ui .chrome i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.26)}
.hscreen.ui .chrome .url{margin-left:8px;flex:1;font-size:.72rem;color:rgba(255,255,255,.6);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:7px;padding:5px 11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hscreen.ui .scr{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;gap:9px;padding:2px 16px 14px;min-height:0}
.hscreen.ui .urow,.hscreen.ui .uinp{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:11px 13px;font-size:.86rem;line-height:1.25}
.hscreen.ui .urow{justify-content:space-between}
.hscreen.ui .uinp{color:rgba(234,240,255,.74)}
.hscreen.ui .urow .pct{flex:none;font-family:var(--display);font-weight:800;background:linear-gradient(90deg,#9db4ff,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.hscreen.ui .ubtn{align-self:flex-start;font-size:.82rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#6366F1,#06B6D4);border-radius:10px;padding:9px 16px}
.hscreen.ui .cap{position:relative;z-index:1;margin-top:auto;padding:13px 16px;border-top:1px solid rgba(255,255,255,.1);background:rgba(7,10,24,.4)}
.hscreen.ui .cap b{font-family:var(--display);font-weight:700;font-size:1.06rem;display:block}
.hscreen.ui .cap em{font-style:normal;color:rgba(255,255,255,.78);font-size:.88rem}

/* wariant .photo : klasyczne zdjęcie jako tło ekranu */
.hscreen.photo{padding:24px;justify-content:flex-end}
.hscreen.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hscreen.photo::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,rgba(8,12,26,.82),rgba(8,12,26,.12) 55%)}
.hscreen.photo>.pgrid{opacity:.35}
.hscreen.photo .tagi,.hscreen.photo .lbl,.hscreen.photo .sub{z-index:1}

/* ===== reduced-motion: zero transformów startowych, pełna czytelność ===== */
@media (prefers-reduced-motion: reduce){
  .cs-cover-photo img,.cs-fig img,.hscreen.photo>img{transform:none !important}
  .split-line>span{transform:none !important;opacity:1 !important}
}