/* quietplugs 7.1 · project.css — strona „Projekt”.
   Domyślnie (bez JS, bez WebGL, ruch zatrzymany): zdjęcie wkładek i teksty scen jeden pod drugim.
   Z klasą .proj--gl (nadaje ją project.js): scena przypięta do okna, model wkładki z ziarna
   na płótnie, a teksty scen przewijają się nad nią. Środek modelu: 71% szerokości od 900 px,
   na telefonie 50% szerokości i 36% wysokości — te same liczby zna project.js (SHIFT). */

.proj { position: relative; background: var(--paper); }

.proj__stage { display: grid; place-items: center; padding: clamp(32px, 6vw, 72px) var(--gutter) 0; }
.proj__gl, .proj__case { display: none; }
.proj__still img { display: block; width: min(70vw, 420px); height: auto; }

.proj__scene { padding-block: clamp(40px, 7vw, 88px); }
.proj__copy { max-width: 31rem; }
.proj__no { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: var(--t-2); line-height: 1.5; color: var(--ink-2); }
.proj__no span { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.proj__no::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.proj__h { font-size: clamp(2.3rem, 4.6vw, 4rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.proj__h + .lead { margin-top: 18px; }
.proj__cta { margin-top: 28px; }

.proj__pick { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.proj__dot { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.proj__dot span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--sc); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14); transition: transform var(--d-1) var(--ease); }
.proj__dot:hover span { transform: scale(1.12); }
.proj__dot[aria-checked="true"] span { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14), 0 0 0 2.5px var(--paper), 0 0 0 4px var(--ink); }
.proj__name { margin-left: 4px; font-size: var(--t-2); color: var(--ink-2); }
/* Bez modelu wybór koloru niczego nie zmienia — zostaje sam tekst sceny. */
.proj:not(.proj--gl) .proj__pick { display: none; }

/* ---------- scena przypięta do okna ---------- */
.proj--gl .proj__stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
.proj--gl .proj__still { display: none; }
.proj--gl .proj__gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.proj--gl .proj__gl.is-drag { cursor: grabbing; }

.proj--gl .proj__case {
  display: grid; position: absolute; left: 50%; top: 36%; width: min(74vw, 46svh);
  translate: -50% -50%; opacity: 0; scale: 0.94; pointer-events: none;
  /* Tło zdjęcia nie jest idealnie białe — brzeg kadru rozpływa się w stronie. */
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  transition: opacity 0.7s var(--ease), scale 0.9s var(--ease);
}
.proj--gl .proj__case.is-on { opacity: 1; scale: 1; }
.proj--gl .proj__case.is-closed.is-on { scale: 0.84; }
.proj--gl .proj__case > * { grid-area: 1 / 1; display: block; width: 100%; height: auto; filter: brightness(1.015); }

.proj--gl .proj__scenes { position: relative; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.proj--gl .proj__scene { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding-block: 0 9svh; }
.proj--gl .proj__copy {
  pointer-events: auto; opacity: 0; transform: translateY(26px);
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
}
.proj--gl .proj__scene.is-on .proj__copy { opacity: 1; transform: none; }

@media (min-width: 900px) {
  .proj--gl .proj__scene { align-items: center; padding-block: 0; }
  .proj--gl .proj__copy { max-width: min(31rem, 38vw); }
  .proj--gl .proj__case { left: 71%; top: 50%; width: min(40vw, 62svh, 520px); }
}