/* ==================================================
   STRONA GŁÓWNA

   Ten plik odpowiada wyłącznie za ekran startowy
   strony.
   ================================================== */


/* ==============================================
   GŁÓWNY KONTENER
   ============================================== */

.home {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 40px 20px;
}


/* ==============================================
   SEKCJA POWITALNA
   ============================================== */

.intro {
    text-align: center;

    margin-bottom: 60px;

    /* Zapobiega wychodzeniu dużego logo poza ekran */
    width: 100%;
}


/* ==============================================
   KONTENER MARKI
   ============================================== */

.site-brand {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

}


/* ==============================================
   LOGO GRAFICZNE
   ==============================================

   Logo może mieć dowolny rozmiar jako plik.
   Tutaj ograniczamy jego rozmiar na stronie.

   Dzięki temu nawet bardzo duży PNG/JPG nie
   rozwali układu strony.
   ============================================== */

.site-logo {

    display: block;

    width: auto;

    max-width: min(320px, 80vw);

    max-height: 160px;

    height: auto;

    object-fit: contain;

    margin: 0 auto;

    animation:
        pojawienie 1s ease-out forwards;

}


/* ==============================================
   NAZWA STRONY

   Używana, gdy logo graficzne nie jest ustawione.
   ============================================== */

.intro h1 {

    font-family: var(--ui-font-heading);

    font-size: 5rem;

    font-weight: 500;

    letter-spacing: 0.18em;

    color: var(--ui-color-text);

    animation:
        pojawienie 1s ease-out forwards;

}


/* ==============================================
   PODTYTUŁ
   ============================================== */

.intro p {

    margin-top: 12px;

    font-family: var(--ui-font-body);

    font-size: 0.85rem;

    font-weight: 400;

    letter-spacing: 0.18em;

    color: var(--ui-color-text-muted);

    opacity: 0;

    animation:
        pojawienie 1s ease-out 0.25s forwards;

    color: var(--ui-color-primary-text);
}


/* ==============================================
   ANIMACJA EKRANU STARTOWEGO
   ============================================== */

@keyframes pojawienie {

    from {

        opacity: 0;

        transform: translateY(15px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ==============================================
   WERSJA MOBILNA
   ============================================== */

@media (max-width: 650px) {

    .intro h1 {

        font-size: 3rem;

    }


    .site-logo {

        max-width: 70vw;

        max-height: 120px;

    }

}