/* =========================================================
   VOLTKIN HOME — AESTHETIC LAYER V1
   Layout pozostaje bez zmian.
   ========================================================= */


/* ---------------------------------------------------------
   AMBIENT CITY LIGHTS
   --------------------------------------------------------- */

body::after{
    content:"";
    position:fixed;
    inset:0;

    pointer-events:none;
    z-index:2;

    background:
        radial-gradient(
            circle at 11% 27%,
            rgba(0,220,255,.13) 0%,
            rgba(0,220,255,.04) 9%,
            transparent 21%
        ),

        radial-gradient(
            circle at 89% 31%,
            rgba(0,168,255,.12) 0%,
            rgba(0,168,255,.035) 11%,
            transparent 23%
        ),

        radial-gradient(
            circle at 73% 72%,
            rgba(76,126,255,.08) 0%,
            transparent 19%
        ),

        radial-gradient(
            circle at 27% 74%,
            rgba(0,237,255,.07) 0%,
            transparent 20%
        );

    mix-blend-mode:screen;

    opacity:.60;

    animation:
        vkAmbientCityGlow
        8s
        ease-in-out
        infinite alternate;
}


/* ---------------------------------------------------------
   SUBTLE NEON LINE UNDER NAVIGATION
   --------------------------------------------------------- */

.vk-home-nav::after{
    content:"";

    position:absolute;

    left:15%;
    right:15%;
    bottom:-1px;

    height:1px;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,229,255,.12) 12%,
            rgba(57,229,255,.75) 50%,
            rgba(57,229,255,.12) 88%,
            transparent
        );

    box-shadow:
        0 0 13px rgba(32,218,255,.30);

    animation:
        vkNavPulse
        5s
        ease-in-out
        infinite;
}


/* ---------------------------------------------------------
   SIDE ENVIRONMENT BREATHING
   --------------------------------------------------------- */

.vk-home-side-left{
    animation:
        vkSideLeftBreath
        12s
        ease-in-out
        infinite alternate;
}

.vk-home-side-right{
    animation:
        vkSideRightBreath
        14s
        ease-in-out
        infinite alternate;
}


/* ---------------------------------------------------------
   HERO AMBIENT GLOW
   --------------------------------------------------------- */

.vk-home-hero::before{
    content:"";

    position:absolute;

    z-index:1;

    left:7%;
    right:7%;
    top:10%;
    bottom:10%;

    pointer-events:none;

    border-radius:70px;

    background:
        radial-gradient(
            ellipse at 70% 50%,
            rgba(0,197,255,.14),
            transparent 53%
        );

    box-shadow:
        0 0 70px rgba(0,174,255,.08);

    animation:
        vkHeroAmbient
        6s
        ease-in-out
        infinite alternate;
}


/* samo podświetlenie ramy */

.vk-home-hero::after{
    animation:
        vkHeroFrameNeon
        6s
        ease-in-out
        infinite alternate;
}


/* ---------------------------------------------------------
   BUTTON POLISH
   --------------------------------------------------------- */

.vk-home-cta,
.vk-login-btn,
.vk-play-btn,
.vk-home-feature-action{
    transition:
        transform .20s ease,
        box-shadow .20s ease,
        border-color .20s ease,
        filter .20s ease;
}

.vk-home-cta:hover,
.vk-login-btn:hover,
.vk-home-feature-action:hover{
    transform:translateY(-2px);

    border-color:
        rgba(83,235,255,.72);

    box-shadow:
        0 0 18px rgba(35,216,255,.14);
}

.vk-play-btn:hover,
.vk-home-cta-primary:hover{
    transform:translateY(-2px);

    filter:brightness(1.10);

    box-shadow:
        0 0 26px rgba(33,220,255,.33);
}


/* ---------------------------------------------------------
   QUICK CARDS — TYLKO SUBTELNY HOVER
   --------------------------------------------------------- */

.vk-home-quick{
    transition:
        transform .25s ease,
        filter .25s ease;
}

.vk-home-quick:hover{
    transform:
        translateY(-4px);

    filter:
        brightness(1.05)
        drop-shadow(
            0 12px 20px rgba(0,0,0,.65)
        );
}


/* ---------------------------------------------------------
   LARGE CARDS — TYLKO SUBTELNY HOVER
   --------------------------------------------------------- */

.vk-home-feature{
    transition:
        transform .27s ease,
        filter .27s ease;
}

.vk-home-feature:hover{
    transform:
        translateY(-5px);

    filter:
        brightness(1.055)
        drop-shadow(
            0 14px 23px rgba(0,0,0,.68)
        );
}


/* ---------------------------------------------------------
   CENTRAL UI SOFT LIGHT
   --------------------------------------------------------- */

.vk-home-main::after{
    content:"";

    position:absolute;

    z-index:-1;

    pointer-events:none;

    left:15%;
    right:15%;
    top:4%;
    bottom:5%;

    background:
        linear-gradient(
            180deg,
            rgba(0,184,255,.025),
            transparent 35%,
            rgba(0,140,255,.022) 70%,
            transparent
        );

    box-shadow:
        0 0 100px rgba(0,137,255,.045);

    animation:
        vkCentralGlow
        10s
        ease-in-out
        infinite alternate;
}


/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes vkAmbientCityGlow{
    0%{
        opacity:.43;
        filter:brightness(.90);
    }

    35%{
        opacity:.64;
        filter:brightness(1.03);
    }

    68%{
        opacity:.49;
        filter:brightness(.94);
    }

    100%{
        opacity:.72;
        filter:brightness(1.10);
    }
}


@keyframes vkNavPulse{
    0%,
    100%{
        opacity:.35;
    }

    45%{
        opacity:.85;
    }

    55%{
        opacity:.62;
    }
}


@keyframes vkHeroAmbient{
    from{
        opacity:.55;
        transform:scale(.99);
    }

    to{
        opacity:.92;
        transform:scale(1.015);
    }
}


@keyframes vkHeroFrameNeon{
    from{
        filter:
            drop-shadow(
                0 15px 25px rgba(0,0,0,.48)
            )
            brightness(.98);
    }

    to{
        filter:
            drop-shadow(
                0 15px 28px rgba(0,0,0,.52)
            )
            drop-shadow(
                0 0 9px rgba(17,203,255,.10)
            )
            brightness(1.055);
    }
}


@keyframes vkSideLeftBreath{
    from{
        opacity:.35;
        transform:translate3d(0,0,0);
    }

    to{
        opacity:.47;
        transform:translate3d(0,-4px,0);
    }
}


@keyframes vkSideRightBreath{
    from{
        opacity:.34;
        transform:translate3d(0,-2px,0);
    }

    to{
        opacity:.46;
        transform:translate3d(0,4px,0);
    }
}


@keyframes vkCentralGlow{
    from{
        opacity:.45;
    }

    to{
        opacity:.90;
    }
}


/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

    body::after,
    .vk-home-nav::after,
    .vk-home-side-left,
    .vk-home-side-right,
    .vk-home-hero::before,
    .vk-home-hero::after,
    .vk-home-main::after{
        animation:none !important;
    }

    .vk-home-quick,
    .vk-home-feature,
    .vk-home-cta,
    .vk-login-btn,
    .vk-play-btn,
    .vk-home-feature-action{
        transition:none !important;
    }
}