/* =========================================================
   RESET PODSTAWOWYCH USTAWIEŃ
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
}


/* =========================================================
   GŁÓWNA SCENA
   ========================================================= */

.hero {
    width: 100vw;
    height: 100vh;

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

    background-color: #000;
}


/*
    Kontener zachowuje proporcje grafiki 3:2.
    Dzięki temu kula pozostaje we właściwym miejscu
    niezależnie od wielkości ekranu.
*/

.hero-scene {
    position: relative;

    width: min(100vw, 150vh);
    aspect-ratio: 3 / 2;
}


/* =========================================================
   ZDJĘCIE PODSTAWOWE
   ========================================================= */

.main-image {
    display: block;

    width: 100%;
    height: 100%;
}


/* =========================================================
   KULA / PRZYCISK SURDADA OFFICIAL
   ========================================================= */

.official-button {
    position: absolute;

    /* Aktualne położenie kuli */
    left: 52.8%;
    top: 50.3%;

    /* Aktualny rozmiar kuli */
    width: 21.75%;

    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;

    display: block;
    line-height: 0;

    cursor: pointer;

    z-index: 10;

    /* Delikatne pulsowanie */
    animation: kula-oddycha 3.5s ease-in-out infinite;
}


/* =========================================================
   SAMA KULA
   ========================================================= */

.official-sphere {
    position: relative;

    display: block;

    width: 100%;
    height: auto;

    z-index: 2;

    transition:
        filter 0.35s ease,
        transform 0.35s ease;
}


/* =========================================================
   POŚWIATA / AUREOLA
   ========================================================= */

.official-button::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 85%;
    height: 85%;

    transform: translate(-50%, -50%) scale(0.8);

    border-radius: 50%;

    /*
        Delikatniejsza, ciepła poświata.
        Nadal wyraźna, ale już bardziej elegancka.
    */

    background:
        radial-gradient(circle,
            rgba(255, 255, 230, 0.70) 0%,
            rgba(255, 225, 150, 0.45) 25%,
            rgba(255, 170, 60, 0.20) 50%,
            rgba(255, 170, 60, 0) 75%);

    filter: blur(18px);

    opacity: 0;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

    pointer-events: none;

    z-index: 1;
}


/* =========================================================
   HOVER 
   ========================================================= */

.official-button:hover,
.official-button:focus-visible {

    /*
        Zatrzymujemy pulsowanie podczas hovera,
        aby efekt był spokojny i wyraźny.
    */

    animation-play-state: paused;

    transform: translate(-50%, -50%) scale(1.10);
}


/* Rozświetlenie samej kuli */

.official-button:hover .official-sphere,
.official-button:focus-visible .official-sphere {

    filter:
        brightness(1.15) contrast(1.08) saturate(1.15) drop-shadow(0 0 12px rgba(255, 255, 230, 0.45)) drop-shadow(0 0 28px rgba(255, 225, 150, 0.25)) drop-shadow(0 0 48px rgba(255, 170, 60, 0.20));
}


/* Widoczna, ale bardziej stonowana aureola */

.official-button:hover::after,
.official-button:focus-visible::after {

    opacity: 1;

    transform: translate(-50%, -50%) scale(1.25);
}


/* =========================================================
   OBSŁUGA KLAWIATURY
   ========================================================= */

.official-button:focus-visible {
    outline: none;
}


/* =========================================================
   DELIKATNE PULSOWANIE KULI
   ========================================================= */

@keyframes kula-oddycha {

    0%,
    100% {
        transform:
            translate(-50%, -50%) scale(1);
    }


    50% {

        /*
            Bardzo subtelny „oddech”.
        */

        transform:
            translate(-50%, -50%) scale(1.055);
    }
}