/* Kolorystyka wg Księgi znaku Impuls Sztuki (str. 18-19):
   logo: czerwień #FF0000 / czerń #000000
   tekst na białym tle: antracyt #333333 (+ tony uzupełniające) */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arimo,Arial,sans-serif}
body{
  background:#ffffff;
  color:#333333;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

.wrap{
  flex:1;
  width:min(560px,calc(100vw - 48px));
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 0;
}

.brand{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.brand .logo{
  width:min(546px,100%);
  height:auto;
  overflow:visible;
}
.brand .logo svg{width:100%;height:auto;display:block;overflow:visible}

/* Maskowanie "cięcia" pętli: krótki fade do bieli tuż przed zapętleniem
   i z powrotem tuż po nim, żeby ukryć natychmiastowy reset kropki/liter.
   Kryje tylko obszar spoczynkowy loga (kropka osiada na 33% i stoi w
   miejscu do końca cyklu) — wjazd kropki spoza kadru pozostaje widoczny
   jak dotąd, bo to zamierzony efekt "komety", nie błąd do zamaskowania.
   Duchy komety (.dot-ghost-*) mają własne animation-delay do 72ms — przy
   restarcie pętli resetują się do pozycji startowej PÓŹNIEJ niż główna
   kropka (o swoje opóźnienie), więc krótko po granicy cyklu wciąż stoją
   w STAREJ pozycji spoczynkowej. Odsłona (fade z bieli) zaczyna się więc
   nie od razu na 0%, tylko dopiero po ok. 80ms pełnej bieli — z zapasem
   dłużej niż najdłuższe opóźnienie ducha — żeby nic z żadnego ducha nie
   "prześwitywało" jeszcze w starym miejscu, zanim maska zacznie zanikać. */
.logo-fade-mask{
  position:absolute;
  inset:0;
  background:#ffffff;
  opacity:0;
  pointer-events:none;
  z-index:1;
  animation: logo-loop-fade 6.1167s infinite;
}
@keyframes logo-loop-fade{
  0%    {opacity:1}
  1.3%  {opacity:1}
  5.3%  {opacity:0}
  90%   {opacity:0}
  96%   {opacity:1}
  100%  {opacity:1}
}

.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.bottom-row{
  position:relative;
  z-index:2;
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:22px 40px;
  width:min(1040px,calc(100vw - 64px));
  margin:0 auto;
  padding:0 0 44px;
  text-align:center;
}
.bottom-row-left{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:22px 36px;
}
.addr-wrap{display:contents;font-style:normal}

.addr-text{
  display:inline-flex;
  align-items:center;
  color:#333333;
  font-size:14px;
  line-height:1.4;
  white-space:nowrap;
}

.info-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#333333;
  text-decoration:none;
  font-size:14px;
  line-height:1.4;
  white-space:nowrap;
  transition:color .15s ease;
}
.info-link svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}
.info-link:hover,
.info-link:focus-visible{color:#FF0000}
.info-link:hover svg,
.info-link:focus-visible svg{transform:translateX(3px)}
.info-link:focus-visible{outline:2px solid #FF0000;outline-offset:3px;border-radius:2px}

/* CTA: stan domyślny antracyt #333333; po najechaniu (hover) czerwony obrys,
   białe wypełnienie, czerwony tekst. */
.cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 27px;
  font-family:Arimo,Arial,sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  color:#333333;
  background:transparent;
  border:1.5px solid #333333;
  border-radius:999px;
  text-decoration:none;
  transition:color .15s ease, background-color .15s ease, border-color .15s ease;
}
.cta:hover,
.cta:focus-visible{
  color:#FF0000;
  background:#FFFFFF;
  border-color:#FF0000;
}
.cta:focus-visible{outline:2px solid #FF0000;outline-offset:3px}
.cta svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

.status{
  position:relative;
  z-index:2;
  background:#ffffff;
  padding:20px 24px 28px;
  text-align:center;
  font-size:12px;
  line-height:1.6;
  color:#999999;
  border-top:1px solid rgba(0,0,0,.08);
}

/* ===================== Animacja logo (kropka + liternictwo) =====================
   Cykl: 6,1167 s (zapętlony, patrz .logo-fade-mask niżej). Rytm ruchu kropki i timing
   liter oparte na klatkach (60fps) oryginalnego renderu Cavalry, przeskalowane do
   rozmiaru loga na stronie i DODATKOWO wzmocnione (x2 w poziomie, x1,4 w pionie)
   względem zmierzonych wartości źródłowych — większa, bardziej dynamiczna amplituda,
   kropka wjeżdża zza lewej krawędzi ekranu. Kropka spada dwoma coraz większymi
   "podrygami" w pionie (nie zygzakiem w poziomie), przesuwając się przy tym stopniowo
   w prawo, aż osiada w docelowym miejscu przy literze S. */

.dot-anim{
  animation: dot-drop 6.1167s infinite both;
}
@keyframes dot-drop{
  0%     { transform: translate(-1104px, 0px);      animation-timing-function: cubic-bezier(.2,0,.6,.8); }
  8.18%  { transform: translate(-604px, -1px);      animation-timing-function: cubic-bezier(.3,.15,.6,.4); }
  11.98% { transform: translate(-488px, -368px);    animation-timing-function: cubic-bezier(.4,.6,.6,1); }
  15.81% { transform: translate(-416px, 244px);     animation-timing-function: cubic-bezier(.3,0,.6,.4); }
  19.08% { transform: translate(-326px, -441px);    animation-timing-function: cubic-bezier(.4,.6,.6,1); }
  23.43% { transform: translate(-226px, 379px);     animation-timing-function: cubic-bezier(.3,0,.6,.4); }
  27.25% { transform: translate(-110px, 0px);       animation-timing-function: cubic-bezier(.4,.6,.6,1); }
  33.24%,100% { transform: translate(0px, 0px); }
}

/* Kometa: 12 "duchów" kropki, ta sama animacja z narastającym opóźnieniem
   (próbka historii ostatnich 0,07 s co ok. 6 ms) i malejącą przezroczystością +
   narastającym rozmyciem — dyskretna rekonstrukcja techniki z renderu rastrowego
   (próbkowanie pozycji kropki z ostatnich 0,07 s, zanikająca przezroczystość). */
.dot-ghost{
  animation: dot-drop 6.1167s infinite both;
}
.dot-ghost-1{animation-delay:.006s;opacity:.42;filter:blur(.4px)}
.dot-ghost-2{animation-delay:.012s;opacity:.33;filter:blur(.6px)}
.dot-ghost-3{animation-delay:.018s;opacity:.26;filter:blur(.9px)}
.dot-ghost-4{animation-delay:.024s;opacity:.20;filter:blur(1.2px)}
.dot-ghost-5{animation-delay:.030s;opacity:.15;filter:blur(1.5px)}
.dot-ghost-6{animation-delay:.036s;opacity:.11;filter:blur(1.8px)}
.dot-ghost-7{animation-delay:.042s;opacity:.08;filter:blur(2.1px)}
.dot-ghost-8{animation-delay:.048s;opacity:.055;filter:blur(2.4px)}
.dot-ghost-9{animation-delay:.054s;opacity:.036;filter:blur(2.7px)}
.dot-ghost-10{animation-delay:.060s;opacity:.022;filter:blur(3.0px)}
.dot-ghost-11{animation-delay:.066s;opacity:.012;filter:blur(3.3px)}
.dot-ghost-12{animation-delay:.072s;opacity:.006;filter:blur(3.6px)}

/* Litery pojawiają się pojedynczo w kolejności I,M,P,U,L,S, niemal błyskawicznie
   (~30ms), w odstępach ok. 0,133 s — zmierzone bezpośrednio z renderu. */
.ltr{opacity:0}
.ltr-1{animation: ltr-fade-1 6.1167s linear infinite both}
.ltr-2{animation: ltr-fade-2 6.1167s linear infinite both}
.ltr-3{animation: ltr-fade-3 6.1167s linear infinite both}
.ltr-4{animation: ltr-fade-4 6.1167s linear infinite both}
.ltr-5{animation: ltr-fade-5 6.1167s linear infinite both}
.ltr-6{animation: ltr-fade-6 6.1167s linear infinite both}
@keyframes ltr-fade-1{0%,38.70%{opacity:0}39.19%,100%{opacity:1}}
@keyframes ltr-fade-2{0%,40.87%{opacity:0}41.36%,100%{opacity:1}}
@keyframes ltr-fade-3{0%,43.05%{opacity:0}43.54%,100%{opacity:1}}
@keyframes ltr-fade-4{0%,45.23%{opacity:0}45.72%,100%{opacity:1}}
@keyframes ltr-fade-5{0%,47.41%{opacity:0}47.90%,100%{opacity:1}}
@keyframes ltr-fade-6{0%,49.58%{opacity:0}50.07%,100%{opacity:1}}

.signature{opacity:0;animation: signature-fade 6.1167s ease-out infinite both}
@keyframes signature-fade{0%,53.42%{opacity:0}59.95%,100%{opacity:1}}

@media (prefers-reduced-motion: reduce){
  .dot-anim,.ltr-1,.ltr-2,.ltr-3,.ltr-4,.ltr-5,.ltr-6,.signature{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .dot-trail{display:none !important}
  .logo-fade-mask{animation:none !important;opacity:0 !important}
}

@media (max-width:680px){
  .bottom-row{justify-content:center;text-align:center}
  .bottom-row-left{justify-content:center}
}

@media (max-width:480px){
  .wrap{padding:32px 0}
  .bottom-row{flex-direction:column;gap:18px;padding-bottom:32px}
  .bottom-row-left{flex-direction:column;gap:18px}
}