/* ============================================================================
   CIEMNY MOTYW (control-room) — ładowany na WSZYSTKICH stronach PO style.css.
   Wszystko scoped do body.theme-dark. Bazowe komponenty (karty, sekcje, formularze)
   przestawiają się automatycznie, bo używają tokenów, które tu nadpisujemy;
   miejsca, gdzie style.css używał var(--ink) jako „ciemnego tła", wymagają
   ręcznej korekty (patrz sekcja „Podstrony").
   ========================================================================== */

body.theme-dark {
  --paper:        #0C0F13;
  --paper-raised: #171D26;
  --paper-sunk:   #10141A;
  --ink:          #E9EDF2;
  --ink-soft:     #A6B0BC;
  --ink-faint:    #7E8894;
  --line:         rgba(233, 237, 242, 0.08);
  --line-strong:  rgba(233, 237, 242, 0.17);

  /* na ciemnym tle „ciemny akcent" do tekstu musi być jaśniejszy, nie ciemniejszy */
  --accent-deep:   #F98C3D;
  --accent-soft:   rgba(232, 115, 31, 0.14);
  --accent-line:   rgba(249, 140, 61, 0.42);

  /* hero i stopka używają palety on-dark — ujednolicamy do chłodnej szarości */
  --on-dark:       #E9EDF2;
  --on-dark-soft:  #A6B0BC;
  --on-dark-faint: #7E8894;
  --line-dark:     rgba(233, 237, 242, 0.10);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 2px 10px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 26px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 24px 56px rgba(0,0,0,0.6);
}

/* ---------- Nawigacja: ciemne szkło ---------- */
body.theme-dark .nav.is-scrolled,
body.theme-dark .nav--solid {
  background: rgba(12, 15, 19, 0.8);
  border-bottom-color: var(--line);
}
body.theme-dark .brand__mark { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6)); }

/* ---------- Hero: grafit + wolno dryfująca siatka + poświata rdzenia ---------- */
body.theme-dark .hero--dark {
  background:
    radial-gradient(90% 70% at 78% 8%, rgba(232, 115, 31, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, #11151B 0%, #0C0F13 100%);
}
body.theme-dark .hero--dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(233, 237, 242, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 237, 242, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 70% 10%, #000 30%, transparent 78%);
  animation: grid-drift 70s linear infinite;
}
@keyframes grid-drift { to { background-position: 44px 88px; } }

body.theme-dark .hero__title { font-size: clamp(2.6rem, 5.2vw, 4.3rem); }

/* kursor „pisania" w eyebrow hero (wstawiany przez JS, znika po zakończeniu) */
.hero-caret {
  display: inline-block; width: 0.55em; height: 1em;
  margin-left: 2px; vertical-align: text-bottom;
  background: var(--accent-bright);
  animation: caret-blink 0.9s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* ---------- Etykiety sekcji jako komentarze SQL ---------- */
body.theme-dark .eyebrow,
body.theme-dark .hero__eyebrow { text-transform: lowercase; }
body.theme-dark .eyebrow::before { content: "-- "; letter-spacing: 0; }

/* ---------- Mapa integracji 3D ----------
   Kontener dostaje perspektywę, a płaszczyzna SVG przechyla się za kursorem
   (kąty --map-rx/--map-ry ustawia JS). Węzły i rdzeń są „wypchnięte" w głąb
   przez translateZ, więc przy przechyle powstaje realna głębia (paralaksa).
   Bez JS mapa jest po prostu płaska i statyczna. */
body.theme-dark .hero__map {
  perspective: 1400px;
  perspective-origin: 50% 45%;
}
body.theme-dark .hero__map svg {
  transform-style: preserve-3d;
  will-change: transform;
  /* transform ustawia JS co klatkę (idle orbit + tilt myszy); bez JS plan jest płaski */
}
/* Głębia: rdzeń wypchnięty ku widzowi (bezpiecznie — grupa nie ma atrybutu
   transform, więc nie klobrujemy pozycji). Węzłów NIE ruszamy translateZ,
   bo mają transform="translate(x,y)" i CSS transform by je wyzerował —
   złudzenie 3D daje przechył całej płaszczyzny (rotateX/Y na svg). */
body.theme-dark .imap__center {
  transform-box: view-box;
  transform: translateZ(48px);
}

body.theme-dark .imap__line-flow { opacity: 0.75; }
body.theme-dark .imap__center rect {
  filter: drop-shadow(0 0 20px rgba(232, 115, 31, 0.5));
  animation: core-breathe 4.5s ease-in-out infinite;
}
@keyframes core-breathe {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(232, 115, 31, 0.4)); }
  50%      { filter: drop-shadow(0 0 30px rgba(232, 115, 31, 0.75)); }
}
body.theme-dark .imap__box { fill: rgba(255,255,255,0.055); }
body.theme-dark .imap__node.is-focus .imap__box {
  fill: rgba(232, 115, 31, 0.12);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55));
}
body.theme-dark .imap__tip { background: #12161D; border-color: var(--line-strong); }

/* Pakiety danych sunące po liniach (glowing dot + animateMotion w SVG). */
body.theme-dark .imap__packet {
  fill: var(--accent-bright);
  filter: drop-shadow(0 0 5px rgba(249, 140, 61, 0.95));
}
body.theme-dark .imap__packet.is-dim { opacity: 0.12; }

/* ---------- Przyciski: przebłysk na hover ---------- */
body.theme-dark .btn--accent { position: relative; overflow: hidden; }
body.theme-dark .btn--accent::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: translateX(-150%) skewX(-18deg);
  pointer-events: none;
}
body.theme-dark .btn--accent:hover::after { transition: transform 0.55s var(--ease); transform: translateX(360%) skewX(-18deg); }

/* ---------- Drobne korekty kontrastu komponentów na ciemnym ---------- */
body.theme-dark .badge--new { color: #D99A4E; background: rgba(217, 154, 78, 0.14); }
body.theme-dark .badge--prototype { color: var(--ink-soft); background: var(--paper-sunk); }
body.theme-dark .pill.is-active { color: #14181E; font-weight: 600; }
body.theme-dark .footer { background: #090B0E; }
body.theme-dark .skip-link { background: var(--ink); color: #0C0F13; }

/* menu mobilne: ciemny panel zamiast papierowego */
@media (max-width: 640px) {
  body.theme-dark .nav__links {
    background: rgba(12, 15, 19, 0.97);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
  }
}

/* ============================================================================
   PODSTRONY (produkty / integracje / współpraca / artykuły)
   Elementy, które w style.css używały var(--ink) jako CIEMNEGO tła — po
   przełączeniu tokenów --ink robi się jasny, więc trzeba je opisać wprost.
   ========================================================================== */
body.theme-dark .cta-card {
  background: linear-gradient(160deg, #1B2230 0%, #12161D 100%);
  border: 1px solid var(--accent-line);
}
body.theme-dark .cta-card h4 { color: #fff; }

/* ciemny hero podstrony dostaje tę samą siatkę co strona główna */
body.theme-dark .detail-hero { position: relative; overflow: hidden; }
body.theme-dark .detail-hero__inner { position: relative; z-index: 1; }
body.theme-dark .detail-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(233, 237, 242, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 237, 242, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(110% 130% at 88% 0%, #000 20%, transparent 72%);
  mask-image: radial-gradient(110% 130% at 88% 0%, #000 20%, transparent 72%);
}

/* okno podglądu (window chrome) — ciemny pasek narzędzi */
body.theme-dark .window__bar { background: #0E1218; }
body.theme-dark .detail-type { background: var(--paper-raised); }

/* schemat przepływu na podstronie produktu: dopasowanie do grafitu */
body.theme-dark .detail-flow {
  background:
    radial-gradient(120% 105% at 84% 0%, rgba(232, 115, 31, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, #12161D 0%, #0C0F13 100%);
  border-color: var(--line-strong);
}

/* tabela „typowe problemy" — linia rozdzielająca czytelna na ciemnym */
body.theme-dark .problems__head { border-bottom-color: var(--line-strong); }

/* pigułki partnerów w stopce */
body.theme-dark .partner__name { border-color: var(--line-dark); }

/* ============================================================================
   SEKWENCJA WEJŚCIA HERO (efekt „wow" przy wejściu na stronę główną)
   Tylko przy braku prefers-reduced-motion; inaczej treść jest od razu widoczna.
   Czysto CSS na load — nie zależy od JS, więc nic nie utknie ukryte.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  body.theme-dark .hero__eyebrow,
  body.theme-dark .hero__title,
  body.theme-dark .hero__lead,
  body.theme-dark .hero__actions { animation: hero-rise 0.7s var(--ease) both; }
  body.theme-dark .hero__title   { animation-delay: 0.08s; }
  body.theme-dark .hero__lead    { animation-delay: 0.22s; }
  body.theme-dark .hero__actions { animation-delay: 0.34s; }

  body.theme-dark .hero__map {
    animation: hero-map-in 1s var(--ease) 0.3s both;
  }
  body.theme-dark .hero__stats .stat {
    animation: hero-rise 0.6s var(--ease) both;
    animation-delay: calc(0.5s + var(--stat-i, 0) * 0.08s);
  }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* Wejście mapy: samo opacity + delikatne podniesienie i skala. Bez perspective
   w keyframe, żeby po animacji nie zostać z transformem spłaszczającym plan 3D
   (przechył robi svg, nie kontener). */
@keyframes hero-map-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Reduced motion: bajery gasną, treść zostaje ---------- */
@media (prefers-reduced-motion: reduce) {
  body.theme-dark .hero--dark::before { animation: none !important; }
  body.theme-dark .btn--accent::after { display: none !important; }
  body.theme-dark .imap__center rect { animation: none !important; }
  body.theme-dark .hero__map svg { transition: none !important; transform: none !important; }
  body.theme-dark .imap__packet { display: none !important; }
  .hero-caret { animation: none !important; }
}