/* Work — realizacje | SALT Concept */
body{margin:0;background:#0b0a09}
a{color:#f4efe7}
a:hover{color:#ffffff}
a:focus-visible{outline:1px solid #ffe2aa; outline-offset:6px}

/* siatka sześciu kolumn: okładki mają różne szerokości (--span) i proporcje, żeby lista miała rytm */
.work-grid{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:64px 24px; max-width:920px; margin-left:8vw}
.work-item{grid-column:span var(--span, 3)}
.work-right{grid-column:3 / span 4}

.work-drop{margin-top:88px}

/* Okładka w spoczynku stoi w półmroku. Po najechaniu u góry zapala się listwa LED
   (linia rysuje się od lewej), a światło schodzi od niej w dół i odsłania zdjęcie w oryginalnej barwie. */
@property --rev { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.cover{position:relative; overflow:hidden; background:#14110e}
.cover img{display:block; width:100%; height:100%; object-fit:cover}
.cover .dim{filter:brightness(.36) saturate(.1) sepia(.5)}
.cover .lit{
  position:absolute; inset:0; opacity:0; --rev:0%;
  -webkit-mask-image:linear-gradient(180deg, #000 calc(var(--rev) - 45%), transparent var(--rev));
  mask-image:linear-gradient(180deg, #000 calc(var(--rev) - 45%), transparent var(--rev));
  transition:opacity .5s ease, --rev .6s ease-in;
}
.cover .led{
  position:absolute; left:0; top:0; width:100%; height:2px; pointer-events:none;
  background:#fff4dc; box-shadow:0 0 14px 3px rgba(255,226,170,.75), 0 10px 60px 14px rgba(255,214,150,.28);
  transform:scaleX(0); transform-origin:0 50%; opacity:0;
  transition:transform .35s ease-in, opacity .35s ease;
}
.work-item:hover .cover .led, .work-item:focus-within .cover .led{transform:scaleX(1); opacity:1; transition:transform .55s cubic-bezier(.45,0,.2,1), opacity .2s ease}
.work-item:hover .cover .lit, .work-item:focus-within .cover .lit{opacity:1; --rev:150%; transition:opacity .9s ease .4s, --rev 1.6s cubic-bezier(.3,.1,.2,1) .4s}
.work-item{position:relative}
.work-link{color:inherit; text-decoration:none}
.work-link::after{content:""; position:absolute; inset:0}
.work-item figcaption{transition:opacity .8s ease; opacity:.8}
.work-item:hover figcaption{opacity:1}

/* Filtr kategorii: SALT FOR LIVING / BUSINESS / DEVELOPMENT. Kategoria projektu to pole TYP z jego podstrony,
   zapisane na okładce w data-type. Aktywna pozycja ma kreskę z przodu, jak aktywna pozycja menu. */
.work-filter{display:flex; flex-wrap:wrap; align-items:center; gap:4px 36px; max-width:920px; margin-left:8vw; margin-top:-16px}
.filt{display:flex; align-items:center; min-height:44px; padding:0; background:none; border:0; border-radius:0; cursor:pointer; color:#b8b0a4; transition:color .4s ease}
.filt::before{content:""; width:0; height:1px; margin-right:0; background:currentColor; transition:width .5s cubic-bezier(.45,0,.2,1), margin-right .5s cubic-bezier(.45,0,.2,1)}
.filt:hover{color:#f4efe7}
.filt[aria-pressed="true"]{color:#f4efe7}
.filt[aria-pressed="true"]::before{width:24px; margin-right:14px}
.filt:focus-visible{outline:1px solid #ffe2aa; outline-offset:6px}
.work-item.off{display:none !important}
.work-empty{display:none; grid-column:1 / -1}
.work-grid[data-empty] .work-empty{display:block}
/* po wybraniu kategorii siatka jest równa: bez szerokiej okładki i bez obniżonej kolumny */
@media (min-width: 761px){
  .work-grid:not([data-filter="all"]) .work-item{grid-column:span 3}
}
.work-grid:not([data-filter="all"]) .cover{aspect-ratio:4 / 5 !important}
.work-grid:not([data-filter="all"]) .work-drop{margin-top:0}
.work-grid.swap{animation:softIn .9s ease both}

@media (hover: none){
  .cover .dim{filter:none}
  .cover .lit, .cover .led{display:none}
  .work-item figcaption{opacity:1}
}
@media (max-width: 760px){
  .pad{padding-left:22px !important; padding-right:22px !important}
  .inset{padding-left:0 !important}
  .work-grid{grid-template-columns:minmax(0, 1fr); gap:56px; margin-left:0}
  .work-item{grid-column:1 / -1}
  .work-filter{margin-left:0; gap:0 28px}
  .work-drop{margin-top:0}
}
@media (prefers-reduced-motion: reduce){
  .cover .lit, .cover .led, .work-item figcaption{transition-duration:.01s !important; transition-delay:0s !important}
}
/* Miękkie wejście strony: nagłówek przejaśnia się od razu (.soft), a kolejne elementy (.gate)
   czekają na swoją kolej (data-gate, w ms od otwarcia) i na wjechanie w ekran. Bez skryptu wszystko jest widoczne. */
.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}
}
.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}
}
@media (prefers-reduced-motion: reduce){
  .soft, .work-grid.swap{animation:none}
  .filt, .filt::before{transition:none}
  .gate, .gate.in{opacity:1; filter:none; transform:none; transition:none; animation:none}
}