@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');

/* Base styles */

body,
html {
    margin: 0;
    padding: 0;
    color: white;
    background-color: black;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body::-webkit-scrollbar {
    display: none;
    /* Works for chrome and safari*/
}

* {
    text-decoration: none;
    box-sizing: border-box;
    font-family: 'Rajdhani', sans-serif;
    -webkit-tap-highlight-color: transparent;
}


.titles {
    font-size: clamp(36px, 7vw, 100px);
    text-align: center;
    padding: 20px;
}

/* The general styling of web body ends here 🎬 */


/* Below is the styling of desktop navbar 💻 */

.logo {
    font-family: 'Rajdhani', sans-serif;
    font-weight: bold;
    font-size: 2em;
    cursor: pointer;
    color: #edf0f1;
}


/* This stylizes all the navlink's text */
a {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #edf0f1;
    text-decoration: none;
}


/* This holds everything in the desktop navbar */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 5%;
    z-index: 100;
}

/* This is hamburger animation and styling */

#hamburger {
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: block;
    z-index: 100;
}

#hamburger path {
    stroke: #ffffff;
    stroke-width: 4;
    stroke-linecap: round;
    transition: all 0.3s ease;
    transform-origin: center;
}


.menu:hover #line1 {
    stroke: #f1c40f;
    transform: rotate(45deg) translateX(-3px) translateY(16px);
}

.menu:hover #line2 {
    opacity: 0;
}

.menu:hover #line3 {
    stroke: #f1c40f;
    transform: rotate(-50deg) translateX(2px) translateY(-1.2px);
}

/* The menu is the div container for hamburger icon */

/* Basic structure for the menu */
.menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}


/* Hamburger icon style */
.menuIcon {
    cursor: pointer;
    z-index: 101;
}

/* The burger icon styling ends here below is the submenu */

/* Submenu is initially hidden and positioned absolutely */
.submenu {
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    opacity: 0;
    transform-origin: top;
    max-height: 0;
    overflow: hidden;
    background-color: #000000;
    border: 2px solid #f1c40f;
    border-radius: 0px 0px 24px 24px;
    border-top: none;
    width: auto;
    line-height: 2.5;
    min-width: 150px;
    max-width: 300px;
    padding: 0 0;
    transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
}


.menu:hover .submenu {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
    max-height: 500px;
}


/* Mobile positioning and sizing fixes */
@media (max-width: 1024px) {

    /* IMPORTANT: Disable ALL hover effects on mobile */
    .menu:hover #line1,
    .menu:hover #line2,
    .menu:hover #line3 {
        stroke: #ffffff !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .menu:hover .submenu {
        left: -5px;
        opacity: 0 !important;
        max-height: 0 !important;
        transform: translateX(-50%) scaleY(0) !important;
    }

    /* Mobile active states - these should override hover */
    .menu.active #line1 {
        stroke: #f1c40f !important;
        transform: rotate(45deg) translateX(-3px) translateY(16px) !important;
    }

    .menu.active #line2 {
        opacity: 0 !important;
    }

    .menu.active #line3 {
        stroke: #f1c40f !important;
        transform: rotate(-50deg) translateX(2px) translateY(-1.2px) !important;
    }

    .menu.active .submenu {
        left: -5px;
        opacity: 1 !important;
        max-height: 500px !important;
        transform: translateX(-50%) scaleY(1) !important;
    }
}

@media (max-width: 425px) {
    .menuIcon {
        scale: 0.7;
    }

    .submenu {
        min-width: 100px;
        max-width: 130px;
        line-height: 2;
    }

    .subLink a {
        padding: 8px 0;
        font-size: 14px;
    }
}


/* Show submenu on hover */
.menu:hover .submenu {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
    max-height: 500px;
}

.subLink {
    position: relative;
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.subLink::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(0);
    width: 100%;
    height: 100%;
    background-color: #f1c40f;
    z-index: 99;
    transform-origin: left;
    transition: transform 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}

.subLink:hover::before {
    transform: scaleX(1);
    transform-origin: right;
}

.subLink a {
    position: relative;
    /* Needed for text to stay above ::before */
    z-index: 100;
    display: block;
    padding: 12px 0;
    background-color: transparent;
    transition: color 0.3s ease;
}

.subLink:hover a {
    color: #ffffff;
    /* black text on gold */
}



/* The image sequence  */


/* Heading and text */
/* This is a div where text is placed */
.heading {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    width: 40%;
    padding: 20px;
    color: white;
    text-align: center;
    z-index: 10;
}

/* The actual text styling */
.animated-text {
    font-size: clamp(40px, 8vw, 100px);
    font-weight: 500;
    line-height: 1.2;
}

#changing-text p {
    font-size: medium;
}


/* Text styling for mobile */
@media(max-width: 768px) {
    .heading {
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
    }


    #textSection {
        top: 75%;
        right: 50%;
        transform: translateX(50%);
        width: 90%;
        padding: 15px;
    }

}


/* this container holds everything in section 1 */
.container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}


/* The image sequence container styling */
.image-sequence {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    z-index: -1;
}


/* the actual imaegs */
.image-sequence img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}


/* The image sequence in mobile */
@media (max-width: 768px) {
    .image-sequence {
        width: 100%;
        height: 100%;
    }


    .image-sequence img {
        object-position: 80% center;
    }
}



/* This code helps transitionig from animation 1 to 2nd  */
.video-snapshot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 5;
    opacity: 0;
    transition: opacity 0.5 ease-in-out;
}

.transitioning .video-snapshot {
    opacity: 1;
}



/* Now playing Section */

#nowPlayingSection {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: black;
}

/* holds video and it's position */
#scrollContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* the actual video */
#nowVideo {
    object-fit: cover;
    position: absolute;
    opacity: 0.8;
}

/* text on the section */
#textSection {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 40%;
    padding: 20px;
    font-family: 'Rajdhani', sans-serif;
    text-align: center;
    opacity: 0;
    color: white;
    z-index: 11;

    /* text styling */
    font-size: 24px;
}


/* featured */
.sub-heading {
    font-size: clamp(48px, 3vw, 100px);
    text-align: center;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
    padding: 20px;
}


/* Styling the text for mobile  */

@media screen and (max-width: 644px) {
    .sub-heading {
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    #textSection {
        font-size: 14px;
    }

}


/* this determines the positioning the logos */
.nowPlayingSectionLogos {
    width: 30%;
    margin: 0px auto;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    gap: 40px;
    white-space: nowrap;
}


/* sizing the logos */
.nowPlayingSectionLogos i {
    font-size: clamp(20px, 2vw, 50px);
    transition: all 0.3s ease 0s;
}

.nowPlayingSectionLogos i:hover {
    color: #f1c40f;
}


/* mute unmute */
.video-controls {
    position: absolute;
    z-index: 15;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-controls.visible {
    opacity: 1;
    pointer-events: auto;
}

.video-control-btn {
    background-color: rgba(0, 0, 0, 0.488);
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.video-control-btn:hover {
    background-color: #000000;
    color: rgba(241, 196, 15, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.video-control-btn:active {
    transform: translateY(0);
}

@media screen and (max-width: 768px) {
    .video-control-btn {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

@media screen and (max-width: 644px) {
    .video-control-btn {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
}

/*  */



/* The styling of Music gallery */

/* Music Gallery */

.gallery-container {
    align-items: center;
    display: flex;
    justify-content: center;
    height: clamp(425px, 90vh, 500px);
    margin: 0 auto;
    max-width: 1500px;
    position: relative;
}

.gallery-item {
    border-radius: 15px;
    object-fit: cover;
    position: absolute;
    transition: all 0.5s ease;
    z-index: 0;
    opacity: 0.4;
}

.gallery-item-1 {
    height: clamp(325px, 70vh, 400px);
    left: 30%;
    transform: translateX(-50%) scale(0.9);
    z-index: 1;
}

.gallery-item-2 {
    height: clamp(375px, 75vh, 425px);
    left: 50%;
    transform: translateX(-50%) scale(1);
    opacity: 1;
    z-index: 2;
    box-shadow: -2px 5px 33px 6px rgba(0, 0, 0, 0.34);
}

.gallery-item-3 {
    height: clamp(325px, 70vh, 400px);
    left: 70%;
    transform: translateX(-50%) scale(0.9);
    z-index: 1;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .gallery-container {
        height: clamp(350px, 70vh, 400px);
    }

    .gallery-item-1,
    .gallery-item-3 {
        height: clamp(220px, 50vh, 250px);
    }

    .gallery-item-2 {
        height: clamp(260px, 64vh, 300px);
    }
}

@media (max-width: 480px) {
    .gallery-container {
        height: clamp(300px, 60vh, 350px);
    }

    .gallery-item-1,
    .gallery-item-3 {
        height: clamp(200px, 40vh, 220px);
    }

    .gallery-item-2 {
        height: clamp(240px, 56vh, 260px);
    }
}




/* Music Player */
.playerContainer {
    padding: 20px;
}

@media(max-width: 768px) {
    .playerContainer {
        scale: 0.8;
    }
}

.music-player {
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
}

#song-title {
    font-weight: 800;
    font-size: 20px;
}

#progress-bar {
    width: 100%;
    height: 6px;
    margin: 15px 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: #ccc;
    border-radius: 5px;
    outline: none;
}

#progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: blue;
    border-radius: 50%;
    cursor: pointer;
}

.controls {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.controls button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.controls img {
    width: 30px;
    height: 30px;
    display: block;
}





/* Animation Classes */
.hidden {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(20px);
    transition: all 1s;
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

@media (prefers-reduced-motion) {
    .hidden {
        transition: none;
    }
}


.footer {
    margin-top: 100px;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.footCont {
    display: flex;
    margin: 0 auto;
    /* border: 2px dotted white; */
    margin-top: 0;
    width: 20%;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 2vw, 30px);
    gap: 20px;
    text-decoration: none;

}

.footCont,
i {
    color: white;
    font-size: clamp(20px, 2vw, 50px);
}

.footCont,
i:hover {
    color: #f1c40f;
}


.credits {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 15px;
    font-size: clamp(10px, 2vw, 15px);
}