/* ============================================================
   Scroll-stop hero — animacja sterowana scrollem (klatki→canvas)
   Na tokenach z colors_and_type.css (--magenta, --cyan, --bg-base, --fg-*)
   ============================================================ */
.shero{position:relative;height:280vh;background:var(--bg-base,#07060d)}
.shero__sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.shero__stars,.shero__canvas{position:absolute;inset:0;display:block}
.shero__stars{z-index:0}
.shero__canvas{z-index:2;transform-origin:50% 46%;will-change:transform}

/* ── EXIT: kamera odjeżdża, zza kwadratu odsłania się neonowy retro krajobraz ──
   sterowane scrollem przez --exit (0→1), ustawiane w scroll-hero.js na .shero__sticky */
.shero__world{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  opacity:var(--exit,0);transform:translateY(calc((1 - var(--exit,0)) * 4vh))}
.shero__world::before{content:"";position:absolute;left:50%;top:54%;width:120vmax;height:80vmax;
  transform:translate(-50%,-50%);
  background:radial-gradient(46% 40% at 50% 50%,rgba(207,77,146,.16),transparent 68%)}
/* nisko zawieszona poświata (retro orb) */
.shero__sun{position:absolute;left:50%;top:54%;width:min(380px,52vw);height:min(380px,52vw);
  transform:translate(-50%,-84%);border-radius:50%;filter:blur(2px);opacity:.7;
  background:radial-gradient(circle at 50% 40%,rgba(224,106,168,.5),rgba(127,92,142,.26) 52%,transparent 70%)}
/* dalekie góry — ciemna sylwetka z neonową krawędzią */
.shero__ridge{position:absolute;left:-2%;right:-2%;width:104%;top:40%;height:16%;display:block}
.shero__ridge path{fill:var(--bg-void,#050409);stroke:rgba(63,176,204,.5);stroke-width:1.4;
  filter:drop-shadow(0 -1px 6px rgba(63,176,204,.35))}
/* linia horyzontu */
.shero__horizon{position:absolute;left:0;right:0;top:54%;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan,#3FB0CC),var(--magenta-bright,#E06AA8),var(--cyan,#3FB0CC),transparent);
  box-shadow:0 0 22px 5px rgba(63,176,204,.4),0 0 56px 14px rgba(207,77,146,.22)}
/* podłoga — perspektywiczna neonowa siatka */
.shero__grid{position:absolute;left:50%;bottom:0;width:260vmax;height:52%;
  transform:translateX(-50%) perspective(26vmax) rotateX(69deg);transform-origin:50% 100%;
  background-image:
    repeating-linear-gradient(to right,rgba(105,200,221,.72) 0 2px,transparent 2px 6.4vmin),
    repeating-linear-gradient(to bottom,rgba(224,106,168,.62) 0 2px,transparent 2px 6.4vmin);
  filter:drop-shadow(0 0 4px rgba(63,176,204,.4));
  -webkit-mask-image:linear-gradient(to top,#000 6%,transparent 90%);
          mask-image:linear-gradient(to top,#000 6%,transparent 90%);
  animation:sheroGrid 5.5s linear infinite}
@keyframes sheroGrid{to{background-position:0 6.4vmin,0 6.4vmin}}

/* intro overlay (na starcie, nad twarzą) */
.shero__intro{position:absolute;left:0;right:0;z-index:3;text-align:center;
  bottom:calc(100% - var(--vid-bottom, 100%) + 2.5vh);
  pointer-events:none;transition:opacity .45s ease}
.shero__intro .wai-eyebrow{font-size:14px;letter-spacing:.16em}
.shero__hint{margin-top:14px;font-family:var(--font-mono,ui-monospace,monospace);font-size:12px;
  letter-spacing:.22em;color:var(--fg-3,#a7a2be);text-transform:uppercase;
  animation:sheroBounce 1.9s ease-in-out infinite}
@keyframes sheroBounce{50%{transform:translateY(6px);opacity:.55}}

/* oferta — NA dolnej części kwadratu (scrim rysowany w canvasie); panele w JEDNYM miejscu, sekwencyjnie */
.shero__steps{position:absolute;left:0;right:0;z-index:3;display:grid;justify-items:center;align-items:end;pointer-events:none;
  bottom:calc(100% - var(--vid-bottom, 100%) + 2.5vh)}
.shero__ann{grid-area:1/1;width:min(680px,88vw);text-align:center;
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .5s var(--ease-out,cubic-bezier(.22,.61,.36,1)),transform .5s var(--ease-out,cubic-bezier(.22,.61,.36,1))}
.shero__ann.in{opacity:1;transform:none}
.shero__step .wai-eyebrow{font-size:13px}
.shero__step .wai-p{margin:10px 0 0;font-size:clamp(1.1rem,2.3vw,1.45rem);line-height:1.34;
  color:var(--fg-1,#f3f1fb);text-shadow:0 2px 26px rgba(7,6,13,.95)}

/* finałowy diagram — pulsująca kropka → 3 laserki → 3 rzeczy */
.shero__finale .rad{width:min(560px,90vw);height:auto;display:block;margin:0 auto}
.rad__laser line{stroke:var(--cyan,#33e1ff);stroke-dasharray:9 100;
  animation:sheroLzr 1.8s linear infinite;animation-delay:var(--d,0s)}
@keyframes sheroLzr{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.rad__hub{fill:var(--magenta,#CF4D92);filter:drop-shadow(0 0 2px var(--magenta,#CF4D92))}
.rad__ring{fill:none;stroke:var(--magenta,#CF4D92);stroke-width:2;animation:sheroRing 1.8s ease-out infinite}
@keyframes sheroRing{from{r:9;opacity:.7}to{r:32;opacity:0}}
.rad__nodes circle{fill:var(--cyan,#3FB0CC);filter:drop-shadow(0 0 2px var(--cyan,#3FB0CC))}
.rad__nodes text{fill:var(--fg-1,#E9E7F2);font-family:var(--font-mono,monospace);font-size:22px;font-weight:600;text-anchor:middle;letter-spacing:.01em}
.shero__cap{margin:16px 0 0;font-size:12px;letter-spacing:.16em;color:var(--fg-3,#a7a2be);text-transform:uppercase}

/* loader — zasłania kadr dopóki klatki się nie wczytają */
.shero__loader{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;background:var(--bg-base,#07060d);
  transition:opacity .6s ease}
.shero__loader.done{opacity:0;pointer-events:none}
.shero__bar{width:min(220px,60vw);height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.shero__bar i{display:block;height:100%;width:0;background:var(--grad-neon,linear-gradient(90deg,#ff2db0,#33e1ff))}
.shero__loadtxt{font-family:var(--font-mono,ui-monospace,monospace);font-size:12px;letter-spacing:.22em;
  color:var(--fg-3,#a7a2be);text-transform:uppercase}

@media (max-width:760px){
  .shero{height:240vh}

  /* ── KOMPAKTOWA SCENA NA MOBILCE ──
     Koniec z wielkim pustym polem gwiazd. Układ od góry:
       kwadrat → napisy/diagram (sekwencyjnie, w świecącym pasie) → horyzont → dywan.
     Napisy pojawiają się PO KOLEI podczas scrolla (jak wcześniej); pusty starfield
     zastępuje pełna neonowa scena (poświata + dywan), więc nie ma już dziury. */
  .shero__world{opacity:1;transform:none}        /* świat widoczny od razu, nie tylko na exicie */
  /* exit (odjazd kamery) WYŁĄCZONY na mobilce: świat i tak jest stałym tłem, a kurczenie
     kwadratu zostawiało pustkę u góry. Kwadrat trzyma pełny rozmiar aż scena odjedzie. */
  .shero__canvas{transform:none!important}

  /* góry (ridge) chowamy — kolidują z diagramem usług w pasie gwiazd */
  .shero__ridge{display:none}
  .shero__horizon{top:80%}
  /* duża, jasna poświata zamiast czarnego nieba — wypełnia pas między kwadratem a dywanem */
  .shero__sun{top:76%;width:min(420px,92vw);height:min(420px,92vw);
    transform:translate(-50%,-50%);opacity:.8;filter:blur(6px)}
  /* dywan to teraz SMUKŁY pas przy dole (nie połowa ekranu) — startuje od horyzontu ~80% w dół.
     Resztę dolnej części wypełnia poświata, więc nie ma dziury, a krateczki nie dominują. */
  .shero__grid{height:46%;
    transform:translateX(-50%) perspective(50vmax) rotateX(60deg);
    -webkit-mask-image:linear-gradient(to top,#000 0 90%,transparent 100%);
            mask-image:linear-gradient(to top,#000 0 90%,transparent 100%)}

  /* napisy „po kolei" WRACAJĄ: pełna sekwencja (kroki + finał) pojawia się podczas
     scrolla tak jak na desktopie. Kotwiczymy ją w świecącym pasie pod kwadratem
     (nad horyzontem), żeby napisy czytały się na neonowej scenie, nie na carpetcie. */
  .shero__steps{top:auto;bottom:28vh;align-items:center}
  .shero__finale .rad{width:82vw}
  .shero__cap{margin-top:8px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){.shero__hint,.shero__grid{animation:none}}

/* ── DESKTOP: podnieś napisy intro/oferty nad dolną pigułkę „Pogadaj z Małpką",
   żeby ich nie zasłaniała (mobilka ma własny układ, więc tu min-width) ── */
@media (min-width:761px){
  .shero__intro,
  .shero__steps{transform:translateY(-96px)}
}