/* =================================
   VIZAG JAMHUB - MOBILE GLOBAL
================================= */


/* =================================================================
   MOBILE GLOBAL MIDNIGHT BACKGROUND
================================================================= */

html {

    min-height: 100%;

    background:
        #03040c;

}


body {

    min-height: 100vh;

    font-size: 18px;

    overflow-x: hidden;

    color: white;

    background:
        radial-gradient(
            circle at 50% 22%,
            rgba(32, 35, 78, 0.34) 0%,
            rgba(18, 20, 48, 0.26) 25%,
            rgba(9, 11, 28, 0.94) 55%,
            #03040c 100%
        );

    background-attachment: fixed;

}


/* =================================
   BACKGROUND VIDEO
================================= */

#bg-video,
.lyrics-video {

    position: fixed;

    top: 50%;
    left: 50%;

    width: auto;
    height: 100vh;

    min-width: 100%;
    min-height: 100%;

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

    object-fit: cover;

    object-position: center center;

}


/*
   IMPORTANT:

   No body.menu-open video scaling here.

   The fullscreen navigation overlay in
   website/global.css creates the frosted
   glass effect using backdrop-filter.
*/


/* ==========================================================
   FULLSCREEN NAVIGATION - MOBILE
========================================================== */


/* =================================
   HAMBURGER
================================= */

.menu-toggle {

    top: 18px;
    left: 18px;

    width: 44px;
    height: 44px;

    font-size: 22px;

}


/* =================================
   CLOSE BUTTON
================================= */

.menu-close {

    top: 18px;
    right: 18px;

    width: 44px;
    height: 44px;

    font-size: 25px;

}


/* =================================
   FULLSCREEN FROSTED GLASS OVERLAY
================================= */

.nav-overlay {

    background:
        linear-gradient(
            135deg,
            rgba(5, 7, 19, 0.72),
            rgba(18, 20, 48, 0.52)
        );

    backdrop-filter:
        blur(22px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(145%);

}


/* =================================
   MOBILE NAVIGATION LINKS
================================= */

.nav-links {

    width: 90%;

    gap: 20px;

}


/* =================================
   MOBILE NAVIGATION TEXT
================================= */

.nav-links a {

    font-size: 24px;

    text-align: center;

}


/* =================================
   SHARED MOBILE SECTIONS
================================= */

section {

    padding:
        40px 15px;

    background-color:
        transparent;

}


/* =================================
   MOBILE MUSIC NOTES
================================= */

.music-notes span {

    /*
       KEEP THIS FILTER.

       This is an intentional blur effect,
       not the website background filter.
    */

    filter:
        blur(2px);

    opacity:
        0.55;

    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.18),
        0 0 12px rgba(0, 212, 255, 0.18),
        0 0 24px rgba(0, 212, 255, 0.10);

}