/* SALT Concept — architektura wnętrz, Gdańsk */
body{margin:0;background:#0b0a09}
a{color:#f4efe7}
a:hover{color:#ffffff}

@property --r1 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --r2 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

.stage{container-type:size}
.scene{
  position:absolute; left:50%; top:0; transform-origin:50% 0;
  width:max(100cqw, 149.9cqh); height:max(100cqh, 66.72cqw);
  transform:translate(calc(-50% + var(--px, 0) * -14px), calc(-6px + var(--py, 0) * -6px)) scale(1.035);
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.scene img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

/* półmrok: ta sama fotografia, przygaszona i lekko schłodzona */
.dusk{filter:brightness(.17) saturate(.45) contrast(1.08)}
/* Całe światło zależy od jednej wartości --lvl (0 = półmrok, 1 = pełna jasność),
   którą ustawia ściemniacz albo automatyczne rozjaśnianie po wejściu na stronę.
   Etap 1 (0–0.45): ciepłe światło górne. Etap 2 (0.45–1): kinkiet i chłodna listwa LED z prawej. */
.dusk-tint{position:absolute; inset:0; background:#0d1624; mix-blend-mode:color; opacity:calc(.5 - .5 * var(--lvl, 0))}

.lit{
  opacity:clamp(0, calc(var(--lvl, 0) * 5), 1);
  /* wieczorna, ciepła korekcja jasnego zdjęcia dziennego */
  filter:brightness(.8) sepia(.2) saturate(1.05) contrast(1.04);
  -webkit-mask-image:
    radial-gradient(circle at 52% 18%, #000 calc(var(--lvl, 0) * 190% - 46%), transparent calc(var(--lvl, 0) * 190%)),
    radial-gradient(circle at 73.7% 38.4%, #000 calc((var(--lvl, 0) - .45) * 310% - 40%), transparent calc((var(--lvl, 0) - .45) * 310%));
  mask-image:
    radial-gradient(circle at 52% 18%, #000 calc(var(--lvl, 0) * 190% - 46%), transparent calc(var(--lvl, 0) * 190%)),
    radial-gradient(circle at 73.7% 38.4%, #000 calc((var(--lvl, 0) - .45) * 310% - 40%), transparent calc((var(--lvl, 0) - .45) * 310%));
}

/* listwa LED: chłodniejsza, pionowa smuga przy kolumnie */
.led{
  position:absolute; left:66.5%; top:54%; width:9%; height:60%; border-radius:50%;
  transform:translate(-50%,-50%); mix-blend-mode:screen; pointer-events:none;
  opacity:clamp(0, calc((var(--lvl, 0) - .45) * 1.82), 1);
  background:radial-gradient(ellipse at center, rgba(228,240,255,.45) 0%, rgba(195,220,255,.16) 24%, rgba(180,210,255,0) 66%);
}
.led-wash{
  position:absolute; inset:0; mix-blend-mode:color; pointer-events:none;
  opacity:clamp(0, calc((var(--lvl, 0) - .45) * 1.82), 1);
  background:radial-gradient(ellipse 24% 58% at 71% 52%, rgba(175,205,255,.22) 0%, rgba(175,205,255,.09) 55%, rgba(175,205,255,0) 100%);
}

/* żarówki: każda zaczyna się rozjaśniać od swojego progu --d */
.bulb{
  position:absolute; width:22%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%); mix-blend-mode:screen; pointer-events:none;
  opacity:clamp(0, calc((var(--lvl, 0) - var(--d, 0)) * 4), 1);
  background:radial-gradient(circle, rgba(255,226,170,.95) 0%, rgba(255,196,120,.42) 9%, rgba(255,170,90,.14) 28%, rgba(255,160,80,0) 62%);
}
.b2{--d:.06}
.b3{--d:.12}
.b4{--d:.15}
.b5{--d:.45}

/* ciepła poświata podążająca za kursorem */
.torch{
  position:absolute; left:var(--mx, 50%); top:var(--my, 40%); width:60cqmax; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none; mix-blend-mode:soft-light; opacity:0;
  background:radial-gradient(circle, rgba(255,220,170,.75) 0%, rgba(255,205,150,.3) 30%, rgba(255,200,140,0) 65%);
  transition:opacity 1.5s ease;
}
[data-hover="1"] .torch{opacity:1}

/* treść pojawia się, gdy pokój już jaśnieje */
.rise{opacity:0; transform:translateY(14px); transition:opacity 1.8s ease, transform 1.8s cubic-bezier(.2,.7,.2,1)}
[data-seen="1"] .rise{opacity:1; transform:none}
[data-seen="1"] .d1{transition-delay:.2s}
[data-seen="1"] .d2{transition-delay:1.7s}
[data-seen="1"] .d3{transition-delay:2.3s}
[data-seen="1"] .d4{transition-delay:2.8s}
[data-seen="1"] .d5{transition-delay:3.3s}

.cta{transition:background-color .5s ease, color .5s ease, border-color .5s ease}
.cta:hover{background:#f4efe7; color:#14110e; border-color:#f4efe7}
.cta .arrow{transition:transform .5s ease}
.cta:hover .arrow{transform:translateX(8px)}
.ghost{background:none; border:0; color:inherit; font:inherit; cursor:pointer; opacity:.9; transition:opacity .3s ease}
.ghost:hover{opacity:1}
/* Wybrane realizacje: okładka stoi w półmroku; po najechaniu u góry zapala się listwa LED,
   a światło schodzi w dół i odsłania zdjęcie w oryginalnej barwie (tak samo jak na stronie Work). */
@property --rev { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.cover{position:relative; display:block; overflow:hidden; background:#14110e; aspect-ratio:4 / 5}
.cover img{display:block; width:100%; height:100%; object-fit:cover}
.cover .dim{filter:brightness(.45) 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;
}
.cover:hover .led, .cover:focus-visible .led{transform:scaleX(1); opacity:1; transition:transform .55s cubic-bezier(.45,0,.2,1), opacity .2s ease}
.cover:hover .lit, .cover:focus-visible .lit{opacity:1; --rev:150%; transition:opacity .9s ease .4s, --rev 1.6s cubic-bezier(.3,.1,.2,1) .4s}

/* link „Wszystkie realizacje": pod napisem zapala się linia LED */
.led-link{position:relative; text-decoration:none}
.led-link::before, .led-link::after{content:""; position:absolute; left:0; bottom:9px; width:100%; height:1px}
.led-link::before{background:rgba(244,239,231,.4)}
.led-link::after{background:#fff4dc; box-shadow:0 0 10px 2px rgba(255,226,170,.75); transform:scaleX(0); transform-origin:0 50%; transition:transform .35s ease-in}
.led-link:hover::after, .led-link:focus-visible::after{transform:scaleX(1); transition:transform .6s cubic-bezier(.45,0,.2,1)}

@media (hover: none){
  .cover .dim{filter:none}
  .cover .lit, .cover .led{display:none}
}
@media (prefers-reduced-motion: reduce){
  .cover .lit, .cover .led, .led-link::after{transition-duration:.01s !important; transition-delay:0s !important}
}

/* Tekst wyłania się od lewej do prawej, gdy sekcja wjeżdża w ekran: miękka krawędź maski
   przesuwa się po wierszu, więc litery pojawiają się kolejno. Bez skryptu tekst jest widoczny. */
@property --tw { syntax: '<percentage>'; inherits: false; initial-value: 135%; }
.reveal h2 > .tw{display:block}
.reveal[data-reveal] .tw{--tw:135%; -webkit-mask-image:linear-gradient(90deg, #000 calc(var(--tw) - 35%), transparent var(--tw)); mask-image:linear-gradient(90deg, #000 calc(var(--tw) - 35%), transparent var(--tw)); transition:--tw 1.7s cubic-bezier(.3,.1,.2,1) var(--d, 0s)}
.reveal[data-reveal="0"] .tw{--tw:0%; transition:none}
.reveal[data-reveal] .fi img{transition:opacity 1.6s ease var(--d, 0s), transform 1.9s cubic-bezier(.2,.7,.2,1) var(--d, 0s)}
.reveal[data-reveal="0"] .fi img{opacity:0; transform:translateY(18px); transition:none}
.reveal[data-reveal] span[aria-hidden="true"]{transition:opacity 1.4s ease .3s}
.reveal[data-reveal="0"] span[aria-hidden="true"]{opacity:0; transition:none}
@media (prefers-reduced-motion: reduce){
  .reveal[data-reveal] .fi img{opacity:1; transform:none; transition:none}
  .reveal[data-reveal] .tw{-webkit-mask-image:none; mask-image:none; transition:none}
}

.for-link{transition:border-color .5s ease}
.for-link:hover{border-top-color:#fff4dc !important}

/* ściemniacz */
/* Cienka linia ze świetlnym punktem: odcinek po lewej od punktu świeci, reszta zostaje w cieniu;
   poświata punktu rośnie razem z poziomem światła (--lvl dziedziczone ze sceny). */
.dimmer{-webkit-appearance:none; appearance:none; width:132px; height:44px; margin:0; padding:0; background:transparent; cursor:pointer; --at:calc(var(--lvl, 1) * 100%)}
.dimmer::-webkit-slider-runnable-track{height:1px; background:linear-gradient(90deg, rgba(255,226,170,.25) 0%, #fff4dc var(--at), rgba(244,239,231,.28) var(--at))}
.dimmer::-moz-range-track{height:1px; background:rgba(244,239,231,.28)}
.dimmer::-moz-range-progress{height:1px; background:linear-gradient(90deg, rgba(255,226,170,.25), #fff4dc)}
.dimmer::-webkit-slider-thumb{-webkit-appearance:none; width:5px; height:5px; margin-top:-2px; border-radius:50%; background:#fff4dc; box-shadow:0 0 calc(3px + 9px * var(--lvl, 1)) calc(1px + 2px * var(--lvl, 1)) rgba(255,214,150,calc(.35 + .5 * var(--lvl, 1))), 0 0 calc(10px + 22px * var(--lvl, 1)) calc(2px + 5px * var(--lvl, 1)) rgba(255,205,130,calc(.1 + .25 * var(--lvl, 1))); transition:transform .4s ease}
.dimmer::-moz-range-thumb{width:5px; height:5px; border:0; border-radius:50%; background:#fff4dc; box-shadow:0 0 calc(3px + 9px * var(--lvl, 1)) calc(1px + 2px * var(--lvl, 1)) rgba(255,214,150,calc(.35 + .5 * var(--lvl, 1))), 0 0 calc(10px + 22px * var(--lvl, 1)) calc(2px + 5px * var(--lvl, 1)) rgba(255,205,130,calc(.1 + .25 * var(--lvl, 1))); transition:transform .4s ease}
.dimmer:hover::-webkit-slider-thumb, .dimmer:active::-webkit-slider-thumb{transform:scale(1.6)}
.dimmer:hover::-moz-range-thumb, .dimmer:active::-moz-range-thumb{transform:scale(1.6)}
.field::placeholder{color:#b8b0a4; opacity:1}
a:focus-visible, button:focus-visible, input:focus-visible{outline:1px solid #ffe2aa; outline-offset:6px}
.paper a:focus-visible{outline-color:#14110e}

@media (max-width: 760px){
  .pad{padding:24px 22px !important}
  .hero{padding-left:0 !important}
  .tag{display:none !important}
  .foot{justify-content:space-between !important}
}
@media (prefers-reduced-motion: reduce){
  .rise, .scene, .torch{transition-duration:.01s !important; transition-delay:0s !important}
}