/*
 * Strona glowna: gradienty "horyzont + planeta", animacje wejscia, karty z poswiata.
 * Bez bibliotek. Kolory: --sl-1 jasny niebieski, --sl-2 gleboki niebieski, --sl-3 prawie czarny granat.
 */

:root {
    --sl-1: #58b0e6;
    --sl-2: #1e6eb4;
    --sl-3: #061a2e;
    --sl-bg: #0a0a0b;
    --sl-ease: cubic-bezier(.16, 1, .3, 1);
    --sl-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

body.sl-home {
    background: var(--sl-bg);
}

/* ------------------------------------------------------------ tlo pod naglowkiem i hero */

.sl-aurora {
    position: absolute;
    inset: 0 0 auto;
    height: min(980px, 118vh);
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.sl-aurora::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(36% 26% at 50% 100%, rgba(88, 176, 230, .62), transparent 70%),
        radial-gradient(84% 72% at 50% 100%, rgba(30, 110, 180, .78), rgba(30, 110, 180, .3) 44%, transparent 72%),
        radial-gradient(100% 46% at 50% 100%, rgba(6, 26, 46, .9), transparent 80%),
        radial-gradient(28% 40% at 4% 96%, rgba(88, 176, 230, .3), transparent 70%),
        radial-gradient(28% 40% at 96% 96%, rgba(88, 176, 230, .3), transparent 70%),
        radial-gradient(56% 42% at 50% 30%, rgba(30, 110, 180, .22), transparent 72%);
    animation: sl-breathe 9s ease-in-out infinite alternate;
}

/* gora przechodzi w tlo strony, dol tez - zeby nie bylo twardej krawedzi */
.sl-aurora::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(var(--sl-bg), rgba(10, 10, 11, .62) 96px, transparent 300px),
        linear-gradient(transparent 68%, var(--sl-bg) 99%);
}

.sl-grain {
    position: absolute;
    inset: 0;
    background-image: var(--sl-grain);
    opacity: .07;
    mix-blend-mode: overlay;
}

@keyframes sl-breathe {
    from {
        opacity: .82;
        transform: scale(1);
    }

    to {
        opacity: 1;
        transform: scale(1.04);
    }
}

/* ------------------------------------------------------------ hero */

.sl-hero {
    position: relative;
    min-height: min(760px, calc(100vh - 120px));
    display: grid;
    place-items: center;
    padding: 40px 0 180px;
    overflow: hidden;
}

.sl-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    text-align: center;
}

.sl-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    border-radius: 99px;
    background: rgba(88, 176, 230, .1);
    box-shadow: inset 0 0 0 1px rgba(88, 176, 230, .3);
    color: #bfe4fb;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .2px;
}

.sl-badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
    animation: sl-ping 2s ease-out infinite;
}

@keyframes sl-ping {
    70% {
        box-shadow: 0 0 0 8px rgba(74, 222, 128, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }
}

.sl-title {
    margin: 0;
    font-size: clamp(40px, 7vw, 84px);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -.035em;
    color: #fff;
}

/* slowa naglowka - wjezdzaja po kolei (dzielone w home.js) */
.sl-word {
    display: inline-block;
    padding-bottom: .08em;
    background: linear-gradient(90deg, #fff 0%, #f7efe4 52%, #f1ecf5 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    opacity: 0;
    transform: translateY(.45em) rotate(3deg);
    transform-origin: 0 100%;
}

.sl-ready .sl-word {
    animation: sl-word .9s var(--sl-ease) forwards;
    animation-delay: calc(var(--i, 0) * 70ms + 120ms);
}

.sl-word--accent {
    background: linear-gradient(100deg, #a8dcff 0%, var(--sl-1) 40%, #7cc4f0 70%, #cdeaff 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

.sl-ready .sl-word--accent {
    animation: sl-word .9s var(--sl-ease) forwards, sl-sweep 6s linear 1.2s infinite;
    animation-delay: calc(var(--i, 0) * 70ms + 120ms), 1.2s;
}

@keyframes sl-word {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes sl-sweep {
    to {
        background-position: -220% 0;
    }
}

.sl-lead {
    margin: 0;
    max-width: 560px;
    color: rgba(255, 255, 255, .58);
    font-size: 17px;
    line-height: 1.7;
}

.sl-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.sl-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 28px;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: transform .3s var(--sl-ease), box-shadow .3s var(--sl-ease), background .3s;
}

.sl-btn svg {
    width: 18px;
    height: 18px;
}

.sl-btn--primary {
    background: linear-gradient(135deg, #8fd0ff 0%, var(--sl-1) 35%, var(--sl-2) 100%);
    box-shadow: 0 10px 40px -10px rgba(88, 176, 230, .75), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.sl-btn--primary::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: translateX(-140%) skewX(-18deg);
    z-index: -1;
}

.sl-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 50px -10px rgba(88, 176, 230, .95), inset 0 1px 0 rgba(255, 255, 255, .4);
}

.sl-btn--primary:hover::after {
    animation: sl-shine .9s var(--sl-ease);
}

@keyframes sl-shine {
    to {
        transform: translateX(320%) skewX(-18deg);
    }
}

.sl-btn--ghost {
    color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
}

.sl-btn--ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

/* planeta wschodzaca zza dolnej krawedzi hero */
.sl-planet {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(1500px, 190vw);
    aspect-ratio: 1;
    transform: translate(-50%, 86%);
    border-radius: 50%;
    background:
        radial-gradient(60% 9% at 50% 0, rgba(175, 225, 255, .9), transparent 70%),
        radial-gradient(42% 22% at 50% 2%, var(--sl-1), transparent 75%),
        radial-gradient(70% 40% at 50% 8%, var(--sl-2), var(--sl-3) 70%);
    box-shadow:
        0 -2px 0 rgba(180, 228, 255, .55),
        0 -30px 120px rgba(88, 176, 230, .45),
        0 -80px 240px rgba(30, 110, 180, .35);
    z-index: 1;
    opacity: 0;
}

.sl-ready .sl-planet {
    animation: sl-rise 1.6s var(--sl-ease) .25s forwards;
}

@keyframes sl-rise {
    from {
        opacity: 0;
        transform: translate(-50%, 100%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 86%);
    }
}

/* ------------------------------------------------------------ naglowki sekcji */

.sl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--sl-1);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.sl-eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--sl-1));
}

.sl-h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.02em;
}

.sl-muted {
    color: rgba(255, 255, 255, .5);
    font-size: 15px;
    line-height: 1.75;
}

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

.sl-card {
    position: relative;
    border-radius: 20px;
    background: linear-gradient(rgb(20, 21, 24), rgb(13, 14, 16));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 20px 50px -30px rgba(0, 0, 0, .8);
    overflow: hidden;
    transition: transform .45s var(--sl-ease), box-shadow .45s var(--sl-ease);
}

/* linia swiatla u gory karty */
.sl-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(88, 176, 230, .9) 50%, transparent);
    opacity: 0;
    transition: opacity .45s;
}

/* poswiata za kursorem (--mx/--my ustawia home.js) */
.sl-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, -20%), rgba(88, 176, 230, .14), transparent 60%);
    opacity: 0;
    transition: opacity .45s;
    pointer-events: none;
}

.sl-card:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px rgba(88, 176, 230, .35), 0 30px 60px -30px rgba(30, 110, 180, .6);
}

.sl-card:hover::before,
.sl-card:hover::after {
    opacity: 1;
}

.sl-feature {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 30px;
    height: 100%;
}

.sl-icon {
    position: relative;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #d4eeff;
    background:
        radial-gradient(80% 80% at 50% 0%, rgba(88, 176, 230, .55), transparent 70%),
        linear-gradient(160deg, rgba(88, 176, 230, .22), rgba(30, 110, 180, .12));
    box-shadow: inset 0 0 0 1px rgba(88, 176, 230, .45), 0 10px 30px -10px rgba(88, 176, 230, .55);
    transition: transform .45s var(--sl-ease), color .3s;
}

.sl-card:hover .sl-icon {
    transform: translateY(-2px) scale(1.06);
    color: #fff;
}

.sl-icon svg {
    width: 24px;
    height: 24px;
}

.sl-feature h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.sl-feature p {
    margin: 0;
    color: rgba(255, 255, 255, .5);
    font-size: 14px;
    line-height: 1.75;
}

/* statystyki */
.sl-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 26px 26px 24px;
}

.sl-stat b {
    font-size: clamp(30px, 3.4vw, 42px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.03em;
    background: linear-gradient(180deg, #fff 30%, #a8dcff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}

.sl-stat span {
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
}

.sl-stat__bar {
    width: 100%;
    height: 3px;
    margin-top: 12px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .06);
    overflow: hidden;
}

.sl-stat__bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--sl-2), var(--sl-1));
    transition: width 1.6s var(--sl-ease) .2s;
}

.is-visible .sl-stat__bar i {
    width: var(--w, 100%);
}

/* poswiata za sekcja */
.sl-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 110, 180, .35), transparent 65%);
    filter: blur(20px);
    pointer-events: none;
    z-index: -1;
}

/* zdjecie miesiaca */
.sl-photo {
    padding: 14px;
    border-radius: 28px;
}

.sl-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    transition: transform 1.2s var(--sl-ease);
}

.sl-photo:hover img {
    transform: scale(1.02);
}

/* ------------------------------------------------------------ mniej ruchu */

@media (prefers-reduced-motion: reduce) {
    .sl-aurora::before,
    .sl-badge i,
    .sl-ready .sl-word--accent {
        animation: none;
    }

    .sl-word,
    .sl-planet {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    .sl-planet {
        transform: translate(-50%, 86%) !important;
    }
}

@media (max-width: 767px) {
    .sl-hero {
        padding: 30px 0 130px;
        min-height: 0;
    }

    .sl-lead {
        font-size: 15px;
    }

    .sl-btn {
        width: 100%;
    }

    .sl-feature {
        padding: 24px;
    }
}

/* poswiaty po bokach nie moga poszerzac strony */
#sl-about,
#sl-features,
#sl-photo {
    overflow-x: clip;
}

/* dol planety przechodzi miekko w tlo strony */
.sl-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 240px;
    background: linear-gradient(transparent, var(--sl-bg) 92%);
    z-index: 1;
    pointer-events: none;
}

/* hero we wlasnej warstwie: jego wygaszenie u dolu (::after) nie zaslania poswiat sekcji ponizej -
   wczesniej przycinalo je w prosta, ostra linie na granicy sekcji */
.sl-hero {
    isolation: isolate;
}