/* Wspólna stopka stron publicznych (od 2026-10-16)
   Minimalistyczna: logo · opis · © · Facebook. U góry „dysza drukarki 3D”: świecący punkt jedzie po krawędzi
   i „drukuje” kolorową linię (co 7 s). Bez animacji przy ustawieniu „ogranicz ruch”.
   Kolory ze zmiennych strony (--bg2, --border, --text, --muted, --blue, --purple). */
footer.tf {
  position: relative;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 1.6rem 2rem;
  overflow: hidden;      /* starsze przeglądarki */
  overflow: clip visible; /* punkt nie wychodzi poza ekran w bok, a jego blask widać nad krawędzią */
}
.tf-in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 1.2rem; }
.tf-logo { font-family: 'Space Grotesk', sans-serif; font-size: 19.2px; font-weight: 800; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tf-logo img { width: 34px; height: 34px; object-fit: contain; filter: brightness(0) invert(73%) sepia(94%) saturate(547%) hue-rotate(155deg) brightness(104%) drop-shadow(0 0 6px #00D4FF); }
body.light .tf-logo img { filter: brightness(0) saturate(100%); }
.tf-logo b { color: var(--blue); font-weight: 800; }
.tf-sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
.tf-tag { margin: 0; font-size: .85rem; color: var(--muted); }
.tf-copy { margin: 0 0 0 auto; font-size: .8rem; color: var(--muted); }
.tf-fb { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; color: var(--muted); border: 1px solid var(--border); transition: color .25s, border-color .25s, transform .25s; }
.tf-fb:hover, .tf-fb:focus-visible { color: var(--blue); border-color: var(--blue); transform: translateY(-2px); }

/* Dysza drukarki: świecący punkt jedzie po krawędzi i „drukuje” za sobą kolorową linię.
   Linia i punkt to JEDEN element z jedną animacją (punkt = tło na prawym końcu linii) – nie mogą się rozjechać.
   Wcześniej były to 2 osobne animacje i po restarcie jednej z nich (np. zmiana szerokości okna) punkt wyprzedzał linię.
   Przesuwany tylko transform (bez przeliczania układu co klatkę); szerokość 100% + 12 px, żeby środek punktu doszedł do prawej krawędzi. */
footer.tf::before {
  content: ""; position: absolute; left: 0; top: -12px; width: calc(100% + 12px); height: 24px; pointer-events: none;
  background:
    radial-gradient(circle at calc(100% - 12px) 50%, var(--blue) 0 3.5px, color-mix(in srgb, var(--blue) 55%, transparent) 5px, color-mix(in srgb, var(--blue) 18%, transparent) 8px, transparent 12px) right center / 24px 24px no-repeat,
    linear-gradient(90deg, var(--blue), var(--purple)) left center / calc(100% - 12px) 2px no-repeat;
  animation: tf-print 7s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes tf-print { 0% { transform: translateX(-100%); opacity: 1; } 70% { transform: translateX(0); opacity: 1; } 88%, 100% { transform: translateX(0); opacity: 0; } }

/* Tablet i telefon: wszystko wyśrodkowane, jedno pod drugim */
@media (max-width: 1024px) {
  footer.tf { padding: 1.6rem 16px 1.3rem; }
  .tf-in { flex-direction: column; text-align: center; gap: .7rem; }
  .tf-sep { display: none; }
  .tf-fb { order: 3; }
  .tf-copy { order: 4; margin: .3rem 0 0; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  footer.tf::before { animation: none; transform: none; opacity: .8; background: linear-gradient(90deg, var(--blue), var(--purple)) left center / calc(100% - 12px) 2px no-repeat; }
}