/* ============================================================
   01media — effects.css v1.0
   System efektów wizualnych. Nie edytować wartości skalibrowanych
   bez decyzji (spec: 01media-pl-effects-spec-v1.md)
   ============================================================ */

:root{
  --amb-opacity:.085;
  --amb-size:65%;
}

/* ---------- 1. AMBIENT BACKGROUND ---------- */
#fx-ambient{
  position:fixed;inset:-20%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse var(--amb-size) 50% at 20% 15%, rgba(214,9,9,var(--amb-opacity)), transparent 70%),
    radial-gradient(ellipse 50% var(--amb-size) at 85% 75%, rgba(214,9,9,calc(var(--amb-opacity) * .7)), transparent 70%);
  animation:fxAmbDrift 26s ease-in-out infinite alternate;
}
@keyframes fxAmbDrift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(2.5%,-2%) scale(1.05)}
  100%{transform:translate(-2%,2.5%) scale(1)}
}
/* treść strony musi leżeć nad ambientem */
.fx-above{position:relative;z-index:1}

/* ---------- 2. RED SCROLL LINE ---------- */
#fx-redline{
  position:fixed;top:0;left:0;height:100vh;width:60px;
  pointer-events:none;z-index:5;
}
#fx-redline .track{
  position:absolute;top:0;left:34px;width:2px;height:100%;
  background:rgba(255,255,255,.05);
}
#fx-redline .progress{
  position:absolute;top:0;left:34px;width:2px;height:0;
  background:linear-gradient(to bottom, rgba(214,9,9,.25), var(--red));
  box-shadow:0 0 12px rgba(214,9,9,.5);
}
#fx-redline .dot{
  position:absolute;left:29px;width:12px;height:12px;border-radius:50%;
  background:var(--red);
  box-shadow:0 0 14px rgba(214,9,9,.8);
  transform:translateY(-6px);
}
@media(max-width:768px){#fx-redline{display:none}}

/* ---------- 3. CUSTOM CURSOR ---------- */
#fx-cur-dot,#fx-cur-ring{
  position:fixed;top:0;left:0;
  pointer-events:none;z-index:9999;border-radius:50%;
  transform:translate(-50%,-50%);
}
#fx-cur-dot{width:6px;height:6px;background:var(--red)}
#fx-cur-ring{
  width:34px;height:34px;
  border:1px solid rgba(214,9,9,.55);
  transition:width .25s ease,height .25s ease,border-color .25s ease,background .25s ease;
}
#fx-cur-ring.hovering{
  width:58px;height:58px;
  border-color:rgba(214,9,9,.9);
  background:rgba(214,9,9,.08);
}
body.fx-cursor-on, body.fx-cursor-on a, body.fx-cursor-on button{cursor:none}
@media(pointer:coarse){#fx-cur-dot,#fx-cur-ring{display:none}}

/* ---------- 4. SCROLL REVEAL ---------- */
.fx-reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.fx-reveal.in{opacity:1;transform:none}
.fx-reveal.d1{transition-delay:.08s}
.fx-reveal.d2{transition-delay:.16s}
.fx-reveal.d3{transition-delay:.24s}
.fx-reveal.d4{transition-delay:.32s}

/* czerwona kreska pod H1 — rysuje się raz. Odstęp symetryczny 26px góra/dół:
   H1 w .page-hero ma własny margin-bottom:1.5rem (24px, global.css) —
   margin-top tej kreski dodaje tylko 2px, żeby razem z marginesem H1 dać 26px,
   a margin-bottom ustawia bezpośrednio 26px (pod kreską nic już nie doda
   odstępu). Gdyby klasa trafiła pod H1 bez tego marginesu, odstępy trzeba
   przeliczyć dla tamtego kontekstu. margin:auto na osi poziomej centruje
   kreskę też poza kontekstem flex. */
.fx-h1-rule{
  width:64px;height:3px;background:var(--red);
  margin:2px auto 26px;
  transform:scaleX(0);transform-origin:left;
}
.fx-h1-rule.in{
  animation:fxRule .8s .25s cubic-bezier(.6,0,.2,1) forwards;
}
@keyframes fxRule{to{transform:scaleX(1)}}

/* ---------- 5. 01-DECODE — silnik typewriter ---------- */
/* komórka: szerokość = prawdziwa litera (real); bin leży position:absolute
   nad nią, więc zmiana stanu nie zmienia layoutu. Kolor cyfr dziedziczy
   z kontekstu (np. .highlight → czerwony), bez własnej reguły koloru. */
.fx-decode-part .c{position:relative;display:inline-block;white-space:pre}
.fx-decode-part .c .real{opacity:0;transition:opacity .22s ease}
.fx-decode-part .c .bin{
  position:absolute;top:0;left:0;opacity:0;
  transition:opacity .22s ease;pointer-events:none;
}
.fx-decode-part .c.stage-bin .bin{opacity:.85}
.fx-decode-part .c.stage-real .bin{opacity:0}
.fx-decode-part .c.stage-real .real{opacity:1}
/* część H1 pojawiająca się PO dekodzie (uslugi hub) */
.fx-after-decode{
  opacity:0;transition:opacity .8s ease;
}
.fx-after-decode.in{opacity:1}

/* ---------- 6. BENTO GRID ---------- */
.fx-bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(170px, auto);
  gap:14px;
}
.fx-cell{
  background:var(--dark-gray);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:26px;
  padding-top:72px;
  min-height:170px;
  position:relative;overflow:hidden;
  transition:border-color .35s ease, transform .35s ease;
  display:flex;flex-direction:column;justify-content:flex-start;
  color:inherit;text-decoration:none;
}
.fx-cell::after{
  content:"";position:absolute;inset:0;border-radius:18px;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(420px 200px at var(--mx,50%) var(--my,50%), rgba(214,9,9,.14), transparent 65%);
  pointer-events:none;
}
.fx-cell:hover{border-color:rgba(214,9,9,.55);transform:translateY(-3px)}
.fx-cell:hover::after{opacity:1}
.fx-cell h3{font-size:1.05rem;font-weight:700;margin-bottom:4px}
.fx-cell p{font-size:.85rem;color:var(--gray)}
.fx-cell .ic{position:absolute;top:22px;left:24px;width:34px;height:34px}
.fx-cell.big{grid-column:span 2;grid-row:span 2;padding-top:72px}
.fx-cell.big h3{font-size:1.4rem}
.fx-cell.big.one-row{grid-row:span 1}
.fx-cell.wide{grid-column:span 2}
/* .compact — komórki z ikoną w normalnym flow (np. emoji), nie abs. .ic w rogu;
   bez rezerwowanego padding-top:72px na ikonę pozycjonowaną absolutnie */
.fx-cell.compact{padding-top:26px;min-height:150px}
/* .cols-3 — wariant dla siatek z dokładnie 3 elementami (np. wartości firmy);
   działa TYLKO >860px, żeby nie kolidować z responsywnymi regułami bazowymi
   (.fx-bento automatycznie: 2 kol. ≤860px, 1 kol. ≤520px) */
@media(min-width:861px){.fx-bento.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.fx-bento{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){
  .fx-bento{grid-template-columns:1fr;grid-auto-rows:auto}
  /* padding-top:72px jest już w regule bazowej .fx-cell (dziedziczy się tu bez
     zmian) — powtórzone tu EXPLICITE, żeby miejsce na ikonę (.ic, top:22px,
     wys. 34px) było zagwarantowane niezależnie od kolejności reguł w arkuszu
     i odporne na przyszłe zmiany kaskady. min-height to tylko DÓLNY limit —
     przy justify-content:flex-start i grid-auto-rows:auto komórka rośnie
     swobodnie wraz z treścią, nigdy jej nie ściska. */
  .fx-cell{min-height:140px;padding-top:72px}
  .fx-cell.compact{padding-top:26px}
  .fx-cell.big,.fx-cell.wide{grid-column:span 1;grid-row:span 1}
}
/* animowane ikony inline-SVG */
.fx-cell .ic path,.fx-cell .ic circle,.fx-cell .ic rect,.fx-cell .ic polyline{
  stroke:var(--white);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
.fx-cell .ic .r{stroke:var(--red)}
.fx-cell:hover .ic .draw{
  stroke-dasharray:60;stroke-dashoffset:60;
  animation:fxIcDraw .9s ease forwards;
}
@keyframes fxIcDraw{to{stroke-dashoffset:0}}
.fx-cell:hover .ic .pulse{animation:fxIcPulse 1s ease infinite}
@keyframes fxIcPulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- 6b. FX-CARD — reużywalna karta (bez sztywnego padding-top ikony) ---------- */
.fx-card{
  background:var(--dark-gray);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:2.5rem 2rem;
  position:relative;overflow:hidden;
  transition:border-color .35s ease, transform .35s ease;
}
.fx-card::after{
  content:"";position:absolute;inset:0;border-radius:18px;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(420px 200px at var(--mx,50%) var(--my,50%), rgba(214,9,9,.14), transparent 65%);
  pointer-events:none;
}
.fx-card:hover{border-color:rgba(214,9,9,.55);transform:translateY(-3px)}
.fx-card:hover::after{opacity:1}
.fx-card.featured{border-color:var(--red)}

/* ---------- 7. DOT MATRIX (statystyki) ---------- */
.fx-dots{width:100%;max-width:760px;height:auto;display:block}

/* ---------- 8. GAUGE + CHART (dowody) ---------- */
.fx-proof-card{
  background:var(--dark-gray);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:34px 30px;
}
.fx-gauge{width:200px;height:200px;margin:0 auto;position:relative}
.fx-gauge svg{transform:rotate(-90deg)}
.fx-gauge .track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:10}
.fx-gauge .val{
  fill:none;stroke:var(--red);stroke-width:10;stroke-linecap:round;
  stroke-dasharray:565;stroke-dashoffset:565;
  transition:stroke-dashoffset 1.6s cubic-bezier(.3,0,.2,1);
  filter:drop-shadow(0 0 8px rgba(214,9,9,.45));
}
.fx-gauge .center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.fx-gauge .center b{font-size:3rem;font-weight:800;font-variant-numeric:tabular-nums}
.fx-gauge .center small{color:var(--gray);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.fx-chart{width:100%;height:auto;display:block}
.fx-chart .grid-l{stroke:rgba(255,255,255,.06);stroke-width:1}
.fx-chart .line{
  fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:900;stroke-dashoffset:900;
}
.fx-chart.in .line{animation:fxChart 1.8s .2s ease forwards}
@keyframes fxChart{to{stroke-dashoffset:0}}
.fx-chart .area{fill:url(#fxRedFade);opacity:0;transition:opacity 1s 1.2s ease}
.fx-chart.in .area{opacity:1}
.fx-chart text{fill:var(--gray);font-size:10px;font-family:inherit}

/* ---------- 9. SPOTLIGHT (tylko strona abonamentowa) ---------- */
.fx-spot{
  font-size:clamp(1.8rem,4.6vw,3.2rem);
  font-weight:800;letter-spacing:-.02em;line-height:1.3;
  max-width:820px;position:relative;
  color:rgba(255,255,255,.38);
}
.fx-spot .fill{
  position:absolute;inset:0;color:var(--white);
  -webkit-mask-image:radial-gradient(240px 240px at var(--sx,-500px) var(--sy,-500px), #000 0%, #000 38%, transparent 74%);
          mask-image:radial-gradient(240px 240px at var(--sx,-500px) var(--sy,-500px), #000 0%, #000 38%, transparent 74%);
}
.fx-spot .fill em{font-style:normal;color:var(--red)}
@media(pointer:coarse){
  .fx-spot{color:var(--white)}
  .fx-spot .fill{display:none}
  .fx-spot .m-em{color:var(--red);font-style:normal}
}

/* ---------- 10. MAGNETIC CTA ---------- */
.fx-mag-wrap{
  display:inline-block;
  padding:22px;margin:-22px; /* statyczna strefa pomiaru — NIE ZMIENIAĆ */
}
.fx-btn-mag{
  position:relative;display:inline-flex;align-items:center;
  background:var(--red);color:var(--white);
  text-decoration:none;font-weight:600;
  padding:18px 46px;border-radius:30px;
  will-change:transform;
  transition:box-shadow .6s ease;
}
.fx-btn-mag .label{position:relative;transition:transform .5s cubic-bezier(.3,0,.2,1)}
.fx-btn-mag .arrow{
  position:absolute;right:22px;top:50%;
  transform:translateY(-50%) translateX(8px);
  opacity:0;
  transition:opacity .5s ease, transform .5s cubic-bezier(.3,0,.2,1);
}
.fx-mag-wrap:hover .fx-btn-mag{box-shadow:0 12px 40px rgba(214,9,9,.35)}
.fx-mag-wrap:hover .fx-btn-mag .label{transform:translateX(-10px)}
.fx-mag-wrap:hover .fx-btn-mag .arrow{opacity:1;transform:translateY(-50%) translateX(0)}
.fx-btn-ghost{
  position:relative;display:inline-block;
  color:var(--white);text-decoration:none;font-weight:600;
  padding:18px 46px;border-radius:30px;
  border:1px solid rgba(255,255,255,.25);
  will-change:transform;
  transition:border-color .6s ease;
}
.fx-btn-ghost::after{
  content:"";position:absolute;left:46px;right:46px;bottom:12px;height:1px;
  background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.3,0,.2,1);
}
.fx-mag-wrap:hover .fx-btn-ghost{border-color:rgba(214,9,9,.6)}
.fx-mag-wrap:hover .fx-btn-ghost::after{transform:scaleX(1)}

/* Mobile — te przyciski bywają w rzędach flex-wrap z inną kartą CTA; z dużym
   paddingiem (46px) i długim tekstem mogłyby rozpychać viewport tak jak
   .btn-primary (patrz global.css). Mniejszy padding poziomy + swobodne
   zawijanie tekstu, zamiast sztywnej szerokości contentu. */
@media(max-width:520px){
  .fx-mag-wrap{max-width:100%}
  .fx-btn-mag,.fx-btn-ghost{
    max-width:100%;box-sizing:border-box;
    padding:16px 28px;white-space:normal;text-align:center;
  }
  .fx-btn-ghost::after{left:28px;right:28px}
}

/* ---------- 11. BROWSER / PHONE MOCKUPS ---------- */
.fx-browser{
  background:var(--dark-gray);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  transition:transform .5s ease, box-shadow .5s ease;
}
.fx-browser:hover{
  transform:translateY(-6px);
  box-shadow:0 44px 90px rgba(0,0,0,.7), 0 0 40px rgba(214,9,9,.08);
}
.fx-browser .bar{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;background:#111;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.fx-browser .bar i{width:10px;height:10px;border-radius:50%;background:#2a2a2a}
.fx-browser .bar i:first-child{background:var(--red)}
.fx-browser .bar .url{
  margin-left:12px;flex:1;background:#0a0a0a;border-radius:20px;
  font-size:.7rem;color:var(--gray);padding:5px 14px;
}
.fx-browser .view{position:relative;aspect-ratio:16/10;overflow:hidden}
.fx-browser .view img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.62) saturate(.9); /* ciemna tonacja — zdjęcie wtapia się w czerń */
  transition:filter .5s ease;
}
.fx-browser:hover .view img{filter:brightness(.85) saturate(1)}
.fx-browser .tag{
  position:absolute;bottom:14px;left:16px;
  font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);
}
.fx-phone{
  width:250px;border-radius:38px;
  border:2px solid rgba(255,255,255,.12);
  background:#000;padding:12px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  transition:transform .5s ease;
}
.fx-phone:hover{transform:translateY(-6px) rotate(-1deg)}
.fx-phone .screen{
  border-radius:28px;overflow:hidden;background:var(--black);
  aspect-ratio:9/19;display:flex;flex-direction:column;
}
.fx-phone .notch{
  width:86px;height:20px;background:#000;
  border-radius:0 0 14px 14px;margin:0 auto;flex-shrink:0;
}

/* ---------- 11b. HERO CONTENT WRAPPER — centrowanie treści hero nad .fx-scroll-hint
   Owija H1+kreska+subtitle+CTA jednym flex-itemem z margin:auto 0 — to JEDYNY
   element hero z auto-marginem na obu krawędziach, więc dostaje 100% wolnej
   przestrzeni głównej osi i centruje się w niej. .fx-scroll-hint (sibling po
   wrapperze) NIE dostaje własnego auto-marginu (patrz override niżej) —
   inaczej wolna przestrzeń dzieliłaby się między oba elementy i wskaźnik
   nie siadałby dokładnie na dole. */
.fx-hero-content{
  margin:auto 0;
  display:flex;flex-direction:column;align-items:center;
}
.fx-hero-content ~ .fx-scroll-hint{margin-top:0;padding-bottom:24px;}

/* ---------- 12. SCROLL HINT (reużywalny wskaźnik przewijania pod hero)
   Wzór wizualny: index.php / .hero .scroll-indicator (home.css) — ta wersja
   NIE jest zsynchronizowana z introem strony głównej (inny czas wejścia),
   żeby dało się jej używać na dowolnej podstronie. Strzałka reużywa
   globalnej .arrow + @keyframes bounce (już zdefiniowane w global.css). */
.fx-scroll-hint{
  position:static;
  margin-top:auto;
  padding-top:48px;
  padding-bottom:8px;
  text-align:center;cursor:pointer;
  opacity:0;transform:translateY(20px);
  animation:fxScrollHintIn .8s ease 1.1s forwards;
}
.fx-scroll-hint p{
  font-size:.75rem;letter-spacing:2px;margin-bottom:.75rem;color:var(--gray);
}
@keyframes fxScrollHintIn{to{opacity:1;transform:translateY(0)}}
/* Kryterium podwójne (szerokość LUB dotyk) — patrz global.css, ten sam
   catch-all zastosowany do .scroll-indicator (stary wariant homepage). */
@media(max-width:768px),(pointer:coarse){.fx-scroll-hint{display:none}}

/* ---------- 12b. FX-READMORE — densyfikacja treści na mobile
   Wzorzec: .fx-readmore-lead (zawsze widoczny) + <details class="fx-readmore-rest">
   (natywny details/summary — zero JS, indeksowane przez Google, dotykowe).
   MOBILE (<768px): details domyślnie zwinięty (natywne zachowanie przeglądarki —
   brak atrybutu open w HTML), reszta treści za "Czytaj więcej".
   DESKTOP (≥768px): summary ukryte, treść WYMUSZONA widoczna niezależnie od
   stanu open/closed przez display:revert na dzieciach — działa też bez JS
   (nie trzeba dodawać atrybutu open, override jest czysto wizualny). ---------- */
.fx-readmore-lead{margin-bottom:.75rem}
.fx-readmore-rest{margin-top:0}
.fx-readmore-rest summary{
  display:flex;align-items:center;gap:.4rem;
  cursor:pointer;list-style:none;
  color:var(--gray);font-size:.95rem;font-weight:600;
  padding:.6rem 0;
  -webkit-tap-highlight-color:transparent;user-select:none;
}
.fx-readmore-rest summary::-webkit-details-marker{display:none}
.fx-readmore-rest summary::before{
  content:"";flex-shrink:0;
  width:7px;height:7px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(45deg);
  transition:transform .25s ease;
}
.fx-readmore-rest[open] summary::before{transform:rotate(-135deg)}
.fx-readmore-rest summary .fx-readmore-less{display:none}
.fx-readmore-rest[open] summary .fx-readmore-more{display:none}
.fx-readmore-rest[open] summary .fx-readmore-less{display:inline}
.fx-readmore-rest > *:not(summary){margin-top:.25rem}

@media(min-width:768px){
  .fx-readmore-rest summary{display:none}
  /* Nowe przeglądarki (Chrome 131+) renderują zawartość <details> (wszystko
     poza <summary>) w generowanym pseudo-elemencie ::details-content, który
     ma WŁASNY content-visibility/display kontrolowany przez atrybut [open] —
     nadpisanie stylu samych dzieci (display:revert) nie wystarcza, bo to
     ::details-content, nie dzieci, odpowiada za wysokość boxa przy stanie
     zamkniętym (bez tego treść renderuje się, ale box <details> ma height:0
     i treść "wylewa się" poza sekcję). Nadpisujemy oba poziomy dla pewności
     (starsze silniki bez ::details-content honorują tylko drugą regułę). */
  .fx-readmore-rest::details-content{
    content-visibility:visible!important;
    display:block!important;
    height:auto!important;
    overflow:visible!important;
  }
  .fx-readmore-rest > *:not(summary){display:revert!important;content-visibility:visible!important}
}

/* ---------- 13. REDUCED MOTION — wyłącza wszystko ---------- */
@media (prefers-reduced-motion: reduce){
  #fx-ambient{animation:none}
  .fx-reveal{opacity:1;transform:none;transition:none}
  .fx-h1-rule{transform:scaleX(1);animation:none}
  .fx-after-decode{opacity:1;transition:none}
  .fx-scroll-hint{opacity:1;transform:none;animation:none}
  .fx-chart .line{stroke-dashoffset:0;animation:none}
  .fx-chart .area{opacity:1;transition:none}
  .fx-gauge .val{transition:none}
  #fx-cur-dot,#fx-cur-ring{display:none}
  .fx-cell,.fx-btn-mag,.fx-btn-ghost,.fx-browser,.fx-phone{transition:none}
  .fx-readmore-rest summary::before{transition:none}
}