/* Wskaznik postepu - pionowa szyna przy lewej krawedzi. Rakieta wznosi sie
   w gore, kiedy strona jedzie w dol. Pojawia sie razem z logo i hamburgerem
   (klasa .is-live z JS), nie od pierwszej klatki. */

.scroll-progress {
    position: fixed;
    left: clamp(14px, 2vw, 30px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 95;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s ease;
}

.scroll-progress[hidden] { display: none; }

.scroll-progress.is-live { opacity: 1; }

.scroll-progress__rail {
    position: relative;
    /* Grubsze i wyzsze niz pierwsza wersja - user: "za delikatne". */
    width: 34px;
    height: min(64vh, 580px);
}

/* Tor - cienka kreska z wygaszonymi koncami, zeby nie wygladala jak
   przypadkowa linijka wbita w ekran. */
.scroll-progress__line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    border-radius: 2px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, .3) 12%,
        rgba(255, 255, 255, .3) 88%,
        transparent 100%
    );
}

/* Przebyty dystans - liczony OD DOLU (start = ziemia, gora = orbita). */
.scroll-progress__fill {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    height: 0;
    border-radius: 3px;
    background: linear-gradient(0deg, rgba(204, 0, 166, .2), #cc00a6 50%, #ff5ce0 100%);
    box-shadow: 0 0 16px rgba(204, 0, 166, .85), 0 0 34px rgba(204, 0, 166, .45);
}

.scroll-progress__dots {
    position: absolute;
    inset: 0;
    display: block;
}

.scroll-progress__dot {
    position: absolute;
    left: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
    cursor: pointer;
    pointer-events: auto;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.scroll-progress__dot:hover {
    transform: scale(1.9);
    background: #fff;
}

.scroll-progress__dot.is-passed {
    background: #e879f9;
    box-shadow: 0 0 8px rgba(232, 121, 249, .75);
}

.scroll-progress__dot.is-current {
    transform: scale(1.9);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(204, 0, 166, .3), 0 0 12px rgba(204, 0, 166, .85);
}

/* Nazwa sekcji - wyjezdza w PRAWO od kropki, czyli w strone tresci. */
.scroll-progress__dot::after {
    content: attr(data-label);
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    padding: 4px 9px;
    border-radius: 6px;
    background: rgba(8, 8, 12, .92);
    border: 1px solid rgba(255, 255, 255, .12);
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.scroll-progress__dot:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Rakieta - --p (0..1) ustawia JS; 0 = dol szyny, 1 = gora. */
.scroll-progress__craft {
    position: absolute;
    left: 50%;
    bottom: 0;
    /* Bylo 21 px - user chcial wyraznie wieksza rakiete. */
    width: 34px;
    height: 34px;
    margin-left: -17px;
    color: #fff;
    transform: translateY(calc(var(--p, 0) * var(--rail-h, 0px) * -1 + 17px));
    filter: drop-shadow(0 0 10px rgba(204, 0, 166, 1)) drop-shadow(0 0 22px rgba(115, 56, 234, .7));
    will-change: transform;
}

/* Ikona byla samym obrysem (fill: none), wiec swiecacy slad przechodzil
   przez srodek rakiety. Wypelniamy ksztalt ciemna barwa i podkladamy pod
   nia delikatna tarcze - rakieta czyta sie jako osobny obiekt NAD sladem,
   a nie jako naklejka przez ktora wszystko przeswituje. */
.scroll-progress__craft svg {
    stroke-width: 1.5;
    position: relative;
    z-index: 1;
}

.scroll-progress__craft svg path {
    fill: #0b0a14;
}

.scroll-progress__craft svg circle {
    fill: rgba(232, 121, 249, .9);
}

/* Tarcza pod rakieta - miekkie, ok. 20-25% przyciemnienie, wygaszone do zera
   przy krawedzi, zeby nie bylo widac obwodki. */
.scroll-progress__craft::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(8, 6, 16, .92) 0%,
        rgba(8, 6, 16, .62) 48%,
        rgba(8, 6, 16, .22) 70%,
        transparent 82%);
    z-index: 0;
}

/* W trakcie przewijania rakieta lekko drga - jakby pracowala na obrotach. */
.scroll-progress.is-moving .scroll-progress__craft svg {
    animation: progress-craft-shake .18s linear infinite;
}

@keyframes progress-craft-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-.7px); }
    75%      { transform: translateX(.7px); }
}

.scroll-progress__craft svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Płomien pod dysza - rosnie tylko gdy strona faktycznie sie przewija. */
.scroll-progress__flame {
    position: absolute;
    left: 50%;
    top: 100%;
    width: 7px;
    height: 46px;
    margin: -4px 0 0 -3.5px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .95) 0%,
        rgba(255, 190, 110, .9) 22%,
        rgba(255, 90, 200, .75) 52%,
        rgba(115, 56, 234, .35) 78%,
        transparent 100%);
    filter: blur(.4px) drop-shadow(0 0 12px rgba(255, 140, 80, .8));
    opacity: 0;
    transform: scaleY(.25);
    transform-origin: top center;
    transition: opacity .2s ease, transform .2s ease;
}

.scroll-progress.is-moving .scroll-progress__flame {
    opacity: 1;
    transform: scaleY(1);
    animation: progress-flame .13s steps(2) infinite;
}

/* Migotanie dyszy - plomien "pracuje", a nie stoi jak naklejka. */
@keyframes progress-flame {
    0%   { transform: scaleY(1)    scaleX(1); }
    50%  { transform: scaleY(.78)  scaleX(.86); }
    100% { transform: scaleY(1.08) scaleX(1.05); }
}

/* Procent - leci razem z rakieta, drobnym monospace po prawej. */
.scroll-progress__readout {
    position: absolute;
    left: 36px;
    top: 50%;
    transform: translateY(-50%);
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .45);
    white-space: nowrap;
    transition: color .25s ease;
}

.scroll-progress.is-moving .scroll-progress__readout {
    color: rgba(255, 255, 255, .85);
}

/* Na jasnych sekcjach tor i procent musza pociemniec, inaczej znikaja. */
body:has(.site-header.on-light) .scroll-progress__line {
    background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 10, .28) 12%, rgba(10, 10, 10, .28) 88%, transparent 100%);
}

body:has(.site-header.on-light) .scroll-progress__craft { color: #0a0a0a; }

/* Na jasnych sekcjach odwracamy: jasne wypelnienie i jasna tarcza, zeby
   ciemny obrys rakiety nadal byl czytelny. */
body:has(.site-header.on-light) .scroll-progress__craft svg path { fill: #f4f2f7; }

body:has(.site-header.on-light) .scroll-progress__craft::before {
    background: radial-gradient(circle,
        rgba(250, 249, 252, .95) 0%,
        rgba(250, 249, 252, .65) 48%,
        rgba(250, 249, 252, .25) 70%,
        transparent 82%);
}
body:has(.site-header.on-light) .scroll-progress__readout { color: rgba(10, 10, 10, .55); }
body:has(.site-header.on-light) .scroll-progress__dot { background: rgba(10, 10, 10, .3); }

@media (max-width: 900px) {
    /* Na telefonie szyna zjadalaby krawedz tresci - chowamy. */
    .scroll-progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-progress__flame { display: none; }
}