/* ============================================================
   Dekoracyjne akcenty produktowe (ciemne tło obrazów wtapia się w sekcję).
   Czysto ozdobne: aria-hidden + pointer-events:none, nigdy nie blokują UI.
   Tylko szerokie ekrany (≥1200px) — na węższych chowamy, żeby nie nachodziły na treść.
   ============================================================ */
.kontakt { position: relative; }

/* ============================================================
   SEO: nagłówek H1 dostępny dla wyszukiwarek/czytników, niewidoczny
   wizualnie (hero to animacja, nie chcemy zmieniać jego wyglądu).
   ============================================================ */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — ukryty dopóki nie dostanie fokusu klawiaturą (WCAG 2.4.1) */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r-md);
  background: var(--bg-elevated); color: var(--fg-1);
  border: 1px solid var(--border-cyan);
  font-family: var(--font-mono); font-size: var(--fs-small);
  transform: translateY(-160%); transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: none; outline: none; box-shadow: var(--edge-cyan); }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* ── sekcja „Co robię" — 3 karty oferty jako panele terminala CRT (re-tokenizowane na design system) ── */
.uslugi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  width: min(1080px, 94%);
  margin: var(--space-6) auto 0;
}
/* differentiator + CTA pod kartami (belief + egzekucja) */
.uslugi-diff { width: min(940px, 94%); margin: var(--space-5) auto 0; text-align: center; color: var(--fg-2); line-height: 1.6; }
.uslugi-cta { width: min(940px, 94%); margin: var(--space-4) auto 0; text-align: center; font-family: var(--font-mono, ui-monospace, monospace); font-size: .92rem; letter-spacing: .02em; }
.uslugi-cta__brief { color: var(--fg-1); border-bottom: 1px solid var(--magenta); text-decoration: none; transition: color var(--t-base) var(--ease-out); }
.uslugi-cta__brief:hover { color: var(--magenta); }
.uslugi-cta__malpka { color: var(--cyan); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; transition: opacity var(--t-base) var(--ease-out); }
.uslugi-cta__malpka:hover { opacity: .72; text-decoration: underline; }

/* ── piktogramy kart: małe, CIĄGLE animowane (40x40, float right jak .loop) ── */
.pico { width: 40px; height: 40px; float: right; margin: -2px -2px 6px 10px; overflow: visible; }
.pico rect, .pico line, .pico path, .pico circle { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pico .pico__track, .pico .pico__topbar, .pico .pico__scrub-bg { stroke: var(--border-soft); }
.pico .pico__bdot { fill: var(--border-soft); stroke: none; }

/* 01 wideo: ramka + pulsujący play + sweepujący scrub (interaktywnie) */
.pico--video .pico__play { fill: var(--magenta); stroke: none; }
.pico--video .pico__pulse { stroke: var(--magenta); transform-box: fill-box; transform-origin: center; animation: picoPulse 1.9s ease-out infinite; }
.pico--video .pico__scrub { stroke: var(--cyan); stroke-dasharray: 34; stroke-dashoffset: 0; animation: picoSweep 2.4s ease-in-out infinite; }
@keyframes picoPulse { 0% { transform: scale(.55); opacity: .9; } 70% { opacity: 0; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes picoSweep { 0% { stroke-dashoffset: 34; } 55%, 100% { stroke-dashoffset: 0; } }

/* 02 strony: okno + linie kodu „piszą się" jedna po drugiej + mrugający kursor */
.pico--code .pico__ln { stroke: var(--cyan); stroke-dasharray: var(--len); stroke-dashoffset: 0; animation: picoType 3s ease-in-out infinite; }
.pico--code .pico__ln--2 { animation-delay: .4s; }
.pico--code .pico__ln--3 { animation-delay: .8s; }
.pico--code .pico__caret { fill: var(--magenta); stroke: none; animation: picoBlink 1.05s steps(1) infinite; }
@keyframes picoType { 0% { stroke-dashoffset: var(--len); } 32%, 86% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: var(--len); } }
@keyframes picoBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* 03 pamięć: węzły przyciągają się do huba jak magnesy i łączą elektrycznie (sieć/pamięć się buduje) */
.pico--mesh .pico__hub { fill: var(--magenta); stroke: none; }
.pico--mesh .pico__node { fill: var(--cyan); stroke: none; transform-box: fill-box; transform-origin: center; animation: picoAttract 3s ease-in-out infinite; }
.pico--mesh .pico__node--2 { animation-delay: .35s; }
.pico--mesh .pico__node--3 { animation-delay: .7s; }
.pico--mesh .pico__link { stroke: var(--cyan); stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: picoCharge 3s ease-in-out infinite; }
.pico--mesh .pico__link--2 { animation-delay: .35s; }
.pico--mesh .pico__link--3 { animation-delay: .7s; }
@keyframes picoAttract { 0% { transform: translate(var(--ox), var(--oy)); opacity: .25; } 30%, 82% { transform: translate(0,0); opacity: 1; } 100% { transform: translate(var(--ox), var(--oy)); opacity: .25; } }
@keyframes picoCharge { 0%, 28% { stroke-dashoffset: var(--len); opacity: .3; } 46%, 82% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: var(--len); opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
  .pico .pico__pulse, .pico .pico__scrub, .pico .pico__ln, .pico .pico__caret, .pico .pico__node, .pico .pico__link { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; }
}
.uslugi-item {
  position: relative;
  overflow: hidden;
  padding: var(--space-5);
  background: var(--glass-1);            /* token zamiast hardcoded rgba */
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);           /* 6px — twarda krawędź CRT (było 14) */
  text-align: left;
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out);
}
/* hover z glow — spójnie z resztą systemu (klipy portfolio i CTA świecą, karty były płaskie) */
.uslugi-item:hover { transform: translateY(-3px); border-color: var(--border-cyan);
  box-shadow: var(--shadow-md), var(--glow-cyan); }
/* stagger wejścia kart — przez OPACITY (rise zapewnia lewy neon-bar); transform zostaje wolny dla hovera.
   Gated html.js → bez JS karty są widoczne. Trigger: .in na siatce (.reveal-div z observera w app.js). */
html.js .uslugi-item { opacity: 0;
  transition: opacity var(--t-slow) var(--ease-out) calc(var(--i, 0) * 70ms),
              transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out); }
html.js .uslugi-grid.in .uslugi-item { opacity: 1; }
/* lewy neon-bar — „wstaje" gdy siatka się odsłania (stagger przez --i) */
.uslugi-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--grad-neon); transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms);
}
.uslugi-grid.in .uslugi-item::before { transform: scaleY(1); }
/* statyczny scanline (tani — bez mix-blend) → panel „wydrukowany na ekranie" */
.uslugi-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
  opacity: .55;
}
.uslugi-item__n { display: block; margin-bottom: var(--space-3); color: var(--cyan); }  /* mono index 01–04 */
.uslugi-item h3 {
  font-size: var(--fs-h4);              /* 20px token (było 1.05rem off-scale) */
  margin: 0 0 var(--space-2);
  color: var(--fg-1);
}
.uslugi-item p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--fg-2);                   /* body copy → --fg-2 (AA ok; było --fg-3 = 3.7:1) */
}

/* „drugi mózg / efekt kuli śnieżnej" — mała pętla pamięci w 4. karcie (samonapędzający się system).
   Ta sama technika co lasery w hero (stroke-dashoffset). content-visibility na .uslugi pauzuje ją offscreen. */
.loop { width: 40px; height: 40px; float: right; margin: -2px -2px 6px 10px; overflow: visible; }
.loop circle { fill: none; stroke-width: 2; }
.loop__track { stroke: var(--border-soft); }
.loop__run { stroke: var(--cyan); stroke-dasharray: 30 110; stroke-linecap: round; animation: loopRun 2.6s linear infinite; }
.loop__node { fill: var(--magenta); animation: loopPulse 2.6s ease-in-out infinite; }
@keyframes loopRun { to { stroke-dashoffset: -138; } }
@keyframes loopPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

@media (max-width: 640px) {
  .uslugi-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .loop__run, .loop__node { animation: none; }
  html.js .uslugi-item { opacity: 1; transition: none; }
  .uslugi-item::before { transition: none; transform: scaleY(1); }
}

/* ============================================================
   A11y: widoczny fokus klawiaturowy (WCAG 2.4.7 Focus Visible).
   Neonowy ring pojawia się TYLKO przy nawigacji klawiaturą
   (:focus-visible) — mysz/dotyk nic nie widzą. :where() = niska
   specyficzność, więc komponenty mogą to nadpisać w razie potrzeby.
   ============================================================ */
:where(a, button, [role="button"], [tabindex], input, textarea, select):focus-visible {
  outline: 2px solid var(--cyan, #3FB0CC);
  outline-offset: 3px;
}

/* ============================================================
   Glify line-art kart usług 01–03 — RODZINA z .loop (karta 04).
   Każdy SVG ma class="loop glyph ..." → dziedziczy box-model .loop (40x40,
   float:right, viewBox 0 0 60 60, overflow:visible) i .loop__track/run/node.
   Technika rysowania: stroke-dashoffset (jak lasery hero i .loop__run karty 04).
   Draw-in odpalany przez .uslugi-grid.in (ten sam trigger co reszta sekcji).
   ============================================================ */
.glyph path, .glyph rect { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glyph .loop__node { fill: var(--magenta); stroke: none; }   /* node = jedyny magenta akcent (jak karta 04) */

/* DRAW-IN: „run" schowany (offset = długość), wjeżdża na .in.
   animation:none ZDEJMUJE odziedziczony loopRun infinite z bazowego .loop__run
   (inaczej nieskończona pętla biłaby się z transition draw-in). */
.glyph .loop__run { stroke: var(--cyan); stroke-dasharray: 1 999; stroke-dashoffset: 999; animation: none; }
.uslugi-grid.in .glyph .loop__run {
  transition: stroke-dashoffset 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 220ms);
  stroke-dashoffset: 0;
}
.glyph .glyph__tick, .glyph .glyph__bar, .glyph .glyph__line { stroke: var(--border-soft); }
.glyph .glyph__dot { fill: var(--border-soft); stroke: none; }

/* 01 · WIDEO AI — ramka kadru CRT + play */
.glyph--video .glyph__frame--run { stroke-dasharray: 156; stroke-dashoffset: 156; }
.uslugi-grid.in .glyph--video .glyph__frame--run { stroke-dashoffset: 0; }
.glyph--video .glyph__play { transform-box: fill-box; transform-origin: 30% 50%; animation: glyphPlayPulse 2.6s var(--ease-in-out) infinite; }
@keyframes glyphPlayPulse { 0%,100% { opacity: .45; transform: translateX(0); } 50% { opacity: 1; transform: translateX(.6px); } }

/* 02 · STRONY — okno przeglądarki / terminala */
.glyph--site .glyph__win--run { stroke-dasharray: 148; stroke-dashoffset: 148; }
.uslugi-grid.in .glyph--site .glyph__win--run { stroke-dashoffset: 0; }
.glyph--site .glyph__line--lead { stroke: var(--magenta); fill: none; animation: loopPulse 2.6s ease-in-out infinite; }

/* 03 · AGENCI GŁOSOWI — fala dźwięku / equalizer */
.glyph--voice .glyph__wave--run { stroke-dasharray: 116; stroke-dashoffset: 116; }
.uslugi-grid.in .glyph--voice .glyph__wave--run { stroke-dashoffset: 0; }
.glyph--voice .glyph__bar-lead { stroke: var(--magenta); fill: none; transform-box: fill-box; transform-origin: 50% 100%; animation: glyphVoiceLevel 1.4s var(--ease-in-out) infinite; }
@keyframes glyphVoiceLevel { 0%,100% { transform: scaleY(.62); opacity: .55; } 50% { transform: scaleY(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .glyph .loop__run, .glyph--video .glyph__frame--run, .glyph--site .glyph__win--run, .glyph--voice .glyph__wave--run { transition: none; stroke-dashoffset: 0; }
  .glyph--video .glyph__play, .glyph--site .glyph__line--lead, .glyph--voice .glyph__bar-lead { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   Ambientowe artefakty v2 — rozszerza idiom .kontakt-artifact na #omnie + #uslugi.
   Ta sama dyscyplina: aria-hidden, pointer-events:none, ZA treścią, ≥1200px,
   PŁASKI ciemny drop-shadow (NIE kolorowy bloom), reduced-motion safe.
   BEZ will-change — float 8-9s low-freq kompozytuje się dobrze bez stałej promocji warstwy.
   ============================================================ */
.amb-artifact {
  position: absolute; height: auto; pointer-events: none; z-index: 0;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .55));   /* głębia = płaski ciemny cień, zero halo */
}
/* #omnie : CRT monitor, dolny-prawy róg, lekko poza krawędzią (.omnie ma overflow:hidden) */
.omnie-artifact--crt { right: 1.5vw; bottom: -4%; width: clamp(150px, 15vw, 210px); opacity: .80; transform: rotate(5deg); animation: ambFloatCrt 8s ease-in-out infinite; }
@keyframes ambFloatCrt { 50% { transform: translateY(-10px) rotate(4deg); } }
/* #uslugi : floppy, dolny-lewy, bleed za krawędź (overflow-x:clip chroni globalnie) */
.uslugi { position: relative; }   /* .uslugi to zwykła .section — kotwiczymy absolutne dziecko */
.uslugi-artifact--floppy { left: -3%; bottom: 8%; width: clamp(118px, 11vw, 168px); opacity: .70; transform: rotate(-8deg); animation: ambFloatFloppy 9s ease-in-out infinite; }
@keyframes ambFloatFloppy { 50% { transform: translateY(-12px) rotate(-7deg); } }
@keyframes ambFloatVhs { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 9px)); } }
/* #kontakt : bohater Wojtek AI po LEWEJ (zaprasza, trzyma brief) + kaseta VHS po PRAWEJ */
.kontakt-hero { position: absolute; left: clamp(-10px, 1vw, 16px); bottom: clamp(120px, 19.5%, 168px); height: min(64%, 420px); width: auto; z-index: 1; pointer-events: none; }
.kontakt-vhs { position: absolute; right: clamp(14px, 4.5vw, 84px); top: 57%; width: clamp(130px, 12vw, 190px); height: auto; transform: translateY(-50%); z-index: 1; opacity: .98; pointer-events: none; filter: drop-shadow(0 10px 22px rgba(0,0,0,.5)); animation: ambFloatVhs 9.5s ease-in-out infinite; }
.kontakt__wrap { z-index: 2; }
@media (max-width: 1180px) { .kontakt-hero, .kontakt-vhs { display: none; } }
@media (prefers-reduced-motion: reduce) { .kontakt-vhs { animation: none; } }
@media (max-width: 1200px) { .amb-artifact { display: none; } }
@media (prefers-reduced-motion: reduce) { .amb-artifact { animation: none; } }

/* ============================================================
   MOBILE MICRO-ARTEFAKTY (≤760px) — komplet artefaktów wraca na telefon
   jako TURBO-MALEŃKIE, wciśnięte w guttery/rogi „dziwne miejsca".
   Reguła #1: ZERO wpływu na budowę strony. position:absolute w sekcjach
   position:relative, pointer-events:none, aria-hidden (w HTML), ZA treścią
   (z-index:0; treść ma wyższy), niski opacity. STATYCZNE — bez pętli animacji,
   żeby nie ruszać budżetu płynności scrolla na telefonie (priorytet: gładkość).
   html{overflow-x:clip} łapie bleed z ujemnych offsetów → brak poziomego scrolla.
   Na desktopie niewidoczne: nowe węzły .m-art mają display:none, a istniejące
   artefakty (crt/floppy/vhs/ludzik) re-pokazujemy dopiero ≤760px.
   ============================================================ */
.m-art { display: none; }

@media (max-width: 760px) {
  .m-art,
  .omnie-artifact--crt,
  .uslugi-artifact--floppy,
  .kontakt-vhs,
  .kontakt-hero {
    display: block; position: absolute; z-index: 0; width: auto; height: auto;
    pointer-events: none; animation: none;                 /* desktopowy float wyłączony */
    filter: drop-shadow(0 3px 9px rgba(0, 0, 0, .5));       /* lekki cień zamiast głębokiego desktopowego */
  }

  /* 1 · #omnie — mikro-CRT wystaje z lewej krawędzi (overflow:hidden sekcji go przycina) */
  .omnie-artifact--crt { top: 10px; left: -10px; right: auto; bottom: auto; width: 44px; opacity: .5; transform: rotate(6deg); }

  /* 2 · #portfolio — mikro-hologram „device" w prawym gutterze nad nagłówkiem */
  .m-art--device { top: 12px; right: 6px; width: 50px; opacity: .5; transform: rotate(-6deg); }

  /* 3 · #uslugi — mikro-floppy wciśnięta w lewy-dolny róg za kartami */
  .uslugi-artifact--floppy { left: -6px; right: auto; bottom: 30px; top: auto; width: 38px; opacity: .5; transform: rotate(-11deg); }

  /* 4 · #kontakt — mikro-VHS (prawy-górny) + mikro-ludzik (lewy-dolny). Przezroczyste → czyste na każdym tle */
  .kontakt-vhs { top: 72px; right: -8px; left: auto; bottom: auto; width: 52px; opacity: .6; transform: rotate(-5deg); }
  .kontakt-hero { left: 0; right: auto; bottom: 14px; top: auto; height: 62px; opacity: .58; transform: none; }

  /* 5 · #footer — mikro-pudełko „Ale mocne!" jako gag w prawym-GÓRNYM rogu stopki
     (dół stopki ma clearance pod dock Małpki → trzymamy gag wyżej, by go nie zasłaniał) */
  .footer { position: relative; }
  .m-art--box { top: 12px; right: 8px; bottom: auto; width: 42px; opacity: .46; transform: rotate(5deg); }
}