/* Efekty wybrane przez Michała 25.10.2026 z laboratorium Lightswind, przepisane na czysty CSS.
   Zasady: animujemy tylko transform, opacity i filter (składa je karta graficzna, stąd 60 fps),
   treść jest widoczna bez JS (R7), a przy „ogranicz ruch” zostaje nieruchomy stan końcowy. */

/* ============ 01 · Studio: słowa wyostrzają się przy przewijaniu ============ */
/* Słowa dzieli i przełącza istniejący skrypt strony (.mw / .mw.on); tu tylko wygląd przejścia. */
html.ef-js #manifesto .mw{display:inline-block;opacity:.18;filter:blur(6px);transform:translate3d(0,.16em,0);
  transition:opacity .6s var(--ease),filter .6s var(--ease),transform .6s var(--ease),color .4s var(--ease);will-change:opacity,filter,transform}
html.ef-js #manifesto .mw.on{opacity:1;filter:blur(0);transform:none}

/* ============ 01 · Studio: hasła usług przewijają się w ramce wizjera ============ */
@media (prefers-reduced-motion:no-preference){
  html.ef-js .uslugi-tagi.ef-petla{display:block;position:relative;max-width:none;margin:52px auto 0;padding:0;border:0;
    height:3.3em;overflow:hidden;font-size:clamp(28px,5vw,68px);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
            mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent)}
  html.ef-js .uslugi-tagi.ef-petla li{display:block;height:1.1em;line-height:1.1em;margin:0;padding:0;border:0;border-radius:0;background:none;
    font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1em;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);
    white-space:nowrap;transform:translate3d(0,1.1em,0);animation:ef-petla 16s infinite;will-change:transform}
  html.ef-js .uslugi-tagi.ef-petla:not(.ef-widac) li{animation-play-state:paused}
  /* narożniki wizjera wokół środkowego hasła */
  html.ef-js .uslugi-tagi.ef-petla::after{content:"";position:absolute;left:50%;top:1.1em;width:min(100%,10.6em);height:1.1em;
    transform:translateX(-50%);pointer-events:none;--k:.32em;--g:3px;
    background:
      linear-gradient(var(--acc),var(--acc)) left top/var(--k) var(--g) no-repeat,
      linear-gradient(var(--acc),var(--acc)) left top/var(--g) var(--k) no-repeat,
      linear-gradient(var(--acc),var(--acc)) right top/var(--k) var(--g) no-repeat,
      linear-gradient(var(--acc),var(--acc)) right top/var(--g) var(--k) no-repeat,
      linear-gradient(var(--acc),var(--acc)) left bottom/var(--k) var(--g) no-repeat,
      linear-gradient(var(--acc),var(--acc)) left bottom/var(--g) var(--k) no-repeat,
      linear-gradient(var(--acc),var(--acc)) right bottom/var(--k) var(--g) no-repeat,
      linear-gradient(var(--acc),var(--acc)) right bottom/var(--g) var(--k) no-repeat}
}
@keyframes ef-petla{0.000%{transform:translate3d(0,1.10em,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}9.000%{transform:translate3d(0,1.10em,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}12.500%{transform:translate3d(0,0.00em,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}21.500%{transform:translate3d(0,0.00em,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}25.000%{transform:translate3d(0,-1.10em,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}34.000%{transform:translate3d(0,-1.10em,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}37.500%{transform:translate3d(0,-2.20em,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}46.500%{transform:translate3d(0,-2.20em,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}50.000%{transform:translate3d(0,-3.30em,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}59.000%{transform:translate3d(0,-3.30em,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}62.500%{transform:translate3d(0,-4.40em,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}71.500%{transform:translate3d(0,-4.40em,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}75.000%{transform:translate3d(0,-5.50em,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}84.000%{transform:translate3d(0,-5.50em,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}87.500%{transform:translate3d(0,-6.60em,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}96.500%{transform:translate3d(0,-6.60em,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}100%{transform:translate3d(0,-7.70em,0)}}

/* ============ Dla kogo: karty branż ============ */
/* Płynność: karty NIE zmieniają rozmiaru. Każda ma stałą szerokość rozwiniętej karty, kolejne
   nachodzą na poprzednie, a rozwinięcie to przesunięcie (transform) liczone na karcie graficznej.
   Przeglądarka nie przelicza układu ani nie maluje strony od nowa w trakcie animacji.
   Tekst też ma stałą szerokość: zwinięta karta pokazuje pionowy tytuł, rozwinięta opis;
   warstwy tylko się przenikają, więc nic nie przeskakuje. */
.ef-karty{display:flex;gap:12px;margin-top:44px}
.ef-karta{position:relative;display:block;min-width:0;color:#fff;text-decoration:none}
.ef-k-in{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:#0b0d12}
.ef-k-in img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.ef-k-cien{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.1) 100%)}
.ef-k-txt{position:absolute;left:0;bottom:0;z-index:1;padding:20px}
.ef-k-txt b{display:block;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:21px;line-height:1.15}
.ef-k-txt small{display:block;margin-top:6px;font-size:13px;line-height:1.35;color:rgba(255,255,255,.72)}
.ef-k-opis{display:block;margin-top:12px;font-size:15px;line-height:1.4;color:#fff}
.ef-k-dalej{display:inline-block;margin-top:12px;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--acc)}
.ef-k-pion{display:none}

@media (min-width:861px) and (hover:hover) and (pointer:fine){
  .ef-karty{display:block;position:relative;height:440px;border-radius:14px;overflow:hidden;container-type:inline-size;contain:layout paint}
  .ef-karta{--g:12px;--w0:calc((100cqw - 6 * var(--g)) / 7);--u:calc((100cqw - 6 * var(--g)) / 8.7);--E:calc(2.7 * var(--u));
    position:absolute;top:0;left:calc(-1 * var(--g));width:calc(var(--E) + var(--g));height:100%;
    transform:translate3d(var(--x),0,0);transition:transform .55s var(--ease);will-change:transform}
  .ef-k-in{left:var(--g);right:auto;width:var(--E)}
  /* odstęp i zaokrąglone prawe rogi poprzedniej karty: pasek w kolorze tła + dwa „wycięte” narożniki */
  .ef-karta:not(:first-child)::before{content:"";position:absolute;z-index:2;top:0;bottom:0;left:-14px;width:calc(14px + var(--g));pointer-events:none;
    background:
      linear-gradient(var(--bg),var(--bg)) right top/var(--g) 100% no-repeat,
      radial-gradient(circle at 0 100%,transparent 13.5px,var(--bg) 14px) left top/14px 14px no-repeat,
      radial-gradient(circle at 0 0,transparent 13.5px,var(--bg) 14px) left bottom/14px 14px no-repeat}
  /* zdjęcie stałej szerokości przesuwa się tak, żeby widać było jego środek */
  .ef-k-in img{inset:0 auto 0 0;width:var(--E);transform:translate3d(calc((var(--v) - var(--E)) / 2),0,0);
    transition:transform .55s var(--ease);will-change:transform}
  .ef-k-pion{display:block;position:absolute;left:20px;bottom:22px;z-index:1;writing-mode:vertical-rl;transform:rotate(180deg);
    white-space:nowrap;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:20px;letter-spacing:.01em;
    opacity:1;transition:opacity .25s ease .12s}
  .ef-k-txt{width:min(330px,100%);opacity:0;transition:opacity .15s ease}
  .ef-karta:is(:hover,:focus-visible) .ef-k-pion{opacity:0;transition:opacity .12s ease}
  .ef-karta:is(:hover,:focus-visible) .ef-k-txt{opacity:1;transition:opacity .35s ease .2s}
}
@media (min-width:861px) and (hover:hover) and (pointer:fine){.ef-karty>.ef-karta:nth-child(1){--x:calc(0 * (var(--w0) + var(--g)));--v:var(--w0)}
.ef-karty>.ef-karta:nth-child(2){--x:calc(1 * (var(--w0) + var(--g)));--v:var(--w0)}
.ef-karty>.ef-karta:nth-child(3){--x:calc(2 * (var(--w0) + var(--g)));--v:var(--w0)}
.ef-karty>.ef-karta:nth-child(4){--x:calc(3 * (var(--w0) + var(--g)));--v:var(--w0)}
.ef-karty>.ef-karta:nth-child(5){--x:calc(4 * (var(--w0) + var(--g)));--v:var(--w0)}
.ef-karty>.ef-karta:nth-child(6){--x:calc(5 * (var(--w0) + var(--g)));--v:var(--w0)}
.ef-karty>.ef-karta:nth-child(7){--x:calc(6 * (var(--w0) + var(--g)));--v:var(--w0)}
.ef-karty:has(>.ef-karta:nth-child(1):is(:hover,:focus-visible))>.ef-karta:nth-child(1){--x:calc(0 * (var(--u) + var(--g)));--v:var(--E)}
.ef-karty:has(>.ef-karta:nth-child(1):is(:hover,:focus-visible))>.ef-karta:nth-child(2){--x:calc(1 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(1):is(:hover,:focus-visible))>.ef-karta:nth-child(3){--x:calc(2 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(1):is(:hover,:focus-visible))>.ef-karta:nth-child(4){--x:calc(3 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(1):is(:hover,:focus-visible))>.ef-karta:nth-child(5){--x:calc(4 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(1):is(:hover,:focus-visible))>.ef-karta:nth-child(6){--x:calc(5 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(1):is(:hover,:focus-visible))>.ef-karta:nth-child(7){--x:calc(6 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(2):is(:hover,:focus-visible))>.ef-karta:nth-child(1){--x:calc(0 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(2):is(:hover,:focus-visible))>.ef-karta:nth-child(2){--x:calc(1 * (var(--u) + var(--g)));--v:var(--E)}
.ef-karty:has(>.ef-karta:nth-child(2):is(:hover,:focus-visible))>.ef-karta:nth-child(3){--x:calc(2 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(2):is(:hover,:focus-visible))>.ef-karta:nth-child(4){--x:calc(3 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(2):is(:hover,:focus-visible))>.ef-karta:nth-child(5){--x:calc(4 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(2):is(:hover,:focus-visible))>.ef-karta:nth-child(6){--x:calc(5 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(2):is(:hover,:focus-visible))>.ef-karta:nth-child(7){--x:calc(6 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(3):is(:hover,:focus-visible))>.ef-karta:nth-child(1){--x:calc(0 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(3):is(:hover,:focus-visible))>.ef-karta:nth-child(2){--x:calc(1 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(3):is(:hover,:focus-visible))>.ef-karta:nth-child(3){--x:calc(2 * (var(--u) + var(--g)));--v:var(--E)}
.ef-karty:has(>.ef-karta:nth-child(3):is(:hover,:focus-visible))>.ef-karta:nth-child(4){--x:calc(3 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(3):is(:hover,:focus-visible))>.ef-karta:nth-child(5){--x:calc(4 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(3):is(:hover,:focus-visible))>.ef-karta:nth-child(6){--x:calc(5 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(3):is(:hover,:focus-visible))>.ef-karta:nth-child(7){--x:calc(6 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(4):is(:hover,:focus-visible))>.ef-karta:nth-child(1){--x:calc(0 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(4):is(:hover,:focus-visible))>.ef-karta:nth-child(2){--x:calc(1 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(4):is(:hover,:focus-visible))>.ef-karta:nth-child(3){--x:calc(2 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(4):is(:hover,:focus-visible))>.ef-karta:nth-child(4){--x:calc(3 * (var(--u) + var(--g)));--v:var(--E)}
.ef-karty:has(>.ef-karta:nth-child(4):is(:hover,:focus-visible))>.ef-karta:nth-child(5){--x:calc(4 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(4):is(:hover,:focus-visible))>.ef-karta:nth-child(6){--x:calc(5 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(4):is(:hover,:focus-visible))>.ef-karta:nth-child(7){--x:calc(6 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(5):is(:hover,:focus-visible))>.ef-karta:nth-child(1){--x:calc(0 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(5):is(:hover,:focus-visible))>.ef-karta:nth-child(2){--x:calc(1 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(5):is(:hover,:focus-visible))>.ef-karta:nth-child(3){--x:calc(2 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(5):is(:hover,:focus-visible))>.ef-karta:nth-child(4){--x:calc(3 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(5):is(:hover,:focus-visible))>.ef-karta:nth-child(5){--x:calc(4 * (var(--u) + var(--g)));--v:var(--E)}
.ef-karty:has(>.ef-karta:nth-child(5):is(:hover,:focus-visible))>.ef-karta:nth-child(6){--x:calc(5 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(5):is(:hover,:focus-visible))>.ef-karta:nth-child(7){--x:calc(6 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(6):is(:hover,:focus-visible))>.ef-karta:nth-child(1){--x:calc(0 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(6):is(:hover,:focus-visible))>.ef-karta:nth-child(2){--x:calc(1 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(6):is(:hover,:focus-visible))>.ef-karta:nth-child(3){--x:calc(2 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(6):is(:hover,:focus-visible))>.ef-karta:nth-child(4){--x:calc(3 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(6):is(:hover,:focus-visible))>.ef-karta:nth-child(5){--x:calc(4 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(6):is(:hover,:focus-visible))>.ef-karta:nth-child(6){--x:calc(5 * (var(--u) + var(--g)));--v:var(--E)}
.ef-karty:has(>.ef-karta:nth-child(6):is(:hover,:focus-visible))>.ef-karta:nth-child(7){--x:calc(6 * (var(--u) + var(--g)) + var(--E) - var(--u));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(7):is(:hover,:focus-visible))>.ef-karta:nth-child(1){--x:calc(0 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(7):is(:hover,:focus-visible))>.ef-karta:nth-child(2){--x:calc(1 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(7):is(:hover,:focus-visible))>.ef-karta:nth-child(3){--x:calc(2 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(7):is(:hover,:focus-visible))>.ef-karta:nth-child(4){--x:calc(3 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(7):is(:hover,:focus-visible))>.ef-karta:nth-child(5){--x:calc(4 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(7):is(:hover,:focus-visible))>.ef-karta:nth-child(6){--x:calc(5 * (var(--u) + var(--g)));--v:var(--u)}
.ef-karty:has(>.ef-karta:nth-child(7):is(:hover,:focus-visible))>.ef-karta:nth-child(7){--x:calc(6 * (var(--u) + var(--g)));--v:var(--E)}}
/* telefon, tablet i ekrany bez myszki: rząd do przesuwania palcem, pełny tekst od razu */
@media not ((min-width:861px) and (hover:hover) and (pointer:fine)){
  .ef-karty{overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ef-karty::-webkit-scrollbar{display:none}
  .ef-karta{flex:0 0 min(76%,340px);height:400px;scroll-snap-align:start}
}

/* ============ Napis MJDM z szybkim montażem nad stopką ============ */
.ef-znak{background:var(--bg);padding:clamp(40px,7vw,96px) 20px clamp(24px,4vw,56px)}
.ef-znak-in{position:relative;width:min(1100px,88vw);aspect-ratio:10/3;margin:0 auto;overflow:hidden}
.ef-znak-wideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111}
.ef-znak-maska{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);display:block;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  html.ef-js #manifesto .mw{opacity:1;filter:none;transform:none;transition:none}
  .ef-karta,.ef-k-in img,.ef-k-pion,.ef-k-txt{transition:none}
}