/* --- CUSTOM CURSOR EFFECT --- */



/* 1. Hide the default system cursor for the entire body */

body {

    margin: 0;

    padding: 0;

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: 'Arial', sans-serif;

    overflow: hidden;

    background-color: #111;

    cursor: none; /* Hides the default cursor */

    

    /* ANTI-COPY: Disables visual text selection */

    user-select: none; 

    -webkit-user-select: none; 

    -moz-user-select: none; 

    -ms-user-select: none; 

}



/* 2. Styling for the small dot (main pointer) */

.cursor-dot {

    width: 6px;

    height: 6px;

    background-color: #fff; 

    border-radius: 50%;

    position: fixed;

    z-index: 100000; /* Super high z-index */

    pointer-events: none; 

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

}



/* 3. Styling for the large outline (smooth lag effect) */

.cursor-outline {

    width: 30px;

    height: 30px;

    /* Neon/Glow Effect */

    border: 1px solid rgba(255, 255, 255, 0.6);

    box-shadow: 0 0 5px rgba(255, 255, 255, 0.4), 0 0 10px rgba(255, 255, 255, 0.2); 

    

    border-radius: 50%;

    position: fixed;

    z-index: 100000;

    pointer-events: none;

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

    

    transition: transform 0.1s ease-out, width 0.3s ease, height 0.3s ease, border 0.3s ease;

}



/* --- END CUSTOM CURSOR EFFECT --- */





/* Background Video */

.video-background-holder {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1; /* Video must be behind everything */

    overflow: hidden;

}



.video-background-holder video {

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    position: absolute;

    top: 50%;

    left: 50%;

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

}



/* Main Content Wrapper */

.container {

    perspective: 1000px;

    padding: 20px;

}



#main {

    transition: transform 0.6s ease;

    /* FIX: Ensure main content block is elevated */

    z-index: 50; 

    position: relative; 

}



/* Main Profile Card Styles (Glassmorphism) */

.main-div, .social-buttons, .music-div {

    border-radius: 20px;

    color: white;

    box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    

    /* GLASSMOPRHISM */

    background-color: rgba(0, 0, 0, 0.2); 

    backdrop-filter: blur(10px); 

    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.05); 

    /* END GLASSMOPHISM */



    width: 350px; 

    padding: 20px;

    margin-bottom: 20px;

    position: relative; 

    z-index: 10; /* Individual cards are on top of the background */

}



.main-div {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 15px;

    text-align: center;

}



.pfp {

    width: 128px;

    height: 128px;

    border-radius: 50%;

    object-fit: cover;

    box-shadow: 0 5px 15px rgba(0,0,0,0.5);

}



.title {

    font-size: 24px;

    font-weight: bold;

    text-shadow: 0 0 5px #fff, 0 0 10px #000;

    margin-right: 8px;

}



.desc {

    font-size: 16px;

    color: #cfcfcf;

    margin: 0;

}



/* Badge Styling */

.user-badges {

    display: flex;

    align-items: center;

    gap: 5px; 

    position: relative; 

    z-index: 20; 

}



.badge-image {

    width: 20px; 

    height: 20px; 

    object-fit: contain; 

    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.4));

    position: relative; 

    cursor: default; 

    z-index: 25; 

}



/* --- Custom Tooltip (Box) Styles --- */



.badge-image::after {

    content: attr(title); 

    position: absolute;

    bottom: 120%; 

    left: 50%;

    transform: translateX(-50%);

    

    white-space: nowrap;

    padding: 6px 10px;

    border-radius: 6px; 

    font-size: 14px;

    font-weight: bold;

    color: #fff;

    

    background-color: rgba(0, 0, 0, 0.9); 

    border: 1px solid rgba(255, 255, 255, 0.1);



    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity 0.3s, visibility 0.3s;

    z-index: 10000; 

}



/* --- Custom Tooltip Arrow (Pointer) Styles --- */



.badge-image::before {

    content: '';

    position: absolute;

    bottom: calc(120% - 4px); 

    left: 50%;

    transform: translateX(-50%);

    

    border-width: 5px;

    border-style: solid;

    border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent; 



    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity 0.3s, visibility 0.3s;

    z-index: 10001; 

}



/* Show tooltip and arrow on hover */

.badge-image:hover::after,

.badge-image:hover::before {

    opacity: 1;

    visibility: visible;

}



/* Social Buttons */

.social-buttons {

    display: flex;

    justify-content: center;

    padding: 15px 20px;

    z-index: 10;

}



.btn {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    font-size: 24px;

    color: white;

    text-decoration: none;

    transition: transform 0.2s, background-color 0.2s;

    cursor: default; 

}



.btn.discord {

    background-color: #5865F2;

}



.btn:hover {

    transform: scale(1.1);

}



/* Music Div */

.music-div {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 15px 20px;

    z-index: 10;

}



.music-icon {

    width: 50px;

    height: 50px;

    border-radius: 8px;

    object-fit: cover;

}



.music-title {

    font-size: 16px;

    font-weight: bold;

    flex-grow: 1;

}



.time-display {

    font-size: 14px;

    color: #cfcfcf;

}



/* Start Screen */

#start-screen {

    position: fixed;

    top: 0; left: 0;

    width: 100%; height: 100%;

    background: #111;

    color: white;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 2rem;

    z-index: 9999;

    cursor: pointer;

    transition: opacity 0.5s ease;

}



#start-screen.hidden {

    opacity: 0;

    pointer-events: none;

}