/* =========================================================
   VOLTKIN HOME — AMBIENT DRONE V1
   ========================================================= */


/* ---------------------------------------------------------
   AMBIENT LAYER
   Jest nad tlem, ale pod calym centralnym UI.
   --------------------------------------------------------- */

.vk-ambient-layer{
    position:fixed;
    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:3;
}


/* ---------------------------------------------------------
   DRONE FLIGHT ROUTE
   --------------------------------------------------------- */

.vk-ambient-drone-route{
    position:absolute;

    left:0;

    top:clamp(
        135px,
        19vh,
        235px
    );

    width:100%;

    height:180px;

    opacity:0;

    animation:
        vkDroneRoute
        34s
        linear
        infinite;

    will-change:
        transform,
        opacity;
}


/* ---------------------------------------------------------
   DRONE
   --------------------------------------------------------- */

.vk-ambient-drone{
    position:absolute;

    left:-170px;

    top:0;

    width:clamp(
        78px,
        5.6vw,
        118px
    );

    height:auto;

    display:block;

    opacity:.88;

    filter:
        brightness(1.08)
        saturate(1.10)
        drop-shadow(
            0 0 8px
            rgba(0,220,255,.38)
        )
        drop-shadow(
            0 0 19px
            rgba(0,155,255,.24)
        );

    animation:
        vkDroneFloat
        4.7s
        ease-in-out
        infinite,
        vkDroneLight
        2.4s
        ease-in-out
        infinite;

    will-change:
        transform,
        filter;
}


/* ---------------------------------------------------------
   DRONE ROUTE
   Powoli przelatuje przez skyline.
   --------------------------------------------------------- */

@keyframes vkDroneRoute{

    0%{
        transform:
            translate3d(-12vw,0,0);

        opacity:0;
    }

    5%{
        opacity:0;
    }

    9%{
        opacity:.88;
    }

    20%{
        transform:
            translate3d(8vw,-4px,0);

        opacity:.70;
    }

    38%{
        transform:
            translate3d(29vw,6px,0);

        opacity:.80;
    }

    56%{
        transform:
            translate3d(49vw,-7px,0);

        opacity:.88;
    }

    74%{
        transform:
            translate3d(68vw,3px,0);

        opacity:.72;
    }

    90%{
        transform:
            translate3d(86vw,-4px,0);

        opacity:.48;
    }

    96%{
        opacity:0;
    }

    100%{
        transform:
            translate3d(105vw,0,0);

        opacity:0;
    }
}


/* ---------------------------------------------------------
   SUBTLE FLOAT
   --------------------------------------------------------- */

@keyframes vkDroneFloat{

    0%{
        transform:
            translateY(1px)
            rotate(-2deg);
    }

    25%{
        transform:
            translateY(-5px)
            rotate(-1deg);
    }

    50%{
        transform:
            translateY(2px)
            rotate(1deg);
    }

    75%{
        transform:
            translateY(-3px)
            rotate(2deg);
    }

    100%{
        transform:
            translateY(1px)
            rotate(-2deg);
    }
}


/* ---------------------------------------------------------
   NAVIGATION LIGHT PULSE
   --------------------------------------------------------- */

@keyframes vkDroneLight{

    0%,
    72%,
    100%{
        filter:
            brightness(.84)
            saturate(1.10)
            drop-shadow(
                0 0 7px
                rgba(0,215,255,.16)
            )
            drop-shadow(
                0 0 18px
                rgba(0,150,255,.08)
            );
    }

    77%{
        filter:
            brightness(.96)
            saturate(1.05)
            drop-shadow(
                0 0 12px
                rgba(0,235,255,.32)
            )
            drop-shadow(
                0 0 27px
                rgba(0,180,255,.15)
            );
    }

    82%{
        filter:
            brightness(1.08)
            saturate(.92)
            drop-shadow(
                0 0 8px
                rgba(0,215,255,.18)
            );
    }
}


/* ---------------------------------------------------------
   ENSURE UI STAYS ABOVE DRONE
   --------------------------------------------------------- */

.vk-home-nav{
    position:relative;
    z-index:100;
}

.vk-home-main{
    position:relative;
    z-index:10;
}

.vk-home-footer{
    position:relative;
    z-index:20;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:1100px){

    .vk-ambient-drone-route{
        top:130px;

        animation-duration:
            37s;
    }

    .vk-ambient-drone{
        width:92px;

        opacity:.68;
    }
}


@media(max-width:760px){

    .vk-ambient-drone-route{
        top:105px;

        height:120px;

        animation-duration:
            40s;
    }

    .vk-ambient-drone{
        width:78px;

        opacity:.56;
    }
}


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

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

    .vk-ambient-layer{
        display:none;
    }
}


/* =========================================================
   VOLTKIN DRONE ROUTE V3
   LEFT BUILDING -> SKYLINE -> RIGHT BUILDING
   ========================================================= */


/*
   Layer order:

   background
       ↓
   drone
       ↓
   side buildings
       ↓
   central UI
*/


.vk-ambient-layer{
    z-index:2 !important;
}


/* Side buildings stay physically ABOVE the drone */

.vk-home-side{
    z-index:4 !important;
}


/* Main UI remains above everything */

.vk-home-main{
    z-index:10 !important;
}

.vk-home-nav{
    z-index:100 !important;
}

.vk-home-footer{
    z-index:20 !important;
}


/* =========================================================
   FLIGHT CORRIDOR
   ========================================================= */

.vk-ambient-drone-route{
    top:clamp(
        165px,
        23vh,
        300px
    ) !important;

    left:0 !important;

    width:100vw !important;

    height:170px !important;

    opacity:1 !important;

    animation:
        vkDroneBehindBuildings
        32s
        linear
        infinite !important;

    will-change:transform;
}


/* =========================================================
   DRONE
   ========================================================= */

.vk-ambient-drone{
    left:-130px !important;

    top:10px !important;

    width:clamp(
        90px,
        6vw,
        125px
    ) !important;

    opacity:.88 !important;

    animation:
        vkDroneNaturalFloat
        4.8s
        ease-in-out
        infinite,
        vkDroneLight
        2.4s
        ease-in-out
        infinite !important;
}


/* =========================================================
   ACTUAL FLIGHT

   No artificial fade in/out.
   Buildings hide the drone naturally.
   ========================================================= */

@keyframes vkDroneBehindBuildings{

    0%{
        transform:
            translate3d(-10vw,12px,0);
    }

    8%{
        transform:
            translate3d(1vw,5px,0);
    }

    18%{
        transform:
            translate3d(13vw,-3px,0);
    }

    30%{
        transform:
            translate3d(27vw,4px,0);
    }

    42%{
        transform:
            translate3d(41vw,-5px,0);
    }

    55%{
        transform:
            translate3d(55vw,2px,0);
    }

    68%{
        transform:
            translate3d(69vw,-4px,0);
    }

    80%{
        transform:
            translate3d(82vw,3px,0);
    }

    91%{
        transform:
            translate3d(94vw,-2px,0);
    }

    100%{
        transform:
            translate3d(111vw,8px,0);
    }
}


/* =========================================================
   SMALL NATURAL HOVER
   ========================================================= */

@keyframes vkDroneNaturalFloat{

    0%{
        transform:
            translateY(2px)
            rotate(-2deg);
    }

    20%{
        transform:
            translateY(-4px)
            rotate(-1deg);
    }

    45%{
        transform:
            translateY(-7px)
            rotate(1deg);
    }

    70%{
        transform:
            translateY(1px)
            rotate(2deg);
    }

    100%{
        transform:
            translateY(2px)
            rotate(-2deg);
    }
}


/* =========================================================
   DESKTOP - make side buildings better occluders
   ========================================================= */

@media(min-width:1101px){

    .vk-home-side-left{
        width:min(23vw,410px) !important;
    }

    .vk-home-side-right{
        width:min(23vw,410px) !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){

    .vk-ambient-drone-route{
        top:150px !important;

        animation-duration:
            35s !important;
    }

    .vk-ambient-drone{
        width:88px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

    .vk-ambient-layer{
        display:none !important;
    }
}