/*
 * Wspolny wyglad podstron (jak strona glowna): tlo z poswiata, niebieskie gradienty,
 * karty z gradientem, plynne wejscie tresci. Nadpisuje kolory z szablonow (stary #3599D4 / #55C0FF)
 * bez przebudowy komponentow React.
 */

:root {
    --sl-1: #58b0e6;
    --sl-2: #1e6eb4;
    --sl-3: #061a2e;
    --sl-bg: #0a0a0b;
    --sl-ease: cubic-bezier(.16, 1, .3, 1);
    --sl-txt-acc: #8fd0ff;
}

body {
    background: var(--sl-bg) !important;
}

/* poswiata u gory kazdej podstrony (strona glowna ma swoja, wieksza) */
body:not(.sl-home)::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 640px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60% 70% at 50% -10%, rgba(30, 110, 180, .42), transparent 70%),
        radial-gradient(30% 40% at 50% -5%, rgba(88, 176, 230, .28), transparent 70%),
        radial-gradient(30% 50% at 0% 0%, rgba(88, 176, 230, .12), transparent 70%),
        radial-gradient(30% 50% at 100% 0%, rgba(88, 176, 230, .12), transparent 70%);
}

body {
    position: relative;
}

/* ------------------------------------------------------------ kolory akcentu */

.text-\[\#55C0FF\],
.text-\[\#3599D4\],
.hover\:text-\[\#55C0FF\]:hover,
.hover\:text-\[\#3599D4\]:hover {
    color: var(--sl-txt-acc) !important;
}

/* przyciski i wyroznienia: gradient zamiast plaskiego koloru */
.bg-\[\#3599D4\] {
    background: linear-gradient(135deg, #8fd0ff 0%, var(--sl-1) 38%, var(--sl-2) 100%) !important;
    box-shadow: 0 10px 30px -12px rgba(88, 176, 230, .8), inset 0 1px 0 rgba(255, 255, 255, .3);
}

a.bg-\[\#3599D4\],
button.bg-\[\#3599D4\] {
    transition: transform .3s var(--sl-ease), box-shadow .3s var(--sl-ease), filter .3s !important;
}

a.bg-\[\#3599D4\]:hover,
button.bg-\[\#3599D4\]:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 14px 36px -10px rgba(88, 176, 230, .95), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}

/* stare przyciski po najechaniu robily sie przezroczyste - zostawiamy gradient */
.hover\:bg-\[\#3599D4\]\/15:hover {
    background: linear-gradient(135deg, #9fd8ff 0%, #6dbdee 38%, #2a80c4 100%) !important;
}

.bg-\[\#3599D4\]\/15 {
    background: rgba(88, 176, 230, .14) !important;
}

.shadow-\[inset_0_0_0_1px_\#3599D4\],
.hover\:shadow-\[inset_0_0_0_1px_\#3599D4\]:hover {
    box-shadow: inset 0 0 0 1px rgba(88, 176, 230, .5) !important;
}

/* paski przy naglowkach i swiecace kropki */
.bg-\[\#55C0FF\] {
    background: linear-gradient(90deg, var(--sl-2), var(--sl-1)) !important;
}

.bg-\[\#55C0FF\][class*="blur-"] {
    background: var(--sl-2) !important;
}

.border-\[\#55C0FF\],
.border-\[\#3599D4\] {
    border-color: var(--sl-1) !important;
}

/* ------------------------------------------------------------ karty */

[class*="bg-white/[0.03]"]:not(.h-px):not([class*="h-[1px]"]) {
    background: linear-gradient(rgb(20, 21, 24), rgb(13, 14, 16)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 50px -34px rgba(0, 0, 0, .9) !important;
}

a[class*="bg-white/[0.03]"],
[class*="bg-white/[0.03]"].group,
[class*="bg-white/[0.03]"][class*="hover:"] {
    transition: transform .45s var(--sl-ease), box-shadow .45s var(--sl-ease), background .45s !important;
}

a[class*="bg-white/[0.03]"]:hover,
[class*="bg-white/[0.03]"].group:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px rgba(88, 176, 230, .35), 0 30px 60px -32px rgba(30, 110, 180, .7) !important;
}

/* cienka linia oddzielajaca (np. w stopce) - gradient zamiast szarej kreski */
.h-px[class*="bg-white/[0.03]"] {
    background: linear-gradient(90deg, transparent, rgba(88, 176, 230, .45) 50%, transparent) !important;
}

/* pola formularzy */
body:not(.adm) input[type="text"],
body:not(.adm) input[type="search"],
body:not(.adm) textarea,
body:not(.adm) select {
    transition: box-shadow .25s, background .25s;
}

body:not(.adm) input[type="text"]:focus,
body:not(.adm) input[type="search"]:focus,
body:not(.adm) textarea:focus,
body:not(.adm) select:focus {
    outline: 0;
    box-shadow: inset 0 0 0 1px rgba(88, 176, 230, .6), 0 0 0 4px rgba(88, 176, 230, .12) !important;
}

/* ------------------------------------------------------------ pojawianie sie przy przewijaniu (site.js) */

/*
 * Rodzaje (data-reveal="..."):
 *   (puste)  wjazd z dolu
 *   card     karta wychyla sie w 3D i podnosi
 *   title    naglowek - lekkie rozmycie i wjazd
 *   words    naglowek slowo po slowie spod maski
 *   image    obrazek odslaniany kurtyna + powolne przyblizenie
 *   left / right / zoom
 * Ukrywamy tylko, gdy site.js dziala (html.sl-reveal-on) - bez JS wszystko jest widoczne.
 */

html.sl-reveal-on [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 46px, 0);
    transition:
        opacity .8s var(--sl-ease),
        transform 1.2s var(--sl-ease),
        filter 1s var(--sl-ease),
        clip-path 1.3s cubic-bezier(.77, 0, .18, 1);
    transition-delay: calc(var(--d, 0) * 90ms);
}

html.sl-reveal-on [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* karta: wjezdza od dolu z lekkim powiekszeniem (bez obracania) */
html.sl-reveal-on [data-reveal="card"] {
    transform: translate3d(0, 50px, 0) scale(.96);
}

html.sl-reveal-on [data-reveal="card"].is-visible {
    transform: none;
}

html.sl-reveal-on [data-reveal="title"] {
    transform: translate3d(0, 24px, 0);
    filter: blur(10px);
}

html.sl-reveal-on [data-reveal="left"] {
    transform: translate3d(-80px, 0, 0) rotate(-1.5deg);
}

html.sl-reveal-on [data-reveal="right"] {
    transform: translate3d(80px, 0, 0) rotate(1.5deg);
}

html.sl-reveal-on [data-reveal="zoom"] {
    transform: scale(.86);
    filter: blur(6px);
}

/* naglowek slowo po slowie: kazde slowo wyjezdza spod niewidocznej krawedzi */
html.sl-reveal-on [data-reveal="words"] {
    opacity: 1;
    transform: none;
}

.sl-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .12em;
    margin-bottom: -.12em;
}

.sl-w > span {
    display: inline-block;
    transform: translate3d(0, 110%, 0) rotate(6deg);
    transform-origin: 0 100%;
    transition: transform 1s var(--sl-ease);
    transition-delay: calc(var(--d, 0) * 90ms + var(--wi, 0) * 55ms);
}

html:not(.sl-reveal-on) .sl-w > span,
[data-reveal="words"].is-visible .sl-w > span {
    transform: none;
}

/* obrazek: kurtyna od dolu do gory, a sam obraz powoli sie oddala */
html.sl-reveal-on [data-reveal="image"] {
    opacity: 1;
    transform: none;
    clip-path: inset(100% 0 0 0 round 18px);
}

html.sl-reveal-on [data-reveal="image"].is-visible {
    clip-path: inset(0 0 0 0 round 18px);
}

html.sl-reveal-on [data-reveal="image"] img {
    transform: scale(1.25);
    transition: transform 1.8s var(--sl-ease);
    transition-delay: calc(var(--d, 0) * 90ms);
}

html.sl-reveal-on [data-reveal="image"].is-visible img {
    transform: none;
}

/* paski przy tytulach i linia przy etykietach sekcji rysuja sie od lewej */
html.sl-reveal-on [data-reveal] .w-\[50px\].h-1,
html.sl-reveal-on [data-reveal] .w-\[50px\].h-\[5px\],
html.sl-reveal-on [data-reveal] .sl-eyebrow::before {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 1.1s var(--sl-ease) .3s;
}

html.sl-reveal-on [data-reveal].is-visible .w-\[50px\].h-1,
html.sl-reveal-on [data-reveal].is-visible .w-\[50px\].h-\[5px\],
html.sl-reveal-on .is-visible .sl-eyebrow::before,
html.sl-reveal-on .sl-eyebrow.is-visible::before {
    transform: none;
}

/* karta pod kursorem: lekkie powiekszenie (site.js dodaje .sl-tilt po wjezdzie) */
.sl-tilt {
    transform: none !important;
    transition: transform .45s var(--sl-ease), box-shadow .45s var(--sl-ease) !important;
}

.sl-tilt:hover {
    transform: scale(1.02) !important;
}

/* w czasie ekranu ladowania nic jeszcze nie wjezdza */
html.sl-intro-on [data-reveal],
html.sl-intro-on .sl-w > span {
    transition: none !important;
}

/* pasek postepu przewijania u gory */
.sl-progress {
    position: fixed;
    inset: 0 0 auto;
    height: 2px;
    z-index: 999;
    pointer-events: none;
    transform: scaleX(var(--p, 0));
    transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--sl-2), var(--sl-1), #b5e2ff);
    box-shadow: 0 0 12px rgba(88, 176, 230, .8);
    opacity: 0;
    transition: opacity .3s;
}

.sl-progress.is-on {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    html.sl-reveal-on [data-reveal],
    html.sl-reveal-on [data-reveal] img,
    .sl-w > span {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
}

/* ------------------------------------------------------------ FAQ */

.sl-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 60px;
}

.sl-faq details {
    border-radius: 16px;
    background: linear-gradient(rgb(20, 21, 24), rgb(13, 14, 16));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    transition: box-shadow .3s;
}

.sl-faq details[open] {
    box-shadow: inset 0 0 0 1px rgba(88, 176, 230, .35), 0 24px 50px -32px rgba(30, 110, 180, .6);
}

.sl-faq summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.sl-faq summary::-webkit-details-marker {
    display: none;
}

.sl-faq summary::after {
    content: '+';
    margin-left: auto;
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(88, 176, 230, .12);
    color: var(--sl-txt-acc);
    font-size: 20px;
    line-height: 1;
    transition: transform .3s var(--sl-ease), background .3s;
}

.sl-faq details[open] summary::after {
    transform: rotate(45deg);
    background: rgba(88, 176, 230, .25);
}

.sl-faq__body {
    padding: 0 24px 22px;
    color: rgba(255, 255, 255, .55);
    font-size: 14.5px;
    line-height: 1.8;
    white-space: pre-line;
}

/* licznik graczy przy logo (naglowek) */
.sl-players {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px 7px 11px;
    border-radius: 99px;
    background: rgba(74, 222, 128, .08);
    box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .25);
    color: #b8f5cd;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

.sl-players i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    animation: sl-live 2s ease-out infinite;
}

.sl-players b {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.sl-players small {
    font-size: 12px;
    font-weight: 500;
}

@keyframes sl-live {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); }
    70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .sl-players i { animation: none; }
}

/* dol strony: miekka poswiata nad stopka */
#sl-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100% + 260px);
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(55% 60% at 50% 100%, rgba(30, 110, 180, .38), transparent 72%),
        radial-gradient(28% 34% at 50% 100%, rgba(88, 176, 230, .16), transparent 70%),
        radial-gradient(30% 50% at 0% 100%, rgba(30, 110, 180, .14), transparent 70%),
        radial-gradient(30% 50% at 100% 100%, rgba(30, 110, 180, .14), transparent 70%);
}


/* odstep przed stopka (tej klasy nie bylo w zbudowanym Tailwindzie) */
.pb-16 {
    padding-bottom: 4rem;
}