/* About — pracownia | SALT Concept */
body{margin:0;background:#e6e1d8}
a{color:#f4efe7}
a:hover{color:#ffffff}
a:focus-visible{outline:1px solid #ffe2aa; outline-offset:6px}
.paper a{color:#14110e}
.paper a:hover{color:#000000}
.paper a:focus-visible{outline-color:#14110e}

/* Tło About: tynkowana ściana, na którą z prawego górnego rogu pada słońce. Rysuje ją skrypt na płótnie .sea
   (faktura tynku, smugi światła, powolny ruch); .wall to nieruchoma wersja zapasowa pod spodem. */
.sunwall{position:relative; overflow:hidden}
.sunwall > header, .sunwall > .pad{position:relative; z-index:1}
.wall{position:absolute; inset:0; pointer-events:none; animation:wallIn 3.4s ease-in-out both;
  background:
    conic-gradient(from 0deg at 101% -4%, rgba(247,246,243,0) 190deg, rgba(250,249,247,.95) 196deg, rgba(250,249,247,.9) 206deg, rgba(247,246,243,0) 212deg, rgba(247,246,243,0) 222deg, rgba(247,246,243,.95) 232deg, rgba(247,246,243,.95) 246deg, rgba(247,246,243,0) 252deg, rgba(247,246,243,0) 256deg, rgba(247,246,243,.9) 260deg, rgba(247,246,243,0) 266deg),
    radial-gradient(70% 110% at 0% 0%, rgba(247,246,243,1), rgba(247,246,243,0) 70%),
    #dedcd8}
.sunwall[data-sea] .wall{visibility:hidden}
@keyframes wallIn{
  0%{opacity:0}
  100%{opacity:1}
}
/* napisy wyłaniają się miękko, jeden po drugim: z lekkiego rozmycia i przesunięcia */
.soft{animation:softIn 2.25s cubic-bezier(.4,0,.2,1) var(--d, 0s) both}
@keyframes softIn{
  0%{opacity:0; filter:blur(3px); transform:translateY(4px)}
  100%{opacity:1; filter:blur(0); transform:none}
}
@media (prefers-reduced-motion: reduce){
  .wall, .soft{animation:none}
}
.sea{position:absolute; inset:0; display:block; width:100%; height:100%; opacity:0; transition:opacity .6s ease; pointer-events:none}
.sea.on{opacity:1}

.slot{box-sizing:border-box; border:1px dashed #766f64; background:#d6d0c4; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; font-size:13px; line-height:1.6; letter-spacing:.2em; color:#5c554c}
.people{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:44px 32px; max-width:860px}
/* portrety pojawiają się płynnie, gdy sekcja wjeżdża w ekran, w oryginalnych kolorach */
.fade{opacity:0; transform:translateY(16px); transition:opacity 1.5s ease, transform 1.8s cubic-bezier(.2,.7,.2,1)}
.fade.in{opacity:1; transform:none}
/* Kolejność wejścia: tło z morzem, potem napisy, potem etykieta następnej sekcji, na końcu zespół.
   Elementy .gate czekają na swoją kolej (data-gate, w ms od otwarcia strony) i na wjechanie w ekran. */
.gate{opacity:0; filter:blur(6px); transform:translateY(14px)}
.gate.in{opacity:1; filter:blur(0); transform:none; transition:opacity 1.8s ease, filter 2s ease, transform 2.1s cubic-bezier(.2,.7,.2,1)}
/* gdyby skrypt się nie uruchomił, elementy i tak pojawią się po chwili */
[data-root]:not([data-js]) .gate{animation:gateSafe 1.2s ease 7s forwards}
@keyframes gateSafe{
  100%{opacity:1; filter:blur(0); transform:none}
}
[data-root]:not([data-js]) .fade{animation:failsafe 1s ease 2.5s forwards}
@keyframes failsafe{
  100%{opacity:1; transform:none}
}
/* Jak pracujemy: linia światła przesuwa się nad czterema etapami i kolejno je rozjaśnia.
   --p: 0 = początek, 1 = koniec; bez skryptu ma wartość końcową, więc wszystko jest widoczne. */
.steps{position:relative; --p:1.06}
.steps .lit{opacity:calc(.3 + .7 * clamp(0, (var(--p) - var(--at, 0)) * 7, 1))}
.steps .s1{--at:0}
.steps .s2{--at:.25}
.steps .s3{--at:.5}
.steps .s4{--at:.75}
.steps .beam{position:absolute; left:0; top:0; height:2px; margin-top:-1px; width:calc(min(var(--p), 1) * 100%); background:#fff4dc; box-shadow:0 0 14px 3px rgba(255,226,170,.7), 0 0 40px 8px rgba(255,214,150,.22); pointer-events:none}
.steps{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:44px 24px}
.cta{transition:background-color .5s ease, color .5s ease, border-color .5s ease}
.cta:hover{background:#f4efe7; color:#14110e; border-color:#f4efe7}
.paper a.cta-ink{background:#14110e; color:#f4efe7; border:1px solid #14110e; transition:background-color .5s ease, color .5s ease}
.paper a.cta-ink:hover{background:transparent; color:#14110e}
.end-cta{display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr)}
.end-photo{position:relative; min-height:clamp(420px, 44vw, 640px); overflow:hidden; background:#d6d0c4}
.end-photo img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:40% 60%}
.end-photo .fade{transform:none}

@media (max-width: 900px){
  .steps{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .steps .beam{display:none}
}
@media (max-width: 760px){
  .end-cta{grid-template-columns:minmax(0, 1fr)}
  .end-photo{min-height:0; aspect-ratio:3 / 2}
  .pad{padding-left:22px !important; padding-right:22px !important}
  .inset{padding-left:0 !important}
}
@media (max-width: 480px){
  .steps{grid-template-columns:minmax(0, 1fr)}
  .people{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:36px 16px}
}
@media (prefers-reduced-motion: reduce){
  .cta,.cta-ink{transition:none}
  .fade{opacity:1; transform:none; transition:none; animation:none}
  .gate{opacity:1; filter:none; transform:none; transition:none; animation:none}
}