/* CSS Styling (style.css)

This controls the black background, the animation timing, and the professional look of the navigation bar. */


/* BASE STYLES */

body{
    background-color:   #000000  ;
    color:   #FFFFFF  ;
    font-family:   'Arial'  , sans-serif;
    margin:   0  ;
    padding:   0  ;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height:   100vh  ;
    overflow-x: hidden;
}


/* SPLASH SCREEN STYLES */  

.splash-screen   {
    position: fixed;
    top:   0  ;
    left:   0  ;
    width:   100%  ;
    height:   100%  ;
    background-color:   #000000  ;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:   1000  ;
    animation: fadeOutSplash   4.1s   ease-in-out forwards;
}

.logo-text   {
    font-size:   5em  ;
    font-weight:   700  ;
    letter-spacing:   15px  ;
    color:   #FFFFFF  ;
    opacity:   0  ; 
    animation: fadeInOutLogo   4s   ease-in-out forwards;
}


/* FADE ANIMATION FOR LOGO (Fades in, holds, fades out) */  

@keyframes   fadeInOutLogo {
      0%   { opacity:   0  ; }             /* Start: Fully transparent */  
      20%   { opacity:   1  ; }            /* Fade In */  
      80%   { opacity:   1  ; }            /* Hold */  
      100%   { opacity:   0  ; }           /* Fade Out */  
}


/* MAIN CONTENT STYLES (After Splash) */  

.main-content   {
    width:   100%  ;
    padding-top:   50px  ; 
    text-align: center;
    opacity:   0  ;
    transition: opacity   1s   ease-in;
    min-height:   100vh  ;
}

.main-content.visible   {
    opacity:   1  ;
}

.main-content.hidden   {
    display: none;
}


/* NAVIGATION BAR STYLES */  

.navbar   {
    position: fixed;
    top:   0  ;
    left:   0  ;
    width:   100%  ;
    background-color: rgba  (  0  ,   0  ,   0  ,   0.95  ); 
    display: flex;
    justify-content: center;
    padding:   15px     0  ;
    border-bottom:   1px   solid   #333333  ;
    z-index:   900  ;
}

.nav-item   {
    color:   #CCCCCC  ;
    text-decoration: none;
    font-weight:   500  ;
    font-size:   1.1em  ;
    margin:   0     20px  ;
    padding:   5px     10px  ;
    letter-spacing:   1px  ;
    transition: color   0.3s  , border-bottom   0.3s  ;
}

.nav-item:hover {
    color: #FFFFFF
    border-bottom: 2px solid #FFFFFF;
}

/* --- Dropdown Menu Styling --- */

/* The main container (Artists link) */
.dropdown {
    position: relative;
    display: inline-block;
    padding: 5px 10px; /* Matching the .nav-item padding */
    cursor: pointer; /* Indicates it's interactive */
}

/* The actual menu that drops down */
.dropdown-content {
    display: none; /* Hidden by default */
    position: absolute;
    background-color: #000000;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(255, 255, 255, 0.1);
    z-index: 1001; /* Ensure it floats above everything */
    top: 100%; /* Position it right below the main link */
    left: 0;
    border: 1px solid #333;
}

/* Links inside the dropdown */
.sub-nav-item {
    color: #CCCCCC;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    transition: background-color 0.3s, color 0.3s;
    font-size: 1em;
}

.sub-nav-item:hover {
    background-color: #333333;
    color: #FFFFFF;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Adjusting the main .nav-item to account for the dropdown padding */
.nav-item {
    /* (Keep existing .nav-item styles, but ensure it allows padding for the dropdown) */
    display: inline-block; /* Ensure it flows correctly with the dropdown */
}

/* HERO SECTION - CENTERED BRAND */

.hero-section {
    padding: 100px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 90vh;
}

.brand-name {
    font-size: 6em;
    font-weight: 900;
    letter-spacing: 10px;
    margin: 0;
    text-transform: uppercase;
    text-shadow: 7px #FFFFFF;
/* Subtle glow for a premium feel */
}

.tagline {
    font-size: 1.5em;
    color: #CCCCCC;
    margin-top: 10px;
    font-style: italic;
}

/* ARTIST SHOWCASE SECTION */

.artist-showcase {
    display: flex; /* Enables side-by-side layout */
    width: 100%;
    min-height: 80vh; 
    /* Centers content vertically if the screen is large */
    justify-content: center;
    align-items: stretch;
}

.artist-tile {
    flex: 1; /* Makes each tile take up exactly 50% width */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #FFFFFF;
    transition: transform 0.5s, box-shadow 0.5s;
    text-align: center;
    padding: 20px;
}

.artist-tile h2 {
    font-size: 3em;
    letter-spacing: 5px;
    margin-bottom: 5px;
    transition: color 0.5s;
}

.artist-tile p {
    font-size: 1.2em;
    font-style: italic;
    margin-bottom: 20px;
}

.cta-link {
    border: 1px solid #FFFFFF;
    padding: 10px 20px;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}


/* SOLUS THEME (Cold & Precise) */

.solus-side {
    background-color: #0d0d0d;
    border-right: 2px solid #00CCFF; 
}

.solus-side:hover {
    background-color: #00CCFF; /* Electric blue hover */
    color: #000000;
    transform: scale(1.02);
}

.solus-side:hover .cta-link,
.solus-side:hover h2 {
    color: #000000;
    border-color: #000000;
}


/* ANALOGIA THEME (Warm & Organic) */

.analogia-side {
    background-color: #0d0d0d;
    border-left: 2px solid #E84D72; 
}

.analogia-side:hover {
    background-color: #E84D72; /* Warm pink/red hover */
    transform: scale(1.02);
}

.analogia-side:hover .cta-link,
.analogia-side:hover h2 {
    color: #FFFFFF;
    border-color: #FFFFFF;
}