/* gravity.css - FIX: VISIBLE STARS */

/* 1. Tło ustawiamy TYLKO na HTML. To jest "płótno" pod gwiazdami. */
html {
    background-color: black;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    position: relative;
    /* FIX: Body musi być przezroczyste, żeby było widać gwiazdy pod spodem */
    background-color: transparent;
    color: white;
    margin: 0;
    padding: 0;

    min-height: 100vh;
    min-height: 100dvh;

    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;

    /* Zapobiega "odbijaniu" (bounce) na iOS, co mogłoby odsłonić tło */
    overscroll-behavior-y: none;
}

/* Migoczące gwiazdy */
.star {
    position: fixed;
    background: white;
    border-radius: 50%;
    width: 2px;
    height: 2px;
    opacity: 0;
    animation: twinkle 2s infinite ease-in-out;

    /* Gwiazdy są pod treścią (-1), ale nad tłem HTML */
    z-index: -1;

    will-change: opacity;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

/* Stałe gwiazdy */
.star-fixed {
    position: fixed;
    background: white;
    border-radius: 50%;
    z-index: -1;
    /* Dodaje blask, żeby były lepiej widoczne na ekranach OLED/Retina */
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.9);
}

.star-fixed.small {
    width: 1px;
    height: 1px;
}

.star-fixed.medium {
    width: 2px;
    height: 2px;
}

.star-fixed.large {
    width: 3px;
    height: 3px;
}

/* Shooting star – realistyczny meteor */
.shooting-star {
    position: fixed;
    width: 2px;
    /* Nieco grubszy, żeby był widoczny na mobile */
    height: 2px;
    background: white;
    border-radius: 50%;
    opacity: 1;

    transform: rotate(45deg) translateX(0) translateY(0);

    animation: meteor 10s linear infinite;
    z-index: -1;
    pointer-events: none;

    will-change: transform, opacity;
}

.shooting-star::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    /* Dłuższy ogon i wyraźniejszy gradient */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    border-radius: 50%;
    transform-origin: top left;
    animation: tail 10s linear infinite;

    will-change: height, opacity;
}

/* Animacje */
@keyframes meteor {
    0% {
        transform: translateX(0) translateY(0) rotate(135deg);
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        /* Przelot przez 150% ekranu, niezależnie od urządzenia */
        transform: translateX(150vmax) translateY(150vmax) rotate(135deg);
        opacity: 0;
    }
}

@keyframes tail {
    0% {
        height: 0;
        opacity: 1;
    }

    30% {
        height: 150px;
        /* Wydłużyłem ogon dla lepszego efektu */
        opacity: 1;
    }

    100% {
        height: 0;
        opacity: 0;
    }
}