/* Sceny 3D (Panel Montage, Panel Cure). Kolory z tokenów strony, z wartościami zapasowymi. */
.s3d { --s3d-tlo: #0e1114; --s3d-akcent: var(--accent, var(--blue, #1d4ed8)); --s3d-tekst: var(--ink, #0f172a); --s3d-cichy: var(--muted, #475569); }
.s3d .s3d-wprowadzenie { max-width: 62ch; }
.s3d .s3d-wprowadzenie p { color: var(--s3d-cichy); }
.s3d .s3d-siatka { display: grid; gap: 32px; margin-top: 28px; }
.s3d .s3d-blok { min-width: 0; }
.s3d .s3d-blok h3 { margin: 0 0 6px; }
.s3d .s3d-blok > p { margin: 0 0 14px; color: var(--s3d-cichy); max-width: 62ch; }
.s3d .s3d-kadr { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--s3d-tlo); border-radius: 6px; }
.s3d .s3d-kadr canvas, .s3d .s3d-kadr video, .s3d .s3d-kadr img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.s3d .s3d-znak { position: absolute; left: 10px; top: 10px; z-index: 3; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.88); background: rgba(0,0,0,.42); padding: 3px 7px; border-radius: 3px; pointer-events: none; }
.s3d .s3d-podpis { margin: 8px 0 0; font-size: 13px; color: var(--s3d-cichy); }
.s3d .s3d-przewijanie { position: relative; height: 230vh; }
.s3d .s3d-lepkie { position: sticky; top: calc(var(--header-height, 80px) + 12px); }
.s3d .s3d-pasek { height: 3px; background: rgba(15, 23, 42, .12); margin-top: 8px; border-radius: 2px; overflow: hidden; }
.s3d .s3d-pasek i { display: block; height: 100%; width: 0; background: var(--s3d-akcent); }
.s3d .s3d-etykieta { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; transform: translateY(-50%); white-space: nowrap; font-weight: 600; font-size: clamp(11px, 1.5vw, 16px); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); opacity: 0; transition: opacity .25s; pointer-events: none; }
.s3d .s3d-etykieta::before { content: ""; width: clamp(10px, 2.6vw, 40px); height: 1px; background: rgba(255,255,255,.75); order: 1; }
.s3d .s3d-etykieta b { width: 7px; height: 7px; border-radius: 50%; background: #fff; order: 0; flex: none; }
.s3d .s3d-etykieta span { order: 2; }
.s3d .s3d-porownanie { cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.s3d .s3d-porownanie .s3d-po { clip-path: inset(0 0 0 var(--s3d-ciecie, 50%)); }
.s3d .s3d-linia { position: absolute; top: 0; bottom: 0; left: var(--s3d-ciecie, 50%); width: 2px; background: #fff; transform: translateX(-1px); z-index: 2; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.s3d .s3d-uchwyt { position: absolute; top: 50%; left: var(--s3d-ciecie, 50%); width: 44px; height: 44px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(14,17,20,.75); border: 2px solid #fff; z-index: 3; display: grid; place-items: center; color: #fff; font-size: 16px; pointer-events: none; }
.s3d .s3d-strona { position: absolute; bottom: 10px; z-index: 3; font-weight: 600; font-size: clamp(12px, 1.6vw, 16px); color: #fff; background: rgba(14,17,20,.68); padding: 4px 10px; border-radius: 3px; pointer-events: none; }
.s3d .s3d-strona.l { left: 10px; } .s3d .s3d-strona.r { right: 10px; }
.s3d input[type="range"] { width: 100%; margin-top: 12px; accent-color: var(--s3d-akcent); }
.s3d input[type="range"]:focus-visible { outline: 2px solid var(--s3d-akcent); outline-offset: 3px; }
.s3d .s3d-etykieta-suwaka { display: block; margin-top: 12px; font-size: 13px; color: var(--s3d-cichy); }
@media (max-width: 560px) { .s3d .s3d-przewijanie { height: 150vh; } .s3d .s3d-etykieta::before { width: 8px; } }
@media (prefers-reduced-motion: reduce) { .s3d .s3d-przewijanie { height: auto; } .s3d .s3d-lepkie { position: static; } .s3d .s3d-etykieta { transition: none; } }
.s3d [hidden] { display: none !important; }
.s3d .s3d-kadr { max-width: 1040px; }
.s3d .s3d-pasek { max-width: 1040px; }
@media (max-width: 760px) {
  .s3d .s3d-etykieta { transform: translate(-100%, -50%); flex-direction: row-reverse; }
  .s3d .s3d-etykieta b { order: 0; } .s3d .s3d-etykieta::before { order: 1; } .s3d .s3d-etykieta span { order: 2; }
  .s3d .s3d-lepkie { top: calc(var(--header-height, 80px) + 14vh); }
}
/* wyśrodkowanie bloków (film, porównanie) */
.s3d .s3d-blok { width: 100%; max-width: 1040px; margin-inline: auto; }
.s3d .s3d-kadr { margin-inline: auto; }
.s3d .s3d-siatka { justify-items: center; }
/* scena przypięta na całą szerokość: przewijanie rozkłada płytę, kadr stoi w miejscu */
.s3d.s3d-scena { position: relative; background: #2d3033; color: #fff; }
.s3d.s3d-scena .s3d-przewijanie { height: 320vh; }
.s3d.s3d-scena .s3d-lepkie { position: sticky; top: var(--header-height, 80px); height: calc(100vh - var(--header-height, 80px)); height: calc(100svh - var(--header-height, 80px)); overflow: hidden; }
.s3d.s3d-scena .s3d-tlo-kadr { position: absolute; inset: 0; background: var(--s3d-tlo-scena, #5c5f62); }
.s3d.s3d-scena .s3d-tlo-kadr canvas, .s3d.s3d-scena .s3d-tlo-kadr img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.s3d.s3d-scena .s3d-nakladka { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
.s3d.s3d-scena .s3d-nakladka::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 55%; background: linear-gradient(180deg, rgba(10, 12, 14, .62), rgba(10, 12, 14, 0)); pointer-events: none; }
.s3d.s3d-scena .s3d-wstep { position: relative; max-width: 36rem; padding-top: clamp(20px, 6vh, 64px); will-change: opacity, transform; }
.s3d.s3d-scena .s3d-wstep h2 { color: #fff; margin: 0 0 12px; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.s3d.s3d-scena .s3d-wstep h2 em { color: #d6e4ff; }
.s3d.s3d-scena .s3d-wstep .lead { color: rgba(255,255,255,.9); margin: 0 0 10px; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.s3d.s3d-scena .s3d-wskazowka { font-size: 14px; color: rgba(255,255,255,.75); margin: 0; }
.s3d.s3d-scena .s3d-dol { position: relative; display: flex; align-items: center; gap: 14px; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); }
.s3d.s3d-scena .s3d-znak { position: static; }
.s3d.s3d-scena .s3d-pasek { flex: 1; max-width: none; margin: 0; background: rgba(255,255,255,.22); }
.s3d.s3d-scena .s3d-pasek i { background: #fff; }
.s3d.s3d-scena .s3d-etykieta { z-index: 2; }
#zamek-montaz.s3d { padding-top: clamp(40px, 7vw, 88px); }
@media (max-width: 760px) { .s3d.s3d-scena .s3d-przewijanie { height: 240vh; } .s3d.s3d-scena .s3d-lepkie { top: var(--header-height, 80px); } .s3d.s3d-scena .s3d-nakladka::before { height: 45%; } }
@media (prefers-reduced-motion: reduce) { .s3d.s3d-scena .s3d-przewijanie { height: auto; } .s3d.s3d-scena .s3d-lepkie { position: relative; top: 0; height: 80vh; } }